Каскадные таблицы стилей (Cascading Style Sheets, CSS) - способ оформления страниц HTML, позволяющий с помощью параметров стиля определить отображение содержимого тега. Основные параметры стилей:
border - рамка вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (обычно пикселях: 1px), стиль границы (сплошная solid, точечная dotted, штриховая dashed, отсутствующая none), цвет границы (название цвета или RGB-код цвета).
color - цвет текста. Возможные значения: название цвета (black, red, green, yellow) или RGB-код цвета (#00fac3).
display - показ содержимого тега. Возможные значения: inline (содержимое тега отображается); none (содержимое тега не отображается и место на экране не резервируется).
font-family - шрифт текста. Возможные значения: название шрифта (Arial, Times New Roman) или название семейства шрифтов (Times, Courier).
font-size - размер шрифта. Возможные значения: размер шрифта в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px), в абсолютных единицах (small, medium, large), в относительных единицах (smaller, larger).
font-weight - полужирное начертание шрифта. Возможные значения: normal или bold.
font-style - курсивное начертание шрифта. Возможные значения: normal или italic.
left - отступ слева содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
margin - граница вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
padding - отступ между содержимым тега и рамкой вокруг содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
position - тип позиционирования содержимого тега. Возможные значения: absolute (абсолютное позиционирование на экране с использованием параметров стиля top и left), relative (относительное позиционирование согласно обычным правилам HTML), static (какое-либо специальное позиционирование отсутствует и содержимое тега размещается согласно обычным правилам HTML).
text-align - выравнивание абзаца текста. Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).
top - отступ сверху содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселях: 12px).
Предусмотрено три различных способа определения стилей:
внешние таблицы стилей для нескольких страниц - определение стилей размещается в отдельном текстовом файле с расширением css. Применяется для стилей, используемых на нескольких страницах. Структура файла с таблицей стилей:
<style type="text/css">
определение стилей
</style>
Определить стиль можно следующим образом:
указав параметры стиля для требуемого тега;
тег {параметр: значение; параметр: значение;}
указав параметры стиля для стилевого класса;
.класс {параметр: значение; параметр: значение;}
указав параметры стиля для идентификатора стиля;
#идентификатор {параметр: значение; параметр: значение;}
Для использования в странице HTML внешнего файла таблицы стилей необходимо применить в заголовке страницы тег <link>:
Применение стиля на странице HTML зависит от того, каким образом стиль был определен:
если параметры стиля были указаны для определенного тега, то никаких изменений на странице HTML делать не нужно;
если параметры стиля были указаны для стилевого класса, то для применения стиля к требуемому тегу на странице необходимо присвоить атрибуту class значение, равное имени стилевого класса;
<тег class=класс>
если параметры стиля были указаны для идентификатора стиля, то для применения стиля к требуемому тегу на странице необходимо присвоить атрибуту id значение, равное имени идентификатора стиля (идентификатор стиля рекомендуется использовать на странице только в одном теге);
<тег id=идентификатор>
встраивание таблиц стилей в страницу HTML - определение стилей прописывается в заголовке страницы в парном теге <style>. Применяется для стилей, используемых только на данной странице.
<head>
<style type="text/css">
определение стилей
</style>
</head>
Определение и применение стилей аналогично использованию внешних таблиц стилей.
встраивание стилей в теги HTML - определение стиля прописывается в атрибуте style какого-либо тега. Применяется для стилей, используемых только для данного тега на странице. Встраивание стилей в теги HTML записывается следующим образом:
