Здавалка
Главная | Обратная связь

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



Допустим у нас есть страничка с таблицами и параграфами текста, в которых встречаются выделенные жирным шрифтом(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;}

 

 







©2015 arhivinfo.ru Все права принадлежат авторам размещенных материалов.