CSS | Структура CSS файла

Оформление текста → ← Введение

Структура CSS файла.

Мы не будем давать такого точного изложения синтаксиса CSS файла, как в спецификации, а постараемся рассмотреть его более наглядно. В частности, опустим некоторые структуры, которые не так просты для понимания.

В файле таблиц стилей описываются свойства селекторов. Селектор - это выражение, которому может соответствовать один или несколько тегов в HTML-странице. К этим тегам применяются свойства, описанные у селектора. Группы различных свойств будут рассмотрены далее на этом сайте.

Чтобы понять, что такое селектор, и понять, как он работает, рассмотрим несколько простых примеров:

*
Этому селектору соответствуют абсолютно все теги на странице, поэтому все его свойства будут применены к каждому тегу.
div
Свойства этого селектора будут применены к тегу <div>. Точно так же можно записать любой тег, опустив символы "<" и ">", в качестве селектора.
div *
Свойства повлияют на все элементы внутри <div>
div span
Свойства повлияют на все элементы <span> внутри <div>
div, span
Свойства повлияют на все элементы <span> и на все элементы <div>
.abc
Этому селектору соответствуют все теги, у которых присутствует атрибут class (класс, которому принадлежит тег, может быть одинаковым у нескольких тегов), равный abc
#abc
Этому селектору соответсвуют все теги, у которых присутсвует атрибут id (идентификатор, должен быть уникальным - встречаться на странице один раз), равный abc

Также допустимы и более сложные конструкции, о которых можно подробнее узнать на сайте спецификации w3c.org

Свойства у селектора описываются следующим образом:

селектор {
    свойство1: значения;
    свойство2: значения;
    ...
    свойствоN: значения;
}

Таких описаний селекторов может быть в файле сколько угодно.

Связать CSS файл с HTML страничкой можно, поместив между тегами <head> и </head> тег вида:

<link rel="stylesheet" href="путь/к/файлу.css" type="text/css" />

Можно весь CSS поместить прямо в HTML, но предпочтительней выносить его в отдельный файл - браузеры имеют обыкновение в таком случае его кешировать, что очень полезно.

Единицы измерения

Многие свойства в качестве своих значений принимают числовые данные, поэтому, прежде чем продолжить, рассмотрим возможные в CSS единицы измерения:

  • px - Пиксель. Употребляется для абсолютного задания размера шрифтов, блоков и т.д.
  • em - 1em равен размеру шрифта родительского элемента (0.5em - половине).
  • % - Проценты относительно родителя.

Существует возможность также задавать величины в дюймах (in), сантиметрах (cm), миллиметрах (mm), но это употребляется довольно редко.

Оформление текста → ← Введение
css|box