*За предоставление информации огромное спасибо пользователю Zebra с ТП Mybb, я лишь переписала некоторые вещи более удобным языком.
Итак, всем известно, что любой элемент имеет свои параметры и часто аргументы. Выглядит все это дело так:
#element1 {parameter: argument;}
#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.
ПРИМЕЧАНИЕ: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - текущий кегль (высота шрифта);
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;
ширину можно обозначать в %
Теперь непосредственно к самим параметрам:
background-color
Цвет фона элемента. Значением может быть шестизначное название цвета, либо для некоторых стандартных есть свои названия - red, blue, gray и т.д.
Пример: #element1{backgroun-color: #ffffff;}
background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
Пример: #element1 {background-attachment: fixed;}
background-image
Фоновая картинка
Значения:
url ("адрес изображения") - картинка в качестве фона
none - никакой картинки
Пример: #element1 {background-image: url("адрес картинки");}
background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeatx - размножается по горизонтали
repeaty - размножается по вертикали
repeatxy - размножается в обоих направлениях.
background-position
Расположение фоновой картинки на странице
Значения:
Сначала указывается расположение по вертикальной оси: top, center или bottom, затем по горизонтальной: left, center или right.
Пример: #element1 {background-position: top center;}
border
Все параметры рамки, например, толщина, цвет и т.д.
Пример: #element1 {border: #000000 2px;}
border-color
Цвет рамки
Пример: #element1 {border-color: #000000;}
border-width
Толщина рамки
Пример: #element1 {border-width: 2px;}
border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект углубленности фона
outset - создает трехмерный эффект выпуклости фона
Пример: #element1 {border-style: none solid none none;}
border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
Пример: #element1 {border-top: none #000000 2px}
color
Цвет шрифта в элементе
Пример: #element1 {color: #ffffff;}
float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none - отображает объект вставленным в страницу
Пример: #element1 {float: left;}
font-size
Размер шрифта
Значения: См. Примечание.
А также:
xx-small, x-small, small, medium, large, x-large, xx-large.
Пример: #element1 {font-size: small;}
font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - полукурсив
Пример: #element1 {font-style: italic;}
font-weight
Толщина начертания
Значения:
normal - обычный шрифт
bold - полужирный
число от 100 (минимальная жирность) до 900 (максимальная)
Пример: #element1 {font-weight: 200;}
font-family
Семейство шрифта
Пример: #element1 {font-family: sans serif;}
font
Все вышеперечисленные параметры шрифта вместе
Пример: #element1 {font: sans serif #FF0000 small bold;}
display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемент как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
#element1 {display: none;}
height
высота элемента
width
ширина элемента
Значения: см. Примечание.
Пример: #element1 {height: 20px; width: 400px;}
padding и margin
Это два на первый взгляд похожих параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данном случае текст.
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка
padding - все стороны отбивки сразу.
Значения: смотри Примечание.
Пример: #element1 {padding-top: 20px;}
margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ
margin - все стороны отступа сразу.
Значения: смотри Примечание. Для отступов возможно использовать отрицательные значения.
Пример: #element1 {margin-top: -20px;}
text-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру
Пример: #element1 {text-align: center;}
text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание
Пример: #element1 {text-decoration: underline;}
vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Пример: #element1 {vertical-align: middle;}
Отредактировано dofleini (2012-06-06 14:27:34)