Cascading Style Sheets (каскадные таблицы стилей) — язык разметки, специально разработанный для описания внешнего вида, порядка, цвета и расположения элементов на сайте.

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

Такая концепция соответствует объектно ориентированному программированию.

Преимущества:

Разграничение кода и оформления

Разное оформление для разных устройств

Расширенные по сравнению с HTML способы оформления элементов

Ускорение загрузки сайта

Единое стилевое оформление множества документов

Недостатки:

Не поддерживается старыми версиями браузеров ( а так же не полная кроссбраузерность)

Необходимость иметь определенные начальные знания

Инструменты:

Блокнот

Adobe Dreamweaver

Microsoft FrontPage

Веб-ресурсы (http://colorzilla.com/gradient-editor/)

Rapid CSS Editor

Visual Studio

Параметры

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

СелекторыДля описания каждого класса используется следующая конструкция:

selector{attribute1: value;attribute2: value;...attributei: value;}

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

Selector1, selector2, selector3{attribute1: value;attribute2: value;...attributei: value;}

Например:

h1, h2, h3{ color: red;}

Различают три типа подключения таблиц стилей на странице:

1. Подставляемые стили (in-line)

2. Описание в секции заголовка

3. Внешний файл

Подключение

Самый простой in-line, который встраивается непосредственно в тег. При этом подходе оформление действует в пределах одного тега.

Первый тип

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

Второй тип

И наконец, третий способ — вынести описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание.

Третий тип

Следует отметить, что стили могут переопределяться. Порядок переопределения следующий:

1. Отдельный файл

2. Секция заголовка

3. In-line

Пример. Мы определили во внешнем файле, что текст в теге <p> должен быть красным. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан синим цветом, то текст будет выведен как раз таки синим.

Why so serious

Правило !importantПравило !important — это способ сделать правила, которые должны реагировать одинаково независимо о того, в какой части документа оно применяется. Например, нужно задать чтобы цвет ссылок в любой части документа был красным. Для этого в начале CSS-файла достаточно прописать:

a { color: red !important;}

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

<a href="" style="color: blue;">ссылка</a>

Эт-правила (@)Импортирование:@import присоединяет другую таблицу стилей.

Медиа-типы:@media применит содержимое к определенному типу медиа, например, к печати.

Кодировка:@charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

@charset "windows-1251";

Шрифты:@font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

Страницы:@page определяет блок страницы. Благодаря этому правилу вы определяете размер и представление единой страницы.

Типы носителя

Тип Описание

all Все типы. Это значение используется по умолчанию.

aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.

handheld Наладонные компьютеры и аналогичные им аппараты.

print Печатающие устройства вроде принтера.

projection Проектор.

screen Экран монитора.

tv Телевизор.

http://jigsaw.w3.org/css-validator/

Валидация CSS

Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3.

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

border-radius: 15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/-moz-border-radius:15px 0 15px 0; /* Firefox */-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */-khtml-border-radius:15px 0 15px 0; /* Konqueror */

Примеры хаков

Вендорный префикс

Производитель Браузер Браузерный движок

-o-, -op-, -xv- Opera Software Opera Presto

-moz- проект Mozilla Firefox, SeaMonkey, Camino и др.

Gecko

-ms- Microsoft Internet Explorer 8

Trident

-webkit- Apple Safari 3+, Google Chrome и др.

WebKit

-icab- Apple iCab WebKit

Единицы измерения

Относительные Абсолютные

Единица

Описание

em высота текущего элемента

ex высота символа х

px пиксель

% процент

Единица

Описание

in дюйм (= 2,54 cm)

cm сантиметр

mm миллиметр

pt пункт (=1/72 in)

pc пика (=12 pt)

The end