1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 2 - CSS, Основи

Особливості CSS та його застосування
Зовнішні стилі (external style sheets)
Таблиці стилів документа (document style sheets)
Стилі, що підставляються в рядок (inline styles)
Структура CSS-правил
HTML селектор
Селектор класу
Селектор ID

Особливості CSS та його застосування

Детальний опис властивостей та значень CSS-правил можна знайти на сайті CSS довідник Основним поняттям CSS є стиль - набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки.
У стандартному HTML для присвоєння елементу певних властивостей (таких, як колір, розмір, розташування на сторінці і т. д.) доводилося кожного разу описувати ці властивості, навіть якщо на одній сторінці повинно розташовуватися десятки однакових елементів.

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

Зовнішні стилі (external style sheets)

Застосовуються за допомогою елемента link, який повинен розташовуватися тільки всередині елемента head

<link rel="stylesheet" type="text/css" href="mystyle.css" media="all" />

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

Таблиці стилів документа (document style sheets)

називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього. Іноді називаються embedded style sheet (вбудований стиль). CSS-стилі та коментарі розташовуються між відкриваючим і закриваючим тегами елемента style:

<style type="text/css">
...
</ style>

Сам тег style (на відміну від link) може знаходитися в будь-якій частині документа, але звичайно його розміщують всередині елемента head.

Стилі, що підставляються в рядок (inline styles)

Іноді потрібно призначити стиль окремого елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style. Типовий випадок - елемент зустрічається один раз в документі або на сайті, але вимагає особливого оформлення. Скористаємося атрибутом style (саме атрибутом елементів, а не елементом!):

<p style="color: red">
Я абзац, виділений червоним кольором, інших таких на сайті немає
</p>
Атрибут style є у всіх HTML-елементів, що розташовуються в елементі body. Усередині атрибуту style можна написати кілька CSS оголошень, розділених крапкою з комою, фігурні дужки не використовуються.

Структура CSS-правил

Всі CSS-правила складаються з селектора і блоку оголошень (укладеного у фігурні дужки). Усередині фігурних дужок блоку оголошень може знаходитися одне або кілька оголошень, розділених крапкою з комою. Оголошення - це рядок, складений з css-властивості і його значення. Вигляд css-правила

CEЛЕКТОР {властивість:значення;}

Приклади CSS-правил:
a {text-decoration: none;}
p.announce {border: 1px dashed black;} / * тут селектор - p.announce * /
p.note { display: block; / * оголошень може бути кілька * /
float: right; / * і їх не обов'язково писати на одному рядку * /
}

Кожне правило починається з селектора (покажчика), що вказує на ті html-елементи, до яких ми збираємося застосувати css-правило. У блоці оголошень встановлюються правила оформлення обраних нами елементів, перевизначений їх властивості - розміри, колір, бордюри, поля, положення на екрані і т.д. Використовуються три основних види селекторів: HTML селектори, селектори класу, ID селектори (або ідентифікатори)

HTML селектор

Це найпростіший випадок - в якості селектора ми використовуємо ім'я html-елемента, який хочемо змінити. Наприклад, для тега <strong> селектором буде strong. Відповідно, для тега <h1> селектором буде h1, і так далі. Тепер можемо перевизначити зовнішній вигляд всіх таких елементів в нашому документі:
strong {font-weight: normal; color: red;}
h1 {font: bold 10pt verdana;}

Селектор класу

«Клас» - це деяке ім'я, яке ми можемо застосувати до будь-яких HTML-тегів, щоб згодом посилатися на них по імені класу. Як ім'я класу можна використовувати практично будь-який рядок. Зручність таких селекторів в тому, що можна присвоїти одне ім'я класу множині html-тегів у документі і потім управляти їх зовнішнім виглядом, звертаючись до них по імені класу:

.MyClass {font: bold 10pt verdana;}

Цей стиль міняє шрифт для всіх тегів з класом myClass

Селектор ID

Будь-який ідентифікатор (ID) - це якесь ім'я, яке ви, так само, як і у випадку з класами, можете застосувати до будь-якого HTML-тегу. Основна відмінність - ID повинен бути унікальним в рамках html-документа:

# MyObj {margin: 1em;} / * змінюємо поля для елемента, у якого id = "myObj" */
span # today {margin: 1em;} / * змінюємо поля для елемента span, у якого id = "today" * /

Дуже поширений випадок - застосувати один набір правил до декількох різних селекторів. Це робиться елементарно - достатньо перерахувати селектори через кому:

/ * всі параграфи і списки робимо червоними, шрифтом Tahoma * /
p, li, ul, ol {color: red; font-face: Tahoma, sans-serif;}
/ * перевизначає колір на синій для нумерованих списків * /
ol {color: blue;}

Додати коментар


Захисний код
Оновити

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 402 гостей та відсутні користувачі