Наследование, цвета, группировка селекторов

Содержание

1 Единицы измерения размеров в CSS
2 Цвета и адреса URL в CSS
3 Группировка селекторов

В CSS все правила делятся на наследуемые и ненаследуемые. Что значит наследуемое правило? Если я имею какой-то элемент на странице, а внутри него есть другие элементы, и я этому общему главному элементу назначаю любое правило со значением, то это значение начинает по цепочке передаваться по наследству.

<div style="color:green">Первый слой
<div style="background:#cccccc">Второй слой внутри первого
<div style="color:red">Третий слой внутри второго</div>
</div>
</div>

В данном примере 2-й слой наследует зеленый цвет от родителя, 3-й тоже, но у него указан красный цвет (а это главнее, чем указание родитеся — зеленый цвет). В итоге 1-й, 2-й слои — зеленый, 3-й слой — красный.

Ненаследуемое правило применяется только к элементу, в котором оно прописано.

Единицы измерения размеров в CSS

Размеры в css всегда задаются с единицами размерности, исключение — ноль, его можно писать просто цифрой. Все единицы размерности разделены на 2 категории: абсолютные и относительные. Абсолютные (т.е. в реальности в физическом мире есть их эталоны) — дюймы, сантиметры, миллиметры, пункты, пики.

em — ems, высота используемого элементом шрифта.
ex — x-height, ширина буквы «х» испольуемого элементом шрифта.
px — pixels, пиксели.
in — inches, дюймы.
cm — centimeters, сантиметры.
mm — millimeters, миллиметры.
pt — points, пункты (1pt = 1/72in = 0,35mm).
pc — picas, пики (1pc = 12pt).
% — относительные значения (например, +20%).

Цвета и адреса URL в CSS

Указывать цвет можно так:

название цвета (red, green, white).
#00cc00 — шестнадцатеричное представление.
#0c0 — сокращенное шестнадцатеричное представление.
rgb (0,240,125) — в формате RGB. Это функционал, т.е. по сути это вызов функции. Ее параметры — это яркость.
rgb (0%,80%,25%) — в формате RGB, относительное.

Ссылку на файл в css указывают так: url («название файла»):

{background: url("file.gif")}

При этом относительный путь к файлу нужно прописывать без кавычек от того места, где прописано это правило.

Группировка селекторов

Есть несколько селекторов, которые используют имена тегов: h1, h2, h3 (заголовки трех уровней).

h1{
   color:red;
   background:yellow
}
h2{
   color:blue;
   background:yellow
}
h3{
   color:green;
   background:yellow
}

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

h1,h2,h3{
   background:yellow}
h1{
   color:red;}
h2{
   color:blue;}
h3{
   color:green;}

Т.е. я просто перечислил через запятую три селектора, сгруппировал их и применил к ним одно правило (фоновый цвет — желтый), а цвета текста для каждого селектора остались индивидуальными.

Т.е. селекторы — это метки, которые позволяют указать, для каких элементов применяются данные правила.