3.1. Таблицы стилей css

3.1.1. Общее описание

CSS (Cascading Style Sheets, каскадные таблицы стилей ) – технология описания внешнего вида документа, написанного языком разметки [1]. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web". В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.

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

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera [3]. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3 [4].

Основными преимуществами использования CSS являются:

• несколько дизайнов страницы для разных устройств просмотра;

• уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;

• простота последующего изменения дизайна;

• дополнительные возможности оформления (например, можно сделать так, чтобы меню было всегда видно при прокрутке страницы).

Недостатками использования CSS являются:

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

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

Термин " Каскадные таблицы стилей " был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:

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

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

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

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

• Свойства блоков, такие как высота, ширина, внутренние ( padding ) и внешние ( margin ) отступы и рамки.

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

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

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

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

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

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

• Указатели.

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

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

Рабочая версия CSS3 cильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.

CSS при отображении страницы может быть взята из различных источников:

• Авторские стили в виде:

  • внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;

  • встроенных стилей – блоков CSS внутри самого HTML-документа;

  • inline -стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибутеstyle ;

• Пользовательские стили:

  • локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;

• Стиль браузера:

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

Пример таблицы стилей:

h2 {

font-size: 1.75em;

color: #469;

}

#container {

padding: 0;

}

#column_r_content, #column_l_content {

margin: 10px;

}

p#paragraph1 {

margin: 0;

}

#masthead img {

float: left;

margin: 0;

padding: 0;

}

#navigation a:hover {

color: #000;

text-decoration: none;

border: 1px solid #ed9;

background-color: #ed9;

}

.style_italic {

font-style: italic;

}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content,p#paragraph1, #masthead img, #navigation a:hover, .style_italic.

В первом правиле HTML-элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либоcolumn_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов ( margin ).

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равнымnavigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">

Этот абзац будет выведен курсивом.

</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>
<meta name="description" content="Это тестовая страница." />
<meta name="keywords" content="HTML, CSS, DTD, теги" />
<meta name="robots" content="index, follow" />
<title>Тестовая страница</title>
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="container">
<NOINDEX>
<div class="header">
<div class="navArea">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h1>
<a href="index.html" title="На главную">Главная<span /> </a>
</h1>
</td>
<td>
<a href="http://www.yandex.ru" title="Яндекс">Яндекс</a>
</td>
<td>
<a href="#" title="Услуги">Услуги</a>
</td>
<td>
<a href="#" title="Товары">Товары</a>
</td>
<td>
<a href="#" title="Контактная информация">Контактная информация</a>
</td>
</tr>
</table>
</div>
</div>
</NOINDEX>
<div class="textArea">
<div class="leftMenu">
<ul>
<li>
<span>Общее описание</span>
</li>
<li>
<a href="advantages.html" title="Преимущества">Преимущества</a>
</li>
</ul>
</div>
<div class="mainText">
<h2>Описание тестовой страницы</h2>
<p>HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p>
<p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.</p>
<p><img src="images/ex.jpg" alt="Картинка" /></p>
</div>
</div>
<NOINDEX>
<div class="footer">
<div class="downMenu">
<div style="padding-top:7px; padding-bottom: 5px;">© 2009-2010 Examle</div>
<div>E-mail: <a href="mailto:mailbox@example.com">mailbox@example.com</a></div>
</div>
</div>
</NOINDEX>
</div>
</body>
</html>