CSS.MANUAL.RU



Введение
Синтаксис CSS
Включение стилей в документ
Значения свойств
Свойства шрифта
Свойства текста
Свойства цвета и фона
Свойства обрамления
Свойства позиционирования
Визуальные свойства
Свойства списков
Свойства полос прокрутки
Тег SPAN
Статьи
Идеология CSS
Как использовать CSS
Меню с помощью CSS
Алфавитный указатель
Ссылки
Обратная связь
Форум





  Основы синтаксиса

В общем виде правило, задающее стиль выглядит вот так:

selector {property1: value1; property2: value2; property3: value3; property4: value4}

Например, мы можем задать цвет содержимому тега <b> таким способом:

b {color: red}

Здесь b это селектор, color – это свойство, red, как вы уже наверное догадались, значение.


  Группировка селекторов

h1 {font-face: Arial}
h3 {font-face: Arial}
h3 {font-face: Arial}

Делает то же самое, что и:

h1, h3, h3 {font-face: Arial}

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


  Контекстные селекторы

Стандарт CSS разрешает применять некоторое стилевое правило, только тем тегам, которые находятся внутри других. Поясню на примере:

ol li {list-style: upper-roman}
ol ol li {list-style: upper-alpha}
ol ol ol li {list-style: decimail}
ol ol ol ol li {list-style: lower-alpha}

Согласно этим стилевым правилам, броузер, встретив тег <li>, вложенный в один тег <ol>, должен применить значение upper-roman для свойства list-style к этому тегу. Встретив тег <li>, вложенный в два тега <ol>, он должен использовать значение upper-alpha для свойства list-style к этому тегу и т.д.

Также можно группировать контекстные селекторы

B I, LI OL{cloror: blue}

Это правило означает, что текст, выделенный тегом <B>, находящимся в <I>, и текст, находящийся в теге <LI>, вложенном в один тег <OL>, будет выделен голубым цветом.


  Дочерние, сестринские и универсальные селекторы

Рассмотрим следующие примеры:

* {font-weight: bold}
h1 > h3 {font-weight: bold}
h1 + h3 {font-weight: bold}

В первом примере звездочка,универсальный селектор, означает, что стилевой правило должно быть применено ко всем элементам документа, так что весь текст в нем будет выделен жирным шрифтом

Во втором примере стилевое правило будет применяться ко всем тегам <h3>, являющимся дочерними по отношению к тегу <h1>, и ко всем <h3> тегам, являющимся родительскими по отношению к <h1>.

Третий пример иллюстрирует тип смежного селектора, данное стилевое правило будет применено к тегу, следующему непосредственно за другим. В этом случае всякий раз, когда за заголовком первого уровня следует заголовок второго уровня, заголовок второго уровня станет жирным.


  Псевдоэлементы

Псевдоэлементы пока не поддерживаются ни одним из популярных браузеров, так что вы смело можете пропустить этот раздел.

Синтаксис псевдоэлемнтов таков:

selector:pseudoelement {property1:value1;...}

Псевдоэлементы first-line и first-letter определяют стиль первой строки и первой буквы. Например так вы можете создать буквицу

p:first-letter {font-weight: bold; color: red}

Псевдоэлементы before и after позволяют указывать в документе места, куда вставлять автоматически генерируемое содержимое. Например определив стиль упорядоченного списка следующем образом:

ol:before{content:'Ссылки'}

вы увидите перед каждым списком слово ссылки.


  Регулярные классы

Иногда нужно использовать один стиль абзацев для примеров исходных кодов программ, а другой для описания алгоритмов. Если ни один из абзацев не будет иметь явного контекста, по которому его можно будет отличить от другого, то можно определить стиль для каждого в отдельности:

p.code { font-family: symbol; margin-left: 30px; }
p.alg { margin-left:2px; }

В селекторе, после имени тега через точку приписано имя класса. Первое правило создало класс стилей абзацев code, текст которых должен выводиться шрифтом symbol c с отступом 30 пикселей от края, а второе alg, текст которых будет отодвинут от левого края на 2 пикселя. Чтобы применить к содержимому тега определенный класс надо вставит в тег атрибут class и присвоить ему имя стилевого класса.

<p class="alg"><br>
Алгоритм сортировки пузырьком. По
исходному коду догадайтесь сами, как он
работает и убедитесь в его верности
</p>
<pre>
<p class="code">
for i := 1 to n do begin
for k := i downto 2 do begin
if Obj[k-1] > Obj[k] then begin
tmp := Obj[k-1];
Obj[k-1] := Obj[k];
Obj[k] := tmp;
end;
end;
end;
</p>
</pre>


  Родовые классы

В рамках стандарта CSS можно создавать класс, не ассоциируя их с каким-нибудь тегом. Например, задав стилевое правило следующем образом:

.bold_and_italic {font-style: italic; font-weight: bold}

и присвоив bold_and_italic свойству class некоторого тега, вы укажете броузеру, что содержимое этого тега надо отображать жирным и наклонным шрифтом.


  Псевдоклассы

Кроме традиционных классов, стандарт CSS определяет еще и псевдоклассы. П севдоклассы позволяют управлять отображением элементов, находящихся в каком-нибудь состоянии. Псевдоклассы присоединяются к имени тега двоеточием, и их имена заранее определены. Пока существует всего семь псевдоклассов:

  • link, alink, visited – эти псевдоклассы используются только с тегом <a> и определяют стиль отображения обычной, активной и посещенной ссылок соответственно. Пример:

    a:link{color: blue}
    a:active{color: green; font-weight: bold}
    a:visited{color: red}

  • hover, focus – это, так называемые, интерактивные классы. Класс hover определяет, как отображать объект, когда на него попал курсор мышь, а класс focus, определяет, как броузеру показать содержимое тега, ставшего объектом внимания. С помощью этих классов можно украсить ссылки на странице:

    a:hover{color: yellow}

    Класс focus не поддерживается современными броузерами, а класс active работает только с тегом <a>
  • first-child – этот класс показывает, как отображать содержимое тега, являющегося первым потомком раздела. Этот класс не  поддерживается ни одним из популярных браузеров, поэтому не будем на нем останавливаться
  • lang – этот псевдокласс указывает, как отображать содержимое на некотором языке. Например вы можете установить следующее стилевое правило:

    p:lang(en){font-family: roman}

    Тогда абзацы с "английским" содержимым будет отображаться шрифтом, семейства Roman.

    <div lang="en">
    <h1></h1>Some title</h1>
    <p>Some text</p>
    </div>

    Ни один из популярных броузеров не поддерживает этот класс

  ID-классы

Почти все теги допускают атрибут id, с помощью CSS можно сопоставить тегу с данным значением id некоторое стилевое правило. Имя ID-класса отделяется от имени тега знаком # (решетка).

#yellow {color: yellow}
h1#blue {color: blue}

Теперь можно создать синий заголовок, написав <h1 id="blue"> или, присвоив атрибуту id любого тега значение yellow, окрасить его содержимое в желтый цвет. Употребление стилей, созданных таким способом обладает существенным недостатком – значение id уникально и документе.


  Стили для разных устройств вывода

W3C предполагает, что в недалеком будущем HTML документы будут отображаться не только на мониторах компьютеров, но и на таких экзотических устройствах, как принтеры, печатающие по Брайлю(для слепых). Для этого была придумана специальная директива @media.

Синтаксис:

@media список устройств
{
...
стилевые правила
...
}

  Пример:
@media tv, projection
{
body{background: blue
}
}

В данный момент в стандарт CSS входят следующие устройства: aural ( синтеаторы речи), braille (тактильный), embossed (принтеры, печатающие по Брайлю), handheld (карманные), print (обычные принтеры), projection (проекционные аппараты), tty (телетайп), tv (телевизоры) и all (объединяет все типы).

Сейчас ни один из популярных броузеров не поддерживает директиву @media.


  Комментарии к стилям

Как и в других языках программирования, в CSS комментарии только приветствуются. Но не вздумайте вводить их как в HTML, CSS – не HTML. Вы должны оформлять комментарии в своих стилях начиная их с символов /* и заканчивая символами */. Не скупитесь на использование комментариев, они облегчат понимание стилей для вас и людей, которые, может быть, будут модифицировать ваши стили в дальнейшем.






Владимир Климонтович (контакт), Copyright (C) 2003
При поддержке проекта MANUAL.RU