CSS (Cascading Style Sheets – каскадні таблиці стилів) презентация

CSS
CSS (Cascading Style Sheets – каскадні таблиці стилів) – технологія управління зовнішнім виглядом елементів (тегів) веб- сторінки. CSS надає значно більше можливостей по оформленню сторінки, чим HTML.
Застосувати таблицю стилів до HTML-документу можна трьома способами:
• застосувати зовнішні стилі (у вигляді окремого текстового. css-файлу) за допомогою елементу link;
• вбудувати стилі безпосередньо в HTML-документ (у вигляді блоку css-тексту) за допомогою елемента style;
• застосувати inline-стиль, тобто призначити стиль конкретному HTML-елементу безпосередньо в документі, за допомогою HTML-атрибуту style.

CSS
Зовнішні стилі (external style sheets) застосовуються за допомогою елемента link, який повинен розташовуватися тільки всередині елемента head.
Зустрівши в HTML-документі цей тег, браузер завантажить з сайту CSS-файл (у нашому випадку це mystyle.css) і застосує до документа стилі, що містяться в ньому. Файл не повинен містити нічого, крім CSS-інструкцій. Зовнішній файл зі стилями зручний тим, що одні й ті ж стилі можна застосовувати до множини документів на сайті - в кожному з них достатньо лише вписати один рядок з елементом link.

CSS
Таблиці стилів документа (document style sheets) називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього. Іноді називаються embedded style sheet (вбудований стиль). CSS-стилі та коментарі розташовуються між відкриваючим і закриваючим тегами елемента style:
<br> ...<br> </ style><br>Сам тег style (на відміну від link) може знаходитися в будь-якій частині документа, але звичайно його розміщують всередині елемента head. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 5</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-4.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Стилі, що підставляються в рядок (inline styles) іноді потрібно" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-4.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-4.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-4.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-4.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p> <br>Стилі, що підставляються в рядок (inline styles) іноді потрібно призначити стиль</div></h2><div class="slides-content">окремого елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style. Типовий випадок - елемент зустрічається один раз в документі або на сайті, але вимагає особливого оформлення. Скористаємося атрибутом style (саме атрибутом елементів, а не елементом!):<br><p style="color: red"><br> Я абзац, виділений червоним кольором, інших таких на сайті немає<br> </p><br>Атрибут style є у всіх HTML-елементів, що розташовуються в елементі body. Усередині атрибуту style можна написати кілька CSS оголошень, розділених крапкою з комою, фігурні дужки не використовуються.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-5.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Структура CSS-правил. Всі CSS-правила складаються з селектора і блоку" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-5.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-5.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-5.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p> Структура CSS-правил.<br>Всі CSS-правила складаються з селектора і блоку оголошень (укладеного у</div></h2><div class="slides-content">фігурні дужки). Усередині фігурних дужок блоку оголошень може знаходитися одне або кілька оголошень, розділених крапкою з комою. <br>Оголошення - це рядок, складений з css-властивості і його значення. Вигляд css-правила:<br>CEЛЕКТОР {властивість:значення;}<br> Приклади CSS-правил:<br> a {text-decoration: none;}<br> p.announce {border: 1px dashed black;} / * тут селектор - p.announce * /<br> p.note { display: block; / * оголошень може бути кілька * /<br> float: right; / * і їх не обов'язково писати на одному рядку * /<br> }<br>Кожне правило починається з селектора (покажчика), що вказує на ті html-елементи, до яких ми збираємося застосувати css-правило. У блоці оголошень встановлюються правила оформлення обраних нами елементів, перевизначений їх властивості - розміри, колір, бордюри, поля, положення на екрані і т.д. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-6.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Використовуються три основних види селекторів: HTML селектори, селектори класу, ID селектори (або ідентифікатори)" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-6.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-6.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-6.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p>Використовуються три основних види селекторів: <br>HTML селектори, <br>селектори класу, <br>ID селектори</div></h2><div class="slides-content">(або ідентифікатори) <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-7.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS HTML селектор Це найпростіший випадок - в якості селектора" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p>HTML селектор<br>Це найпростіший випадок - в якості селектора ми використовуємо ім'я</div></h2><div class="slides-content">html-елемента, який хочемо змінити. <br>Наприклад, для тега <strong> селектором буде strong. Відповідно, для тега <h1> селектором буде h1, і так далі. <br>Тепер можемо перевизначити зовнішній вигляд всіх таких елементів в нашому документі:<br> strong {font-weight: normal; color: red;}<br> h1 {font: bold 10pt verdana;}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-8.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Селектор класу «Клас» - це деяке ім&#39;я, яке ми" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p>Селектор класу<br>«Клас» - це деяке ім'я, яке ми можемо застосувати до</div></h2><div class="slides-content">будь-яких HTML-тегів, щоб згодом посилатися на них по імені класу. Як ім'я класу можна використовувати практично будь-який рядок. <br>Зручність таких селекторів в тому, що можна присвоїти одне ім'я класу множині html-тегів у документі і потім управляти їх зовнішнім виглядом, звертаючись до них по імені класу:<br>.MyClass {font: bold 10pt verdana;}<br>Цей стиль міняє шрифт для всіх тегів з класом myClass<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-9.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Селектор ID Будь-який ідентифікатор (ID) - це якесь ім&#39;я," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-9.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-9.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-9.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p>Селектор ID<br>Будь-який ідентифікатор (ID) - це якесь ім'я, яке ви, так</div></h2><div class="slides-content">само, як і у випадку з класами, можете застосувати до будь-якого HTML-тегу. Основна відмінність - ID повинен бути унікальним в рамках html-документа:<br># MyObj {margin: 1em;} / * змінюємо поля для елемента, у якого id = "myObj" */<br>span # today {margin: 1em;} / * змінюємо поля для елемента span, у якого id = "today" * /<br>Дуже поширений випадок - застосувати один набір правил до декількох різних селекторів. Це робиться елементарно - достатньо перерахувати селектори через кому: <br> / * всі параграфи і списки робимо червоними, шрифтом Tahoma * /<br> p, li, ul, ol {color: red; font-face: Tahoma, sans-serif;}<br> / * перевизначає колір на синій для нумерованих списків * /<br> ol {color: blue;}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-10.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="CSS Порядок вживання стилів При роботі з CSS необхідно пам&#39;ятати," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/92007/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/92007/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/92007/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/92007/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS<br><p>Порядок вживання стилів <br>При роботі з CSS необхідно пам'ятати, що більш</div></h2><div class="slides-content">специфічні правила мають пріоритет над менш специфічними, наприклад:<br> • стиль, вказаний в атрибуті style, перекриває стиль, вказаний в тезі <style> або зовнішньому файлі CSS:<br><html><br> <head><br> <style><br> A {color: red; text-decoration: none}<br>
INTUIT
В браузері гуперпосилання буде непідкресленим і зеленого кольору.

CSS
Порядок вживання стилів
селектор ID (#) має більший пріоритет, чим селектор класу (.), а той, у свою чергу, – більший, ніж звичайний селектор тега:
<br> A {color: red; text-decoration: none; font-size: 120%}<br> .links {color: blue; text-decoration: underline}<br> #greenlink {color: green}<br>
htmlbook.ru
В браузері гіперпосилання буде зеленим і підкресленим, розмір шрифта збільшений на 20%.