Введение в CSS

CSS (Cascading Style Sheets)
CSS — это язык стилей, определяющий отображение HTML-документов.

Исходный код документа

Исходный код документа (результат)

Содержимое стилевого файла

Содержимое стилевого файла (результат)

Типы стилей
Стиль браузера;
Стиль автора;
Стиль пользователя.

Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
Например, заголовок страницы, формируемый тегом
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора
Стиль, который добавляет к документу его разработчик. Этот стиль определяется файлом style.css

Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление».

Способы добавления стилей на страницу
Связанные стили;
Глобальные стили;
Внутренние стили;
Импорт CSS.

Связанные (внешние) стили

Глобальные стили

Внутренние (инлайн-) стили

Импорт CSS

Базовый синтаксис CSS
Selector (селектор) — указывает на тег, класс или идентификатор к которому применяются стилевые параметры.
Property (свойство) — указывает, какое стилевое свойство применить к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).
Value (значение) — указывает, какие именно значения установить для определённого свойства.

Формы записи

Разные значения у одного свойства

Комментарии

Размеры

Размеры
em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента.

Адреса

Представление цветов
В шестнадцатиричном виде (пример: #FF00EE или в краткой форме: #F0E);
По названию константы (red, green, orange, olive и т.д.);
С помощью функции rgb в десятичном представлении (например: rgb(128, 255, 0) или rgb(51%, 100%, 0) ).
С помощью функции rgba, где добавляется альфа-канал, позволяющий изменять прозрачность (например: rgba(128, 255, 0, 0.5)).

Некоторые цвета

Классы

Идентификаторы

Идентификаторы и классы
Идентификаторы и классы чувствительны к регистру.

Контекстные селекторы

Соседние селекторы

Дочерние элементы

Дочерние селекторы

Универсальный селектор
Стиль применяется ко всем тегам.
Например, в данном случае стиль установит красный цвет текста для всех элементов, которые находятся в теге
:

Селекторы атрибутов
Стиль применяется к селектору, но только в том случае, если у этого элемента имеется атрибут, значение которого равно указанному. Значение атрибута можно опустить — в таком случае стиль применится ко всем элементам, которые устанавливает селектор, у которых имеется указанный атрибут.

Группирование
Пример стилей для каждого селектора:

Группирование
Пример сгруппированных стилей:

Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.