CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.

Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов.

Содержание

• Применение CSS – Как применить CSS к HTML.
• Селекторы, Свойства и значения – Элементы CSS.
• Цвета – Использование цвета.
• Текст – Манипуляция с размером и формой текста.
• Margins и Padding – Расставляем вещи по местам.
• Границы
• Кладем все вместе – Готовим острое блюдо из этих ингридиентов.

Главные преимущества CSS:

1. Более чистый код
   • Этот код легче поддерживать
   • Он быстрее загружается
   • Он лучше оптимизирован для поисковых систем
2. Модульный код
   • Правила стиля могут применяться ко множеству страниц
   • Единообразный дизайн
   • Код легче поддерживать
3. Сила дизайна
   • Точность контроля (позиционирование, размер, поля и др.)
4. Разделение труда
   • Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн
5. Лучше доступность
   • Теги больше не используются не по назначению (например, <blockquote> для форматирования)
   • Нет необходимости в позиционировании невидимых картинок
   • Пользователи могут переписывать стилевые таблицы автора

Правила CSS

Правила CSS содержат определения стиля элемента или группы элементов. Они используют следующий синтаксис:

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

Все пары свойство:значение являются декларациями. Множественные (составные) декларации разделяются точкой с запятой. Селектор определяет элементы, на которые воздействуют правила. Давайте рассмотрим следующее правило:

p {
 color:darkgreen;
 font-family:Verdana;
 font-size:10pt
}

Это правило определяет, что текст во всех параграфах должен быть темно-зеленого цвета, размер текста должен быть 10 точек, а в качестве шрифта можно использовать шрифт Verdana.

Комментарии в CSS

Комментарии в CSS начинаются с «/*» и заканчиваются «*/». Взгляните на этот пример:

p {
 color:red; /* Текст во всех параграфах должен быть красного цвета */
}

Это может показаться не таким уж и важным, и в большинстве случаев такие конфликты никак не проявляются. Но по мере того, как CSS файлы растут в размере и сложности, вы начнете работать с несколькими отдельными CSS-файлами. И тогда риск появления конфликтов увеличивается значительно.

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

p { color: red; }
p { color: blue; }

Элемент p всегда будет синего цвета, т.к. соответствующее правило указано последним.

Тем не менее, люди обычно не используют идентичные и конфликтующие селекторы специально (потому что это бессмысленно). Конфликты вполне могут появиться, когда у вас есть вложенные селекторы. Рассмотрите следующий пример:

div p { color: red; }
p { color: blue; }

Выглядит так, будто элементы p в пределах элемента div будут показаны синим цветом, потому что правило, которое устанавливает цвет p, указано последним. Однако на самом деле они будут показаны красным цветом из-за специфичности первого селектора. Говоря простым языком, приоритет в конфликтных ситуациях увеличивается вместе со спецификой селектора.

Настоящая специфика группы вложенных элементов требует вычислений. По существу, вы приравниваете каждый селектор id («#anything») к значению 100, каждый селектор class («.anything») к 10, а каждый селектор HTML («anything») к 1. Затем вы складываете их значения, а общий результат и будет вашим значением специфики.

• p имеет специфику 1 (1 HTML селектор)
• div p имеет специфику 2 (2 HTML селектора; 1+1)
• .tree имеет специфику 10 (1 селектор class)
• div p.tree имеет специфику 12 (2 HTML селектора и 1 селектор class; 1+1+10)
• #baobab имеет специфику 100 (1 селектор id)
• body #content .alternative p имеет специфику 112 (HTML селектор, id селектор, class селектор, HTML селектор; 1+100+10+1)

Таким образом, в случае, если все эти примеры будут использованы, div p.tree (со спецификой 12) будет более специфичен, чем div p (со спецификой 2), а body #content .alternative p будет более специфичем, чем все они, независимо от порядка.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Это включает в себя следующие свойства:

• background-color, с которым мы сталкивались прежде.
• background-image, которое представляет собой местонахождение самого изображения.
• background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону; repeat-y — изображение повторяется по координатной оси Y, т.е. сверху и снизу; repeat-x — изображение повторяется по координатной оси X, т.е. следует одно за другим слева на право; no-repeat — изображение показывается только один раз и не повторяется.
• background-position, показывает расположение изображения. Это может быть top (сверху), center (по центру), bottom (снизу), left (слева), right (справа) или любая благоразумная их комбинация.

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

Легко увлечься техникой фоновых изображений и начать размещать их по всей странице. Некоторые визуально гиперактивные люди уверены, что страница выглядит хорошо, когда яркие цветные фотографии накладываются друг на друга по всему фону веб-страницы, заставляя пользователя «разгадывать» текст на переднем плане. Это, конечно же, экстремальный пример. Но факт состоит в том, что наиболее дружественен к пользователю легко читаемый текст, набранный черным цветом на белом фоне или белым цветом на простом черном фоне (есть также предложения слегка приглушать белый и черный фон, чтобы снизить блики).

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

Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Таким образом CSS может напоминать следующий код:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

HTML делает отсылку к стилю CSS значениями атрибутов id и class. Например:

<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов.

В дополнение вы можете использовать селектор для определенного элемента HTML, просто указав сначала HTML-селектор. Например p.jam { какой-то стиль } будет применяться для элементов параграфов, у которых есть класс «jam».

Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.

Импортирование

Эт-правило import присоединяет другую таблицу стилей. Допустим, вы хотите добавить стили из другой таблицы стилей к уже существующей. В этом случае, вы скорее всего поступите так:

@import url(addonstyles.css);

Эта конструкция часто используется в месте, где элемент link ссылается на CSS файл HTML-страницы, имея при этом внутреннюю таблицу стилей, которая выглядит приблизительно так:

<style type="text/css" media="all">@import url(monkey.css);</style>

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

Медиа-типы

Эт-правило media применит содержимое к определенному типу медиа, например, к печати:

@media print {
	body {
		font-size: 10pt;
		font-family: times new roman, times, serif;
	}
	#navigation {
		display: none;
	}
}

Возможные типы медиа:

• all – правила CSS применяются ко всем возможным типам медиа
• aural – для речевых синтезаторов.
• handheld – для портативных устройств.
• print – для принтеров.
• projection – для проекторов.
• screen – для дисплеев компьютеров.

Вы также можете использовать следующие типы медиа: braille, embossed, tty и tv.

Примечание: несмотря на все вышесказанное браузер IE поддерживает всего несколько медиа-типов – all, screen и print.

Кодировка

Эт-правило charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

@charset "ISO-8859-1";

Шрифтовой комплект (font-face)

Эт-правило font-face используется для детального описания шрифта и может использоваться для внедрения внешнего шрифта в ваш CSS. Правило требует наличия описателя font-family, к которому шрифт может отсылать и значением которого может быть имя текущего шрифта или полностью новое имя. Чтобы внедрить шрифт, используют описатель drc. Другие описатели, добавленные в эт-правило font-face, становятся условиями для шрифта, который используется. Например, если вы добавили стиль font-weight: bold в эт-правило, описатель src свойства font-family будет применяться к селектору со свойством font-family, если свойством font-weight будет bold.

Вы можете использовать похожее эт-правило font-face:

@font-face {
	font-family: somerandomfontname;
	src: url(somefont.eot);
	font-weight: bold;
}
p {
	font-family: somerandomfontname;
	font-weight: bold;
}

Это правило применит шрифт somefont.eot к параграфам (за исключением случаев, когда для селектора p не установлено font-weight: bold).

Поддержка внедряемых шрифтов очень обрывочна. Браузеры на основе кода Mozilla не поддерживают их и не имеют в ближайшее время таких планов. Только Internet Explorer, похоже, обладает определенной степенью поддержки. Чтобы внедрять шрифты с IE, вам потребуется использовать приложение Microsoft WEFT, которое сконвертирует символы формата TrueType в формат OpenType (и затем ими можно воспользоваться только по определенной вами ссылке). Из-за ограничений (и сложности) совместимости, рекомендуется не использовать шрифты, которые не имеют адекватной альтернативы среди системных шрифтов.

Страницы

Эт-правило page регулирует постраничные медиа и является продвинутым способом применять стили к печатным медиа. Это правило определяет блок страницы, который расширяется на блочной модели (box model, подробнее см Margins и Padding). Благодаря этому правилу вы определяете размер и представление единой страницы.

Существует несколько соглашений, которые применяются к эт-правилу page: не должно быть полей или рамок; стиль создается не для показа на экране компьютера, поэтому не допускается использование в качестве единиц измерений пикселей (точек) и em.

Существует несколько определенных свойств, которые могут использоваться. Например, size может принимать значение portrait, landscape, auto или length. Свойство marks используется для определения метки кадрирования:

@page {
	size: 15cm 20cm;
	margin: 3cm;
	marks: cross;
}

Псевдоклассы для постраничных медиа

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

@page :pseudo-class { stuff }.

:first — этот псевдокласс применяется к первой странице постраничных медиа.

:left и :right применяются для левых и правых страниц соответственно. Может использоваться для указания больших полей слева при печати левой страницы и справа – при печати правой страницы.

Есть и ряд других особенностей эт-правила page, такие как переход на новую страницу, наименование страниц, но учитывая, что это эт-правило с трудом работает в любом из браузеров, вы возможно и так потратили достаточно времени на чтение этой части. Хотя идея хороша.

И, наконец, border-color используют для указания цвета границы.

Добавьте этот код в CSS-файл:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

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

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

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	color: black;
	background-color: #ffc;
	margin: 1em;
	padding: 0;
}

/* Кстати, это комментарий */

p {
	line-height: 1.5em;
}

h1 {
	color: #ffc;
	background-color: #900;
	font-size: 2em;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0.25em;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.5em;
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
	border-bottom-color: #c00;
}

h2 {
	color: white;
	background-color: #090;
	font-size: 1.5em;
	margin: 0;
	padding: 0.1em;
	padding-left: 1em;
}

h3 {
	color: #999;
	font-size: 1.25em;
}

img {
	border-style: dashed;
	border-width: 2px;
	border-color: #ccc;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

li {
	color: #900;
	font-style: italic;
}

table {
	background-color: #ccc;
}

Встроенные стили прикрепляются напрямую к HTML-тегам значением атрибута style.

Они напоминают следующий код:

<p style="color: red">text</p>

В результате применения этого стиля, параграф будет показан красного цвета.

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

Внутренние стили

Внедренные, или внутренние, стили применяются ко всей странице целиком. Теги style размещаются между тегами head.

Способ подключения и применения стилей выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>

В результате использования этого стиля все параграфы на странице будут красного цвета, а все ссылки — синего.

Напомню, что хорошей практикой является разделение HTML-содержания и CSS-представления в разных файлах. И здесь приходит спаситель…

Внешние каскадные таблицы стилей

Внешние таблицы стилей применяются ко всему сайту со множеством страниц. Для этого создается CSS-файл приблизительно следующего содержания:

p {
	color: red;
}
a {
	color: blue;
}

Если вы сохраните это в файле “web.css”, вам также потребуется указать в HTML-файле ссылку на внешнюю таблицу стилей. Выглядит это следующим образом (см последнюю строку):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />

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

Чтобы следовать данному руководству наиболее эффективно, рекомендуется пробовать и тестировать код по мере прогресса. Поэтому используйте ваш текстовый редактор, чтобы создать полностью новый файл, а затем сохраните пустой документ как “web.css” в той же директории, что и HTML-файл.

Затем измените HTML-файл таким образом, чтобы он напоминал следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

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

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h1>CSS Z-Index</h1>
<div id="logo1" class="logo">Webucator</div>
<div id="logo2" class="logo">Webucator</div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
</body>
</html>

Обратите внимание, как определенные элементы div расположены поверх других. Если z-index этих элементов изменяется, расположение их стека изменится также.

Display

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

• block
• inline
• none

Наиболее типичные примеры применения свойства display:

1. Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
2. Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
3. Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block

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

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

Visibility (Видимость)

Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента. Возможные значения этого свойства:

• visible
• hidden

Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.