Практика
Создайте собственную раскладку страницы с помощью блоков. Страница должна быть масштабируемой. В качестве образца можете использовать один из приведенных вариантов.
3.24. Css свойства
В настоящее время поддержка некоторых свойств (особенно относящихся к новой Рекомендации CSS 2.1) еще содержит ошибки и различается в разных браузерах.
Замечание: Для всех свойств в CSS2.1 существует ключевое слово inherit (наследовать), которое устанавливает для свойства значение, равное соответствующему значению в родительском элементе.
Визуальное пространство
свойство |
значения |
описание |
background |
[<'background-color'>||<'background-image'>||<'background-repeat'>||<'background-attachment'>||<' background-position'>||inherit |
Объединенное свойство для указания всех аспектов элемента, относящихся к фону. |
color |
<color> inherit |
Описывается цвет переднего плана элемента (цвет текста для HTML-элементов). |
background- color |
<цвет> transparent inherit |
Задает фоновый цвет Web-страницы или ее элемента Предопределенное значение transparent задает «прозрачный фон». Оно же является значением по умолчанию. |
background- image |
none url (<URL>) inherit |
Задает фоновый рисунок Web-страницы или ее элемента Предопределенное значение none отключает фоновый рисунок, оно же является значением по умолчанию. |
background- repeat |
repeat repeat-x repeat-y no-repeat inherit |
Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе. Repeat – (значение по умолчанию) – заставляет фоновый рисунок повторяться по горизонтали и по вертикали. no-repeat – запрещает фоновому рисунку повторяться repeat-x - заставляет фоновый рисунок повторяться только по горизонтали. repeat-y - заставляет фоновый рисунок повторяться только по вертикали. |
background- attachment |
scroll fixed inherit |
Позволяет «зафиксировать» фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы. |
background- position |
<процент> <длина> top center bottom left right inherit |
Определяет позицию исходного фонового изображения на фоне данного элемента. Задает начальное положение фонового рисунка с помощью двух значений или при помощи двух ключевых слов : сначала указывается позиция по горизонтали, потом по вертикали. Значение по умолчанию –:0% 0% (то же, что для top, left) |
Свойства шрифта
свойство |
значения |
описание |
пример |
font-family |
<название-семейства> | <общее-семейство> ] inherit |
Это свойство задает приоритетный список названий семейств шрифтов (serif, san-serif, curalve, fantasy, monospace). Можно установить несколько возможных значений в порядке предпочтения ( на случай, когда у пользователя не окажется нужного шрифта). Значения разделяются запятыми. |
font-family:arial font-family:arial, helvetica |
font-style |
normal italic oblique inherit |
Задает стиль шрифта не выбранного семейства. normal (значение по умолчанию) – задает обычный вид шрифта italic – задает курсивное начертание oblique – задает наклонное начертание |
font-style:normal font-style: italic font-style: oblique |
font-variant |
normal small-caps inherit |
Задает вид малых букв шрифта, используемого в элементе страницы normal (значение по умолчанию) – задает обычный вид малых букв шрифта small-caps – делает их такими же, как большие буквы, только меньшего размера (капитель) |
font-variant: normal font-variant: small-caps |
font-weight |
normal bold bolder lighter 100-900 inherit |
Задает «жирность» шрифта, используемого в элементе страницы «Жирность» может быть задана тремя способами. 1. Предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. 2. Относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. 3. Одним из девяти значений, от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному 700. Значение по умолчанию normal |
font-weight: normal font-weight: bold font-weight: bolder font-weight: lighter font-weight: 250 |
font-size
|
normal px pt percentage xx-small x-small small medium large x- large xx- large smaller larger percentage |
Задает размер шрифта, используемого в элементе страницы. Возможно задание размера шрифта: 1. Абсолютными величинами, в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя 2. Одним из девяти доступных предопределенных значений (xx-small, x-small, small, medium, large, x- large, xx- large) которые задают один из семи размеров шрифта, поддерживаемых HTML. 3. Значения smaller и larger задают размер шрифта – по отношению к шрифту родителя на размер меньше или больше соответственно. Начальное значение: medium. |
font-size: normal font-size: 14px font-size:14 pt font-size: xx-small font-size: x-small font-size: small font-size: medium font-size: large font-size: x- large font-size: xx- large font-size: smaller font-size: larger font-size:75%
|
font
|
[[<'font-style'> || <'font-variant'> ||<'font-weight'>]? <'font-size'> [/<'line-height'>]? <"font-family'> ] | caption ] icon | menu | message-box | small-caption | status-bar | inherit |
Объединенное свойство для указания (как минимум) размера и семейства шрифта, а также стиля, варианта, толщины и межстрочного интервала. Дополнительные ключевые слова позволяют получить шрифты из различных компонентов операционной системы.
|
При использовании font как сокращенной записи нескольких свойств шрифта важен порядок указания значений свойств. Во всех приведенных ниже правилах свойство font используется правильно. h1 {font: 1.75em sans-serif; } /* минимальный список значений для font */ h1 { font:1.75em/2 sans-serif; } h1 {font:bold 1.75em sans-serif } h1 {font:oblique bold small-caps 1.75em Verdana, Arial, sans-serif} Правило может включать значения для всех свойств или только для части их, но оно должно включать свойства font-size и font-family, расположенные именно в этом порядке и являющиеся двумя последними значениями списка. Пропуск одного из этих свойств или использование их не в том порядке приведет к тому, что все правило будет неверным. |
Свойства текста
свойство |
значения |
описание |
пример |
line-height |
normal число расстояние проценты inherit |
Задает вертикальное расстояние между строками текста. Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние |
line-height: normal line-height: line-height: line-height: |
letter-spacing |
normal число inherit |
Задает расстояние между символами при отображении текста |
letter-spacing:0,5 cm |
word-spacing |
Normal <длина> inherit |
Расстояние, добавляемое между словами в текстовом элементе. Отрицательные значения допускаются. |
word-spacing:5px; |
text-decoration |
none underline overline line-through blink |
Задает специальное оформление текста. none – отменяет любое специальное оформление (значение по умолчанию для большинства тегов) underline – подчеркивает текст (значение по умолчанию для тегов <A>, <INS>, <U>) overline – «надчеркивает» текст line-through – зачеркивает текст (значение по умолчанию для тегов <DEL>, <S>, <STRIKE>) blink – заставляет текст мерцать (IE не поддерживается) |
text-decoration: none text-decoration: underline text-decoration: overline text-decoration: line-through text-decoration: blink |
text-transform |
none capitalize uppercase lowercase inherit |
Задает преобразование регистра символов текста.
|
text-transform: none text-transform: capitalize text-transform: uppercase text-transform: lowercase |
text-align
|
left right center justify |
Задает горизонтальное выравнивание текста.
|
text-align: left text-align: right text-align: center text-align: justify
|
text-indent |
Длина процент |
Задает отступ красной строки. Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя
|
text-indent:20px; text-indent:10% |
vertical-align |
baseline middle sub super text-top text-bottom top<процент> |<длина> | inherit bottom |
Задает положение элемента по вертикали относительно элемента – родителя.
|
vertical-align: baseline vertical-align: middle vertical-align: sub
|
white-space |
normal pre nowrap pre-wrap pre-line |
Задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине normal (значение по умолчанию) – включает автоматический перенос длинных строк pre – не поддерживается
nowrap – отключает автоматический перенос |
white-space: normal white-space: pre Начальное значение: normal |
direction |
ltr rtl inherit |
|
direction:rtl; |
Свойства списков
свойство |
значения |
описание |
list-style-type |
disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha decimal-leading-zero lower-greek lower-latin upper-latin lower-alpha upper-alpha none |
Задает тип маркера или номера позиции списка disc (значение по умолчанию) – отображает сплошной кружок circle - окружность square – сплошной квадрат decimal – нумерует позицию арабскими цифрами lower-roman – малыми римскими upper-roman – большими римскими lower-alpha – помечает позиции малыми латинскими буквами upper-alpha – большими латинскими none – вообще убирает маркер или нумерацию |
list-style-image |
none url (<url>) |
Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type |
list-style-position |
outside inside |
Определяет положение маркера в списке: в составе абзаца пункта списка (значение inside), или выдвинутым влево от него (значение outside) |
list-style
|
<list-style-type> || <list-style-image> ||<list-style-position> inherit |
Объединенное свойство для указания типа, изображения и местоположения маркеров списка. К элементам со значением свойства display, равным list-item (в HTML это элементы ul, ol и li). Значения данных свойств можно указывать в произвольном порядке, при этом любые свойства можно опускать вообще. Не забывайте, что не указанные в сокращении свойства принимаются равными своим значениям по умолчанию. ul {list-style: url(skull.gif) disc outside;} ul {list-style: disc outside url(skull.gif);} ul {list-style: url(skull.gif) disc;} |
counter-increment
|
<идентификатор> <целое_число> None inherit |
Указывается величина инкремента (приращения) для счетчика (допускаются положительные и отрицательные значения).
|
counter-reset
|
<идентификатор> <целое_число> None inherit |
Сброс счетчика - установка его в любое значение (положительное или отрицательное) |
Границы
свойство |
значения |
Описание |
|
border |
[<border-style> || <border-width> || <border- color> ] | inherit |
Объединенное свойство для указания стиля рамки, толщины и цвета для каждой из сторон элемента. |
|
border-bottom |
[<border-style> || <border-width> || <border- color> ] | inherit |
Объединенное свойство для указания стиля, толщины и цвета нижнего края элемента.
|
|
border-bottom-color |
<цвет> | transparent | inherit |
Указывается цвет нижнего края элемента. Начальное значение: Значение свойства color элемента. |
|
border-bottom-style
|
none dotted | dashed solid double groove ridge inset outset |
Указывается стиль рамки для нижнего края элемента. Чтобы рамка отображалась, значение должно отличаться от nonе. Начальное значение: none Применимо ко всем элементам.
|
|
border-bottom-width
|
thin medium thick <длина> inherit |
Указывается толщина рамки для нижнего края элемента. Начальное значение: medium |
|
border-collapse
|
collapse separate inherit |
Указывается модель отображения рамки для элемента-таблицы:сжимающая или раздельная Начальное значение: separate Применимо к таблицам и внутристрочным табличным элементам.
|
|
border- color
|
<цвет> Transparent (можно указывать от одного до четырех значений) inherit |
Объединенное свойство для указания фонового цвета для каждой стороны элемента.
|
|
border-left
|
<border-style> || <border-width> || <border-color> ] | inherit |
Объединенное свойство для указания стиля, толщины и цвета левого края элемента.
|
|
border-left-color
|
<цвет Transparent inherit |
Указывается цвет рамки для левого края элемента. |
|
border-left-style
|
none dotted dashed solid double groove ridge inset outset |
Указывается стиль рамки для левого края элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе.
|
|
border-left-width
|
thin medium thick <длина> inherit |
Указывается толщина рамки для левого края элемента. Начальное значение: medium
|
|
border-right
|
<border-style> || <border-width> || <border-color> ] | inherit |
Объединенное свойство для указания стиля, толщины и цвета правого края элемента.
|
|
border-right-color
|
<цвет Transparent inherit |
Указывается цвет рамки для правого края элемента. |
|
border-right-style
|
none dotted dashed solid double groove ridge inset outset |
Указывается стиль рамки для правого края элемента. Чтобы рамка отображалась, значение должно отличаться от none.
|
|
border-right-width |
thin medium thick <длина> inherit |
Указывается толщина рамки для правого края элемента. Начальное значение: medium
|
|
border-spacing
|
<длина> <длина> inherit
|
Указывается расстояние между рамками ячеек таблицы при выборе модели рамки separate: по горизонтали и вертикали. Начальное значение: 0. Применимо к таблицам и внутристрочным табличным элементам. |
|
border—style
|
none dotted dashed solid double groove ridge inset outset |
Объединенное свойство для указания стиля рамки для каждой из сторон элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе.
|
|
border-top |
<border-style> || <border-width> || <border-color> ] | inherit |
Объединенное свойство для указания стиля, толщины и цвета верхнего края элемента.
|
|
border-top-color
|
<цвет Transparent inherit |
Указывается цвет рамки для верхнего края элемента. |
|
border-top-style |
none dotted dashed solid double groove ridge inset outset |
Указывается стиль рамки для верхнего края элемента. Чтобы рамка отображалась, значение должно отличаться от nоnе. |
|
border-top-width
|
thin medium thick <длина> inherit |
Указывается толщина рамки для верхнего края элемента. Начальное значение medium
|
|
border-width
|
thin medium thick <длина> inherit |
Объединенное свойство для указания толщины рамки с каждой стороны элемента.
|
|
table-layout |
auto fixed inherit |
Указывается алгоритм раскладки для ячеек таблицы, строк и столбцов |
|
bottom
|
<длина> <процент> auto inherit |
Указывается смещение между нижним наружным краем позиционированного элемента и нижним краем содержащего его блока. Начальное значение: auto. Применимо к позиционированным элементам (со значениями позиционирования relative, absolute или fixed). |
|
caption-side |
top bottom inherit |
Указывается, где должно находиться заглавие таблицы, над или под ней. Начальное значение: top |
|
clear |
left right both none inherit |
Указывается, могут ли плавающие элементы располагаться рядом с данным элементом (точнее, указываются стороны, около которых появление плавающих элементов не допускается). Значение none означает, что плавающие элементы могут (хотя и не обязаны) располагаться с обеих сторон элемента. Начальное значение: none. Применимо: к блочным элементам. |
|
empty-cells |
show hide inherit |
Указывается, должны ли отображаться фон и рамка пустой ячейки таблицы при выборе модели рамки separate Начальное значение: show
|
|
clip
|
rect (верхний, правый, нижний, левый auto inherit |
Указывается размер отсекающего прямоугольника, через который видно содержимое абсолютно позиционированного элемента, если способ переполнения элемента установлен в hidden, scroll или auto. Значения откладываются от левого верхнего угла элемента, а не сторон, как при сдвиге. |
|
content |
normal <string> <url> <counter> I attr(<identifier>) open-quote close-quote no-open-quote no-close-quote inherit |
Определяется генерируемый материал, вставляемый до или после элемента. Начальное значение: normal Применимо: К псевдоэлементам: before и : after
|
|
cursor
|
<url> Auto Default Pointer Crosshair Move e-resize ne-resize nw-resize n-resize |
se-resize sw-resize s-resize w-resize text wait help progress inherit |
Определяет форму курсора, когда указатель мыши находится над элементом. Начальное значение: auto
|
display
|
inline | block | list-item | run-in | inline-block |table | inline-table | table-row-group | table-header-group | .table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
Для элемента указывается тип блока, формируемого в ходе создания раскладки Начальное значение: inline. Применимо: ко всем элементам. |
|
float |
left right none inherit |
Указывается направление смещения элемента (с разрешением обтекания элемента последующими материалами. Начальное значение: none |
|
height |
<длина> <процент> auto inherit |
Указывается высота области содержания элемента. Интервалы, рамка и поля добавляются к этому значению. Отрицательные значения не допускаются. |
|
left
|
<длина> <процент> auto inherit |
Указывается смещение между левым наружным краем позиционированного элемента и левым краем содержащего его блока. |
|
margin
|
<длина> <процент> auto inherit |
Объединенное свойство для указания размера полей с каждой стороны элемента. Отрицательные значения допускаются. Применимо ко всем элементам, за исключением элементов со значением атрибута display, отличным от table и inline-table. Можно указывать от одного до четырех значений (через пробел) |
|
margin-bottom
|
<длина> <процент> auto inherit |
Указывается ширина нижнего поля элемента. Отрицательные значения допускаются |
|
margin-left |
<длина> <процент> auto inherit |
Указывается ширина левого поля элемента. Отрицательные значения допускаются |
|
margin-right
|
<длина> <процент> auto inherit |
Указывается ширина правого поля элемента. Отрицательные значения допускаются |
|
margin-top
|
<длина> <процент> auto inherit |
Указывается ширина верхнего поля элемента. Отрицательные значения допускаются |
|
max-height •
|
<длина> <процент> auto inherit |
Указывается максимальная высота элемента. Отрицательные значения не допускаются. |
|
max-width |
<длина> <процент> auto inherit |
Указывается максимальная ширина элемента. Отрицательные значения не допускаются. |
|
min-height
|
<длина> <процент> auto inherit |
Указывается минимальная высота элемента. Отрицательные значения не допускаются. |
|
min-width
|
<длина> <процент> auto inherit |
Указывается минимальная ширина элемента. Отрицательные значения не допускаются. |
|
outline
|
[<outline-color> || <outline-style> || <outline-width>] | inherit |
Объединенное свойство для указания контура элемента.
|
|
outline-color
|
<цвет> Invert inherit |
Задание цвета для видимых частей контура элемента. Начальное значение: invert или его аналог для тех браузеров, которые не поддерживают значение invert. Применимо ко всем элементам. |
|
outline-style
|
none dotted dashed solid double groove groove ridge inset outset inherit |
Задание стиля для всего контура элемента. Чтобы контур отображался, стиль должен отличаться от none.
|
|
outline-width |
thin | medium | thick | <длина> | inherit |
Задание толщины для всего контура элемента. Если outline-style = none, для толщины задается значение 0 (нуль). Начальное значение: medium |
|
overflow |
visible | hidden | scroll | auto | inherit |
Указывает, что происходит, если материал не умещается в области содержимого элемента Начальное значение: visible |
|
padding |
<длина> <процент> inherit |
Объединенное свойство для указания величины интервала с каждой из сторон элемента. Отрицательные значения не допускаются. Можно указывать от одного до четырех значений через пробел. |
|
padding-bottom
|
<длина> <процент> inherit |
Указывается величина интервала, применяемого к нижнему краю элемента. Отрицательные значения не допускаются. |
|
padding-left
|
<длина> <процент> inherit |
Указывается величина интервала, применяемого к левому краю элемента. Отрицательные значения не допускаются. |
|
padding-right |
<длина> <процент> inherit |
Указывается величина интервала, применяемого к правому краю элемента. Отрицательные значения не допускаются. |
|
padding-top
|
<длина> <процент> inherit |
Указывается величина интервала, применяемого к верхнему краю элемента. Отрицательные значения не допускаются. |
|
position
|
static relative absolute fixed inherit |
Указывается метод позиционирования элемента. Начальное значение: static |
|
right |
<длина> <процент> auto inherit |
Указывается смещение между правым наружным краем позиционированного элемента и правым краем содержащего его блока. |
|
top |
<длина> <процент> auto inherit |
Указывается смещение между верхним наружным краем позиционированного элемента и верхним краем содержащего его блока. Начальное значение: auto. Применимо к позиционированным элементам (со значениями позиционирования relative, absolute или fixed). |
|
visibility |
visible hidden collapse inherit |
Определяет, отображается ли элемент. Невидимые блоки продолжают влиять на разметку. Начальное значение: visible |
|
width |
<длина> <процент> Auto inherit |
Указывается ширина области содержания элемента. Интервалы, рамка и поля добавляются к этому значению. Отрицательные значения не допускаются. |
|
z-index |
<целое_число> auto inherit |
Уровень размещения позиционированного элемента |
|