1) Фон (background)
background-color - цвет фона
background-color: #FFOOOO;
background-color: red;
background-color: rgb(0,0,0);
background-image - фоновое изображение
background-image: url(/images/logo.jpg);
background-repeat - повтор фонового изображения
background-repeat: repeat; // повтор по обеим осям
background-repeat: repeat-x; // повтор только по оси x
background-repeat: repeat-y; // повтор только по оси y
background-repeat: no-repeat; // запрещает повтор
Значение по умолчанию - repeat
background-position - позицию фонового изображения относительно блока
background-position: top left; // вверху слева
background-position: top center; // вверху по центру
background-position: top right; // вверху справа
background-position: left center; // по центру слева
background-position: center center; // по центру блока
background-position: right center; // по центру справа
background-position: left bottom; // внизу слева
background-position: center bottom; // внизу по центру
background-position: right bottom; // внизу справа
background-attachment - поркручивать фоновое изображение вместе со страницей/блоком, или нет.
background-attachment: fixed; // фон не прокручивается
background-attachment: scroll; // фон прокручивается
Значение по умолчанию - scroll 2)Цвет (color)
color - определяет непосредственно сам цвет.
#000000 - black #808080 - gray #FFFFFF - white #FF0000 - red #FF00FF - fuchsia #800080 - purple
#008000 - green #00FF00 - lime #000080 - navy #0000FF - blue #FFFF00 - yellow #808000 - olive
#00FFFF - aqua 3)Прозрачность (opacity)
opacity - значения указываются числами от 0.0 до 1.0 (по умолчанию 1)
opacity: 0.5; // прозрачность элемента ровно на половину 4)Текст (text)
text-align - определяет выравнивание текста по горизонтали.
text-align: left; // Выравнивание по левому краю
text-align: right; // Выравнивание по правому краю
text-align: center; // Выравнивание по центру
text-align: justify; // Выравнивание по всей ширине блока
Значение по умолчанию - left
vertical-align - определяет выравнивание текста по вертикали.
vertical-align: middle; // Выравнивание по центру высоты
vertical-align: bottom; // Выравнивание по нижней части контейнера
vertical-align: top; // Выравнивание по верхней части контейнера
Значение по умолчанию - top
letter-spacing - определяет межбуквенное расстояние.
letter-spacing: 3px; // Межбуквенное расстояние 3 пикселя
line-height - определяет высоту строки.
line-height: 16px; // Высота строки 16 пикселей
line-height: 70%; // Высота строки 70% от размера шрифта
line-height: 1.5; // Высота строки ровно полтора размера шрифта
line-height: normal; // Высота строки стандартная
Значение по умолчанию - normal
text-decoration - Определяет подчеркивание, перечеркивание, линию над текстом и мигание.
text-decoration: blink; // Мигающий текст
text-decoration: line-through; // Перечеркнутый текст
text-decoration: underline; // Подчеркнутый текст
text-decoration: overline; // Линия над текстом
text-decoration: none; // Отменяет все вышеописанные свойства
Значение по умолчанию - none
text-indent - определяет отступ первой строки в абзаце.
text-indent: 25px; // Отступ первой строки 25 пикселей
text-transform - позволяет совершать различные манипуляции с регистром.
text-transform: capitalize; // Каждое слово начинается с заглавной буквы
text-transform: lowercase; // Все символы будут строчными
text-transform: uppercase; // Все символы будут прописными
text-transform: none; // Ничего не изменяет
Значение по умолчанию - none
white-space - способы отображения переносов строк и пробелов в самом коде.
white-space: nowrap; // Текст выводится в одну строку, игнорируя переносы
white-space: pre; // Текст выводится точно так же, как и написан в коде
white-space: normal; // Текст выводится как обычно по умолчанию
Значение по умолчанию - normal
word-spacing - определяет расстояние между словами.
Можно указывать любыми величинами имеющимися в CSS.
word-spacing: 10px; // Расстояние между словами 10 пикселей
word-spacing: normal; // Расстояние между словами стандартное
Значение по умолчанию - normal 5) Шрифт (font)
font-family - определяет тип шрифта.
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size - определяет размер шрифта.Устанавливается любыми величинами имеющимися в CSS.
font-size: 12px; // Размер шрифта 12 пикселей
font-style - определяет стиль шрифта.
font-style: normal; // Обычный
font-style: oblique; // Наклонный шрифт
font-style: italic; // Курсивный шрифт
Значение по умолчанию - normal
font-weight - определяет жирность шрифта. Устанавливается целыми числами от 100 до 900 (шаг 100), или стандартными словами.
font-weight: bold; // Жирный
font-weight: bolder; // Полужирный
font-weight: lighter; // Светлый
font-weight: normal; // Обычный
Значение по умолчанию - normal
font-variant - может сделать заглавные буквы размером в строчные.
font-variant: small-caps; // Заглавные буквы размером в строчные 6)Рамки (border)
border-width - определяет ширину рамки. Значения устанавливаются в пикселях.
border-width: 3px; // Ширина рамки 3 пикселя
border-width: 1px 2px 3px 4px;- в данном случае ширина сторон будет такая:
Верхняя - 1 пиксель, Правая - 2 пикселя, Нижняя - 3 пикселя, Левая - 4 пикселя.
border-style - определяет стиль рамки.
border-style: solid; // Сплошная рамка
border-style: double; // Двойная сплошная линия
border-style: groove; // Выдавленная рамка
border-style: ridge; // Поднятая рамка
border-style: inset; // Выдавленная область внутри рамки
border-style: outset; // Поднятая область внутри рамки
border-style: dotted; // Рамка в виде мелкого пунктира
border-style: dashed; // Рамка в виде крупного пунктира
border-color - определяет цвет рамки.
border-color: #FFOOOO; // Один цвет для всей рамки
border-color: #FFOOOO #EE55AA #OOOOOO #FFFFFF; // для каждой рамки определенный цвет 7)Форматирование
width - определяет ширину элемента. Значение указывается всеми величинами
width: 200px; // Ширина элемента 200 пикселей
Значение по умолчанию - auto
height - определяет высоту элемента. Значение указывается всеми величинами
height: 100px; // Высота элемента 100 пикселей
Значение по умолчанию - auto
max-width - определяет максимальную ширину элемента. Значение указывается всеми величинами
max-width: 300px; // Максимальная ширина элемента 300 пикселей
max-height - определяет максимальную высоту элемента. Значение указывается всеми величинами
max-height: 150px; // Максимальная высота элемента 150 пикселей
clear - запрещает обтекание элемента другими с указанной стороны.
clear: both; // Запрещает обтекание слева и справа от элемента
clear: left; // Запрещает обтекание слева от элемента
clear: none; // Разрешает обтекание
Значение по умолчанию - none
display - определяет нужный вариант отображения элемента в странице.
display: block; // Элемент отображается как блочный
display: inline; // Элемент отображается на одной линии с предыдущим
display: list-item; // Элемент отображается как блочный список
display: none; // Элемент невиден, но продолжает занимать место
float - определяет по какой стороне выравнивать элемент относительно подительского контейнера.
float: left; // Выравнивание по левой стороне
float: right; // Выравнивание по правой стороне
float: none; // Выравнивание не указывается
Значение по умолчанию - none
overflow - определяет что делать, если содержание элемента выходит за его границы.
overflow: visible; // Элемент виден даже за пределами границ
overflow: hidden; // Выступающие части будут обрезаны
overflow: scroll; // Выступающие части будут видны с помощью прокрутки
overflow: auto; // Полосы прокрутки добавляются только при необходимости.
Значение по умолчанию - auto
visibility - определяет видимость элемента.
visibility: visible; // Элемент видим
visibility: hidden; // Элемент невидим
Значение по умолчанию - visible 8)Позиционирование
position - устанавливает откуда брать точки отсчета при позиционировании.
position: absolute; // Отсчет берется относительно всей страницы
position: relative; // Отсчет берется относительно родительского контейнера
position: fixed; // Элемент не меняет своего положения даже при прокрутке
position: static; // Элемент отображается как и расположен в коде
Значение по умолчанию - static
top - определяет место расположения элемента от верхней границы контейнера. Значения указываются всеми измерениями
top: 20px; // Элемент располагается на расстоянии 20 пикселей от верха
left - определяет место расположения элемента от левой границы контейнера.
left: 30px; // Элемент располагается на расстоянии 30 пикселей слева
right - определяет место расположения элемента от правой границы контейнера.
right: 40px; // Элемент располагается на расстоянии 40 пикселей справа
bottom - определяет место расположения элемента от нижней границы контейнера.
bottom: 50px; // Элемент располагается на расстоянии 50 пикселей от низа
z-index - при перекрывании элемента другими определяет какой из них будет находится выше.
Значения указываются целыми числами. Например элемент со значением 5 перекрывает элемент со значением 4 и меньше.
z-index: 10; // Элемент перекрывает другие, у которых значение 9 и меньше
z-index: auto; // Элементы перекрываются относительно расположения в коде
Значение по умолчанию - auto 9) Списки (list-style)
list-style-image - указывает адрес изображения, которое будет использоваться вместо маркера.
list-style-image: url(images/list.gif);
list-style-type - определяет вид маркера.
list-style-type: disc; // Закрашеный кружок
list-style-type: circle; // Незакрашеный кружок
list-style-type: square; // Закрашеный квадрат
Значение по умолчанию - disc
list-style-position - определяет позицию маркера.
list-style-position: inside; // Маркер находится внутри списка
list-style-position: outside; // Маркер находится за границей списка 10) Отступы (margin)
margin - определяет величину отступов. Значения задаются любыми способами измерения принятыми в CSS.
margin: 10px; // Отступ от всех сторон элемента 10 пикселей
margin: 5px 10px 15px 20px; // верхний правый нижний левый
margin-left: 10px; // Отступ задан только для левой стороны 11) Поля (padding)
padding - определяет величину полей. Значения задаются любыми способами измерения принятыми в CSS.
padding: 10px; // Поле со всех сторон элемента 10 пикселей
padding: 5px 10px 15px 20px; // верхний правый нижний левый
padding-left: 10px; // Поле задано только для левой стороны 12)Таблицы (table)
border-collapse - определяет способ отображения рамок вокруг ячеек таблицы.
border-collapse: collapse; // Между ячеек отображается только одна линия
border-collapse: separate; // Вокруг ячеек отображается собственная рамка
border-spacing - определяет расстояние между ячейками.
border-spacing: 10px; // Расстояние между ячеек 10 пикселей
border-spacing: 10px 20px; // По вертикали 10, по горизонтали -20 пикселей
caption-side - определяет на какой стороне будет находится заголовок таблицы.
caption-side: top; // Заголовок вверху таблицы
caption-side: left; // Заголовок по с левой стороны таблицы
caption-side: right; // Заголовок по с правой стороны таблицы
caption-side: bottom; // Заголовок внизу таблицы 13)Ставим в начало <li> свои картинки
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
Эти самые кружки меняются очень просто: в ваш файл с CSS пишем следующее:
ul.menu {list-style: none;margin: 0;padding-left: 0px;}
Определим для нашего списка класс:
<ul class="menu">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
Этим мы пока лишь только убрали этот черный кружек и убрали отступ от левого края (margin и padding).
Для того, чтобы появилась наша картинка, пишем в CSS
li.pu {margin: 0;padding: 3px 3px 3px 25px;background: url('*.png') left no-repeat center;}
В значении padding ключевым является последнее число, т.к. оно отвечает за отступ слова (Главная, Внутренняя) от нашей иконки. left и no-repeat отвечает за прижатие иконки к левой стороне и запрещает повторятся иконке во всех плоскостях.
Для наших тегов li припишим класс:
<ul class="menu">
<li class="pu">Пункт 1</li>
<li class="pu">Пункт 2</li>
</ul>
14) Делаем высоту 100%, прибиваем подвал к низу страницы.
html, body {margin: 0;padding: 0;height: 100%}
15)Отличия атрибутов ID и CLASS
Id – уникальный определитель объекта.
#test {font: 12px Arial;}
Class – определитель стиля объекта, или группы объектов на странице.
<div class=”test”>Содержание блока</div>
.test {font: 12px Arial;}
Id имеет больший вес, а значит стили под этим атрибутом – значительнее.
<div id=”test” class=”test2”>Содержание блока</div>
#test { font-size: 12px; }
.test2 { font-size: 14px; }
Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.
2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
<div id="test">Содержание блока</div>
Ссылка на содержания блока будет иметь следующий вид:
http://site.ru/cat/#test
Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.
3. Дополнительные функции id.
Для атрибута id существует функция .getElementById().
4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:
<div class=”test test2”>Содержание блока</div>
При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:
.test.test2 { font-size: 14px; }
Для id – будет так:
#test, #test2 { font-size: 14px; }
Вот и все основные отличия атрибута id от class.