Язык таблиц стилей CSS

79 просмотров Время на прочтение: 3 минут(ы)

CSS (Cascading Style Sheets) — это язык таблиц стилей, который используется для оформления веб-страниц. Стиль состоит из селектора и объявления.

Селектором могут быть названия HTML элементов, классы и идентификаторы. Классы записываются в виде символа “.” и названия класса. У HTML элементов названия классов прописываются в атрибуте “class”. Идентификаторы записываются в виде символа “#” и идентификатора. У HTML элемента идентификатор прописывается в атрибуте “id”.

Объявление задаётся в фигурных скобках и состоит из описаний. Описание состоит из свойства, символа “:”, значения и символа “;”.

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

Пример 1

Для HTML элементов описания стиля может быть указано в атрибуте “style”. В примере указаны описания стиля для элемента “div”. Свойство “color” определяет цвет элемента. Значение этого свойства “red” задаёт красный цвет. Свойство “text-align” определяет выравнивание элемента. Значение “center” выравнивает содержимое элемента по центру.

Пример 2

Здесь используется внутренняя таблица стилей. Она задаётся HTML элементом “style”, который помещён в элемент “head”.

Для элемента “h1” указаны красный цвет и выравнивание по центру как в предыдущем примере.

Элемент “div” имеет атрибут идентификатора “id” со значением “par”. Значение “green” свойства “color” для этого идентификатора задаёт зелёный цвет. Свойства “width” и “height” указывает ширину и высоту элемента. В данном случае ширина равна 200 пикселов, а высота – 100 пикселов.

Элементы “span” имеют атрибуты “class” со значением “im”. Для этого значения устанавливается синий цвет. Также для этого значения имеется свойство “font-weight”, задающее жирность шрифта (толщину очертания символов). Значение этого свойства “bold” даёт жирный шрифт (толстые очертания символов).

Пример 3

Результат этого примера такой же как предыдущего. Для задания синего цвета и жирного шрифта HTML элементов “span” используется комбинированный селектор “#par span”, который действует на все элементы “span” внутри элемента с идентификатором “par”.

Пример 4

Результат этого примера такой же как предыдущего. Первый код находится в файле “style.css”, второй – в файле “index.html”. Первый код является внешней таблицей стилей. Этот код связывается с веб-страницей через HTML элемент “link”, который находится в элементе “head”. Атрибуты “rel” и “type” элемента “link” с данными значениями указывают, что с веб-страницей связывается внешняя таблица стилей. Значение атрибута “href” содержит адрес этой таблицы.

РубрикиCSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru