CSS (CASCADING STYLE SHEETS, КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ) ПРАВИЛА ВНЕДРЕНИЯ

· Уровни CSS

· CSS-верстка

· Синтаксис в CSS

· Способы применения CSS

· Селекторы

· Приоритет использования стилей

Технология - CSS (Cascading Style Sheets, каскадные таблицы стилей) позволяет хранить различные параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке Web-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания Web-страниц, таких как:

· использование различных расширений HTML;

· применение изображений вместо текста;

· использование рисунков для контроля пустого пространства, так называемые распорки;

· использование таблиц для верстки Web-страниц;

· написание программных скриптов вместо использования HTML.

Уровни CSS

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web ".

начало 1990-х годов	Различные браузеры имели свои стили для отображения веб страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания
1994	Появился термин "каскадные таблицы стилей"
1996	Консорциумом W3C была издана рекомендация CSS1
1998	Консорциумом W3C принята рекомендация CSS2
Сентябрь 2009	Консорциумом W3C утверждена рабочая версия CSS2.1

Уровень 1 (CSS1)

Эта рекомендация W3C была принята в 1996 году и откорректирована в 1999 году. Основные возможности, предоставляемых этой рекомендацией:

· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного.

· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)

· Выравнивание для текста, изображений, таблиц и других элементов.

· Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Эта рекомендация W3C была принята в 1998 году. Она построена на CSS1 с сохранением обратной совместимости. Среди новых возможностей можно назвать следующие:

· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.

· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер).

· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).

· Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.

· Расширенный механизм селекторов.

· Указатели.

· Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Уровень 2.1 ( CSS 2.1 )

Рабочая версия W3C от 8 сентября 2009 года. Построена на CSS2, в ней исправлен ряд ошибок.

CSS-верстка

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счет этого нововведения стало возможным легкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Использование CSS дает следующие преимущества:

· Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.

· Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS -файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кешируется.

· Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS -файл.

· Дополнительные возможности оформления. Например, с помощью CSS -верстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Известны также и недостатки:

· Различное отображение верстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.

· Часто встречающаяся необходимость на практике исправлять не только один CSS -файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

Отображение элементов реализуется с помощью системы правил, которые определяют, какие элементы HTML должны быть дополнительно оформлены, и в каждом правиле перечислятся свойства (например, цвет, размер, шрифт, и т.д.) этих элементов HTML, которыми они будут манипулировать, какие значения будут для них заданы.

Таким образом, CSS не является ни языком программирования, ни языком разметки.

Синтаксис в CSS

Стиль CSS состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором.

Синтаксис

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.

1. Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:

p {font-size: 75%}

2. Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:

h1 {font-family: "lucida calligraphy"}

3. Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:

table { font-family: arial, "sans serif"; border-style: dotted}

4. Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:

h2

{font-family: arial;

margin-right: 20pt;

color:#ffffff }

5. При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:

p,table,li

{

font-family: "sans serif";

}

Способы применения CSS

Под способами применения CSS мы в данном разделе понимаем форму декларирования стиля на HTML-странице и форму связывания описания стиля отображения элемента разметки с самим элементом. Речь идет о том, где и в какой форме автор страницы (или дизайнер) описывает стиль, и как и в какой форме на него ссылается.

Итак, различают четыре способа применения стилей:

· переопределение стиля в элементе разметки; (встраивание)

· размещение описания стиля в заголовке документа в элементе STYLE; (подключение)

· размещение ссылки на внешнее описание через элемент LINK; (связывание)

· импорт описания стиля в документ. (импорт)

Переопределение стиля

<H1 STYLE="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</H1>

Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr (горизонтальное отчеркивание):

Здесь же нужно отметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетекстовых элементов HTML-разметки.

Элемент STYLE

Применение элемента STYLE — это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа. Помимо управления отображением элементов разметки, элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.

Элемент STYLE дает возможность определить стиль отображения для:

· стандартных элементов HTML-разметки;

· произвольных классов (селектор CLASS);

· НTML-объектов (селектор ID).

К сожалению, работа с селекторами в браузерах различных производителей может преподносить различного рода сюрпризы, для избежания которых следует придерживаться стандартов W3C.

Стандартные элементы разметки описываются в элементе STYLE следующим образом:

<HEAD>
<STYLE>
p { color:darkred;text-align:justify;
 font-size:8pt; }</STYLE>
</HEAD>
<BODY>
...
<P>
Этот параграф мы используем как пример 
применения описания стиля для стандартного
элемента HTML-разметки.
</P>
...
</BODY>

Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет каким-либо способом переопределен. В STYLE можно определить стиль любого элемента разметки.

Ссылка на внешнее описание

Ссылка на описание стиля, расположенного за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять собой файл, содержащий описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.

Ниже приведен пример ссылки на внешнее описание стилей:

<LINK TYPE="text/css" REL="stylesheet" 
 HREF="http://intuit.ru/my_css.css"> 

Здесь важны значения атрибутов REL и TYPE. Атрибут REL должен иметь значение stylesheet. Type может принимать значения text/css или text/javascript. Второй тип описания стилей введен Netscape.

Атрибут HREF задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.

Импорт описания стилей

Импорт описателей стилей в некотором смысле составляет конкуренцию представленному выше указанию на внешний описатель стиля.

Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:

<STYLE>
@import:url(http://intuit.ru/style.css)
A { color:cyan;text-decoration:underline; }
</STYLE>

Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента STYLE.

Способы добавления стилей к документу.

Всего существуют четыре способа, каждый имеет свои преимущества:

· Вложение Стилей в HTML-документ.

· Ссылка из HTML-документа на внешний документ Стилей

· Импортирование документа Стилей в HTML-документ.

· Добавление Стилей непосредственно в строки HTML-документа.

Вложение стилей

Вся информация, связанная с CSS, располагается в шапке HTML-документа и не контактирует с содержимым тэга <BODY>. Пример:

<HTML>

<STYLE TYPE="text/css">

<!--

H1 { color: green; font-family: impact }

P { background: yellow; font-family: courier }

-->

</STYLE>

<HEAD>

<TITLE>Вложенные стили</TITLE>

</HEAD>

<BODY>

<H1>Пример 1</H1>

<P>Пример 2</P>

</BODY>

</HTML>

Вложенные стили исполняются только для текущего HTML-документа. Когда Вы хотите добавить Стили только на единственную страницу, этот путь подходит как нельзя лучше.

Ссылка на документ стилей.

Вместо размещения CSS-кода в каждой конкретной странице, Вы можете привязать множество HTML-документов к одному документу Стилей. Этот внешний CSS-файл установит правила для всех ваших Web-страниц. К примеру, если вы изменяете размер шрифта в документе Стилей, шрифт немедленно изменится на всех ваших страницах. Это очень удобно при поддержании большого сервера с большим количеством файлов.

Вместо тэга <STYLE>, используется <LINK> в пределах тэга <HEAD>:

<HTML>

<HEAD>

<TITLE>Ссыла на документ стилей</TITLE>

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">

</HEAD>

<BODY>

<H1>Пример 1</H1>

<P>Пример 2</P>

</BODY>

</HTML>

Файл mystyles.css будет содержать это:

H1 { color: green;

font-family: impact }

P { background: yellow;

font-family: courier }

В итоге, ваш HTML-документ указывает серверу путь к CSS-файлу. Когда вы рассматриваете страницу в браузере, Вы увидите, как браузер отслеживает тэг <LINK> и загружает настройки страницы из CSS-файла. Этот же CSS-файл может применяться на неограниченном количестве HTML-документов, ссылающихся на него. Вы можете использовать относительные или абсолютные URL с атрибутом HREF.

Импорт стилей.

Аналогично выглядит импортирование стилей. Различие в том, что можно объединять импортированные стили со своими собственными, содержащимися внутри документа. Пример:

<HTML>

<STYLE TYPE="text/css">

<!--

@import url(mystyles.css);

H1 { color: orange; font-family: impact }

-->

</STYLE>

<HEAD>

<TITLE>Импорт стилей</TITLE>

</HEAD>

<BODY>

<H1>Пример 1</H1>

<P>Пример 2</P>

</BODY>

</HTML>

Файл mystyles.css выглядит так:

H1 { color: green; font-family: times }

P { background: yellow; font-family: courier }

В этом примере браузер сначала импортирует стили из файла mystyles.css (строка @import всегда должна быть первой), а затем добавляет к этому вложенные команды стилей. На странице применяются и те, и другие стили.

Добавление стилей в строки web-страницы

И последний способ это добавление стилей непосредственно в строки HTML-документа.

Пример:

<HTML>

<HEAD>

<TITLE>Добавление стилей в строки web-страницы</TITLE>

</HEAD>

<BODY>

<H1 STYLE="color: orange; font-family: impact"> Пример 1</P></H1>

<P STYLE="background: yellow; font-family: courier"> Пример 2</P>

</BODY>

</HTML>

В данном примере не нужно добавлять стили в заголовок HTML-документа. Встроенные атрибуты стилей уже содержат всю необходимую информацию для браузера.

Однако данный метод имеет существенный недостаток, надо добавлять встроенный код стилей каждый раз, когда нужно их использовать. К примеру, каждый следующий тэг <H1> отображается по умолчанию, если ему не присвоить ряд свойств.

Селекторы

Селектор—это конструкция, позволяющая выбрать элемент, к которому будут применены данные стили.

Наиболее часто используются четыре вида селекторов:

· по элементу;

· по классу;

· по ID;

· контекстный селектор.

Селектор по элементу

Самый простой селектор. Если нужно применить стиль ко всем заголовкам первого уровня, то совершенно логично в качестве селектора использовать название элемента <Hl>. Например, чтобы все заголовки первого уровня были темно-серого цвета, выводились шрифтом Arial и имели расстояние между буквами 10 пикселей, пишется такой стиль:

H1 {color: #666; font-family: Arial; letter-spacing: 10рх}

Селектор в данном случае — H1.

Или, например, что бы все ссылки были оранжевого цвета с полужирным начертанием:

A {color: orange; font-weight: bold}

Здесь селектор - А.

Аналогичным образом в качестве селектора можно использовать любой элемент HTML. Проблемы возникают в том случае, если у нас есть одинаковые элементы, которые должны выводится по-разному. Например, если некоторые ссылки должны быть с подчеркиванием , а другие без. Одним из решений этой проблемы является селектор по классу.

Селектор по классу

Понятие класса в HTML ввели специально для поддержки селектора CSS. Существует специальный атрибут class, который можно использовать в любом элементе.

Проблему со ссылками можно решить введением нового класса. Ссылки в тексте будем считать обычными, а ссылки в меню особенными. Для особенных ссылок введем новый класс menu. HTML-код будет таким:

<table>

<tr> <td>

<а href="about.html" class="menu">О компании</а>

<a href="services.html" сlass="menu">Услуги</а>

<a href ="contact.html" class="menu">Контакты</a>

</td> <td>

<р>Основной текст с одинокой <а href="links.html"> ссылкой</а></р>

</td>

</tr>

</table>

От обычных ссылок особенные отличаются атрибутом class="menu". Осталось написать стиль именно для этих ссылок. Селектор по классу формируется так: первым идет название элемента, затем — точка, а после — название класса. Например:

A.menu {text-decoration: none}

Название элемента можно опускать. Тогда будет подразумеваться, что данный стиль применяется ко всем элементам, которые имеют такой класс.

Селектор по ID

Данный тип селекторов практически аналогичен селекторам по классу. В HTML есть специальный атрибут id, который используется для поддержки селектора CSS. Единственное принципиальное отличие в том, что в одном HTML-документе может быть только один элемент с определенным ID, т.е. такой элемент является уникальным. Обычно селекторы по ID используются для блоков, но бывают и другие ситуации. Например, вы хотите, чтобы первый абзац в тексте выводился полужирным наклонным шрифтом. Естественно, на каждой странице такой абзац только один, так что можно ввести атрибут id:

<р id="first">Первый абзац</р> <р>Второй абзац</р>

После этого с помощью селектора по ID напишем стиль для первого абзаца:

P#first {font-style: italic; font-weight: bold}

Если в селекторе по классу для разделения названия элемента и класса используется точка, то для селектора по ID используется знак #. Название элемента можно опустить, и тогда данный стиль можно будет применять к любому элементу с идентификатором first.

В данном случае лучше записывать селектор полностью. Если опустить название элемента, то получится такой стиль:

#first {font-style: italic; font-weight: bold}

И уже совершенно непонятно, к чему этот стиль относится: то ли к первой ссылке, то ли к первому заголовку, то ли к первому абзацу.

Контекстный селектор

Контекстные селекторы применяются не так часто, как остальные, но не менее полезны. Как можно догадаться из названия, контекстные селекторы выбирают элемент, который употребляется в определенном контексте. Например, ссылка может быть в тексте, может быть в меню, а может быть в дублирующем меню. Таким ссылкам можно задать свой стиль с помощью контекстных селекторов, которые позволяют применить стиль к определенному виду элементов, находящихся внутри другого элемента.

Код:

<table>

<tr>

<td>

<а href="about.html" class="menu">О компании</а>

<a href ="services .html" class="menu">Услуги</a>

<a href ="contact.html" class="menu">Контакты</a>

</td>

<td>

<р>Основной текст с одинокой

<а href="links.html"> ссылкой</а>

</р>

</td>

</tr>

</table>

Здесь мы для задания отдельных стилей ссылкам в меню использовали классы, а лучше ввести блок с id="menu" и воспользоваться контекстным селектором:

<table>

<tr>

<td>

<div id="menu">

<a href="about.html">О компании</а>

<a href="services.html">Услуги</а>

<a href="contact.html">Контакты</a>

</div>

А стиль будет таким:

#menu A {text-decoration: none)

Тогда содержимое всех элементов <а>, находящихся внутри элемента с id="menu", будет выводиться без подчеркивания.

Приоритет использования стилей

Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:

1. стили, используемые по умолчанию браузером;

2. стили, хранящиеся во внешней таблице;

3. стили, хранящиеся во внутренней таблице стилей (внутри тега <head>);

4. встроенный стиль (внутри элемента HTML).

Эти правила определяют порядок увеличения приоритета стилей.

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <head>, во внешней таблице стилей или в браузере (значение по умолчанию).