В 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;}
Т.е. я просто перечислил через запятую три селектора, сгруппировал их и применил к ним одно правило (фоновый цвет — желтый), а цвета текста для каждого селектора остались индивидуальными.
Т.е. селекторы — это метки, которые позволяют указать, для каких элементов применяются данные правила.
