CSS (Cascading Style Sheets - Каскадные таблицы стилей) - это набор правил оформления и форматирования HTML страницы, позволяющий определять свойства элементов HTML для целого документа. В CSS Вы один раз описываете характеристики объекта и связываете объект со стилем. Для того, чтобы поменять характеристики объекта достаточно изменить описание стиля.
Более тонкая настройка оформления и форматирования документа в CSS позволяет достигать результатов недостижимых в рамках обычного HTML. CSS имеет более богатый набор для работы со шрифтами, что позволяет уменьшить вес страницы, избавившись от графики.
Существует четыре способа подключения CSS к документу:
Связывание - таблица стилей располагается в отдельном файле, который можно подключить к любому количеству HTML страниц.
Внедрение - таблица стилей располагается непосредственно внутри HTML документа.
Встраивание в теги документа - позволяет определить оформление отдельных элементов страницы.
Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Связывание
Если Вы предполагаете использовать один стиль для нескольких станиц, то Вы можете описать стиль в отдельном файле. Для подключения стилевого файла используется команда , расположенная внутри тега .
Первые два свойства указывают браузеру, что на страничке используется CSS. Значение последнего свойства - имя файла (с путем, абсолютным или относительным), в котором прописан стиль страницы.
Внедрение
Если Вам нужно задать стиль только для одной страницы, то описание стиля Вы можете внедрить в тело документа, в заголовке HEAD, между тегами .
Встраивание в теги документа
Вы можете задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например:
Стоит отметить, что данный способ нарушает идеологию использования стилей (их универсальность), поэтому использование его не желательно (хотя, если редко и никому не говорить, то можно).
Импортирование
В теге --> -->
Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, жирный шрифт "Comic Sans MS" размером 14 пикселей и выровненный по обоим краям с отступами со всех сторон 10 пикселей.
Для совместимости со старыми браузерами, не понимающими CSS содержимое элемента , иначе содержимое будет отображено в окне браузера. Новые умные браузеры поймут, что в коментариях заключена таблица стилей и подключат ее. Для удобства чтения/правки, в таблицу стилей можно ставить любое количество пробелов и переносов строк, браузер оставит столько, сколько нужно.
Группирование
Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они записываются через точку с запятой. H1 {font-family: Arial} H2 {font-family: Arial} H1, H2 {font-family: Arial} H1 {font-weight: bold} H1 {font-size: 14pt} H1 {font-weight: bold; font-size: 14pt;}
Наследование
При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе
задается красный цвет шрифта, то выделенный с помощью текст также будет красным.
Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.
Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.
Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого необходимо описать стиль элемента, порождающего все остальные элементы HTML документа, т.е. тега .
Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде .имя_класса {свойства}. Для присвоения класса выбранному тегу используется свойство CLASS="имя_класса". Это можно продемонстрировать на следующем примере:
Код
Отображение
<STYLE TYPE="text/css"> .font1 {color: yellow; background: red;} .font2 {color: blue; background: yellow;} </STYLE> ... <SPAN CLASS="font1">Желтый текст на красном фоне</SPAN> <SPAN CLASS="font2">Синий текст на зеленом фоне</SPAN>. А здесь цвет фона и текста заданы по умолчанию.
Желтый текст на красном фоне Синий текст на зеленом фоне. А здесь цвет фона и текста заданы по умолчанию.
В примере прописаны два класса "font1" и "font2" задающие цвет фона и изображения. Эти классы были применены к тегу . Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:
Код
Отображение
Это ячейка таблицы
И это тоже
Это ячейка таблицы
И это тоже
Для определения класса для определенного тега используется конструкция имя_тега.имя_класса {свойства}. Например, нам нужно часть текста выделить красным. Определим класс для тега :
Код
Отображение
... Здесь мы выделили часть текста.
Здесь мы выделили часть текста.
Если Вы решили поменять стиль выделения текста с помощью класса "select" во всем документе с красного, на другой цвет, то достаточно поменять значение цвета в одном месте - в определении этого класса. А изменения вступят в силу сразу же во всем документе. Если на всех страницах сайта подключается один и тот же стилевой файл, то изменение свойств класса в этом файле приведет и к изменению стиля соответствующий тегов на всех страницах сайта. В этом и заключается вся прелесть каскадных таблиц стилей.
Свойства оформления шрифта представлены в таблице:
Код
Отображение
font-family
Определяет шрифт или семейство шрифта. Можно указывать до трех шрифтов, через запятую (если у клиента не будет установлен первый шрифт, то браузер перейдет к следующему в списке).
font-style
Определяет способ начертания. Возможные значения: normal (нормальный, установлен по умолчанию), italic (курсив), oblique (наклонный).
font-variant
Определяет варианты начертания шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), small-caps (все буквы заглавные).
font-weight
Определяет степень жирности шрифта. Возможные значения: normal(нормальный, установлен по умолчанию), bold, bolder, lighter. Значения bolder и lighter являются относительными, например, значение lighter для жирного текста делает его нормальным.
font-size
Устанавливает размер шрифта. Можно указывать как в относительных единицах (проценты), так и в абсолютных (пикселы, сантиметры и т.д.)
Определяет оформление текста. Возможные свойства: none (по умолчанию, стандартный текст), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание).
text-transform
Определяет оформление регистра букв текста. Возможные свойства: none (по умолчанию, отменяет изменение регистра букв), capitalize (первая буква каждого слова преобразуется в заглавную), uppercase (все буквы преобразуется в заглавные), lowercase (все буквы преобразуется в строчные).
text-align
Определяет оформление выравнивания текста. Возможные свойства:
left (по умолчанию, выравнивание по левому краю),
right (выравнивание по правому краю),
center (центрирование), justify (выравнивание по ширине колонки).
text-indent
Устанавливает величину отступа в первой строке параграфа.
line-height
Устанавливает межстрочный интервал.
word-spacing
Устанавливает интервал между словами.
letter-spacing
Устанавливает интервал между буквами.
vertical-align
Устанавливает вертикальное положение базисной линии элемента. Возможные значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom.
Определяет поведение фонового изображения при скролинге. Возможные значения: none (по умолчанию, отсутствие фонового рисунока), url("name") (фоновый рисунок загружается из файла name, где name - абсолютный или относительный адрес графического файла).
background-attachment
Определяет поведение фонового изображения при скролинге. Возможные значения: scroll (по умолчанию, фоновый рисунок прокручивается вместе с элементом), fixed (фоновый рисунок не прокручивается вместе с элементом).
Определяет ширину границы. Может быть задана в пикселях или с помощью значений: thin (тонкая), medium (средней толщины), thick (толстая).
border-color
Определяет цвет границы. Может принимать значение символьных цветов, числовым кодом цвета или определен как transparent для задания прозрачной (но имеющую ширину) границы.
border-style
Определяет стиль отображения границы. Может принимать значения: none (по умолчанию, нет ганицы), hidden (спрятанная граница), dotted (точки), dashed (штрихи), solid (сплошная линия), double (двойная линия), groove (вогнутая трехмерная окантовка), ridge (выпуклая трехмерная окантовка), inset (вогнутая площадь), outset (выпуклая площадь).
border-collapse
Определяет стиль разделения ячеек. Может принимать значения: separate (ячейки отделены друг от друга), collapse (ячейки не содержат промежутков между собой).
Фильтры позволяют изменить некоторые свойства изображений на веб странице и добиваться интересных графических эффектов.
Фильтры могут применяться не ко всем элементам HTML. К следующим элементам фильтры могут применяться всегда: BODY, BUTTON, IMG, INPUT, MARWUEE, TABLE, TD, TEXTAREA, TH. Фильтры можно применять к следующим тегам, только если заданы свойства ширины WIDTH и высоты HEIGHT или при абсолютном позиционировании элемента: DIV, SPAN. Фильтры нельзя применят к элементам: JAVA, IFRAME, SELECT, OPTION, P, EM, STRONG, H1, ..., H6.
Класс соответствующий определенному фильтру задается в виде:
Здесь ClassName - имя класса, FilterName - имя фильтра, Parameter='Value' - пары параметр=значение, настраивающие действие фильтра. У различных фильтров может быть разное число параметров, или не быть ни одного. Несколько параметров задаются через запятую. При применении нескольких фильтров к одному объекту список фильтров задается через пробел.