|
Приложение
Б. Свойства css.
Свойства,
отвечающие за отображение текста.
Свойство
|
Значения
|
Описание
|
color
|
цвет
|
Цвет текста элемента.
|
font-family
|
Названия шрифтов через запятую.
Так же можно указать одно из следующих названий группы шрифтов: serif,
sans-serif,
monospace,
fantasy,
cursive.
|
Устанавливает шрифт, которым
будет отображаться текст. Если указать несколько через запятую, то при
отсутствии на компьютере пользователя первого шрифта, отображаться будет
вторым. Если плюсом указана группа шрифтов, то браузер выберет шрифт из этой
группы самостоятельно. Пример: font-family: Times New Roman, Times,
serif;
|
font-size
|
larger
|
Размер шрифта больше или меньше
основного соответственно.
|
smaller
|
Одно из следующих значений: xx-small, x-small, small,
medium, large, x-large, xx-large.
|
Размер шрифта будет установлен
в соответствии с приведёнными значениями.
|
Размер
|
Размер шрифта будет установлен
в соответствии с числом. Примечание em – ширина одной буквы основного
шрифта, ex
– высота одной буквы основного шрифта. in,
cm, mm – размер в
дюймах, сантиметрах и миллиметрах соответственно.
|
font-style
|
normal
|
Обычный шрифт.
|
italic
|
Курсивный шрифт.
|
oblique
|
Наклонный шрифт.
|
font-variant
|
normal
|
Обычный шрифт.
|
small-caps
|
Шрифт, в котором маленькие
буквы выглядят так же как большие. Например маленькая буква А будет выглядеть
так же как большая.
|
font-weight
|
normal
|
Нормальный шрифт.
|
bold
|
Полужирный шрифт.
|
bolder
|
Шрифт жирнее обычного.
|
lighter
|
Шрифт менее жирный обычного.
|
Число в диапазоне от 100 до 900
шагом в 100.
|
Шрифт будет установленной
«жирности». Нормальный шрифт имеет «жирность» равную 700.
|
font
|
Все значения предыдущих
свойств, в названии которых первое слово font.
|
Позволяет за раз установить все
предыдущие свойства, в названии которых первое слово font. Значения указываются в любом
порядке через запятую. Обязательно необходимо указать значения свойств font-size и font-family.
|
letter-spacing
|
normal
|
Автоматическая установка
интервала между буквами в строке.
|
Размер
|
Интервал между буквами в строке
устанавливается в зависимости от указанного значения.
|
line-height
|
normal
|
Обычный интервал между строк.
|
число
|
Если указано просто число, то
браузер умножит его на установленный интервал между строк, после чего
установит этот интервал равным получившемуся числу.
|
Размер
|
Интервал между строками будет
установлен в соответствии с указанным значением.
|
white-space
|
normal
|
Отображение происходит как
обычно.
|
pre
|
При отображении текста все
пробелы, символы табуляции и переходы строк сохраняются.
|
nowrap
|
При отображении текста
несколько пробелов отображаются как один, а символы табуляции и переходы
строк игнорируются.
|
pre-line
|
При отображении текста
несколько пробелов отображаются как один, а символы табуляции игнорируются, при
этом переходы строк сохраняются.
|
word-spacing
|
Размер
|
Расстояние между словами.
|
text-indent
|
Размер
|
Отступ первой строки элемента.
(Красная строка).
|
text-align
|
left
|
Выравнивание элемента по левому
краю его границ.
|
right
|
Выравнивание элемента по правому
краю его границ.
|
center
|
Выравнивание элемента по центру
от его границ.
|
justify
|
Выравнивание элемента по ширине
от его границ.
|
text-decoration
|
none
|
Ни как не выделенный шрифт
|
underline
|
Подчёркнутый снизу шрифт.
|
overline
|
Подчёркнутый сверху шрифт
|
line-through
|
Подчёркнутый посередине шрифт
(зачёркнутый).
|
blink
|
Мигающий шрифт.
|
Свойства, управляющие размерами блочной модели.
Свойство
|
Значения
|
Описание
|
overflow
|
visible
|
Элемент
отображается полностью, даже если он выходит за рамки родительского элемента.
|
hidden
|
Если
элемент больше родительского, то видна будет только та часть элемента,
которая входит в родительский элемент.
|
scroll
|
Если
элемент больше родительского, то появляются полосы прокрутки.
|
auto
|
Полосы
прокрутки появятся автоматически, если элемент будет больше родительского.
|
height
|
Размер
|
Задаёт
высоту, ширину прямоугольного блока элемента.
|
width
|
max-height
|
Максимально
возможная высота.
|
max-width
|
Максимально
возможная ширина.
|
min-height
|
Минимально
возможная высота.
|
min-width
|
Минимально
возможная ширина.
|
margin-bottom
|
Размер
|
Нижняя
невидимая область.
|
margin-left
|
Левая
невидимая область.
|
margin-right
|
Правая
невидимая область.
|
margin-top
|
Верхняя
невидимая область.
|
margin
|
Размер
всей невидимой области. Можно задать от одного до 4 чисел, при этом будут
заданы соответствующие стороны области margin.
|
padding-bottom
|
Размер
|
Нижняя
область между рамкой и содержанием элемента.
|
padding -left
|
Левая
область между рамкой и содержанием элемента.
|
padding -right
|
Правая
область между рамкой и содержанием элемента.
|
padding -top
|
Верхняя
область между рамкой и содержанием элемента.
|
padding
|
Размер
всей области между рамкой и содержанием элемента. Можно задать от одного до 4
чисел, при этом будут заданы соответствующие стороны области padding.
|
Фон
элемента.
Примечание: фон элемента
находится только в области ограниченной рамкой. В области margin фон всегда
будет от родительского элемента.
Свойство
|
Значения
|
Описание
|
background-color
|
Цвет
|
Цвет
фона элемента
|
background-image
|
url ('url адрес')
|
Задаёт
фоновое изображение
|
background-attachment
|
scroll
|
Фоновое
изображение будет прокручиваться вместе с окном
|
fixed
|
Фоновое
изображение будет зафиксировано, и с окном прокручиваться не будет.
|
background-repeat
|
repeat
|
Если
изображение меньше размера элемента, то оно будет размножено для заполнения
всего фона.
|
no-repeat
|
Изображение
вставляется в единственном экземпляре не зависимо от размеров элемента.
|
repeat-x
|
Изображение
размножается по оси X (по
горизонтали).
|
repeat-y
|
Изображение
размножается по оси Y (по
вертикали).
|
background-position
|
Два
числа в px или в %.
|
Первое
число – позиция изображения по оси X, второе – по
оси Y.
|
Одно
число в px или в %.
|
Позиция
изображения по оси X. Позиция по
оси Y берётся равной 50%.
|
left, right,
center, top, bottom.
|
С
лева, с права, по центру, с верху, с низу соответственно. Возможно
использование двух слов через пробел.
|
background
|
Все
предыдущие значения.
|
Позволяет
за раз задать все предыдущие свойства. Значения перечисляются через пробел в
произвольном порядке. Пример:
background:url('bg_Img.bmp') no-repeat
right bottom;.
|
Рамка.
Примечание: прежде чем работать с
рамкой, необходимо настроить свойство border-style, определив какой она должна
быть. Иначе рамка отображаться не будет.
Свойство
|
Значения
|
Описание
|
border-style
|
none
|
Рамка
не отображается. Значение по умолчанию.
|
solid
|
Рамка
в виде сплошной линии.
|
double
|
Рамка
из двух сплошных линий.
|
dotted
|
Рамка
из точек.
|
dashed
|
Рамка
в виде пунктирной линии.
|
groove
|
Разновидности
объёмных рамок
|
ridge
|
inset
|
outset
|
border-color
|
Цвет
|
Устанавливает
цвет рамки. Можно указать от 1 до 4 значений, при этом будут установлены
разные цвета соответствующим сторонам.
|
border-width
|
Число
в px либо thin (тонкая
рамка) либо medium (средняя) либо thick (толстая).
|
Толщина
рамки. Можно указать от 1 до 4 значений, при этом будет установлена различная
толщина у соответствующих сторон рамки.
|
border
|
Значения
через пробел как у свойств border-style, border-color, border-width.
|
Устанавливает
за раз три предыдущих свойства. С помощью этого свойства можно настроить
только всю рамку целиком. Пример: border:
solid red 5px;
|
border-left-style
|
Все
значения как у свойства border-style
|
Устанавливают
стиль отдельно левой, правой, верхней и нижней сторон рамки соотвтетственно.
|
border-right-style
|
border-top-style
|
border-bottom-style
|
border-left-color
|
Цвет
|
Устанавливают
отдельно цвет каждой стороны рамки.
|
border-right-color
|
border-top-color
|
border-bottom-color
|
border-left-width
|
Число
в px либо thin (тонкая
рамка) либо medium (средняя) либо thick (толстая).
|
Устанавливают
отдельно толщину каждой стороны рамки.
|
border-right-width
|
border-top-width
|
border-bottom-width
|
border-left
|
Значения
как у свойства border
|
Позволяют
разом задать три свойства каждой стороны в отдельности
|
border-right
|
border-top
|
border-bottom
|
border-radius
|
Число
в px
|
Округление
углов элемента. Число задаёт радиус округления. Задать можно как одно число,
так и несколько. В зависимости от количества чисел будут округлены
соответствующие углы.
|
Два
числа в px через символ «/»
|
Форма
элемента превращается в эллипс.
|
border-collapse
|
collapse
|
Соседние
элементы будут иметь общую рамку.
|
separate
|
У
каждой соседней ячейки будет своя рамка.
|
border-spacing
|
Число
в px.
|
Расстояние
между рамками соседних элементов. Работает только при border-collapse: separate.
|
Рамка
вокруг элемента.
Примечание: Рамка вокруг элемента
отличается от просто рамки тем, что она находится в области margin. Так же для того, что бы с ней
работать, необходимо установить свойство outline-style. Возможно одновременно
использовать рамку и рамку вокруг элемента.
Свойство
|
Значения
|
Описание
|
outline-style
|
Те
же значения, как и у свойства border-style.
|
Определяет
вид рамки вокруг элемента.
|
outline-color
|
Цвет
|
Цвет
рамки вокруг элемента.
|
invert
|
Максимально
контрастный заднему фону цвет рамки вокруг элемента.
|
outline-width
|
Размер
|
Толщина
рамки вокруг элемента.
|
outline
|
Все
предыдущие значения через запятую.
|
Позволяет
за раз установить все предыдущие свойства.
|
Нарушение
обычного порядка отображения.
Свойство
|
Значения
|
Описание
|
position
|
static
|
Элементы
отображаются в обычном порядке друг за другом.
|
relative
|
Элемент
смещается относительно того места, где он должен быть. Координаты смещения
задаются свойствами left, right, top
и bottom.
|
absolute
|
Абсолютное
положение в окне браузера. Координаты элемента настраиваются свойствами left, right, top и bottom.
При прокручивании окна элемент прокручивается вместе с ним.
|
fixed
|
То
же самое, что и absolute, только при
прокручивании окна элемент остаётся на месте.
|
z-index
|
Целое
число.
|
Применяется
к элементам, у которых свойство position не равно static, и определяет видимость элементов,
если они накладываются один на другой. Видимым будет тот элемент, у которого
свойство z-index будет иметь
большее значение.
|
left
|
Число
в px или в %.
|
Свойства
служат для задания координат размещения элемента при использовании свойства position.
|
right
|
top
|
bottom
|
Указатель
мыши.
Свойство
|
Значения
|
Описание
|
cursor
|
auto
|
Настраивает вид указателя мыши.
|
crosshair
|
default
|
pointer
|
text
|
wait
|
progress
|
help
|
move
|
e-resize
|
nw-resize
|
n-resize
|
se-resize
|
sw-rexize
|
s-resize
|
w-resize
|
url
|
Файл в формате cur или ani, в котором содержится вид
курсора мыши.
|
Способ
отображения и видимость элементов.
Свойство
|
Значения
|
Описание
|
empty-cells
|
show
|
Если в элементе нет содержания,
то отображаются его граница и фон.
|
hide
|
Если в элементе нет содержания,
то его Граница и фон не отображаются.
|
display
|
none
|
Элемент полностью не видим на
странице, при этом место под него не резервируется. Примечание: это свойство,
как правило, используется совместно с языком JavaScript для
убирания и отображения, например, пунктов меню. Так же стоит отметить, что у
этого свойства есть ещё ряд значений, которые можете изучить самостоятельно.
|
inline
|
Элемент отображается как блок span.
Т.е. ширина элемента соответствует его содержимому.
|
block
|
Элемент отображается как блок div.
Т.е. ширина элемента распространяется на всё пространство родительского
элемента.
|
visibility
|
visible
|
Элемент виден и отображается
как обычно.
|
hidden
|
Элемент не виден, но на его
месте пустая прямоугольная область.
|
collapse
|
Скрывается элемент таблицы.
|
Списки.
Свойство
|
Значения
|
Описание
|
list-style-type
|
disc
|
Устанавливает вид маркера
списка. Применяется к тэгам li, ol, ul.
|
circle
|
square
|
decimal
|
decimal-leading-zero
|
lower-roman
|
upper-roman
|
lower-greek
|
lower-latin
|
upper-latin
|
none
|
list-style-image
|
none
|
Устанавливает маркер списка в
виде изображения. Если none, то маркера не будет. Применяется к
тэгам dd, dt,
li, ol, ul.
|
url файла изображения.
|
list-style-position
|
inside
|
Маркер находится внутри
прямоугольной области элемента списка.
|
outside
|
Маркер находится вне
прямоугольной области элемента списка.
|
list-style
|
|
Позволяет задать все три
предыдущие свойства за раз.
|
Прилипание
объекта, и обтекание его другими элементами.
Свойство
|
Значения
|
Описание
|
float
|
right
|
Элемент
липнет к правому краю, все остальные обтекают его с лева.
|
left
|
Элемент
липнет к левому краю, все остальные обтекают его справа.
|
|
|