Практическое занятие №11 посвящено изучению и использованию стилей

background-attachment

Fixed

scroll

Фиксирует изображение

Прокручивает изображение

background

Нет

background-color

Табл. 17

Цвет фона элемента

background

Нет

Background-image

URL

Изображение для фона

background

Нет

Background-position

x y

Позиция для фонового изображения

background

Нет

Background-repeat

repeat

repeat-x

repeat-y

no-repeat

Размножение фонового изображения на элемент: по горизонтали и вертикали; по горизонтали; по вертикали; не размножает.

background

Нет

Border-bottom-width

Табл. 18

Ширина рамки снизу от элемента

border

Нет

Border-left-width

Табл. 18

То же, слева

border

Нет

Border-top-width

Табл. 18

То же, сверху

border

Нет

Border-right-width

Табл. 18

То же, справа

border

Нет

Border-color

Табл. 17

Цвет рамки

border

Нет

Border-style

Табл. 19

Стиль рамки: задаётся стиль рамки со всех сторон. Одно значение, если стиль со всех сторон одинаковый

border

Нет

clear

both

Left

Right

none

Запрет плавающих элементов: с обеих сторон, слева, справа, отмена запрета

Нет

color

Табл. 17

Да

float

Left

Right

none

Положение элемента при условии обтекания его другими элементами: слева, справа, без обтекания

Нет

font-family

Список гарнитур

Определяет список гарнитур шрифта. Можно использовать конкретные названия гарнитур или обобщённые (табл. 21), которые ставят в конце списка. Названия из двух и более слов заключают в кавычки.

font

Да

font -size

значение

Размер шрифта может быть задан в пунктах (pt), сантиметрах (cm), дюймах (in), пикселах (px) или значением из табл. 22

font

Да

font -style

Normal

Oblique

italic

Определяет стиль шрифта: нормальный, наклонный, курсив

font

Да

font -variant

Normal

Small-caps

Прописные буквы маленького размера: нормальные, маленькие

Да

font -weight

Normal

Bold

Bolder

Lighter

100 - 900

Определяет жирность шрифта: нормальный, полужирный, жирный, нежирный. Может быть задана числом.

font

Да

height

значение

Высота области, отводимой под элемент

Нет

letter-spacing

Normal

число

Расстояние между символами в строке. Может быть присвоено любое значение размера (1px) или нормальное.

Да

line-height

Normal

значение

Определяет расстояние между базовыми линиями строк текста. Может быть присвоено любое значение размера (1px) или нормальное.

Да

list-style-image

URL

Изображение для маркера списка

list-style

Да

list-style -position

Inside

outside

Относительная позиция для маркера: текст при переводе строки начинается под маркером; текст при переводе строки начинается под текстом предыдущей строки

list-style

Да

list-style -type

Табл. 20

Определяет тип маркера

list-style

Да

margin-left

значение

Поле слева от элемента

margin

Нет

margin-right

значение

То же, справа

margin

Нет

margin-top

значение

То же, сверху

margin

Нет

margin-bottom

значение

То же, снизу

margin

Нет

padding-left

значение

Свободное пространство между рамкой и содержимым элемента слева

padding

Нет

padding -right

значение

То же, справа

padding

Нет

padding -top

значение

То же, сверху

padding

Нет

padding -bottom

значение

То же, снизу

padding

Нет

text-align

Left

Right

Center

justify

Определяет способ выравнивания текста элемента: слева, справа, по центру, по ширине

Да

text-decoration

Underline

Line-through

Overline

Blink

none

Используется для: подчёркивания текста, зачёркивания текста, линия над строкой, мерцание текста, отключён режим

Нет

text-indent

число

Указывает отступ в первой строке элемента

Да

text-transform

Capitalizeuuppercase

Lowercase

none

Указывает, как трансформировать текст: делает первую буку каждого слова прописной; делает все буквы текста прописными; делает все буквы текста сточными; отсутсвует трансформация

Да

vertical-align

Табл. 23

Регулирует вертикальное расположение текста внутри элемента.

Нет

white-space

Normal

Pre

nowrap

Определяет, как браузер будет относиться к свободному пространству внутри элемента: сжимает, не сжимает (PRE), перевод строки только по тегу BR

Да

width

значение

Ширина области, отводимой под элемент

Нет

word-spacing

Normal

число

Расстояние между словами текста. Может быть присвоено любое значение размера (1px) или нормальное.

Да

Black (чёрный)

#000000

Maroon (тёмно-бордовый)

#800000

Green (зелёный)

#008000

Olive (оливковый)

#808000

Navy (тёмно-синий)

#000080

Purple (фиолетовый)

#800080

Teal (чирок)

#008080

Gray (серый)

#808080

Silver (серебряный)

#C0C0C0

Red (красный)

#FF0000

Lime (известь)

#00FF00

Yellow (жёлтый)

#FFFF00

Blue (синий)

#0000FF

Fuchsia (фуксия)

#FF00FF

Aqua (аква)

#00FFFF

White (белый)

#FFFFFF

Thin

Узкая

Medium

Средняя

Thick

Широкая

length

Определяет точную ширину рамки в пунктах (pt), сантиметрах (cm), дюймах (in), пикселах (px)

None

Рамка отсутствует

Dotted

Точечная линия

Dashed

Штриховая линия

Solid

Обычная линия

Double

Двойная линия

Groove

Трёхмерная вдавленная линия цвета, определённого свойством color

Ridge

Трёхмерная выпуклая линия цвета, определённого свойством color

Inset

Трёхмерная линия цвета, определённого свойством color

outset

Трёхмерная линия цвета, определённого свойством color

Disk

Диск

Circle

Окружность

Square

Квадрат

Decimal

Арабские цифры (1, 2, 3, …)

Lower-roman

Маленькие римские цифры (I, ii, iii, iv, …)

Upper-roman

Большие римские цифры (I, II, III, IV, …)

Lower-alpha

Строчные буквы (a, b, …)

Upper-alpha

Прописные буквы (A, B, .. )

none

Маркер отсутствует

Serif

Times New Roman

Sans-serif

Arial

Cursive

Script

Fantasy

Comic

monospace

Courier New

xx-small

На 50% меньше размера x-small

x-small

На 50% меньше размера small

small

На 50% меньше размера medium

Medium

Шрифт среднего размера (10pt)

Large

На 50% больше размера medium

x-large

На 50% больше размера large

xx-large

На 50% больше размера x-large

larger

На 50% больше размера родительского элемента

smaller

На 50% меньше размера родительского элемента

Baseline

Выравнивает базовую линию элемента по базовой линии родительского элемента

Middle

Выравнивает середину элемента по середине родительского элемента

Sub

Опускает элемент на подстрочый уровень

Super

Поднимает элемент на надстрочый уровень

Text-top

Выравнивает вершину элемента по верху текста родительского элемента

Text-bottom

Выравнивает низ элемента по низу текста родительского элемента

Top

Выравнивает верх элемента по самому высокому элементу строки

bottom

Выравнивает низ элемента по самому низкому элементу строки