Таблицы стилей

CSS - каскадные таблицы стилей - мощнейший инструмент, позволяющий использовать множество различных эффектов при создании сайтов, в то же время, упрощая работу над сайтом в несколько раз.

CSS позволяют собрать информацию о форматировании текстов, отображению элементов и позиционированию в одном текстовом файле, что дает возможность изменить дизайн всего сайта, состоящего из нескольких сотен и даже тысяч страниц, изменив всего один файл.

Для упрощения дальнейшей работы внутри файла CSS желательно использовать комментарии. Для создания комментариев в CSS используется следующая конструкция:

/* комментарий */

Приоритет использования таблиц стилей

Существует несколько способов задания таблиц стилей:

внутри элемента HTML
внутри элемента <head> страницы HTML
во внешнем файле CSS

Если для некоторого элемента HTML было определено более одного стиля, то ни будут последовательно накладываться (отсюда и название "каскадные") друг на друга по определенным правилам. Приоритет наложения стилей друг на друга представлен ниже:

стили браузера по умолчанию
внешние стили
внутренние стили (стили, расположенные внутри элемента <head>)
стили, присвоенные непосредственно HTML элементам

Благодаря этим правилам стили могут быть каскадированны друг на друга. Как видно из представленного списка стиль элемента имеет наивысший приоритет и если возникнет ситуация, что стиль элемента задает, к примеру, красный цвет элемента, а во внешней таблице прописано, что элемент должен быть черным, то элемент будет красным, так как стиль, присвоенный непосредственно внутри элемента имеет наивысший приоритет.

Подключение внешних таблиц стилей

Использование внешних таблиц стилей является наиболее удобным способом организации разметки страниц. Для построения связи с внешней таблицей необходимо разместить соответствующее указание внутри контейнера <head>:

Естественно, файл с названием style.css (в данном примере) должен располагаться в корневой папке сайта.

Описание стилей на странице

Для этого включите конструкцию <STYLE> в контейнер <head>:

<head>
<STYLE>
описание стилей
</STYLE>
</head>

Применение стилей

Стиль может быть применен к элементу, заданием класса стиля. Кроме того, стили могут быть указаны непосредственно при описании элемента

Синтаксис CSS

Синтаксис каскадных таблиц стилей состоит из трех основных частей: типа, свойства и значения, как это показано на примере:

table { font - family: arial, "sans serif"; border - style: dotted;}
p,table,li { font - family: "sans serif"; }

Правил оформления на самом деле не много:

свойство элемента и значение, присваиваемое ему должны располагаться внутри фигурных скобок и разделяться двоеточием
значения, состоящие более, чем из одного слова должны быть помещены в кавычки
если для одного типа определяется одновременно несколько свойств, то они должны быть разделены точкой с запятой
если несколько одинаковых свойств должны быть применены к нескольким селекторам, типы перечисляются через запятую

Цвет и фон

Основными свойствами цвета и фона в CSS являются:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

Свойство COLOR

Задает основной цвет (цвет переднего плана) того или иного элемента. Например, чтобы сделать цвет шрифта всех заголовков первого уровня красным, таблица стилей будет выглядеть так:

H1 {color: red;}

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, где фоновый цвет можно использовать только для страницы или ячейки таблицы (то есть элементов, имеющих атрибут bgcolor ) в CSS, фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок....

Например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY, так как именно он отвечает за всю страницу.

Свойство BACKGROUND-IMAGE

Данное свойство используется для задания фонового изображения. Как и фоновый цвет, фоновый рисунок можно указать не только для страницы и таблиц, а для чего угодно.

BODY {background-image: url(image.png);}

В качестве значения свойства указывается путь к изображению, но немного не так как в html. В начале пишется слово URL а затем сразу без пробелов в круглых скобках положение картинки. Если она находится в той же папке, то пишется просто название картинки, как в примере выше. Если изображение находится папке img, то надо написать url(img/image.png)

Свойство BACKGROUND-REPEAT

Фоновое изображение по умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, пока не заполнит весь экран. С помощью свойства background-repeat можно контролировать эти повторения.

Это свойство может принимать четыре значения: repeat - повторение и по вертикали, и по горизонтали (по умолчанию), repeat-x - повторение только по горизонтали, repeat-y - повторение только по вертикали, no-repeat - не повторяется.

Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, то есть фоновое изображение будет повторяться как по вертикали, так и по горизонтали.

Свойство BACKGROUND-ATTACHMENT

При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения: scroll - фон прокручивается вместе с содержимым (по умолчанию), fixed - фон строго зафиксирован.

Свойство BACKGROUND-POSITION

Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. В начале указывается значение по горизонтали (по оси Х), затем через пробел значение по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Также положение можно задавать специальными словами: left - лево, right - право, center -центр, top - верх, bottom - низ

Сокращенная форма записи - BACKGROUND

Свойство BACKGROUND служит для сокращенной записи всех выше рассмотренных свойств. Порядок свойств этого элемента таков: background-color_background-image_background-repeat_background-attachment _background-position

BODY {background-color:#ffee8c ;background-image : url(image.png) ;background-repeat: no-repeat;background-attachment: fixed;background-position: top right;}
BODY {background: #ffee8c url(image.png) no-repeat fixed top right ;}

Здесь и далее в примерах приводится полная и сокращенная записи.

Шрифты в CSS

За шрифты в CSS отвечают следующие свойства:

font-family
font-style
font-variant
font-weight
font-size
font

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. FONT-FAMILY с английского означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Я рассмотрю три основных семейства:

Serif - шрифты с характерными "засечками", яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - шрифты с одинаковым расстоянием между символами, наподобие печатной машинки, такие как "Courier New";

В начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. В примере "h1 {font-family: verdana, arial, sans-serif;}" означает, что все заголовки первого уровня будут отображаться шрифтом verdana, если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif .

Свойство FONT-STYLE

Свойство задает стиль шрифта: normal - обычный, italic - курсивный, oblique - наклонный.

Курсивный от наклонного отличается тем, что значение italic означает использование встроенного в шрифт курсивного начертания, а значение oblique - это искусственно созданный курсив, то есть созданный наклоном стандартных букв на определенный угол.

Свойство FONT-WEIGHT

Это свойство определяет толщину шрифта: normal - обычный, bold - жирный.

Свойство FONT-VARIANT

Это свойство используется для выбора варианта написания букв нижнего регистра: normal - (по умолчанию), текст отображается обычным образом, small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.

Свойство FONT-SIZE

C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, так как это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.

Свойство FONT

Все, перечисленные выше, свойства можно записать в краткой форме. Это помогает экономить время и делать код стилей более легким.

При этом нужно записывать значения всех свойств через пробел, в такой последовательности: font-style_ font-variant_font-weight_font-size_font-family

P{font-style: italic; font-variant: normal; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
P{ font : italic normal bold 30px arial,sans-serif; }

Текст в CSS

Основные свойства CSS отвечающие за форматирование текста.

text-align
text-decoration
text-indent
text-transform
letter-spacing
word-spacing

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения: left - выравнивание по левому краю (по умолчанию), right - выравнивание по правому краю, center - выравнивание по центру, justify - выравнивание по ширине (по правому и левому краям одновременно).

Свойство TEXT- DECORATION

Имеет четыре значения: none - значение по умолчанию, underline - текст подчеркивается снизу, overline - текст надчеркивается сверху, line-through - текст перечеркивается.

Свойство TEXT-INDENT

Свойство задает отступ первой строки абзацев. Значение можно задавать в процентах, но лучше в пикселах, например, "p {text-indent: 40px;}"

Свойство TEXT-TRANSFORM

Свойство позволяет видоизменять текст, меняя большие буквы на маленькие или наоборот. Может иметь такие значения: none - без изменения (по умолчанию), capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными, uppercase - делает из всех букв заглавные, lowercase - делает из всех букв маленькие

Свойство LETTER-SPACING

Задает межсимвольный интервал. Значение лучше указывать в пикселях, например, "h1 { letter-spacing: 10px;}"

Свойство WORD-SPACING

Задает расстояние между словами. Значение также лучше задавать в пикселах "h1 { word-spacing: 20px;}"

Списки в CSS

Свойства CSS, отвечающие за внешний вид списков:

list-style-type
list-style-position
list-style-image
list-style

Все эти свойства могут применяться как к маркированным спискам, так и к нумерованным, вы даже, просто переопределив стиль, можете сделать из нумерованного списка маркированный и наоборот.

Свойство LIST-STYLE-TYPE

Позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки.... Значений очень много, приведу лишь некоторые: none (без маркера), disc (закрашенный круг), square (закрашенный квадрат), decimal (числа), decimal-leading-zero (числа с нулем - 01, 02, 03), lower-roman (маленькие римские цифры i, ii, iii, iv, v), upper-roman (большие римские цифры I, II, III, IV, V).

Свойство LIST-STYLE-POSITION

Это свойство определяет положение маркера. Может принимать два значения: outside - за пределами основного блока элемента списка, inside - внутри основного блока списка.

Свойство уже устарело, в новых версиях браузеров может уже и не работать!

Свойство LIST-STYLE-IMAGE

Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает некорректно.

Сокращенная форма LIST-STYLE

Перечисленные выше свойства можно записать более компактно. Для этого существует сокращенный вариант list-style:

ul {list-style-type:square; list-style-position: inside; list-style-image: url(marker.gif); }
ul {list-style:square inside url(marker.gif) }

Ссылки в CSS

Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS, за это отвечают псевдоклассы - классы, способные учитывать те или иные условия, при определении свойств html элемента.

Ну вот для ссылок например бывает четыре псевдокласса:

A:link - обычная ссылка
A:active - ссылка в момент нажатия
A:visited - посещенная ссылка
А:hover - ссылка при наведении указателя мыши

a:link {color: blue ;}
a:visited {color:gray;}
a:hover {color:red ; text-decoration:none;}
a:active {color:green; text-decoration:none;}
a {color:black; text-decoration:none;}

Селекторы в CSS

Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому применяется тот или иной стиль CSS. Селекторы могут применяться к конкретному элементу, типу или классу элементов.

Селекторы могут быть универсальными.

.green {color:green;}
<P class ="green">текст параграфа</P>
<TD class ="green">текст ячейки</TD>

Чтобы сделать стиль, применяемый к конкретному типу, например, только к абзацам или ссылкам, нужно создать специальный класс, куда нужно прописать только те свойства, которые меняются, по отношению к базовому стилю для этого типа.

P.green {color:green;}
<P class ="green">текст параграфа</P>

Можно создать стиль вообще для конкретного элемента на странице

<Н1 id="firstheader">Первый заголовок на странице</Н1>
H1#firstheader { color: red; font-weight: bold; text-align: center }

Как видите в html-части вместо атрибута class здесь употребляется атрибут id, а в css - вместо точки употребляется знак #.

Контекстные селектор используются для задания стиля в определенных типах блоков. Предположим, есть страница с таблицами и абзацами текста, причем и в таблице, и в абзацах встречаются выделенные жирным шрифтом (<strong>) слова. И, предположим, нам хочется, чтобы слова в жирные слова в абзацах стали зелеными, а в таблицах красными.

p strong {color:green }
td strong {color:red;}
td p strong {color:blue;}

В последнем пример все жирные слова в абзацах таблицы делаются синими.

Рамки в CSS

Основные свойства рамок в CSS следующие:

border-width
border-color
border-style
сокращенная форма - border

Свойство BORDER-WIDTH

Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px).

Свойство BORDER-COLOR

Свойство определяет цвет рамки. Значение цвета задается обычным образом, например: "#ff3344", или "gold".

Свойство BORDER-STYLE

Свойство определяет вид рамки: . Ниже приведены 8 основных значений данного свойства: solid (сплошная линия), dotted (точечная линия), dashed (пунктирная линия), double (двойная сплошная линии), groove (вдавленная линия с имитацией объема), ridge (выпуклая линия с имитацией объема), inset (блок кажется вдавленным), outset (блок кажется выпуклым).

Сокращенная форма - BORDER

Как и в других свойствах, у рамки есть сокращенная форма border . В начале пишется толщина, затем после пробела стиль, а затем после пробела цвет.

h1 {border:30px outset red;}

Замечу, что современные свойства, такие как BORDER-COLLAPSE, BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT, BORDER-RIGHT, а также связыанные с ними типа BORDER-TOP-COLOR, BORDER-TOP-STYLE, BORDER-TOP-WIDTH работают не во всех браузерах, в частности не работают в последней на момент написания этой статьи версии Google Chrome.

Блочная модель

В html различаются блочные и строчные элементы. Блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами, нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить заголовки, абзацы, списки, таблицы, рисунки. А строчные элементы не создают структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы STRONG, EM , I.

Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру.

Поля и отступы

MARGIN (поля) - расстояние от границы (рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (отступы) - внутреннее расстояние между границей(рамкой) и содержимым блока.

Добавляя знакомые ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.

p {margin:50px; padding:20px;}
p {margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:150px;}

Размеры

По умолчанию высота и ширина блоков определяются автоматически, исходя из объема содержимого. С помощью технологии CSS размеры можно задать самостоятельно.

HEIGHT, WIDTH - размеры блока
MIN-HEIGHT, MIN-WIDTH - минимальные размеры блока
MAX-HEIGHT, MAX-WIDTH - максимальные размеры блока

Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.

DIV#TOP {height: 300px; border: 1px solid red; background: #FFE446;}

Позиционирование блоков

Технология CSS позволяет размещать что угодно и где угодно. Нужно просто указать координаты блока. Это помогает создать действительно уникальный дизайн.

Есть две основные модели позиционирования: абсолютное (POSITION:ABSOLUTE;) и относительное.

Обычно для используется абсолютное позиционирование (POSITION:ABSOLUTE;): свойство позиционирования указывают как POSITION, а затем используя ключевые слова top, right,bottom,left указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Огромный плюс абсолютного позиционирования в том, что блок с абсолютным позиционированием располагается по заданным координатам, а не в мом месте HTML-кода, где он описан.

Если необходимо зафиксировать блок, чтобы он не прокручивался вместе с основным содержимым, необходимо указать значение FIXED.

DIV#TOP {height: 300px; border: 1px solid red; background: #FFE446; position:fixed;}

При относительном позиционировании (POSITION:RELATIVE; ), блок смещается, но его прежнее место ничего не заполняет. Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

DIV#TOP {height: 300px; border: 1px solid red; background: #FFE446; position: relative;}

Плавающие блоки

С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц (блочный дизайн), по принципу которого построено большинство современных сайтов.

Плавающие блоки в CSS определяются свойством FLOAT. Свойство может принимать следующие значения, определяющие в какую сторону блок должен быть смещен: left - блок перемещается влево, остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха, right - блок перемещается вправо, остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха, none - блок не перемещается (по умолчанию).

Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. В примере описываются три колонки.

.column1 {float:left; width: 33%; }
.column2 {float:left; width: 33%;}
.column3 {float:left;width: 33%;}

В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV

Порядок слоев

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.

DIV#TOP {height: 300px; border: 1px solid red; background: #FFE446; position: relative; z-index: 1;}

С помощью порядка слоев можно делать эффекты наложения, например, всплывающие окна.