Пункт первый. Основы
Принцип построение кода:
element {
parameter: argument;
parameter: argument;
parameter: argument;}
element - номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
parameter: - свойство этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument; - значение свойства. Например, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.
Основные параметры
Height - высота элемента
Width - ширина элемента
Background (фон)
background-color – цвет заливки (веб-значение)
transparent - прозрачный
#123456 - номер цвета
background-attachment – прокрутка фона
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
background-image – фоновая картинка
url ("...") – в скобках указываете адрес изображения
none – отсутствие картинки
background-repeat – автоматическое размножение фона
no-repeat - не размножается
repeat-x - размножается по горизонтали
repeat-y - размножается по вертикали
repeat - размножается в обоих направлениях.
background-position – расположение фона. Примечание: сначала указывается расположение по вертикальной оси: top, center или bottom, затем - по горизонтальной: left, center или right.
Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
none – отсутствие рамки
dotted – пунктир (точки)
dashed – штрих-пунктир
solid - одинарная
double - двойная
groove – трехмерный эффект
ridge - трехмерный эффект возвышения
inset - трехмерный эффект углубления
outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки
Color (цвет) – цвет шрифта элемента (веб-значение)
Font (шрифт)
font-size – размер шрифта. Лучше задавать в размерности (px, em и т.д.).
font-style - начертание
normal - стандарт
italic - курсив
oblique - чуть менее наклонный, чем курсив
font-weight – толщина
normal - стандарт
bold – полужирный
letter-spacing – расстояние между буквами, задается в пикселях.
font-family – название шрифта, задается полное название в кавычках (например "Calibri")
Text (текст)
text-align - выравнивание текста внутри элемента.
left - по левому краю
right - по правому краю
center - по центру
justify - по ширине
text-decoration - украшение текста
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
line-through - перечеркивание
text-shadow - тень текста
text-transform - преобразование текста
capitalize - первый символ каждого слова в предложении будет заглавным, остальные символы свой вид не меняют.
lowercase - все символы текста становятся строчными (нижний регистр).
uppercase - все символы текста становятся прописными (верхний регистр).
Display – отображение элемента. Значения:
none - отсутствует
block –
list-item – элемент как часть списка, присваивается маркер
inline – вывод элемента в одну строку
Padding - отступы вокруг основного объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
Margin - отступы дочерних объектов
margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ
Vertical-align - выравнивание элемента по вертикали
top - по верхнему краю
bottom - по нижнему
middle - посередине
Размерности
em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты
Несколько примеров
#element1 {height: 200px; width: 70%;}
задаем element1 высоту, равную 200 пикселей и ширину, равную 70%.
element2 {
background-image : url('ссылка');
background-repeat: repeat-y;
background-position: center;}
задаем element2 фоновой рисунок, который будет размножаться по вертикали и располагаться по центру на странице.
