Отступы, границы и поле

Единицы измерения

1) PX –пиксел

2) em –единица измерения-высота заглавной буквы М для определенного шрифта базового шрифта в браузере (≈16 px) относительная единица измерения;

3) % -вычисляются основываясь на унаследованном значении текста.

Свойство текста

1) color: ≠ цвет; RGB (100%,50%,0%), GBR(255,0,33) # номеримя цвета (17 стандартных)

2) font: font style font-wariant font wright font-size/line weight font-family;

- font style:курсив:italic normal;

-font-variant:small-cups normal -делаетбуквы в тексте прописными;

-font-weight: bold normal -полужирным (фактически 14 слов);

-font-size +размер текста 14 px x-small 10

14 em small 13

9 % medium 16

large 18

x-large 24

xx-large 32

-line-height межстрочный интервал

-font-family + семейство шрифтов

font:italic small-caps bold 1.25 em/150% Arial, Hellefica,sans-serif;

3) after-spacing – регулирует расстояние между буквами, чтобы растянуть слова, доставляя расстояние между буквами, или сжать их, удаляя расстояние

after-spacing: -1px - ↑ расстояние

normal 0

2 em - убрать промежутки

4) text-align – выравнивает блок текста

text-align: left – левому краю

center- центру

right- правому краю

justify- затрудняет чтение

5) text-decoration –добавляет линии над/под/посередине текста наследуется(!)

text-decoration: underline

overline

line-through

none

6) text-indent – устанавливает размер отступа для первой строки блока текста

text-indent: -5 px(выступает над левым краем остального текста)

3 em отступ как в печатных изданияхж

7) text-transform – изменяет регистр букв

text-transform: uppercase

lowercase

capitalise

none

8) vertical-align (наследуется) устанавливаеи базовую линию опущенного элемента относительно базовой линии окружающего содержимого

vertical-align: caseline

sub

super

top

text-top

middle

bottom

text-bottom

-5 %

78% -вычисляются на основании значения line-height элемента

9) word-spacing –регулирует расстояние между словами -1 рх – убирает интервал

word-spacing 0,normal

2 -↑ интервал;

Свойства списков

list-style: list-style-type list-style-image list-style-position

list-style: disc url(images/bullet.gif) inside;

- list-style-type – устанавливает тип маркера для списка: disc,circle,square,decimal-leading-zerc, upper-alpha, loweralpha, upper-roman, lower-roman<lower-grec L,none;

-list-style-image – определяет изображение, которое используется для маркера в маркированном списке none

list-style-image: url (images/bullet.gif);

-list-style-positon- позыционирует маркеры или числа в списке. Эти маркеры могут появляться за пределами текста, выступая за левый край или внутри текста

list-style: inside

outside

Отступы, границы и поле

1) border – чертит линию вокруг 4-х сторон элемента

border: толщина границы списки линии цвет

- border – width: определяет толщину линии

border-width: 1 px

2 em

border-width: 3 em 1 em 2 em 3.5;

border-width: 2 px 1px;

верхние правая

нижние левая

- border-style – определяет стиль, использует для границ

border-style: solid - groove

dotted …. Ridge

dashed _ _ _ inset

double = outset

none,hidden – удаляет любую границу

- border-color- цвет: любое значение цвета

border –color:#000 #fff #333 #438F 3C;

border – top – color/style/width

border – right - color/style/width

border-bottom-color/style/width

border-left- color/style/width

2) outline – контур, задаваемый этим свойством работает точно так же, как граница, за исключением того, что он не занимает места (т.е. не увеличиваетширину и высоту элемента) и относиться ко всем 4 краям

outline: 3 px solid # F33;

3) padding – внутренний отступ

padding: 0 10 px 2px 15 px; padding- top: 10%

top right bottom left padding- right: 20%

padding - left: 30%

padding- bottom 40%;

4) mergin – внешний отступ margin – top: 0;

mergin: 0 10 px 0 10 px margin – bottom: 0;

0 10 px; margin – left: 0;

margin – right: 0;

Фон

background – repeat: repeat

no – repeat

repeat – x

repeat - y

- background- attachment - определяет как реагирует фоновое изображение, когда ваш посетитель прокручивает страницу. Изображение либо прокручивается с остальным содержимым, либо остается на местах

background- attachment: scroll

fixed

- background-position – управляет размещением изображния на фоне элемента страницы. Если не определено изображение начинается в верхнем левом углу элемента.Если изображение повторяется, то background-position – контролирует наальную точку изображения.

background-position: left top;

right bottom

background-position: 10 px 50%

Дата добавления: 2015-11-04