CSS1 — праздник освобожденного труда.

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Дизайн

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>нужный отрывок</font> продолжение текста…

Можно присвоить класс целому абзацу:

<p>содержание абзаца</p>

и даже блоку:

<div>содержание блока</div>

Источник: woweb.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты