Синтаксис каскадних таблиць стилів

Категорії статей: CSS ; 26.04.2010

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

Селектори елементів

Розглянемо випадок, коли в якості селектора виступає який-небудь елемент. Наприклад, візьмемо елементи body, div і p

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { color:blue; background-color:white; }
div { color:green; }
p { color:red; }
</style>
</head>
<body>
Текст1
<div>Текст2</div>
<p>Текст3</p>
Текст4
</body>
</html>

В даному прикладі Текст1 і Текст2 відображатимуться в браузері синім кольором на білому фоні, оскільки рядок body { color:blue; background-color:white; } вказує браузеру наступне: текст в елементі body має бути виведений синім кольором ( color:blue) на білому фоні ( background-color:white). Відповідно текст в блоці div має бути зеленого кольору, а в абзаці (елемент p) текст має бути виведений червоним кольором. Додам, що, скільки б не було елементів div і p на сторінці, всі вони повинні відображуватися у вікні браузеру згідно вище приведеним стильовим властивостям.

Селектори класів

Але що робити, якщо ми хочемо аби на сторінці елементи з однаковими іменами відображувалися по-різному? Для цього можна використовувати класи. Задати клас елементу HTML-документа, відповідно до якого виводитиметься даний елемент у вікні браузеру, можна атрибутом class. Значенням атрибуту class має бути ім'я класу (придумувати потрібно самостійно). Наприклад

Код
<div "div_article">
<h1 "head_article">Заголовок статті</h1>
<p "text_article">Текст статті</p>
</div>

Визначати стилі відображення для класів потрібно наступним способом

Код
.div_article { color:black; background-color:white; }
.head_article { color:green; }
.text_article { color:blue; }

Поясню: після крапки вказується ім'я класу, потім у фігурних дужках { } вказується опис CSS. При подібному записі селектора, визначення класу буде доступне всім елементам HTML-документа, тобто якщо задати

Код
.text { color:blue; background-color:while; }

то в HTML-коді можна буде написати наступне

Код
<div "text">Вміст блоку div</div>
<p "text>Текст абзаца</p>

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

Код
p.text { color:blue; background-color:while; }

Тоді наступний запис в HTML-коде

Код
<div "text">Содержимое блоку div</div>
<p "text>Текст абзаца</p>

не відображуватиметься аналогічно вище наведеному прикладу, а точніше до блоку div не будуть застосовані стилі відображення класу text. А лише вміст абзацу буде виведений у вікні браузеру згідно записаному правилу в CSS.
Відмічу, що підбирати імена класів бажано так, щоб було зрозуміло, який логічний сенс несе елемент з даним ім'ям класу. Якщо дати якому-небудь елементу ім'я класу типу "asdf", то зрозуміти, що саме містить даний елемент практично неможливо. А якщо дати ім'я, наприклад "head_article", то вже не треба лізти в HTML-код, аби зрозуміти що даний елемент містить заголовок якої-небудь статті.

Селектори ідентифікаторів

Задати стилі відображення елементів HTML-документа можна не лише по імені елемента (тега) або класу, але і по ідентифікатору елемента. Майже в кожного елемента може бути вказаний атрибут id задаючий унікальне ім'я (ідентифікатор) елементу в даному HTML-документі. Тобто не повинно бути в поточному документі два або більше елементи з однаковими значеннями атрибуту id. Наприклад

Код
<div id="block1">
<p id="indent">Текст абзаца</p>
</div>
<div id="block2">Вміст блоку div</div>

При визначенні стилів, селектор складатиметься з символу # і слідуючого за ним ідентифікатора. Наприклад, для вище написаного кода отримаємо наступне

Код
#block1 { color:red; }
#indent { color:red; background-color:black;}
#block2 { color:green; }

Відмічу, що, для задання стилів певним елементам, простіше використовувати класи. Ідентифікаторами краще всього не зловживати. Ідентифікатори все ж більш всього використовуються в JavaScript, але інколи можна використовувати їх в CSS, наприклад, для додання логічній значущості якому-небудь елементу, в тому сенсі, що даний елемент є якимсь значимим логічним елементом на сторінці і на сторінці він повторюватися не буде. Наприклад, це може бути заголовок сайту, меню, або блок з основним вмістом сайту.

Групування селекторів

Дуже часто бувають ситуації, коли потрібно задати однакові стильові властивості декільком селекторам, тобто потрібно прописати наступні правила

Код
div { color:red; background-color:#999999; }
p { color:red; background-color:#999999; }
h1 { color:red; background-color:#999999; }
.text { color:red; background-color:#999999; }
#block1 { color:red; background-color:#999999; }

Але замість подібного довгого запису можна використовувати скорочений запис, тобто групування селекторів, і просто вказати потрібні селекторы через кому

Код
div, p, h1 .text, #block1 { color:red; background-color:#999999; }

Селектори нащадків

Це цікаве правило визначає спосіб надання стильових властивостей елементау, який є нащадком деякого іншого елементу HTML-документа. Селектор нащадків складається з двох або більш селекторів, що розділені пропуском.
Для тих, хто не знає, які елементи являються нащадками, поясню. Елемент є нащадком, якщо він знаходиться усередині якого-небудь іншого елементу. Наведу приклади

1. Елемент p є нащадком елементу div

Код
<div>
текст
<p>текст</p>
текст
</div>

2. Елемент p не є нащадком елементу div

Код
<p>текст</p>
<div>текст</div>
текст
<p>текст</p>

Для подальшого пояснення правила розглянемо код

Код
...
p { color:red; }
div { color:green; }
...
<p>текст1</p>
<div>
текст2
<p>текст3</p>
</div>

При перегляді даного коду в браузері ми побачимо, що текст1 і текст3 буде червоного кольору, текст2 буде виведений на екран зеленим кольором. Але виявляється, що можна задати стильові властивості для елементу p, елементу div, що є нащадком, не використовуючи класи або ідентифікатори, а використовуючи селектор, задаючий стильові властивості нащадкам, який можна записати так

Код
div p { color:blue; }

При такій конструкції всім елементам p що являються нащадками елементу div, будуть призначені дані стильові властивості. Тепер давайте цей рядок вставимо в попередній приклад

Код
...
p { color:red; }
div { color:green; }
div p { color:blue; }
...
<p>текст1</p>
<div>
текст2
<p>текст3</p>
</div>

Якщо проглянути даний код в браузері, то можна відмітити, що на відміну від попереднього прикладу, тут текст, що міститься в другому елементі p (текст3), відображуватиме синім кольором.

Псевдокласи

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

Код
<a href="http://www.linedmk.com">www.linedmk.com</a>

Як ми пам'ятаємо, в HTML можна задати колір ще не проглянутого відвідувачем посилання, проглянутого посилання і колір активного посилання (тобто момент, коли відбувається клацання кнопкою миші по гіперпосиланню) атрибутами, відповідно, link, vlink і alink в тегу body.
Каскадні таблиці стилів дають куди більше можливостей по оформленню гіперпосилань. Для елементу <a> у CSS передбачені наступні псевдоклассы

  • псевдокласс :link - визначений для ще не проглянутих користувачем гіперпосилань;
  • псевдокласс :visited - визначений для проглянутих користувачем посилань;
  • псевдокласс :hover - визначений для елементу, над яким даний момент часу знаходиться курсор;
  • псевдокласс :active - визначений для активного в даний момент часу елементу, тобто коли по елементу відбувається клацання кнопкою миші.
И тепер для надання потрібному зовнішньому вигляду посиланню можна використовувати псевдокласи. Наприклад, визначимо кольори для не відвіданого користувачем посилання і для відвіданого

Якщо нам потрібно задати зовнішній вигляд лише деяким посиланням, то можна придумати відповідний клас, наприклад

Код
<a href="http://www.linedmk.com" "mylink">www.linedmk.com</a>

Тогда у CSS при наданні властивостей даному посиланню потрібно буде вказувати і клас

Код
а.mylink:link { color:red; }

Напишемо повноцінний приклад, в якому посилання не лише мінятиме колір при наведенні курсора, але і забирається підкреслення (для цього використовується властивість text-decoration)

Код
...
а.mylink:link, а.mylink:visited { color:red; text-decoration:underline; }
а.mylink:hover {color:blue; text-decoration:none; }
а.mylink:active { color:black; }
...
<a href="http://www.linedmk.com" "mylink">www.linedmk.com</a>

Коментарі

Каскадні таблиці стилів дозволяють використовувати коментарі. Вони можуть знаходитися в будь-якому місці CSS, і їх вміст не враховується при обробці таблиць стилів. Коментарі починаються з символів "/*" і закінчуються символами "*/". Наприклад

Код
<style type="text/css">
...
/* Це коментар і він не впливає на CSS */
.
</style>

В наступній статті познайомимося з властивостями CSS.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.5MB | 0.06Sec ad Google