Лекція 3: Основи CSS / Лекції з дисципліни "Веб-дизайн"

Лекція 3: Основи CSS

Лекція 3. Основи CSS

CSS (Cascading Style Sheets), або каскадні таблиці стилів, описують правила форматування окремого елемента веб-сторінки. Створивши стиль один раз, його можна застосовувати до будь елементів сторінки скільки завгодно разів.

Визначення стилю складається з двох основних частин: самого елемента веб-сторінки - селектора, і команди форматування - блоку оголошення.

Селектор повідомляє браузеру, який саме елемент форматувати, в блоці оголошення перелічено властивості команд форматування і їх значення.

Структура оголошення стилю елемента в CSS

Додавання CSS до веб-сторінці

1.1. Вбудовані таблиці стилів

Вбудовані стилі представляють набір стилів, що є частиною коду веб-сторінки, знаходяться між тегами <style> ... </ style> і розташовані всередині елемента <head>. Вбудовані стилі діють тільки на сторінці, на якій вони містяться. Вбудовані стилі мають пріоритет перед глобальними, але поступаються стилям, що вказані в тезі. На одній сторінці можна розміщувати довільну кількість вбудованих стилів:

<head>

h1, h2 { color: red; font-family: "Times New Roman", Georgia, Serif; line-height: 1.3em;}

</ style>

</ head>

1.2. Внутрішні текстові таблиці стилів

Внутрішні текстові стилі не використовують селектори, присвоєння стилю відбувається безпосередньо до html-елементу через атрибут style:

<p style = "font-family:" Times New Roman ", Georgia, Serif; color: # 70d7700;"> Зверніть увагу на цей текст. </ P>

Недоліком такого способу є неможливість автоматичного використання даного стилю для іншого елемента.

1.3. Правило @import

Правило @import дозволяє завантажити зовнішню таблицю стилів. Щоб директива @import працювала, вона повинна розташовуватися всередині тега <style> перед іншими правилами:

@import url (mobile.css);

p { font-size: 0.9em; color: grey;}

</ style>

1.4. Тег <link>

Зовнішня таблиця стилів представляє текстовий файл з розширенням .css, в якому знаходиться весь набір стилів CSS. Він не містить HTML-код, тому його не потрібно вкладати всередину тегів <style> ... </ style>. Задані в файлі стилі будуть працювати для всіх сторінок веб-сайту.

Зовнішня таблиця стилів (кілька таблиць стилів) прикріплюється до веб-сторінки за допомогою тега <link>, вкладеного в тег <head>:

<head>

</ head>

де rel = "stylesheet" вказує тип посилання (посилання на таблицю стилів), а type = "text / css" повідомляє браузеру тип даних, в даному випадку це текстовий файл, що містить css-код.

2. Селектори

За допомогою селекторів створюються CSS-правила для форматування елементів веб-сторінки. В якості селекторів використовуються не тільки самі елементи та їхні класи і ідентифікатори, а також псевдокласи і псевдоелементи.

Псевдокласи дозволяють додавати особливі класи до елементів, вибираючи об'єкти, яких немає в структурі веб-сторінки, або які не можна вибрати за допомогою звичайних селекторів, наприклад, перша буква або перший рядок одного абзацу.

Псевдоелементи вибирають елементи, які не є елементами структури html-сторінки.

Список селекторів CSS

Універсальний селектор. Універсальний селектор відповідає будь-якому елементу, наприклад, наступний запис обнулить відступи для всіх елементів веб-сайту:

* {Margin: 0;}

Селектор Елемента. Селектори елементів використовуються для визначення стилів елементів для всіх сторінок веб-сайту, наприклад, стиль заголовків h1 або загальний стиль абзаців:

h1 {font-family: Lobster, cursive;}

p {letter-spacing: 0.1em;}

Селектор Класу. Селектори класу використовуються для визначення стилів для кількох елементів одного типу, розміщених у різних частинах або на різних сторінках веб-сайту. Для створення заголовка класу headline необхідно додати атрибут class з відповідним значенням в відкриваючий тег <h1>. Далі необхідно задати стиль для зазначеного класу. Даний стиль оформлення можна застосувати і для інших елементів.

Код HTMLКод CSS

<h1 class = "headline"> Інструкція користування персональним комп'ютером </ h1>headline {

text-transform: uppercase;

color: lightblue;

}

Селектор Ідентифікатора. Селектори ідентифікатора використовуються для привласнення стилю одному конкретному елементу. Ідентифікатор id елемента можна використовувати в документі лише один раз, оскільки він виділяє унікальний елемент.

#sidebar { text-transform: uppercase; color: lightblue;}

Селектор Нащадка. До нащадків елемента відносяться його дочірні елементи. Селектори нащадків дозволяють стилізувати всі вкладені елементи, наприклад, можна відформатувати зовнішній вигляд елементів маркованого списку:

ul li {text-transform: uppercase;} - вибере всі елементи li, що є нащадками всіх елементів ul.

Якщо потрібно відформатувати нащадки певного елемента, то можна поставити йому стильовий клас:

p.first a {color: green;} - означає, що потрібно застосувати даний стиль до всіх посилань, нащадків абзацу, що відноситься до класу з ім'ям first;

p .first a {color: green;} - якщо додати пробіл, то будуть обрані посилання, розташовані всередині будь-якого тегу класу .first, який є нащадком елемента <p>;

.first a {color: green;} - даний стиль застосовується до любого посилання, що розташоване всередині інших тегів, позначених класом .first.

Дочірній селектор. Дочірній тег є прямим нащадком тегу, що його містить. Тобто, відносини "батьки-діти" існують між елементами і тими елементами, які містяться безпосередньо всередині них. В одного елемента може бути кілька дочірніх елементів, а батьківський елемент може бути в кожного елемента тільки один.

p> strong - вибирає всі елементи strong, які є дочірніми по відношенню до елементу p.

Сестринський селектор. Сестринські відносини виникають між елементами, що мають загального батька. Селектори сестринських елементів дозволяють вибрати теги з групи елементів одного рівня.

h1 + p - вибере всі перші абзаци, що йдуть безпосередньо за будь-яким тегом <h1>, не зачіпаючи решта абзаців.

h1 ~ p - вибере всі абзаци, які є сестринськими по відношенню до будь-якого заголовку h1 і йдуть після нього.

Селектор Атрибута. Селектори атрибутів дозволяють форматувати елементи на основі вибірки будь-яких містяться в них атрибутів або значень атрибутів, варіанти:

[атрибут] - вибирає всі елементи, для яких заданий вказаний атрибут.

img [alt] - вибирає всі картинки, що містять атрибут alt.

img [title = "flower"] - вибирає всі картинки, назва яких містить слово flower.

Псевдоклас. Псевдокласи - це класи, що фактично не прикріплені до тегів html-коду. Вони викликають CSS-правила при вчиненні тої чи іншої події або підкоряються певному правилу:

a: link - посилається на невідвідуване посилання.

a: visited - посилається на вже відвідане посилання.

a: hover - посилається на будь-який елемент, над яким проводять курсором миші.

a: focus - посилається на будь-який елемент, над яким знаходиться курсор миші.

a: active - посилається на елемент, який був активізований користувачем.

Структурні псевдокласи. Структурні псевдокласи форматують дочірні елементи відповідно до зазначеного параметра в скобці, варіанти:

:nth-child (odd) - вибирає непарні дочірні елементи.

:nth-child (even) - вибирає парні дочірні елементи.

:nth-child (3n) - вибирає кожен третій елемент серед дочірніх.

Структурні псевдокласи типу. Дозволяють вказати на конкретний тип дочірнього тегу:

:nth-of-type () - вибирає елементи за аналогією з: nth-child (), при цьому бере до уваги тільки тип елемента.

:first-of-type - дозволяє вибрати перший дочірній елемент.

:last-of-type - вибирає останній тег конкретного типу.

:nth-last-of-type () - вибирає елемент заданого типу в списку елементів відповідно до зазначеного місцеположенням, починаючи з кінця.

:only-of-type - вибирає єдиний елемент зазначеного типу серед дочірніх елементів батьківського елементу.

Псевдоелементи. Псевдоелементи використовуються для додавання вмісту, який генерується за допомогою властивості content, і для зміни зовнішнього вигляду частині елементу:

:before - вставляє згенерований вміст перед елементом.

:after - додає згенерований вміст після елемента.

2.1. Комбінація селекторів

Щоб домогтися більш чіткого вибору елементів для форматування, можна не обмежуватися завданням одного типу селектора, а використовувати комбінації селекторів, наприклад:

a [href] [title] - вибере всі посилання, для яких задані атрибути href і title;

img [alt * = css]: nth-of-type (even) - вибере всі парні картинки, альтернативний текст яких містить слово css.

2.2. Угруповання селекторів

Можна застосувати один і той же стиль до кількох елементів, причому обмежень за кількістю доданих елементів немає. Для цього необхідно в лівій частині оголошення помістити через кому потрібні селектори, наприклад:

h1, h2, h3, h4 {color: tomato; background: white;}

3. Принцип каскадування і специфічність правила

Каскадування представляє процес застосування різних правил до одного і того ж елементу. Більш конкретні правила мають пріоритет над більш загальними. Якщо у відношення одного і того ж елемента визначено кілька стилів, то в результаті до нього буде застосований останній з них.

Для кожного правила браузер обчислює специфічність селектора, і якщо у елемента є конфліктуючі оголошення властивостей, до уваги береться правило, що має найбільшу специфічність.

Значення специфічності складається з чотирьох частин: 0, 0, 0, 0. Специфічність селектора визначається наступним чином:

для id додається 0, 1, 0, 0;

для class додається 0, 0, 1, 0;

для кожного елементу і псевдоелемента додається 0, 0, 0, 1;

для вбудованого стилю, доданого безпосередньо до елементу - 1, 0, 0, 0;

універсальний селектор не має специфічності.

CSS

h1 {color: lightblue;} / * специфічність 0, 0, 0, 1 * /

em {color: silver;} / * специфічність 0, 0, 0, 1 * /

h1 em {color: gold;} / * специфічність: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * /

div # main p.about {color: blue;} / * специфічність: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * /

.sidebar {color: grey;} / * специфічність 0, 0, 1, 0 * /

#sidebar {color: orange;} / * специфічність 0, 1, 0, 0 * /

li # sidebar {color: aqua;} / * специфічність: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

В результаті до елементу застосуються ті правила, специфічність яких більше, наприклад, якщо на елемент діють дві специфічності зі значеннями 0, 0, 0, 2 і 0, 1, 0, 1, то виграє друге правило.

Вагу правила також можна задати за допомогою ключового слова !important;, яке додається після значення властивості, наприклад, font-weight: bold!Important;.

Правило необхідно розміщувати в кінець оголошення перед закриваючою дужкою. Таке оголошення буде мати пріоритет над усіма іншими правилами.

Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка друзей вк