CSS (Cascading Style Sheets) — это язык таблиц стилей, который используется для оформления веб-страниц. Стиль состоит из селектора и объявления.
Селектором могут быть названия HTML элементов, классы и идентификаторы. Классы записываются в виде символа “.” и названия класса. У HTML элементов названия классов прописываются в атрибуте “class”. Идентификаторы записываются в виде символа “#” и идентификатора. У HTML элемента идентификатор прописывается в атрибуте “id”.
Объявление задаётся в фигурных скобках и состоит из описаний. Описание состоит из свойства, символа “:”, значения и символа “;”.
Также могут быть комбинированные селекторы, которые состоят из двух и более обычных селекторов, записанных через пробел. В этом случае считается, что HTML элементы соответствующие более правым селекторам содержаться в HTML элементах соответствующие более левым и к ним применяются объявленные стили.
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <div style="color: red; text-align: center;"> Привет, мир! </div> </body> </html> |
Для HTML элементов описания стиля может быть указано в атрибуте “style”. В примере указаны описания стиля для элемента “div”. Свойство “color” определяет цвет элемента. Значение этого свойства “red” задаёт красный цвет. Свойство “text-align” определяет выравнивание элемента. Значение “center” выравнивает содержимое элемента по центру.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> h1 { color: red; text-align: center; } #par { color: green; width: 200px; height: 100px; } .im { color: blue; font-weight: bold; } </style> </head> <body> <h1>Магазин мебели</h1> <div id="par"> В нашем магазине Вы можете купить: <span class="im">столы</span>, <span class="im">стулья</span>, <span class="im">шкафы</span> и многое другое. </div> </body> </html> |
Здесь используется внутренняя таблица стилей. Она задаётся HTML элементом “style”, который помещён в элемент “head”.
Для элемента “h1” указаны красный цвет и выравнивание по центру как в предыдущем примере.
Элемент “div” имеет атрибут идентификатора “id” со значением “par”. Значение “green” свойства “color” для этого идентификатора задаёт зелёный цвет. Свойства “width” и “height” указывает ширину и высоту элемента. В данном случае ширина равна 200 пикселов, а высота – 100 пикселов.
Элементы “span” имеют атрибуты “class” со значением “im”. Для этого значения устанавливается синий цвет. Также для этого значения имеется свойство “font-weight”, задающее жирность шрифта (толщину очертания символов). Значение этого свойства “bold” даёт жирный шрифт (толстые очертания символов).
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> h1 { color: red; text-align: center; } #par { color: green; width: 200px; height: 100px; } #par span { color: blue; font-weight: bold; } </style> </head> <body> <h1>Магазин мебели</h1> <div id="par"> В нашем магазине Вы можете купить: <span>столы</span>, <span>стулья</span>, <span>шкафы</span> и многое другое. </div> </body> </html> |
Результат этого примера такой же как предыдущего. Для задания синего цвета и жирного шрифта HTML элементов “span” используется комбинированный селектор “#par span”, который действует на все элементы “span” внутри элемента с идентификатором “par”.
Пример 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h1 { color: red; text-align: center; } #par { color: green; width: 200px; height: 100px; } #par span { color: blue; font-weight: bold; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>Магазин мебели</h1> <div id="par"> В нашем магазине Вы можете купить: <span>столы</span>, <span>стулья</span>, <span>шкафы</span> и многое другое. </div> </body> </html> |
Результат этого примера такой же как предыдущего. Первый код находится в файле “style.css”, второй – в файле “index.html”. Первый код является внешней таблицей стилей. Этот код связывается с веб-страницей через HTML элемент “link”, который находится в элементе “head”. Атрибуты “rel” и “type” элемента “link” с данными значениями указывают, что с веб-страницей связывается внешняя таблица стилей. Значение атрибута “href” содержит адрес этой таблицы.
