применить к любым HTML-тегам, чтобы потом ссылаться на них по

имени класса.
В качестве имени класса можго использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:

Селекторы

.myClass { font: bold 10pt verdana; }
/* меняем шрифт для всех тегов с классом myClass */

которое вы, так же, как и в случае с классами,

можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:

Селекторы

#myObj { margin: 1em; }
/* изменяем поля для элемента, у которого id=”myObj” */
span#today { margin: 1em; }
/*изменяем поля для элемента span, у которого id=”today” */

один набор правил к нескольким разным селекторам. Это делается элементарно

– достаточно перечислить селекторы через запятую:
Впоследствии оформление для селекторов можно переопределить индивидуально:

Селекторы

/*все параграфы и списки делаем красными, шрифтом Tahoma*/
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/*переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}

независимо от того, где именно в документе они расположены.
Но

CSS более гибок. Мы можем определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).
Например:
/* все ссылки, находящиеся внутри списков, станут красными: */
li a {color: red;}
/* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}
Это распространённый метод создания контекстуальных селекторов. Он называется «селектором потомков».

Селекторы

это его «дети» (то есть непосредственно вложенные), дети его детей,

и так далее, вглубь иерархии тегов.
Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.

Селекторы

Здесь мы вроде бы создали список селекторов, разделённый пробелами. Но это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы li), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).

в него элементы. Он для них является «родительским» элементом. Элементы,

находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки».
CSS позволяет создавать селектор для выбора дочерних элементов любого элемента и менять их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.

Селекторы

Здесь мы находим все элементы b, вложенные непосредственно в элементы i, и выключаем для них полужирный шрифт. Остальные элементы B в документе останутся без изменений.

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

все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:

Селекторы

Здесь будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один – то селектор не сработает и правило не применится.
Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, не во всех браузерах.
В Internet Explorer они появились только с 7-й версии.

padding, border, background-color, color, font-family, font-size, float
Фон (background)
Сокращенный вариант записи

для свойств:
background-color, background-image, background-repeat, background-attachment, background-position.
Background-color - Устанавливает цвет фона для элемента.
Background-image - Устанавливает фоновую картинку для элемента.
Background-position - Устанавливает первоначальное положение для фоновой картинки.
Background-repeat - Управляет циклическим повторением фоновой картинки.

Свойства CSS

и border-color. Влияет на все четыре границы элемента.
Border-color. Устанавливает цвет

рамки со всех сторон элемента.
Border-width. Устанавливает толщину рамки со всех сторон элемента.
Border-style. Определяет стиль оформления рамки вокруг элемента.
Border-collapse. Указывает ячейкам таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.
Border-spacing. Устанавливает расстояние между ячейками таблицы.

Свойства CSS

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. Устанавливает ширину нижнего бордюра.

Свойства CSS

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. Устанавливает ширину правого бордюра.

Свойства CSS

и font-family.
Font-family. Определяет шрифт(ы) для отображения текста.
Font-size. Управляет

размером шрифта.
Font-style. Управляет наклоном шрифта (курсив).
Font-variant. Управляет внешним видом строчных букв (строчные как прописные, "капитель").
Font-weight. Управляет толщиной (насыщенностью) шрифта.

Свойства CSS

веб-странице.
Bottom. Сдвигает элемент относительно нижнего края. Используется совместно со свойством

position.
Left. Сдвигает элемент относительно левого края. Используется совместно со свойством position.
Page-break-before. Сдвигает элемент относительно верхнего края. Используется совместно со свойством position.
Right. Сдвигает элемент относительно правого края. Используется совместно со свойством position.
Z-index. Определяет порядок, в соответствии с которым элементы накладываются друг на друга, если необходимо отобразить их на одном месте.

Свойства CSS

элемента, которая должна отображаться на странице.
Display. Изменяет базовые свойства

элементов.
Float. Сдвигает элемент к правому или левому краю.
Height. Определяет высоту прямоугольной области вокруг элемента.
Overflow. Определят как отображать блочный элемент в случае, если его содержимое выходит за рамки родительского элемента.
Visibility. Управляет настройкой видимости элемента.
Width. Определяет ширину прямоугольной области вокруг элемента.

Свойства CSS

списка: list-style-type, list-style-position и/или list-style-image.
List-style-image. Устанавливает изображение, которое будет использоваться

для маркировки пунктов списка.
List-style-position. Определяет, как отобразить на странице маркер пункта в списке: внутри того же прямоугольника, в котором располагается элемент списка или вне его.
List-style-type. Определяет, какой вид будет иметь маркер пункта в списке..

Свойства CSS

страницы идет справа налево.
Letter-spacing. Определяет длину интервала между буквами.
Page-break-inside. Определяет

размер межстрочного интервала.
Text-align. Выравнивает содержимое блочного элемента (текст или изображение) относительно границ блока, а так же содержимое ячеек таблицы по горизонтали.
Text-decoration. Определяет, какой оформительский прием нужно применить к тексту.
Text-indent. Определяет размер отступа первой строки в тексте.
Text-transform. Управляет написанием прописных или строчных букв в тексте.

Свойства CSS

таблицы.
White-space. Определяет как отображать пробелы, символы табуляции и пустой строки.
Word-spacing.

Определяет расстояние между словами.

Свойства CSS

первой строки.
Page-break-after. Определяет наличие или отсутствие разрыва страницы после элемента

при печати.
Page-break-before. Определяет наличие или отсутствие разрыва страницы перед элементом при печати.
Page-break-inside. Определяет наличие или отсутствие разрыва страницы внутри элемента при печати.

Свойства CSS

padding-left.
Padding-bottom. Определяет ширину пространства между содержимым элемента и нижним бордюром.
Padding-left.

Определяет ширину пространства между содержимым элемента и левым бордюром.
Padding-right. Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
Padding-top. Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.

Свойства CSS

под ней.
Color. Устанавливает цвет текста элемента.
Content. Применяется для того, чтобы

вставить текст или изображение до или после какого-либо элемента.
Counter-increment. Задает значения приращений счетчика.
Counter-reset. Устанавливает идентификатор, который хранит счетчик отображений какого-либо элемента и устанавливает начальное значение этого счетчика.
Cursor. Определяет вид курсора при наведении мышки на некий элемент.
Empty-cells. Определяет, нужно ли отображать границы и фон ячейки, если в ней нет содержимого.

Свойства CSS

margin-left
Margin-bottom. Определяет ширину внешнего пространства между нижним бордюром и невидимой

границей прямоугольника.
Margin-left. Определяет ширину внешнего пространства между левым бордюром и невидимой границей прямоугольника.
Margin-right. Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника.
Margin-top. Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.
max-height.Определяет максимальную высоту элемента.
Max-width. Определяет максимальную ширину элемента.

Свойства CSS

быстрый способ задать следующие параметры: outline-width, outline-style и/или outline-color.
Outline-color. Определяет

цвет контура вокруг элемента.
Outline-style. Определяет вид контура вокруг элемента.
Outline-width. Определяет ширину контура вокруг элемента.
Quotes. Определяет вид открывающей и закрывающей кавычки в тексте.
Table-layout. Определяет ширину столбцов в таблице.

Сокращенные свойства CSS

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

более узкоспециализированных свойств. Например, сокращённое свойство border управляет внешним видом рамки вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину рамки. Иначе для этого понадобились бы свойства border-width, border-style и border-color. Список сокращённых свойств:
font - сокращенное свойство для свойств шрифта:
font-style
font-variant
font-weight
font-size
line-height
font-family

Сокращенные свойства CSS

свойство для управления внешними отступами:
margin-top
margin-right
margin-bottom
margin-left



Сокращенные свойства CSS

вариант записи для свойств бордюра:
border-width
border-style
border-color


Сокращенные свойства CSS

десятичные дроби, дробная часть пишется через знак «.» (точка).
Сразу после

числа необходимо указать единицу измерения.
Существует множество единиц измерения.
em. Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.
ex. Высота буквы x в настоящем шрифте. Применяется аналогично em.
px. Размер в пикселах.
in. Размер в дюймах. Один дюйм = 2.54 сантиметра.
cm. Размер в сантиметрах.
mm. Размер в миллиметрах.
pt. Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).
pc. Размер в пиках. (12 пунктов).

Задание размеров (длина, ширина) в CSS

3em}
blockquote {padding-bottom: 2ex}
table {border-width: 7.5pc}



Задание размеров (длина, ширина) в CSS

использует CSS, чтобы принудить браузер определенным образом оформить и отобразить

содержимое элементов, превратив его в красиво оформленный документ.
Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model («блочная» или «коробочная» модель).
Предположим, мы имеем на входе:
Какой-то контент

Блочная модель (Box Model)

имеют нулевую толщину и не видны.
Благодаря CSS мы можем переопределить

характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
Собственно, содержимое элемента (контент)
Бордюр (рамка, англ. «border»)
Пространство между содержимым элемента и бордюром (англ. «padding»).
Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. «margin»).
Существует два типа элементов - блочные («block») и внутритекстовые («inline», можно называть как «встроенные»).

Блочная модель (Box Model)

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

элементом - всякий следующий за ним элемент будет отображен ниже.
Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу «block», а какой - к «inline». Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.

- значение приписать объявление !important, тогда это значение CSS-свойства получит

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




Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.

Приоритет в каскаде стилей (!important)

англоязычные названия цветов, например blue или red (см. Именованные цвета).
В

шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).
В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

Задание цвета в CSS

{color: rgb(0,255,0)}
p {color: #0f0}
p {color: #00ff00}
p {color: rgb(0%, 100%, 0%)}
В

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

Задание цвета в CSS

цвета, записанные в шестнадцатеричном формате
#FF9966.