Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » CSS

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 · Добавлена: 2003-09-22
Просмотров: 3695 · Рейтинг: 3.0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Есть ли у вас свой сайт?
Всего ответов: 140716
Наша кнопка
WoWeb.ru - портал для веб-мастера