| Шрифт и текст |
| Что |
Свойство |
Параметры |
Пример |
| Имя шрифта |
font-family |
Имена через занятую. Если шрифт
не установлен выбирается следующий. |
{font-family: "Arial, Tahoma";}
Текст |
| Размер шрифта |
font-size |
Число и либо в точках(pt),
либо в пикселях(px) или в процентах(%). xx-small, x-small, small, medium, large,
x-large, xx-large. Это соответствует <FONT SIZE="1-7">
smaller, larger <FONT SIZE="-+1"> |
{font-size: 10pt;}
Текст
|
| Стиль шрифта |
font-style |
normal - нормальный, italic -
курсив, oblique - "косой". |
{font-style: italic;}
Текст
|
| Вес шрифта |
font-weight |
normal - нормальный, bold -
жирный, bolder - жирнее, lighter - менее жирный.
Или числа от 100 до 900 |
{font-weight: bold;}
Текст |
| Начертание |
font-variant |
normal - нормальный, small-caps -
мелкие заглавные буквы. |
{font-variant: small-caps;}
Текст |
| Регистр |
text-transform |
capitalize - первая буква слова
заглавная, uppercase - все буквы заглавные,
lowercase - все буквы строчные, none - как
написано в коде. |
{text-transform: uppercase;}
Текст |
| Специальные эффекты |
text-decoration |
none - декорации нет, blink -
мигание, line-through - перечеркнутый, overline -
линия над текстом, underline - подчеркнутый. |
{text-decoration: line-through;}
Текст |
| Расстояние между буквами |
letter-spacing |
in - дюймы, cm - сантиметры, mm -
миллиметры, pt - точки, pc - пики, em - единицы
em, px - пиксили. |
{letter-spacing: 10pt;}
Текст |
| Выравнивание |
text-align |
left - левый, right - правый, center
- центр, justify - по краям. |
{text-align: center;}
Текст |
| Вертикальное выравнивание |
vertical-align |
top - верх, middle - середина,
- вниз. |
{vertical-align: bottom;}
Текст |
| Цвет и фон |
| Что |
Свойство |
Параметры |
Пример |
| Цвета |
|
Либо имя цвета, либо
шеснадцатиричное значение, или rgb(R, G, B), где
R G B в процентах или в числах от 0 до 255. |
|
| Цвет текста |
color |
Либо имя цвета или
шестнадцатиричный код цвета с решеткой. |
{color: Red;}
Текст
|
| Цвет фона |
background-color |
Либо имя цвета или
шестнадцатиричный код цвета с решеткой. |
{background-color: Blue;}
Текст
|
| Фоновая картинка |
background-image |
none - нет,url(адрес/картинки) -
картинка. |
{background-image: url(files/bgim.JPG);}
Текст
|
| Повтор картинки |
background-repeat |
repeat - повторять, repeat-x - по
горизонтали, repeat-y - по вертикали, no-repeat -
не повторять. |
{background-image: url(files/bgim.JPG); background-repeat: no-repeat;}
Текст
|
| Позиция фоновой картинки. |
background-position |
left, center, right - по горизонтали;
top,
center, bottom - по вертикали. |
{background-image: url(files/bgim.JPG); background-repeat: no-repeat;background-position:
top center}
Текст |
| Компоновка |
| Верхнее поле |
margin-top |
Значение в точках (pt) |
{margin-top:
10pt;} |
| Нижнее поле |
margin-bottom |
Значение в точках (pt) |
{margin-bottom:
10pt;} |
| Правое поле |
margin-right |
Значение в точках (pt) |
{margin-right:
10pt;} |
| Левое поле |
margin-left |
Значение в точках (pt) |
{margin-left:
10pt;} |
| Границы |
| Ширина всех границ |
border-width |
Ключевые слова: thin,
medium, thick или числовые значения в [px] |
{border-width: 5px;} |
| Ширина верхней границы |
border-top-width |
Ключевые слова: thin,
medium, thick или числовые значения в [px] |
{border-top-width: 5px;} |
| Ширина нижней границы |
border-bottom-width |
Ключевые слова: thin,
medium, thick или числовые значения в [px] |
{border-bottom-width: 5px;} |
| Ширина левой границы |
border-left-width |
Ключевые слова: thin,
medium, thick или числовые значения в [px] |
{border-left-width: 5px;} |
| Ширина правой границы |
border-right-width |
Ключевые слова: thin,
medium, thick или числовые значения в [px] |
{border-right-width: 5px;} |
| Цвет границы |
border-color |
Цвет в 16ричном формате или имя цвета. |
{border-color: Green;} |
| Стиль границы |
border-style |
none - Не выводить границы, dotted - граница из точек,
dashed - пунктирная линия, solid - сплошная граница, double - двойная граница, groove - вдавленная,
ridge - выпуклая, inset, outset. |
{border-style: dotted;} |
| Слои и их
размещение |
| Позиция |
position |
static - как выведено на
страницу, absolute - абсолютная от левого верхнего
угла браузера, relative - относительно того где
объект должен быть. |
{position: absolute;} |
| Позиция
слева |
left |
В пикселях [px] |
{left: 10px;} |
| Позиция
сверху |
top |
В пикселях [px] |
{top: 20px;} |
| Ширина объекта |
width |
В пикселях [px] |
{width: 150px;} |
| Высота объекта |
height |
В пикселях [px] |
{height: 200px;} |
| Переполнение |
overflow |
none - ничего не делать,
clip - обрезать, scroll - включить
прокрутку. |
{overflow: scroll;} |
| Прокрутка |
overflow-x |
hidden - спрятать прокрутку |
{overflow-x: hidden;} |
| Прокрутка |
overflow-y |
hidden - спрятать прокрутку |
{overflow-y: hidden;} |