![]() |
![]() |
![]() |
![]() |
В общем виде правило, задающее стиль выглядит вот так:
Например, мы можем задать цвет содержимому тега <b> таким способом:
Здесь b это селектор, color – это свойство, red, как вы уже наверное догадались, значение.
Делает то же самое, что и:
Ясно, что второй вариант предпочтительнее, так как его удобнее изменить, он занимает меньше места, а следовательно быстрее передастся по сети и т.д.
Стандарт CSS разрешает применять некоторое стилевое правило, только тем тегам, которые находятся внутри других. Поясню на примере:
Согласно этим стилевым правилам, броузер, встретив тег <li>, вложенный в один тег <ol>, должен применить значение upper-roman для свойства list-style к этому тегу. Встретив тег <li>, вложенный в два тега <ol>, он должен использовать значение upper-alpha для свойства list-style к этому тегу и т.д. Также можно группировать контекстные селекторы
Это правило означает, что текст, выделенный тегом <B>, находящимся в <I>, и текст, находящийся в теге <LI>, вложенном в один тег <OL>, будет выделен голубым цветом.
Рассмотрим следующие примеры:
В первом примере звездочка,универсальный селектор, означает, что стилевой правило должно быть применено ко всем элементам документа, так что весь текст в нем будет выделен жирным шрифтом Во втором примере стилевое правило будет применяться ко всем тегам <h3>, являющимся дочерними по отношению к тегу <h1>, и ко всем <h3> тегам, являющимся родительскими по отношению к <h1>. Третий пример иллюстрирует тип смежного селектора, данное стилевое правило будет применено к тегу, следующему непосредственно за другим. В этом случае всякий раз, когда за заголовком первого уровня следует заголовок второго уровня, заголовок второго уровня станет жирным.
Псевдоэлементы пока не поддерживаются ни одним из популярных браузеров, так что вы смело можете пропустить этот раздел. Синтаксис псевдоэлемнтов таков:
Псевдоэлементы first-line и first-letter определяют стиль первой строки и первой буквы. Например так вы можете создать буквицу
Псевдоэлементы before и after позволяют указывать в документе места, куда вставлять автоматически генерируемое содержимое. Например определив стиль упорядоченного списка следующем образом:
вы увидите перед каждым списком слово ссылки.
Иногда нужно использовать один стиль абзацев для примеров исходных кодов программ, а другой для описания алгоритмов. Если ни один из абзацев не будет иметь явного контекста, по которому его можно будет отличить от другого, то можно определить стиль для каждого в отдельности:
В селекторе, после имени тега через точку приписано имя класса. Первое правило создало класс стилей абзацев code, текст которых должен выводиться шрифтом symbol c с отступом 30 пикселей от края, а второе alg, текст которых будет отодвинут от левого края на 2 пикселя. Чтобы применить к содержимому тега определенный класс надо вставит в тег атрибут class и присвоить ему имя стилевого класса.
В рамках стандарта CSS можно создавать класс, не ассоциируя их с каким-нибудь тегом. Например, задав стилевое правило следующем образом:
и присвоив bold_and_italic свойству class некоторого тега, вы укажете броузеру, что содержимое этого тега надо отображать жирным и наклонным шрифтом.
Кроме традиционных классов, стандарт CSS определяет еще и псевдоклассы. П севдоклассы позволяют управлять отображением элементов, находящихся в каком-нибудь состоянии. Псевдоклассы присоединяются к имени тега двоеточием, и их имена заранее определены. Пока существует всего семь псевдоклассов:
Почти все теги допускают атрибут id, с помощью CSS можно сопоставить тегу с данным значением id некоторое стилевое правило. Имя ID-класса отделяется от имени тега знаком # (решетка).
Теперь можно создать синий заголовок, написав <h1 id="blue"> или, присвоив атрибуту id любого тега значение yellow, окрасить его содержимое в желтый цвет. Употребление стилей, созданных таким способом обладает существенным недостатком – значение id уникально и документе.
W3C предполагает, что в недалеком будущем HTML документы будут отображаться не только на мониторах компьютеров, но и на таких экзотических устройствах, как принтеры, печатающие по Брайлю(для слепых). Для этого была придумана специальная директива @media. Синтаксис:
В данный момент в стандарт CSS входят следующие устройства: aural ( синтеаторы речи), braille (тактильный), embossed (принтеры, печатающие по Брайлю), handheld (карманные), print (обычные принтеры), projection (проекционные аппараты), tty (телетайп), tv (телевизоры) и all (объединяет все типы). Сейчас ни один из популярных броузеров не поддерживает директиву @media.
Как и в других языках программирования, в CSS комментарии только приветствуются. Но не вздумайте вводить их как в HTML, CSS – не HTML. Вы должны оформлять комментарии в своих стилях начиная их с символов /* и заканчивая символами */. Не скупитесь на использование комментариев, они облегчат понимание стилей для вас и людей, которые, может быть, будут модифицировать ваши стили в дальнейшем. |
![]() |
![]() |
![]() |
![]() |