Sa_Bo_Nim все записи автора

Каскадные таблицы стилей (Cascading Style Sheets, сокращенно CSS) - это технология, разработанная для форматирования html документов и придания им определенного стиля (положение элементов на экране, цвет текста, величина отступа абзаца и многое другое). Фактически, каскадные таблицы стилей представляют собой набор правил, в соответствии с которыми происходит форматирование текста и элементов на экране. Правила хранятся либо в самом html документе, либо в отдельном текстовом файле, имеющем, как правило, разрешение css. Создавать эти файлы можно даже в Блокноте (Notepad).

К наиболее ярко выраженным достоинствам каскадных таблиц стилей относятся следующие:

1. Возможность одновременного применения одной и той же каскадной таблицы к большому числу html документов. Это может существенно увеличить эффективность создания новых стилей, т.к. для этого требуется изменить всего лишь один файл.

2. Разделение информации на две части: собственно html код и таблица стилей. Во многих случаях это позволяет существенно уменьшить размеры файлов, т.к. информация о стилях всех страниц хранится в одном файле, а не во всех html документах.

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

Указанные выше преимущества CSS во многом определили их широкое применение в глобальной сети в настоящее время.

 

Синтаксис таблиц стилей

Каждое объявление в CSS записывается в следующем виде:

ТЕГ {свойство: значение}

Эта запись дает браузеру команду присвоить содержимому данного ТЕГа определенное значение, указанного свойства.

В том случае, если мы хотим описать в объявлении несколько свойств, достаточно разделить их точкой с запятой:

ТЕГ {свойство_1: значение_1; свойство_2: значение_2}

Одно и то же свойство или свойства можно присвоить сразу нескольким тегам. Для этого достаточно разделить их в объявлении запятыми:

ТЕГ_1, ТЕГ_2, ТЕГ_3 {свойство_1: значение_1; свойство_2: значение_2}

Вот реальный пример использования CSS:

H4, H3 {color: red; font-family: Courier}

Текст, заключенный в теги H4 и H3, будет написан красным цветом шрифтом Courier.

Ниже рассмотрены основные свойства, описываемые в таблицах стилей.

Color - цвет
Это свойство определяет цвет содержимого тега, для которого он указан. Цвет указывается либо в формате RGB, либо одним из стандартных названий: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Пример:

BODY {color: black}   или   BODY {color: #000000}

Font-family - семейство шрифта
Это свойство устанавливает шрифт, которым будет выведен текст. Наиболее часто используются шрифты Arial, Courier и Times New Roman. Это объясняется тем, что при загрузке страницы с таблицей стилей пользователь увидит текст, указанным в таблице стилей шрифтом, только в том случае, если этот шрифт установлен у него на компьютере. Arial, Courier и Times New Roman, как правило, установлены.
Пример:

P {font-family: Arial}

Font-size - размер шрифта
Указывается размер шрифта в пунктах (pt), пикселях (px), дюймах (in) или сантиметрах (cm).
Пример:

EM {font-size: 14pt}

Text-decoration - "украшение" текста
Cуществуют пять основных значений свойства text-decoration. Это - underline (подчеркивание), line-through (зачеркивание), overline (линия над строкой), blink (мигание) и none (отсутствие "украшения" текста).
Пример:

H2 {text-decoration: underline}

Text-indent - отступ в первой строке элемента
Отступ указывается в тех же единицах, что и размер шрифта, т.е. пунктах, пикселях, дюймах или сантиметрах.
Пример:

P {text-indent: 3in}

Text-align - выравнивание текста на экране
Вы можете выбрать один из четырех стилей выравнивания: left (по левому краю), right (по правому краю), center (по центру) или justify (по левому и по правому краю одновременно).
Пример:

P {text-align: justify}

Margin-left - отступ слева
Существуют также свойства margin-right - отступ справа, margin-top - отступ сверху и margin-bottom - отступ снизу. Значения всех этих свойств указываются в пунктах, пикселях, дюймах или сантиметрах.
Пример:

H2 {margin-top: 100px}

В таблицах стилей существует еще много других свойств, однако, это тема отдельной статьи.

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

Пусть тег P описывается в таблице стилей так:

P {color: green}

и пусть в html файле есть такая строка:

<P>это очень <B>важно</B></P>

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

это очень важно

Это и есть наследование. Тег B унаследовал свойство родительского тега P, т.е. зеленый цвет.

Изменить наследование можно воспользовавшись контекстным селектором. Например так:

 

P B {color: maroon}

Эта конструкция позволяет установить красно-коричневый цвет содержимого тега B, но только для того случая, когда он находится внутри тега P:

это очень важно

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

H1 {font-family: Arial; font-size: 14pt; color: black}
H1.gray {color: #909090}

Здесь мы описали свойства тега H1 и тут же создали его класс gray. Воспользоваться созданным классом можно указав его внутри тега:

<H1 class=gray>

Текст, заключенный в тег H1 с указанием класса будет серого цвета, в то время как без указания - черного.

Для создания класса безотносительно к тегу, достаточно просто не указывать название тега в объявлении класса:

.olive {color: olive}

Теперь класс blue можно использовать для любого тега.

Часто классы используют вместе с тегом DIV. Этот тег никак не форматирует текст, а только выделяет в файле объект. Все, что находится в теге DIV воспринимается браузером как один объект. Например такую запись

<DIV class=olive><B>это</B> очень <EM>важно</EM></DIV>

браузер должен вывести так:

это очень важно