Изменение стиля внешней ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

A[href^="http://"] {

font-weight: bold /* Жирное начертание */

}

</style>

</head>

<body>

<p><a href="link1.html">Обычная ссылка</a> |

<a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p>

</body>

</html>

Результат примера показан ниже.

A.out[href^="http://"] { font-weight: bold }

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

Стиль для разных доменов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

A[href$=".ru"] { /* Если ссылка заканчивается на .ru */

background:

url('ru.gif') /* Добавляем фоновый рисунок */

no-repeat; /* Отменяем повторение фона */

padding-left: 10px /* Смещаем текст вправо */

}

A[href$=".com"] { /* Если ссылка заканчивается на .com */

background:

url('com.gif')

no-repeat;

padding-left: 10px

}

</style>

</head>

<body>

<p><a href="http://www.yandex.com">Yandex.Com</a> |

<a href="http://www.yandex.ru">Yandex.Ru</a></p>

</body>

</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется свой фоновый рисунок. Стилевые атрибуты будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться не будет. В этом случае лучше воспользоваться селектором, в котором определенное значение может находиться в любом месте атрибута.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

[href*="htmlbook"] {

background: yellow /* Желтый цвет фона */

}

</style>

</head>

<body>

<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |

<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |

<a href="http://web-graphics.ru">Графика для Веб</a></p>

</body>

</html>

Существуют и некоторые другие виды селекторов аргументов, но они применяются достаточно редко, поэтому их описание мы опустим.

Информация взята с сайта

Использование универсального селектора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

* {

font-family: Aral, Verdana, sans-serif; /* Рубленый шрифт для текста */

font-size: 96% /* Размер текста */

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>

</html>

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.

Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях не известны.

Информация взята с сайта

Стиль для каждого селектора

H1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 160%;

color: #003

}

H2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 135%;

color: #333

}

H3 {

font-family: Arial, Helvetica, sans-serif;

font-size: 120%;

color: #900

}

P {

font-family: Times, serif

}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковый параметр font-family. Группирование как раз и позволяет установить один параметр сразу для нескольких селекторов, как показано в примере 14.2.

Сгруппированные селекторы

H1, H2, H3 {

font-family: Arial, Helvetica, sans-serif

}

H1 {

font-size: 160%;

color: #003

}

H2 {

font-size: 135%;

color: #333

}

H3 {

font-size: 120%;

color: #900

}

В данном примере единый для всех селекторов параметр font-family применяется сразу к нескольким тегам, а индивидуальные атрибуты уже добавляются к каждому селектору отдельно.

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

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.

Информация взята с сайта

Наследование параметров цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

TABLE {

color: red; /* Цвет текста */

background: #333; /* Цвет фона таблицы */

border: 2px solid red /* Красная рамка вокруг таблицы */

}

</style>

</head>

<body>

<tr>

<td>Ячейка 1</td><td>Ячейка 2</td>

</tr>

<tr>

<td>Ячейка 3</td><td>Ячейка 4</td>

</tr>

</table>

</body>

</html>

В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. Тогда почему цвет фона у ячеек в данном примере черный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.

Чтобы определить, наследуется значение стилевого атрибута или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в данном случае бесполезно, может и подвести.

Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить желаемые атрибуты для него, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 15.2).

Параметры текста для всей веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

BODY {

font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */

color: navy /* Синий цвет текста */

}

</style>

</head>

<body>

<p>Цвет текста этого абзаца синий.</p>

</body>

</html>

В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется все-таки изменить цвет для отдельного контейнера. В этом случае придется переопределять нужные параметры явно, как показано в примере 15.3.

Изменение свойств наследуемого элемента

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

BODY {

font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */

color: navy /* Синий цвет текста */

}

P.red {

color: maroon /* Темно-красный цвет текста */

}

</style>

</head>

<body>

<p>Цвет текста этого абзаца синий.</p>

<p class="red">А у этого абзаца цвет текста уже другой.</p>

</body>

</html>

В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red.

Информация взята с сайта

Применение псевдокласса focus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

INPUT:focus {

color: red /* Красный цвет текста */

}

</style>

</head>

<body>

<form>

</form>

</body>

</html>

Результат примера показан ниже.

input.ex:focus {color: red}

В данном примере в текстовом поле содержится предварительный текст, он определяется значением параметра value тега <INPUT>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щелкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернется к первоначальному черному цвету.

Замечание 1

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.

Замечание 2

Псевдокласс focus не поддерживается браузером Internet Explorer.

Изменение цвета ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

A:link {

color: #036 /* Цвет непосещенных ссылок */

}

A:visited {

color: #606 /* Цвет посещенных ссылок */

}

A:hover {

color: #f00 /* Цвет ссылок при наведении на них курсора мыши */

}

A:active {

color: #ff0 /* Цвет активных ссылок */

}

</style>

</head>

<body>

<a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a>

</body>

</html>

Результат примера показан ниже.

A.ex:link { color: #036 } A.ex:visited { color: #606 } A.ex:hover { color: #f00 } A.ex:active { color: #ff0 }

| |

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается visited, а затем идет hover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.

Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.

Замечание

Браузер Internet Explorer позволяет использовать псевдоклассы active и hover только для ссылок.

В примере 16.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса hover к селектору TR.

Выделение строк таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

TR:hover {

background: #fc0; /* Меняем цвет фона строки таблицы */

}

</style>

</head>

<body>

<tr>

<th>Трефы</th>

<th>Бубны</th>

<th>Червы</th>

</tr>

<tr>

<td>Чебурашка</td>

</tr>

<tr>

<td>Крокодил Гена</td>

</tr>

<tr>

<td>Шапокляк</td>

</tr>

<tr>

<td>Крыса Лариса</td>

</tr>

</table>

</body>

</html>

Результат примера показан ниже.

TABLE.ex3 TR:hover { background: #fc0}

Пики

Трефы

Бубны

Червы

Чебурашка	5	2	4	2
Крокодил Гена	2	7	1	3
Шапокляк	5	4	3	1
Крыса Лариса	1	0	5	7

Использование псевдокласса first-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

B:first-child {

color: red /* Красный цвет текста */

}

</style>

</head>

<body>

<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p>

</body>

</html>

Результат примера показан ниже.

DIV.result B:first-child {color: red}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

В данном примере псевдокласс first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Замечание

Браузер Internet Explorer не поддерживает псевдокласс first-child.

Псевдокласс first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют параметр text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом first-child (пример 16.5).

Отступы для абзаца

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

P {

text-indent: 1em /* Отступ первой строки */

}

P:first-child {

text-indent: 0px /* Для первого абзаца отступ убираем */

}

</style>

</head>

<body>

<p>Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.</p>

<p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.</p>

<p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>

</body>

</html>

Результат примера показан ниже.

DIV#ex4 P:first-child {text-indent: 0em} DIV#ex4 P {text-indent: 1em}

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

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

Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.

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

Информация взята с сайта

Применение псевдоэлемента after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

P.new:after {

content: " - Новьё!" /* Добавляем после текста параграфа */

}

</style>

</head>

<body>

<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>

<p>Метод ловли льва простым перебором.</p>

</body>

</html>

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением параметра content.

Замечание

Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer.

Использование псевдоэлемента before

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

UL {

padding-left: 0px; /* Убираем отступ слева */

list-style-type: none /* Прячем маркеры списка */

}

LI:before {

content: "\20aa " /* Добавляем перед элементом списка символ в юникоде */

}

</style>

</head>

<body>

<ul>

<li>Чебурашка</li>

<li>Крокодил Гена</li>

<li>Шапокляк</li>

<li>Крыса Лариса</li>

</ul>

</body>

</html>

Результат примера показан ниже.

DIV.result UL {padding-left: 0px;list-style-type: none; margin: 0px} DIV.result LI:before { content: "\20aa "}

Чебурашка

Крокодил Гена

Шапокляк

Крыса Лариса

В данном примере псевдокласс before устанавливается для селектора LI определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.

Использование псевдоэлемента first-letter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

P {

font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */

font-size: 90%; /* Размер шрифта */

color: black /* Черный цвет текста */

}

P:first-letter {

font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */

font-size: 200%; /* Размер шрифта первого символа */

color: red /* Красный цвет текста */

}

</style>

</head>

<body>

<p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. </p>

<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p>

</body>

</html>

Результат примера показан ниже.

DIV#ex4 P { font-family: Arial, Helvetica, sans-serif; font-size: 90% } DIV#ex4 P:first-letter { font-family: 'Times New Roman', Times, serif; font-size: 200%; color: red }

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

Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

Выделение первой строки текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

P:first-line {

color: red; /* Красный цвет текста */

font-style: italic /* Курсивное начертание */

}

</style>

</head>

<body>

<p>Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.</p>

</body>

</html>

Результат примера показан ниже.

DIV#ex4:first-line { color: red; font-style: italic }

Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.

В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.

Информация взята с сайта

Однако такая запись не очень

TD { background: olive; }

TD { color: white; }

TD { border: 1px solid black; }
Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите аргументы для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 18.2).

зависит от воли автора. Заметим

TD {

background: olive;

color: white;

border: 1px solid black;

}
Форма написания — в одну строку или несколько — зависит от воли автора. Заметим только что, когда каждый параметр занимает отдельную строку, проще отыскивать взглядом нужное значение. Соответственно, быстрее и удобнее происходит редактирование кода CSS.

В данном примере для селектора

P { color: green }

P { color: red }
В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.
На самом деле подобной записи лучше вообще избегать и удалять повторяющиеся параметры селекторов. Но подобное может произойти не явно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.

Наследование свойств позволяет не повторять

BODY {

font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта */

font-size: 110%; /* Размер шрифта */

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

Цвет фона для каждого слоя

#col1, #col2, #col3 {

font-family: Arial, Verdana, sans-serif; /* Гарнитура шрифта */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Нормальное начертание */

color: white /* Цвет текста */

}

/* Цвет фона для каждого слоя */

#col1 { background: #ebe0c5 }

#col2 { background: #bbe1c4 }

#col3 { background: #add0d9 }

Этот стиль работает только для

.new {

... /* Этот стиль можно использовать с любыми тегами */

}

P.new {

... /* Этот стиль работает только для тега <P> */

}
Класс new в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается. Аналогично дело обстоит и с идентификаторами (пример 18.7).

Этот стиль работает только для

TD#leftcol {

... /* Этот стиль работает только для тега <TD> */

}

P#leftcol {

... /* Этот стиль работает только для тега <P> */

}
В данном примере используется идентификатор с именем leftcol, но добавляется он к разным тегам, поэтому стиль будет работать только в указанном контексте. Добавление id=”leftcol” к тегу <DIV> не вызовет ошибки, но и не даст никакого результата.
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Простой селектор атрибута

Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

[атрибут] { Описание правил стиля }

Селектор[атрибут] { Описание правил стиля }

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

В примере 12.1 показано изменение стиля тега <Q>, в том случае, если к нему добавлен параметр title.

Псевдоклассы, имеющие отношение к дереву документа

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

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.

Расширенные возможности

В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

Разделение оформления и содержания

Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задается через стили. При подобном разделении формирование дизайна и верстка сайта может вестись параллельно.

Селектор атрибута со значением

Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.

[атрибут="значение"] { Описание правил стиля }

Селектор[атрибут="значение"] { Описание правил стиля }

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

В примере 12.2 показано изменение стиля ссылки в том случае, если тег <A> содержит параметр target="_blank". При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Что такое CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей)— это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.

Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформления текста, ссылок, изображений и других элементов. Далее описаны преимущества, которые дает CSS.

Подключение CSS

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.

Типы носителей

Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В табл.3.1 перечислены некоторые типы носителей.

Табл. 3.1. Типы носителей и их описание

Тип

Описание

all	Все типы. Это значение используется по умолчанию.
aural	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld	Наладонные компьютеры и аналогичные им аппараты.
print	Печатающие устройства вроде принтера.
projection	Проектор.
screen	Экран монитора.
tv	Телевизор.

В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер.

Замечание

Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.

При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 3.1.

Базовый синтаксис

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.

Селектор { свойство1: значение; свойство2: значение; ... }

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере4.1 показаны две разновидности оформления селекторов и их правил.

Селекторы тегов

В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде.

Тег { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или прописными символами не имеет значения. Внутри фигурных скобок пишется свойство CSS, а после двоеточия— его значение. Набор параметров разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 5.1).

Классы

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

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса" (пример6.1).

Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий.

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример7.1). Символ решетки при этом уже не указывается.

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

Чтобы пометить, что текст является комментарием, применяют конструкцию /* ... */ (пример8.1).

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

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

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

Тег1 Тег2 { ... }

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

<Тег1>

<Тег2> ... </Тег2>

</Тег1>

Использование контекстных селекторов продемонстрировано в примере 9.1.

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Замечание

Соседние селекторы не поддерживаются браузером Internet Explorer.

В примере 10.1 показана структура взаимодействия тегов между собой.

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример11.1).

Селекторы атрибутов

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

Замечание

Селекторы атрибутов не поддерживаются браузером Internet Explorer, поэтому нижеприведенные примеры в нем не работают.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Универсальный селектор

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

В примере 13.1 показано одно из возможных приложений универсального селектора— выбор шрифта и размера текста для всех элементов документа.

Группирование

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

Наследование

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

Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE> внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере15.1.

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

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

Синтаксис применения псевдоклассов следующий.

Элемент:Псевдокласс { Описание правил стиля }

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).

Условно все псевдоклассы делятся на группы, которые перечислены далее.

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

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

Синтаксис использования псевдоэлементов следующий.

Селектор:Псевдоэлемент { Описание правил стиля }

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

.foo:first-letter { color: red }

.foo:first-line {font-style: italic}

Замечание

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

Далее перечислены все псевдоэлементы, их описание и свойства.

Правила создания стиля

При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным.

Таблица глобальных стилей

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

Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в примере2.1.

Visited

Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример16.2).

Внутренние стили

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей (пример 2.4).

Вы можете свободно использовать данный

Вы можете свободно использовать данный документ в личных целях, а также распространять его любым способом — выкладывать у себя на сайте, давать друзьям, копировать по локальным сетям и т.д. Извещать о том, что файл добавлен на определенный ресурс, необязательно, но желательно. Только учтите при этом, что оригинал может и меняться.
Запрещается всякая модификация содержимого файла, в частности, вносимые любым способом исправления и декомпиляция. Если вы обнаружили в текстах ошибку или неточность, сообщите об этом мне, поправим на месте.
Документ может распространяться только на свободной основе. Любое коммерческое использование воспрещено.
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Значение встречается в любом месте атрибута

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

[атрибут*="значение"] { Описание правил стиля }

Селектор[атрибут*="значение"] { Описание правил стиля }

Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере12.5 показано изменение стиля ссылок, в которых встречается слово «htmlbook».