основы CSS
.pdf
CSS - каскадные таблицы стилей
Каскадные таблицы стилей (CSS – Cascading Style Sheets) – мощный
механизм управления представлением отдельных элементов или их наборов.Используется при формировании представления HTML документа.
Структура документа
HTML документ - структурированный документы , строятся на основании иерархии элементов, которую можно показать в форме древовидного представления документа . В этой иерархии каждый элемент тем или иным образом вписывается в общую структуру документа. Каждый элемент является или родительским (parent), или дочерним (child) элементом другого элемента, а зачастую выполняет обе эти роли.
Терминология
Селектором называется имя стилей, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, классы и идентификаторы.
Селекторы тегов используются для определения стилей встроенных тегов HTML. Для тега определяются правила форматирования, такие как цвет, фон, размер и др. После того, как стиль тега переопределен, можно использовать данный тег как обычно, но при этом его вид будет уже другим.
Классы используются для создания стилей, которые можно применять к любому тегу HTML, для выделений или изменения стиля блока текста; они обозначаются точкой перед именем. Обращение к селектору класса происходит через параметр class, значением которого выступает имя класса без точки.
Идентификаторы обычно используются совместно с клиентскими программами, чтобы через них можно было динамически управлять параметрами стиля; для определения того, что это идентификатор, к имени Добавляется символ решетки. Стиль любого тега можно связать с идентификатором, если к тегу добавить параметр id с указанием имени идентификатора без сим-вола решетки.
Пример
<style type="text/css">
h2 {color: gray} // селектор тега
.inverse { background: black; color: white; } // класс #cursive { font-style:italic } // идентификатор
</style>
<html>
<body>
<h2> День свободы!! </h2>
<span class= inverse> Сегодня бвгджза-бвгджзи- бвгджзо....... <span>
<span id=cursive> Призидент Клара <span> </body>
</html>
Подключаем CSS
Тег style – включения таблиц стилей и располагается он внутри <head>:
<style type="text/css"> </style>
Тег link связывает таблицы стилей с документом: <link rel="stylesheet" type="text/css" href="sheet1.css" >
Структура правила
Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block). Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет со бой сочетание свойства (property) и значения (value). Каждая таблица стилей образуется из наборов правил.
Группировка селекторов
/* группа 2 */
h1, h2, h4 {color: silver;}
h2, h3 {background: gray;}
h1, h4, b {background: white;}
h3 {color: white;} b {color: gray;}
h1, h2, h3, h4, h5, h6 { color: gray; background: white; padding: 0.5em;
border: 1px solid black; font-family: Charcoal, 'sans serif'; }
Группировка объявлений
Селекторы можно группировать в одно правило а следовательно, так же можно группировать и объявления.
h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}
h1 {
font: 18px Helvetica; color: purple;
background: aqua;
}
Универсальный селектор
Этот селектор соответствует любому элементу почти так же, как подстановочный символ в маске имени файла. Например, чтобы сделать все элементы документа красными, можно написать:
* {color: red;}
Селекторы класса
*.warning {font-weight: bold;}
Данный стиль font-weight: bold будет применен ко всем элементам (благодаря наличию универсального селектора), атрибут class которых имеет значение warning.
Точка (.) помогает отделить селектор класса от всего, с чем он может быть объединен, например от селектора элемента. Скажем, вам захотелось выделять полужирным шрифтом текст только в том случае, если предупреждением является весь абзац:
p.warning {font-weight: bold;}