Border – рамка вокруг элемента

border​­​color​:​ red​;​ ​(​#f00 | RGB(255, 0, 0)) border​­​style​:​ solid​;​ ​(​dotted ​|​ dashed ​|​ groove ​|​ ridge ​|​ solid ​|​ ​double​ ​|​ inset ​| outset)

border​­​width​:​ ​2px;

 

● border тоже подразделяется на различные свойства. 

● border­color ­ цвет рамки.

● border­style ­ стиль рамки, которая может быть разных значений, такие как: dotted, dashed, solid, double, groove, ridge, inset, outset. border­width задает толщину рамки, причем ее можно задать для каждой из 4 сторон отдельно:

● (1px 2px) ­ 1px: верхняя и нижняя, 2px: левая и правая

● (1px 2px 3px) ­ 1px: верхняя, 2px: левая и правая, 3 нижняя

● (1px 2px 3px 4px) ­ 1px: верхняя, 2px: правая, 3px: нижняя, 4px: левая

Также возможно перечислять свойства в одну строчку, разделяя пробелом. В этом случае тоже не важен порядок следования свойств.

 

border​^:​ ​1^px​ solid black;

 

Есть возможность каждую границу задавать отдельно, когда необходима, к примеру, только одна граница.

 

border​­​top​:​ ​2px​ dotted green​;  border​­​bottom​:​ ​3px​ ​double​ blue​;  border​­​left​:​ ​1px​ solid red​;  border​­​right​:​ ​4px​ inset ​#000;

 

Цвет текста ­ color

color​:​ red; color​:​ ​#78fa2e; color​:​ RGB​(​34​,​ ​21​,​ ​56​);

 

Цвет текста также можно задавать любым из 3 способов.

Шрифт ­ font

font​­​family​:​ ​"Times New Roman"​,​ serif​,​ ​Verdana;

 

● serif — шрифты с засечками;

● sans­serif — рубленные шрифты, без засечек;

● cursive — курсивные шрифты;

● fantasy — декоративные шрифты;

● monospace — моноширинные шрифты.

font­family ­ устанавливает шрифт текста. 

Существуют 5 основных семейств шрифтов. У каждого семейства существуют несколько видов шрифтов. Какие шрифты относятся к какому семейству, можно узнать из справочников. Можно через запятую указывать несколько шрифтов. Первым будет использоваться шрифт "Times New Roman", если по каким­либо причинам данный шрифт не установлен на компьютер, то будет отображаться следующий шрифт. Если название шрифта состоит из нескольких слов, то его заключают в кавычки.

font​­​style​:​ italic​;​ ​(​oblique ​|​ normal) font​­​variant​:​ small​­​caps;

font​­​weight​:​ bold​;​ ​(​bolder ​|​ lighter​|​ ​100​ ​|​ ​200​); font​­​size​:​ ​20px​;​ ​(​small ​|​ medium ​|​ large​);

 

● font­style – стиль шрифта. По умолчанию установлен шрифт в значении normal, italic ­ это курсивное начертание, которое имитирует рукописный текст, а oblique ­ наклонное начертание, которое получается путем наклона знаков вправо. 

● font­variant имеет только 2 значения, по умолчанию установлено значение normal и small­caps, которое у строчных букв имитирует заглавные буквы, только уменьшенного размера. 

● font­weight задает насыщенность шрифта. Можно указывать значения предопределенными словами, например, bold ­ полужирный, bolder ­ жирный, lighter ­ светлый. Ещё есть возможность указывать насыщенность цифрами от 100 до 900. 

● font­size определяет размер шрифта. Можно указывать в любых единицах измерения или предопределенными словами. Указывать стиль шрифта можно при помощи сокращенной записи. В данном случае важен порядок следования значений.

font​:​ font​­​style

font​­​variant

font​­​weight

font​­​size

font​­​family; font​:​ bold ​24px​ ​Arial​,​ ​Verdana;

 

 

Оформление списков ­ list­style

list​­​style​­​type​:​ circle​;​ ​(​disc ​|​ square ​|​ armenian ​|​ ​decimal) list​­​style​­​position​:​ inside; list​­​style​­​image​:​ url​(​img​/​list​.​png​);

 

Свойство list­style определяет стиль маркера у списков. 

● list­style­type ­ тип маркера, который может быть разных видов, в примере приведены только некоторые из них. Остальные виды маркеров можно найти в справочнике. 

● list­style­position определяет то, где располагается маркер, по умолчанию у него значение outside. В этом случае маркеры будут располагаться за пределами текстового блока. При значении inside, наоборот, внутри текстовых блоков. 

● list­style­image позволяет вместо маркера установить изображение, для этого нужно указать к нему путь в скобках url.

 Для определения стиля маркеров также существует сокращенная запись.

list​­​style​:​ list​­​style​­​type

       list​^­​^style​^­​position        list​^­​^style​^­​image; list​^­​^style​^:​ circle inside;

 

text​­​align​:​ center​;​ ​(​justify ​|​ left ​|​ right)

text​­​decoration​:​ none​;​ ​(​line​­​through ​|​ overline ​|​ underline ​|​ none) text​­​transform​:​ capitalize​;​ ​(​lowercase ​|​ uppercase)

 

И еще некоторые полезные свойства.

● text­align ­ выравнивание содержимого блока по горизонтали. Принимает 4 значения: left, right, center и justify (выравнивание происходит по ширине, т.е. одновременно по левому и по правому краю). 

● text­decoration применяется для следующего оформления текста:line­through ­ перечеркивает текст, overline ­ задает линию над текстом, underline ­ задает линию под текстом (подчеркивает текст), none (по умолчанию) ­ отменяет все эффекты. 

● text­transform используется для изменения регистра символов. При значении capitalize каждое слово в предложении будет начинаться с заглавной буквы, при значении lowercase все символы будут строчными, а при значении uppercase все символы будут заглавными.

Вложенность

При изучении тегов HTML мы рассматривали, что можно вкладывать одни HTML теги в другие. А при помощи CSS есть возможность управлять различными вложенными конструкциями. Для управления вложенностью в CSS существуют несколько специальных селекторов. Рассмотрим эти селекторы на примерах.