Свойства CSS

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

Я всегда мечтал о том, чтобы моим компьютером можно было пользоваться так же легко, как телефоном;
моя мечта сбылась: я уже не могу разобраться, как пользоваться моим телефоном.
Bjarne Stroustrup

 

Для включения стилей в html-документ применяются — каскадные таблицы стилей CSS (Cascading Style Sheet), с их возможностями значительно упрощается разработка web-страниц и управление полученным сайтом. В этом разделе кратко описаны некоторые часто применяемые свойства стилевых таблиц.

Как и все компьютерные языки, CSS имеет свой синтаксис, по которым создаются таблицы стилей. CSS отличается от HTML тем, что у первого нет элементов, атрибутов и тегов, а только строго определенный синтаксис или правило, которое и описывает внешний вид одного или группы элементов HTML. Иными словами правило определяет (задает), как будет выглядеть определенный элемент.

Правило, обязательно, состоит из селектора (в примере ниже это — H1) и блока объявления стилей, заключенного в фигурные скобки. Объявление так же состоит из свойства (COLOR) и его значения (Limegreen).
h1 {color: Limegreen}
Правило может содержать несколько объявлений, разделенных точкой с запятой. Для удобства чтения и редактирования правила записывают так, чтобы каждое объявление начиналось с отдельной строки.
h1 {color: Limegreen;
font-family: Verdana;
font-size: 16pх}
Но и записанное в одну строку, будет воспринято точно так же.
h1 {color: Limegreen; font-family: Verdana; font-size: 16pх}
Данное правило определяет для заголовка H1 цвет — color:Limegreen, наименование шрифта — font-family:Verdana и размер шрифта — font-size:16pх.

Это правило можно записать и так:
h1 {color: #32CD32; font: normal 16pх Verdana}
Но о стенографических свойствах — далее.
Включение CSS в HTML
Для включения CSS в html-документ используется элемент META, который задает служебную информацию и располагается внутри элемента HEAD.

В примере, атрибут http-equiv=»Content-Style-Type» указывает, что элемент META относится к таблице стилей, а атрибут content=»text/css» задает, что таблицы стилей написаны на языке CSS. Таблицы стилей могут быть внутренними, встроенными и внешними.

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

 
Свойства CSS
Браузер покажет:
Свойства CSS
 

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

H1 {color: red}

 

Внешними таблицами стилей являются те, которые помещены в отдельный файл с расширением .css и прикреплены к web-странице при помощи элемента LINK, который так же располагается внутри элемента HEAD.

 

Атрибут HREF задает URL таблицы, а REL указывает отношение подключаемого файла к документу. При добавлении основной таблицы стилей используется значение STYLESHEET.

Думаю теперь можно перейти к самому интересному — к изучению свойств CSS и их применению.
Свойства CSS
Все свойства CSS можно разделить на несколько групп:

Цвет и фон
 

Свойство COLOR
Свойство BACKGROUND-COLOR
Свойство BACKGROUND-IMAGE
Свойство BACKGROUND-REPEAT
Свойство BACKGROUND-ATTACHMENT
Свойство BACKGROUND-POSITION
Свойство BACKGROUND

 

Шрифт
 

Свойство FONT-FAMILY
Свойство FONT-STYLE
Свойство FONT-VARIANT
Свойство FONT-WEIGHT
Свойство FONT-SIZE
Свойство FONT

 

Текст
 

Свойство TEXT-DECORATION
Свойство TEXT-ALIGN
Свойство TEXT-INDENT
Свойство TEXT-TRANSFORM
Свойство VERTICAL-ALIGN

 

Интервалы
 

Свойство WORD-SPACING
Свойство LETTER-SPACING
Свойство LINE-HEIGHT

 

Списки
 

Свойство LIST-STYLE-TYPE
Свойство LIST-STYLE-IMAGE
Свойство LIST-STYLE-POSITION
Свойство LIST-STYLE

 

Блоки
 

Поля. Свойства MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT
Свойство MARGIN
Границы. Свойства BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH
Свойство BORDER-WIDTH
Свойство BORDER-COLOR
Свойства BORDER-STYLE
Свойства BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT
Свойство BORDER
Отступы. Свойства PADDING-TOP, PADDING-RIGHT, PADDING-BOTTOM, PADDING-LEFT
Свойство PADDING