CSS1 представляет собой описание правил, задающих параметры
представления отдельных элементов на языке HTML. В предыдущих версиях
HTML для придания элементу нужного облика приходилась каждый раз для
каждого элемента перечислять весь список атрибутов, его характеризующих.
Таблицы стилей, помимо более широких возможностей управления
элементами web-документа, позволяют разделить непосредственно
содержание документа и информацию о том, как это содержание должно быть
представлено на экране. Это в огромной степени облегчает html-верстку
web-документов и внесение изменений в описание элементов. Теперь
несколько слов о том, каким образом создаются таблицы стилей,
определяющие внешний вид содержания web-документа. Эти описания
называются laquo;селекторами» и имеют следующий вид: ТЭГ {атрибут:
значение} Например, чтобы текст во всем документе отображался шрифтом
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>
| 
Категории
Мини-чат
Интересное
Кабинет
Счетчики материалов
Поиск
Опрос
Партнеры
