DVKuklin.ru

Учебник по программированию.

Создание сайтов. Первые шаги.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.
Назад в содержание

 

 

Приложение Б. Свойства 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

Элемент липнет к левому краю, все остальные обтекают его справа.

 


Назад в содержание