CSS1 - праздник освобожденного труда
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>
Продолжение следует...
Автор: Urfin Juice
Источник: www.woweb.com
|
