 |
|
Контекстный селектор
Допустим у нас есть страничка с таблицами и параграфами текста, в которых встречаются выделенные жирным шрифтом(strong) слова. Чтобы слова, в параграфе, в таблице, которые выделены жирным стали зеленого цвета:
td p strong {color:green }
Т.е. в начале TD пробелP пробел, затем STRONG а уже потом стиль. Вложенность может быть любого уровня.
Урок 9: Блоковая модель в CSS
Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок.
Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца.
Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin).
Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.
Отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Урок 10: Рамки в CSS
Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие:
Border-width
Border-color
Border-style
Сокращенная форма - border
Свойство BORDER-WIDTH
Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px
Свойство BORDER-COLOR
Как вы поняли данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold".
Свойство BORDER-STYLE
Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства:
SOLID Рамка состоит из сплошной линии
DOTTED Точечная рамка
DASHED Пунктирная рамка
DOUBLE Рамка из двойной сплошной линии
GROOVE Рамка как бы из вдавленной линии, с имитацией объема
RIDGE Рамка отображается выпуклой линией с имитацией объема
INSET Рамка отображается так, что весь блок кажется вдавленным
OUTSET Рамка отображается так, что весь блок кажется выпуклым
Примечание: минимальная ширина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.
Примеры:
h1 {border-width: 4px;border-style: dotted;border-color: red}
p {border-width: 2px;border-style: solid;border-color: blue}
Сокращенная форма - border
Как и в других свойствах, у рамки есть сокращенная форма border. В начале пишется толщина, затем после пробела стиль, а затем после пробела цвет. Предыдущий пример можно записать так:
h1 {border: 4px dotted red}
p {border: 2px solid blue}
Во всех перечисленных выше примерах, если добавить после слова border одно из ключевых слов (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Ну вот например можно сделать так:
h1 {border-top-width: 30px;border-top-style:solid ;border-top-color: red;
border-right-width: 20px;border-right-style:dashed ;border-right-color: gold;
border-bottom-width: 10px;border-bottom-style:dashed;border-bottom-color: green;
border-left-width: 40px;border-left-style:solid ;border-left-color: blue;}
В сокращенном виде:
h1 {border-top: 30px solid red;
border-right: 20px dashed gold;
border-bottom: 10px dashed green;
border-left: 40px solid lue}
Можно также комбинировать перечисленные выше свойства:
h1 {border: 30px solid red;
border-bottom: 10px solid gold;}