Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Лекция 3:

Создание статического содержания. CSS

Аннотация: Данная лекция освещает основы применения каскадных таблицы стилей CSS (CSS-классы, наследование стилей, каскадные стили и т.д.). В заключение лекции дополнительно освещаются вопросы регистрация доменов и хостинга сайтов.
Ключевые слова: Каскадные таблицы стилей CSS, селектор, наследование, CSS1, masthead, внешний отступ, внутренний отступ, Таблицы связанных стилей, Таблицы глобальных стилей, Внутренний стиль, контекстный селектор, Соседние селекторы, дочерний селектор, селекторы атрибутов, универсальный селектор, псевдоклассы, псевдоэлементы, ширина блока, 'letter-spacing', 'text-transform', oblique, font-variant, blinking, 'text-indent', 'background-repeat', 'background-attachment', 'background-position', псевдокласс, lower-roman, upper-roman, 'list-style-image', относительные единицы измерения, favicon, jQuery, 'padding-top', 'padding-bottom', группировка, домен, доменная имя, доменная зона, DNS-сервер, DNS, whois, ICANN, Международные домены, gtld, Интернационализованные домены, IDN, internationalization, Национальные домены, Зарезервированные доменные имена, Регистрация доменного имени, ресурсные записи dns, ARPA, jabber, хостинг, аспект описания, виртуальный сервер, Виртуальный выделенный сервер, Выделенный сервер, Колокация, Бесплатный хостинг, JFIF, HTML, XHTML, XML, SVG, css, синтаксис, Интернет, доменное имя, Размещение

Презентацию к данной лекции Вы можете скачать здесь.

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>

3.1.2. Добавление CSS

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS [2, 5].

3.1.2.1. Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK> [5]. Данный тег помещается в контейнер <HEAD>.

Пример подключения таблицы связанных стилей:

…
<head>
…
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
…
 </head>
…

Значения параметров тега <LINK>rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

3.1.2.2. Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы [5]. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.

Пример использования таблицы глобальных стилей:

…
 <head>
 …
  <style type="text/css">
   p { 
    font-size: 110%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
   }
  </style>
 </head>
…
Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.
3.1.2.3. Внутренние стили

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице [5]. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.

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

…
 <body>
  <p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</p>
 </body>
…
Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

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

3.1.3. Базовый синтаксис

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис [2, 5]:

Селектор { свойство1: значение; свойство2: значение; ... }

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Замечание. Имена селекторов обязательно должны начинаться с латинского символа ( a-z, A-Z ) и могут содержать в себе цифры.
Владимир Тадеуш
Владимир Тадеуш
Украина
Кирилл Дубовик
Кирилл Дубовик
Россия, Петрозаводск