Селектор.класс {свойства}

Дата: 2025-05-25; Просмотры: 4
Оценка:
0.00 из 5.00 — оценок
Скачиваний: 0

Класс может обозначаться так же, как и тип HTML-документа, например, абзацы документа образуют класс Р. Однако чаще классу присваивается формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Допустим, вы можете заголовки первого уровня Н1 синего цвета сгруппировать в класс с именем blue:

 

H1.blue {color: blue}

 

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

Принадлежность HTML-элемента этому классу должна быть указана в атрибуте CLASS, который может применяться в любом теге. Так, все элементы Н1 с атрибутом CLASS="blue" станут синими.

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

. класс { свойства }

 

.green {color: green;}

 

В данном случае все элементы с атрибутом CLASS="green" станут зелеными.

 

<H2 CLASS="green" >

<DIV CLASS="green" >

<P CLASS="green">

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

ID -селекторы. В отличие от селекторов и классов, id-селекторы (идентификаторы) представляют собой кодовые объекты CSS, которые позволяют изменить стиль только одного элемента, не затрагивая стилей других однотипных элементов.

# id {свойства}

Признаком идентификатора является символ «#» перед именем. В идентификаторе используется формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Данный селектор применяется в пределах тела документа BODY для задания индивидуального стиля оформления конкретного элемента.

В HTML-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID.

Например, чтобы выделить красным цветом текст абзаца, необходимо по правилу CSS сначала задать идентификатор с указанием свойств:

 

#red {color: ff0000;}

 

а затем вызвать его в элементе Р с использованием атрибута ID:

 

<P ID="red">

 

5.2. Варианты использования CSS

 

Таблицы стилей можно применить к web-странице любым из трех способов:

– встраивание;

– подключение;

– связывание.

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

Встраиваемые стили. CSS – это средство, позволяющее задавать различные визуальные свойства HTML-тэгам. Стиль задается атрибутом STYLE, который можно использовать практически в каждом тэге, задавая его специфические свойства. Значения атрибута STYLE обязательно заключаются в кавычки (одинарные или двойные), причем свойства отделяются друг от друга точками с запятой (пробелы не обязательны). Встраиваемые стили оказывают влияние на тот тег, в котором используются.

Пример использования STYLE для отдельного абзаца:

 

< P STYLE="font–size: 1.5cm; color: green;">

 

Ниже приведен пример использования атрибута STYLE в HTML-коде для различного оформления строк списка, отображение этого примера в браузере представлено на рис. 5.1.

 

<HTML>

<HEAD>

<TITLE> стиль для отдельного тэга </TITLE>

</HEAD>

<BODY BGCOLOR="white" TEXT="black">

<H2> стиль для отдельного тэга </H2>

<HR>

<UL>

<LI>это обычный текст

<LI STYLE="color: red; font-size: 1cm; font-style: italic;">

Красные наклонные буквы высотой в 1 сантиметр

<LI STYLE="color: blue; font-size: 0.5cm margin-top: 2cm;">

Синие буквы высотой 0.5 см с отступом слева в 2 сантиметра

</UL>

</BODY>

</HTML>

 

 

Рис. 5.1. Отображение в браузере примера с встраиваемыми стилями

 

Встроенный стиль можно применять к строковым элементам, используя тег <SPAN>. Следующий пример показывает, как присваивается красный цвет одному слову в заголовке.

 

<H1>

<SPAN STYLE="color: red;"> Защита</SPAN>компьютерных сетей

</H1>

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

 

<DIV STYLE="fony-family: serif; color: brown;">

<H1> Часть первая </H1>

<H2> Глава 1</H2>

<BR><BR>

<CITE>М. Булгаков<CITE>

</DIV>

 

Во всех вложенных элементах H1, H2, CITE блока DIV будет использован шрифт семейства serif коричневого цвета. Это произойдет согласно правилам наследования, которые будут рассмотрены позже.

Подключаемые стили. Подключаемые стили, которые также называются внутренними стилями, применяются ко всей web-странице. Для этого достаточно написать определение в головной части документа, которое использует парный тег <STYLE> </STYLE>.

 

<STYLE TYPE="text/css">

<! -- Описание таблицы стилей -- >

</STYLE>

 

В этом коде значение text/css атрибута TYPE сообщает браузеру, что в текущем файле применен текст на языке CSS. Все формальные описания стилей, представляющие собой CSS-правила, помещаются в элемент STYLE.

Каждое определение содержит перечисление свойств и значений. Описания всех свойств и значений разделяются точкой с запятой и заключаются в общие фигурные скобки.

 

селектор (или имена тэгов через запятую)

{

свойство: значение;

………………………

свойство: значение;

}

 

Пример задания стилей заголовков всех шести уровней для всей страницы в заголовочной части HTML-файла:

 

<HTML>

<HEAD >

<STYLE TYPE ="text /css">

H1, H2, H3, H4, H5, H6

{

text–align: right;

color: maroon;

font – family: "Arial Cyr", Geneva, Helvetica, Sans-serf;

}

</STYLE>

</HEAD>

 

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

Для этого необходимо сначала создать файл, содержащий стилевое оформление (набор стилей) и дать ему определенное имя, которое бы указывало на то, что там находится, например, файл с именем style.css. Покажем примерное содержимое этого файла.

 

<STYLE TYPE="text/css">

BODY{background: black; font-size: 9pt; color: red; font-family: Arial;}

.base {color: blue; font-style: italic;}

H1 {color: white;}

#bold {font-weight: bold;}

</STYLE>

 

В самих же HTML-файлах делается ссылка на этот файл при помощи тега <LINK>.

 

<LINK REL="stylesheet" TYPE="text/css" HREF="путь до файла">

 

Приведем пример привязки стилевого файла к одному из HTML-фай-лов, например к индексному.

 

<HTML>

<TITLE> </TITLE>

</HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">

<BODY>

</BODY>

</HTML>

 

5.3. Принцип наследования

 

Применение CSS к отображению HTML-документов основано на правилах наследования и каскадирования. HTML-документ имеет иерархическую структуру. В вершине этой структуры стоит элемент HTML, который содержит дочерние элементы HEAD и BODY. Те, в свою очередь, включают элементы следующего уровня. Например, элемент HEAD содержит TITLE и STYLE, а элемент BODY включает Hx, P, DIV, IMG и многие другие. Отметим, что дочерние элементы наследуют свойства, установленные для родительского элемента. Для всех HTML-элементов родительским является элемент BODY. Поэтому можно назначать стили, начиная с родительских элементов, постепенно опускаясь к вложенным элементам более низких уровней.

Ниже представлен пример наследования свойств и его отображение в браузере (рис. 5.2).

 

<HTML>

<HEAD>

<TITLE> Наследование </TITLE>

<STYLE type="text/css">

BODY {

background: white;

color: black;

font-family: sans-serif;

font-size: 10 pt;

}

H1, H2 {

color : green;

}

</STYLE>

</HEAD>

<BODY>

<H1> Каскадные таблицы стилей – это <I> Круто! </I >

</H1>

<H2> Каскады стилей</H2>

<H3> Приоритеты стилей</H3>

</BODY>

</HTML>

 

 

Рис. 5.2. Результат отображения в браузере примера с наследованием свойств

 

В данном примере заголовки первого (Н1) и второго (Н2) уровней отобразятся зеленым цветом, как указано в таблице стилей. Причем слово «Круто!» отобразится курсивом зеленого цвета, так как элемент <I> унаследовал присвоенный тэгу <H1> свойства, потому что для <I> никакой цветовой спецификации не было задано. Заголовок третьего уровня унаследовал свойства элемента BODY и отобразился черным цветом, так как в элементе BODY был указан черный цвет.

Применение правил наследования стилей может быть проблематичным в некоторых моделях браузеров и в случае HTML-документов со сложной структурой. Поэтому для надежного отображения вложенных элементов лучше задать точное применение стилевых свойств. Это осуществляется с помощью селекторов потомков, называемых также контекстными селекторами. Дочерние элементы называются потомками, а родительские элементы – предками. Селекторы потомков предназначены для сопоставления стилевых правил HTML-элементам соответственно порядку их вложения в родительские элементы. То есть селектор потомков присваивает стиль элементов с учетом их размещения в структуре документа.

Селектор потомков состоит из нескольких селекторов, отделенных друг от друга пробелом. CSS-правило с селектором потомков применяется к элементу, который записан последним (самый правый) в селекторе.

 

<STYLE type ="text/css">

TABLE TH BIG {color: blue;}

</STYLE>

 

В данном примере синим цветом отобразится шрифт элементов BIG, которые расположены в ячейках заголовков (TH) таблицы (TABLE).

Может возникнуть и ситуация конфликта значений, в которых браузеру нужно выбрать одно из множества значений свойств, определяемое несколькими таблицами стилей. Чтобы разрешить конфликты между стилями, вводятся определенные правила каскадирования, или приоритета. Каждый уровень свойств характеризуется своим приоритетом. Наиболее низким приоритетом обладает стиль браузера. За ним в порядке возрастания следует стиль, заданный пользователем. Наиболее высоким приоритетом является тот, который задается разработчиком web-страниц.

Кроме того, существует схема приоритетов внутри самого web-документа. Свойства, присваиваемые атрибутом STYLE, имеют самый высокий приоритет. На одну ступень ниже идут селекторы потомков. Еще ниже идут селекторы. За ними следуют наследуемые свойства. Самым низким приоритетом обладают начальные значения (принимаемые по умолчанию) (рис. 5.3).

 

<HTML>

<HEAD>

<TITLE> Приоритеты стилей </TITLE>

<STYLE TYPE="text/css">

BODY H2{

font-family: Arial;

font-size: 10pt;

text-align: right;

color: red;

}

</STYLE></HEAD><BODY>

<H2> Каскадные таблицы стилей – это Круто! </H2>

<H2 STYLE="font-family:Courier New; font-size: 17pt;

text-align: center; color: green;">

Каскады стилей</H2>

<H3> Приоритеты стилей</H3>

</BODY></HTML>

 

 

Рис. 5.3. Результат отображения примера

с применением приоритета стилей

 

В данном примере свойство текста верхнего заголовка Н2 задается селектором потомков (значение шрифта Arial размером 10 пунктов с выравниванием по правому краю). А нижний заголовок Н2 будет отцентрирован и отображен шрифтом Courier New, зеленым цветом и размером в 17 пунктов, так как заданное селектором потомков свойство отменяется атрибутом STYLE нижнего заголовка.

 

 

5.4. Обзор свойств CSS

 

При использовании стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контей-нер <B> (STRONG), а в CSS – конструкция font-weight: bold. Для выделения текста подчеркиванием в HTML предусмотрен тег <U>, в CSS же используется запись вида text-decoration: underline; и т. д.

Существует более 70 свойств. Из них рассмотрим основные, наиболее часто используемые, а именно: форматирование текста, структурное форматирование.

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

Таблица 5.1

Свойства форматирования текста в CSS

Свойство Назначение Формат записи и принимаемые значения
Font-family Выбор гарнитуры шрифта font-family: Tahoma, Arial;
Font-style Задает стиль символов font-style: italic;
Font-size Размер шрифта font-size: 14pt;
Font-weight Толщина символов font-weight: bold;
Font-variant Регистр записи font-variant: small-caps;
Text-align Выравнивание текста text-align: center;
Text-decoration Начертание символов text-decoration: underline;
Text-indent Красная строка абзаца text-indent: 1.25cm
Line-height Межстрочный интервал line-height: 15px;
Text-transform Регистр букв text-transform: uppercase;
Color Цвет символа color: blue;
Background-color Цвет фона background-color: white;
Background-image Фоновое отображение background-image: images/picture.gif
Background-repeat Повторение изображения background-repeat: repeat-x;
Background-attachment Прокрутка фонового изображения background-attachment: scroll;
Background-position Фиксирование на определенной позиции background-position: middle;

 

Свойство F ont - family используется для указания гарнитуры шрифта или семейства шрифтов при отображении текста. Гарнитуры шрифта (гарнитура – это набор начертаний символов одного шрифта) Serif – шрифт с засечками (серифный), Sans-serif – шрифт без засечек (бессерифный) и Monospace – моноширинный шрифт (символы имеют одинаковую ширину). Любая графическая операционная система имеет три набора стандартных гарнитур для Windows: Times New Roman – серифный, Arial – рубленый шрифт, Courier – моноширинный.

Например,

 

H1, H2, H3, H4, H5, H6

{font-family: "Arial Cyr", Geneva, Helvetica, sans-serif;}

 

задает заголовкам всех уровней шрифт по выбору. Сначала браузер будет пытаться найти шрифт Arial Cyr, затем Geneva, потом Helvetica и наконец, в случае полной неудачи, какой-нибудь рубленый шрифт.

Font - style – задает стиль вывода символов. Возможны следующие значения этого свойства: normal (нормальный), italic (курсив), oblique (наклонный).

Font - size – размер шрифта может задаваться как абсолютными значениями, так и относительными. В качестве относительного размера используется процентное задание (по отношению к размеру текущего шрифта): large – крупнее, smaller – мельче.

В качестве абсолютного размера используется указание тэга с одной из следующих единиц измерения: in, cm, mm, px, pt, pc.

Можно использовать и такие слова:

– xx-small – сверхмелкий;

– x-small – очень мелкий;

– small – мелкий;

– medium – средний;

– large – крупный;

– x-large – очень крупный;

– xx-large – сверхкрупный.

Font - weight – толщина символов используемого шрифта: normal – стандартное написание без каких-либо изменений, lighter – тонкий шрифт, bold – жирный шрифт, bolder – очень жирный;