CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS. CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением .css, либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа
Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.
Посмотрим на фрагмент XHTML-документа:
Code
<h1>Сказка</h1>
<p>В одной далёкой стране, на краю болота, под пеньком, жил ёжик. И вот однажды …</p>
Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
Code
/* оформляем заголовки: */
h1 {
color: red;
background-color: yellow;
font: Tahoma 2em;
}
/* оформляем абзацы текста: */
p {
color: grey;
line-height: 150%;
}
Договоримся о терминах: CSS, как известно, переводится как «Каскадные Таблицы Стилей», поэтому, видимо, правильно говорить и писать CSS - «они», а не «он». Мне непросто придерживаться этого простого правила, может, в силу привычки, может, из-за индивидуального понимания благозвучия. Буду писать и так и этак, по контексту.
CSS придуман(ы?) не в России, как и весь Интернет, а посему все термины переводные. Я стараюсь использовать общепринятые переводы терминов и иногда приводить оригиналы в скобках.
HTML-элементы часто упоминаются на сайте, хотя на самом деле подразумеваются элементы как HTML, так и XHTML, ведь CSS применимы и к тем, и к другим. Но для удобства чтения я буду писать просто: «HTML-элементы» либо : «элементы» и иногда «теги».
Документ, также упоминающийся в статьях – не что иное, как ваш HTML- или XHTML-документ, или, проще говоря, это веб-страница, которую вы создаёте.
Включение CSS в HTML документ
Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
* применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента
* встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента
* применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута
Разберём эти способы подробнее. Внешние стили (external style sheets)
Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.
Code
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций. Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом
Таблицы стилей документа (document style sheets)
Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль). CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:
Code
<style type=”text/css”>
...
</style>
Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head. Стили, подставляемые в строку (inline styles)
Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
Code
<p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>
Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body. Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
Замечание: избегайте использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.
Синтаксис CSS
Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.
Как обычно выглядит css-правило Как это может выглядеть на практике? Вот три примера CSS-правил:
Code
a {text-decoration: none;}
p.announce {border: 1px dashed black;} /* здесь селектор - p.announce */
p.note {
display: block; /* да, объявлений может быть несколько */
float: right; /* и их не обязательно писать на одной строке */
}
Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило. В блоке объявлений происходит самое интересное – мы устанавливаем правила оформления выбранных нами элементов, переопределяя их свойства – размеры, цвет, бордюры, поля, положение на экране и т.д. Основная часть этого справочника состоит именно в описании этих свойств и их возможных значений.
Селекторы
Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.
Вот три основных вида селекторов.
HTML селекторы
Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
Code
strong {font-weight: normal; color: red;}
h1 { font: bold 10pt verdana; }
Селекторы класса
«Класс» - это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:
Code
.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */
ID селекторы (или идентификаторы)
Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:
Code
#myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */
Как применить один стиль к нескольким селекторам
Очень распространённая задача – применить один набор правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через запятую:
Впоследствии оформление для селекторов можно переопределить индивидуально:
Code
/* все параграфы и списки делаем красными, шрифтом Tahoma */
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/* переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}
Селекторы, зависящие от контекста
Мы научились устанавливать стили для элементов HTML независимо от того, где именно в документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors). Вот, посмотрите:
Code
/* все ссылки, находящиеся внутри списков, станут красными: */
li a {color: red;}
/* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}
Это самый распространённый метод создания контекстуальных селекторов, который называется «селектором потомков». Разберём его подробнее. Селекторы потомков
«Потомками» элемента HTML называются любые вложенные в него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.
Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.
В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт). Селекторы детей
«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).
CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.
В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.
Селекторы смежных элементов (Adjacent Sibling Selectors)
Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS
Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это
) – то селектор не сработает и правило не применится.
Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
Продолжение следует
Обзор свойств CSS
Сейчас опираемся на актуальную сейчас спецификацию CSS 2.1, соответственно, приведенный ниже список css-свойств ограничен рамками спецификации.
Основные свойства
Список базовых свойств, которые должен знать даже начинающий веб-мастер:
Code
margin, padding, border, background-color, color, font-family, font-size, float
Фон
background
Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.
background-attachment
Устанавливает, должна ли фоновая картинка скролиться или должна быть зафиксирована в окне браузера.
background-color
Устанавливает цвет фона для элемента.
background-image
Устанавливает фоновую картинку для элемента.
background-position
Устанавливает первоначальное положение для фоновой картинки.
background-repeat
Управляет циклическим повторением фоновой картинки.
Рамка (граница, бордюр)
Влияют на все четыре рамки
border
Краткий вариант записи для свойств border-width, border-style и border-color. Влияет на все четыре границы элемента.
border-color
Устанавливает цвет рамки со всех сторон элемента.
border-width
Устанавливает толщину рамки со всех сторон элемента.
border-style
Определяет стиль оформления рамки вокруг элемента.
border-collapse
Указывает ячейкам таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.
border-spacing
Устанавливает расстояние между ячейками таблицы.
Верхняя рамка
border-top
Краткий вариант доступа к свойствам border-top-width, border-top-style и border-top-color.
border-top-color
Устанавливает цвет верхнего бордюра.
border-top-style
Устанавливает стиль линии верхнего бордюра.
border-top-width
Устанавливает ширину верхнего бордюра.
Нижняя рамка
border-bottom
Краткий вариант доступа к свойствам border-bottom-width, border-bottom-style и border-bottom-color.
border-bottom-color
Устанавливает цвет нижнего бордюра.
border-bottom-style
Устанавливает стиль линии нижнего бордюра.
border-bottom-width
Устанавливает ширину нижнего бордюра.
Левая рамка
border-left
Краткий вариант доступа к свойствам border-left-width, border-left-style and border-left-color.
border-left-color
Устанавливает цвет левого бордюра.
border-left-style
Устанавливает стиль линии левого бордюра.
border-left-width
Устанавливает ширину левого бордюра.
Правая рамка
border-right
Краткий вариант доступа к свойствам volume, border-right-style и border-right-color.
border-right-color
Устанавливает цвет правого бордюра.
border-right-style
Устанавливает стиль линии правого бордюра.
volume
Устанавливает ширину правого бордюра.
Шрифт
font
Краткий вариант записи свойств font-style, font-variant, font-weight, font-size, line-height и font-family.
font-family
Определяет шрифт(ы) для отображения текста.
font-size
Управляет размером шрифта.
font-style
Управляет наклоном шрифта (курсив).
font-variant
Управляет внешним видом строчных букв (строчные как прописные, "капитель").
font-weight
Управляет толщиной (насыщенностью) шрифта.
Позиционирование
position
Определяет порядок, в соответствии с которым элемент отображается на веб-странице.
bottom
Сдвигает элемент относительно нижнего края. Используется совместно со свойством position.
left
Сдвигает элемент относительно левого края. Используется совместно со свойством position.
page-break-before
Сдвигает элемент относительно верхнего края. Используется совместно со свойством position.
right
Сдвигает элемент относительно правого края. Используется совместно со свойством position.
z-index
Определяет порядок, в соответствии с которым элементы накладываются друг на друга, если необходимо отобразить их на одном месте.
Форматирование
clear
Запрещает/разрешает элементу обтекать "floated" объекты.
clip
Определяет область элемента, которая должна отображаться на странице.
display
Изменяет базовые свойства элементов.
float
Сдвигает элемент к правому или левому краю.
height
Определяет высоту прямоугольной области вокруг элемента.
overflow
Определят как отображать блочный элемент в случае, если его содержимое выходит за рамки родительского элемента.
visibility
Управляет настройкой видимости элемента.
width
Определяет ширину прямоугольной области вокруг элемента.
Списки
list-style
позволяет одновременно задать три параметра для маркеров пунктов списка: list-style-type, list-style-position и/или list-style-image.
list-style-image
Устанавливает изображение, которое будет использоваться для маркировки пунктов списка.
list-style-position
Определяет, как отобразить на странице маркер пункта в списке: внутри того же прямоугольника, в котором располагается элемент списка или вне его.
list-style-type
Определяет, какой вид будет иметь маркер пункта в списке..
Текст
direction
Применяется при создании сайтов на языках, в которых чтение страницы идет справа налево.
letter-spacing
Определяет длину интервала между буквами.
page-break-inside
Определяет размер межстрочного интервала.
text-align
Выравнивает содержимое блочного элемента (текст или изображение) относительно границ блока, а так же содержимое ячеек таблицы по горизонтали.
text-decoration
Определяет, какой оформительский прием нужно применить к тексту.
text-indent
Определяет размер отступа первой строки в тексте.
text-transform
Управляет написанием прописных или строчных букв в тексте.
vertical-align
Определяет высоту содержимого внутри инлайн элемента или внутри ячейки таблицы.
white-space
Определяет как отображать пробелы, символы табуляции и пустой строки.
word-spacing
Определяет расстояние между словами.
[collapse collapsed]
Печать
widows
Позволяет избежать появления висячей строки.
orphans
Позволяет избежать появления одинокой первой строки.
page-break-after
Определяет наличие или отсутствие разрыва страницы после элемента при печати.
page-break-before
Определяет наличие или отсутствие разрыва страницы перед элементом при печати.
page-break-inside
Определяет наличие или отсутствие разрыва страницы внутри элемента при печати.
Поля
padding
Сокращенный способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left.
padding-bottom
Определяет ширину пространства между содержимым элемента и нижним бордюром.
padding-left
Определяет ширину пространства между содержимым элемента и левым бордюром.
padding-right
Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
padding-top
Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.
Прочее
caption-side
Определяет, где будет отображаться заголовок таблицы: над ней или под ней.
color
Устанавливает цвет текста элемента.
content
Применяется для того, чтобы вставить текст или изображение до или после какого-либо элемента.
counter-increment
Задает значения приращений счетчика.
counter-reset
Устанавливает идентификатор, который хранит счетчик отображений какого-либо элемента и устанавливает начальное значение этого счетчика.
cursor
Определяет вид курсора при наведении мышки на некий элемент.
empty-cells
Определяет, нужно ли отображать границы и фон ячейки, если в ней нет содержимого.
margin
Сокращенный способ задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left
margin-bottom
Определяет ширину внешнего пространства между нижним бордюром и невидимой границей прямоугольника.
margin-left
Определяет ширину внешнего пространства между левым бордюром и невидимой границей прямоугольника.
margin-right
Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
margin-top
Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.
max-height
Определяет максимальную высоту элемента.
max-width
Определяет максимальную ширину элемента.
min-height
Определяет минимальную высоту элемента.
min-width
Определяет минимальную ширину элемента.
outline
Это быстрый способ задать следующие параметры: outline-width, outline-style и/или outline-color.
outline-color
Определяет цвет контура вокруг элемента.
outline-style
Определяет вид контура вокруг элемента.
outline-width
Определяет ширину контура вокруг элемента.
quotes
Определяет вид открывающей и закрывающей кавычки в тексте.
table-layout
Определяет ширину столбцов в таблице.
Далее-я подробно распишу каждый элемент...
Cокращённые свойства CSS
Некоторые свойства CSS принято называть сокращениями или сокращёнными свойствами (shorthand property). Они предоставляют короткий, компактный способ записи для нескольких других, более узкоспециализированных свойств. Например, сокращённое свойство border управляет внешним видом рамки вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину рамки. Иначе для этого понадобились бы свойства border-width, border-style и border-color.
Список сокращённых свойств:
font - сокращенное свойство для свойств шрифта:
* font-style
* font-variant
* font-weight
* font-size
* line-height
* font-family
background - сокращенный вариант записи для свойств фона:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
margin - сокращенное свойство для управления внешними отступами:
* margin-top
* margin-right
* margin-bottom
* margin-left
padding - сокращенное свойство для управления внутренними отступами:
* padding-top
* padding-right
* padding-bottom
* padding-left
border - сокращенный вариант записи для свойств бордюра:
* border-width
* border-style
* border-color
