Основы CSS
CSS (Cascading Style Sheets), или каскадные таблицы стилей,
используются для описания внешнего вида документа, написанного языком разметки.
Обычно CSS-стили используются для создания и изменения стиля элементов
веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML,
но также могут быть применены к любому виду XML-документа, в том числе XML, SVG
и XUL.
Каскадные таблицы стилей описывают правила форматирования
элементов с помощью свойств и допустимых значений этих свойств. Для каждого
элемента можно использовать ограниченный набор свойств, остальные свойства не
будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: элемента
веб-страницы — селектора, и команды форматирования — блока
объявления. Селектор сообщает браузеру, какой именно элемент форматировать, а в
блоке объявления (код в фигурных скобках) перечисляются форматирующие команды —
свойства и их значения.
 |
| СТРУКТУРА ОБЪЯВЛЕНИЯ CSS-СТИЛЯ |
Виды таблиц стилей
Внешняя таблица стилей
Внешняя таблица стилей представляет собой текстовый
файл с расширением .css, в котором находится набор CSS-стилей элементов.
Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут
содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается
к веб-странице с помощью тега <link>, расположенного внутри
раздела <head></head>. Такие стили работают для всех страниц
сайта.
К каждой веб-странице можно присоединить несколько таблиц
стилей, добавляя последовательно несколько тегов <link>, указав в
атрибуте тега media назначение данной таблицы
стилей. rel="stylesheet" указывает тип ссылки (ссылка на
таблицу стилей).
<head>
<link rel="stylesheet"
href="css/style.css">
<link rel="stylesheet"
href="css/assets.css" media="all">
</head>
Атрибут type="text/css" не является
обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут
отсутствует, по умолчанию используется значение type="text/css".
Внутренние стили
Внутренние стили встраиваются в
раздел <head></head> HTML-документа и определяются внутри
тега <style></style>. Внутренние стили имеют приоритет над
внешними, но уступают встроенным стилям (заданным через атрибут style).
<head>
<style>
h1,
h2 {
color: red;
font-family: "Times New Roman", Georgia, Serif;
line-height: 1.3em;
}
</style>
</head>
<body>
...
</body>
Встроенные стили
Когда мы пишем встроенные стили, мы пишем CSS-код в
HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:
<p style="font-weight: bold; color:
red;">Обратите внимание на этот текст.</p>
Такие стили действуют только на тот элемент, для которого
они заданы.
Правило @import
Правило @import позволяет загружать внешние
таблицы стилей. Чтобы директива @import работала, она должна
располагаться в таблице стилей (внешней или внутренней) перед всеми остальными
правилами:
<style>
@import url(mobile.css);
p {
font-size: 0.9em;
color: grey;
}
</style>
Правило @import также используется для подключения
веб-шрифтов:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
Виды селекторов
Селекторы представляют структуру веб-страницы. С их
помощью создаются правила для форматирования элементов веб-страницы.
Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы
и псевдоэлементы.
Универсальный селектор
Соответствует любому HTML-элементу. Например, *
{margin: 0;} обнулит внешние отступы для всех элементов сайта. Также
селектор может использоваться в комбинации с псевдоклассом или
псевдоэлементом: *:after {CSS-стили}, *:checked {CSS-стили}.
Селектор элемента
Селекторы элементов позволяют форматировать все элементы
данного типа на всех страницах сайта. Например, h1 {font-family: Lobster,
cursive;} задаст общий стиль форматирования всех заголовков h1.
Селектор класса
Селекторы класса позволяют задавать стили для одного и более
элементов с одинаковым именем класса, размещенных в разных местах страницы или
на разных страницах сайта. Например, для создания заголовка с
классом headline необходимо добавить атрибут class со
значением headline в открывающий тег <h1> и задать
стиль для указанного класса. Стили, созданные с помощью класса, можно применять
к другим элементам, не обязательно данного типа.
<h1 class="headline">Инструкция пользования
персональным компьютером</h1>
.headline {
text-transform: uppercase;
color: lightblue;
}
Селектор идентификатора
Селектор идентификатора позволяет
форматировать один конкретный элемент.
Идентификатор id должен быть уникальным и на одной странице может
встречаться только один раз.
<div id="sidebar"></div>
#sidebar {
width: 300px;
float: left;
}
Наследование и каскад
Наследование и каскад — два фундаментальных понятия в CSS,
которые тесно связаны между собой. Наследование заключается в том, что элементы
наследуют свойства от своего родителя (элемента, их содержащего). Каскад
проявляется в том, как разные виды таблиц стилей применяются к документу, и как
конфликтующие правила переопределяют друг друга.
Наследование
Наследование является механизмом, с помощью которого
определенные свойства передаются от предка к его потомкам. Спецификацией CSS
предусмотрено наследование свойств, относящихся к текстовому содержимому
страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing.
Во многих случаях это удобно, так как не нужно задавать размер шрифта и
семейство шрифтов для каждого элемента веб-страницы.
Свойства, относящиеся к форматированию блоков, не наследуются.
Это background, border, display, float и clear, height и width, margin, min-max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.
Принудительное наследование
С помощью ключевого слова inherit можно принудить
элемент наследовать любое значение свойства родительского элемента. Это
работает даже для тех свойств, которые не наследуются по умолчанию.
Как задаются и работают CSS-стили
- Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
- Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
- К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.
 |
| РЕЖИМ РАЗРАБОТЧИКА В БРАУЗЕРЕ GOOGLE CHROME |
4. При определении стиля можно использовать любую комбинацию
селекторов — селектор элемента, псевдокласса элемента, класса или
идентификатора элемента.
<div id="wrap" class="box
clear"></div>
div {border: 1px solid #eee;}
#wrap {width: 500px;}
.box {float: left;}
.clear {clear: both;}
Каскад
Каскадирование — это механизм, который управляет
конечным результатом в ситуации, когда к одному элементу применяются разные
CSS-правила. Существует три критерия, которые определяют порядок применения
свойств — правило !important, специфичность и порядок, в котором
подключены таблицы стилей.
Правило !important
Вес правила можно задать с помощью ключевого
слова !important, которое добавляется сразу после значения свойства,
например, span {font-weight: bold!important;}. Правило необходимо
размещать в конец объявления перед закрывающей скобкой, без пробела. Такое
объявление будет иметь приоритет над всеми остальными правилами. Это правило
позволяет отменить значение свойства и установить новое для элемента из группы
элементов в случае, когда нет прямого доступа к файлу со стилями.
