|
|
|
CSS1 представляет собой описание правил, задающих параметры представления
отдельных элементов на языке HTML. В предыдущих версиях HTML для
придания элементу нужного облика приходилось каждый раз для каждого
элемента перечислять весь список атрибутов, его характеризующих.
Таблицы стилей, помимо более широких возможностей управления элементами
web-документа, позволяют разделить непосредственно содержание документа
и информацию о том, как это содержание должно быть представлено
на экране. Это в огромной степени облегчает html-верстку web-документов
и внесение изменений в описание элементов.
Теперь несколько слов о том, каким образом создаются таблицы стилей,
определяющие внешний вид содержания web-документа. Эти описания
называются «селекторами» и имеют следующий
вид: ТЭГ {атрибут: значение} Например,
чтобы текст во всем документе отображался шрифтом Arial, с черными
буквами размером в 14 пикселов, достаточно написать:
BODY {color: black; font-size: 14 px; font-family:
Arial}
В то же время, если Вам необходимо, чтобы все заголовки второго
уровня выделялись красным цветом, достаточно один раз записать в
таблице стилей:
H2 {color: red}
и теперь весь текст в документе, находящийся между тэгами, будет
автоматически выкрашиваться в красный цвет.
Вы должны были заметить, что в вышеприведенном примере имеется
противоречие. С одной стороны, мы присвоили всему тексту в документе
черный цвет, с другой — всем заголовкам присвоен красный цвет.
Каким же цветом отображать заголовок? Здесь действует принцип
последовательного приоритета, введенный в еще более ранних
версиях HTML, т.е. при возникновении конфликтных инструкций преимущество
отдается более позднему тэгу. На примере это выглядит так:
это какой-то текст
А это заголовок
и снова текст
При встрече с открывающим тэгом браузер обращается к таблице стилей
(о том, как сделать так, чтобы браузер знал, что ему надо обращаться
к таблице стилей, мы поговорим позже) и узнает, что весь текст внутри
элемента body должен быть черного цвета. Однако, продолжая считывать
код, браузер наталкивается на открывающий тэг <H2>
и через таблицу стилей узнает, что весь текст внутри элемента H2
должен отображаться красным цветом. Автоматически предыдущая команда
теряет свою силу и текст после тэга <H2>
окрашивается в красный цвет. Далее появляется закрывающий тэг </H2>,
который говорит браузеру о прекращении действия инструкций элемента
H2. Тогда браузер возвращается к более ранним инструкциям элемента
body и снова начинает окрашивать весь следующий текст в черный цвет.
Говоря о последовательном приоритете, следует также упомянуть и
о принципе наследования. Этот принцип заключается
в том, что элемент, не получивший собственных атрибутов, наследует
атрибуты, присвоенные элементу, внутри которого заключен неохарактеризованный
элемент. Конечно же, принцип наследования распространяется только
на атрибуты, поддерживаемые наследующей и наследуемой сторонами.
На примере это выглядело бы так. Допустим, что в таблице стилей
у нас, как и прежде, есть описание элемента body BODY
{color: black; font-family: Arial; bgcolor: white} , но нет
описания для элемента H2. Тогда при прочтении кода:
это какой-то текст
А это заголовок
и снова текст
браузер интерпретирует его следующим образом. После открывающего
тэга <body> он начнет окрашивать
текст в черный цвет и отображать его шрифтом Arial. Далее, столкнувшись
с открывающим тэгом <H2> и не найдя
описания для данного элемента в таблице стилей, браузер обращается
к более раннему описанию элемента body и пытается применить его
описание к элементу H2. У элемента body имеется три описывающих
его атрибута: цвет шрифта, тип шрифта и цвет фона. Из этих атрибутов
только два поддерживаются элементом H2: цвет и тип шрифта. Именно
их и применит браузер к элементу H2.
Синтаксис СSS1 позволяет присваивать один атрибут сразу нескольким
элементам. Для этого достаточно перечислить все необходимые элементы
через запятую. Выглядеть это может так:
H1, H2, H3 {color: green}
Данная запись говорит о том, что все заголовки первого, второго
и третьего уровня будут отображаться на экране зеленым цветом. Также
можно одному элементу присваивать несколько различных атрибутов.
Для этого достаточно перечислить их внутри фигурных скобок через
точку с запятой. Пример:
H2 {color: red; font-family: Alefbet}
Данная запись инструктирует браузер отображать заголовки второго
уровня шрифтом Alefbet красного цвета. Если у браузера нет доступа
к шрифту Alefbet, то он автоматически заменит авторский атрибут
на установленный по умолчанию, т.е. на тот шрифт, каким браузер
отображает текст в тех случаях, когда никакой специфический шрифт
для текста не указан.
CSS1 позволяет задавать и более сложные системы стилистических
определений. Например, можно создавать так называемые контекстные
селекторы. Это значит, что в таблице стилей можно не только
сделать запись, что H2 должен отображаться синим цветом, а EM —
зеленым. Можно также сделать запись, что, например, элемент EM будет
красного цвета, в том случае если он расположен внутри элемента
H2. Для этого достаточно простой записи в таблице стилей:
H2 EM {color: red}
Как и обычным селекторам, нескольким контекстным селекторам можно
присвоить один атрибут, разделив селекторы запятой. Например:
H2 EM, H3 I {color: red}
Обращаю Ваше внимание на то, как важно при html-верстке внимательно
следить за размещением знаков. Ведь достаточно забыть поставить
одну запятую, как реестр однородных селекторов превращается в один
контекстный селектор.
Теперь поговорим о том, как применять синтаксис CSS1 к html-верстке.
Можно, используя элемент style, прописывать атрибутику каждому элементу.
Например, использование такого подхода к отображению абзаца красным
цветом будет выглядеть так:
<p style="color: red">
Текст абзаца </p>
Но такой подход не дает нам практически никаких преимуществ в
сравнении с предыдущими версиями HTML. Как и ранее, для каждого
элемента каждый раз при его появлении приходится создавать систему
его описания. Основное достижение CSS — разделение содержания
и представления — остается нереализованным. Более продуктивным
способом использования STYLE является создание реестра описаний
элементов внутри элемента HEAD. Выглядит это так:
<HEAD>
<style type="text/css"> ...информация о стилях...
</style>
</HEAD>
Это простой и понятный способ. Но у него есть свой очевидный минус.
Он заключается в том, что Вам придется вставлять таблицу стилей
в каждую html-страницу. Это не только увеличивает вес сайта, но
и усложняет изменение общей стилистики сайта. Для решения этой проблемы
придуман простой и изящный способ. Таблица стилей выносится в отдельный
файл с расширением .css. Затем внутри элемента
HEAD html-страницы указывается ссылка на вышеозначенный файл. Выглядит
это так:
<HEAD>
<link rel="stylesheet" type="text/css" href="../style1.css">
</HEAD>
Браузер, наталкиваясь на такую ссылку, немедленно прочитывает
указанный файл и далее применяет его стилистические инструкции ко
всем элементам html-страницы. В рамках CSS1 возможно также разрабатывать
системы стилей, применяемые только к части элементов. Если мы хотим,
к примеру, чтобы текст на странице отображался шрифтом Arial черного
цвета размером в 16 пикселей, но при этом нам надо, чтобы некоторые
части текста отображались шрифтом Tahoma красного цвета размером
в 12 пикселей, то это можно сделать с помощью классов.
Класс можно определить как некоторое именованное свойство или группу
свойств, не привязанных к каким-либо конкретным элементам. Записывается
класс очень просто:
.com {color: red; font-size: 12px; font-family:
Tahoma}
Здесь com — это название класса,
атрибуты в фигурных скобках - его описание, а точка в самом начале
используется для того, чтобы браузер понял, что имеет дело не с
каким-то стандартным элементом, а с независимым классом. Созданный
класс можно присваивать различным элементам по необходимости. Можно
присвоить его отрывку текста:
...какой-то текст <font class="com">нужный
отрывок</font> продолжение текста...
Можно присвоить класс целому абзацу:
<p class="com">содержание абзаца</p>
и даже блоку:
<div class="com">содержание
блока</div>
 Проверено Фотинией
|
|
