Презентация на тему Каскадные таблицы стилей

каскадные таблицы стилей) — стандартизованная технология описания представления документа,

оформленного языком разметки (преимущественно HTML).
Зачем оно надо?
Цель разработки CSS - разделение содержания (написанного на HTML или другом языке разметки) и оформления документа (написанного на CSS).

и определяющих способ его отображения.
Стиль включает все типы

элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
Таблица стилей — совокупность стилей, применимых к гипертекстовому документу.

Браузер будет последовательно применять стили в соответствии с приоритетом:

сначала связанные, затем внедренные и, наконец, встроенные стили.
Наследование (стилей) — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа.
div->p.*->span.*

цвета, параметры текста
Level 2 (CSS2, 1998 г.) - позиционирование,

@media, @page, звуковые стили, генерируемое содержимое
Level 2, rev. 1 (CSS2.1, 2011 г.) - некоторые изменения и исправления
Level 3 (CSS3, актуально) - существенные изменения и дополнения, учитывающие современные требования к юзабилити
Level 4 (CSS4, ?) ...

Все подробности - на сайте W3.ORG (http://www.w3.org/TR/CSS/)

=> description
selector + description => rule
Селекторы элементов
div, th, td

{ padding-left: 10px; padding-right: 10px; background-color: yellow; }

A: Нужно использовать именованные стили - классы
[element].classname {description}
...

p.red

{color: #FF00;}
p.bold {font-weight: bold;}

...

Красный полужирный

классы” определяют фрагмент содержимого или его текущее состояние
Они предопределены

и применимы не ко всем элементам

атрибутом id, используется в скриптах, поддерживается CSS
[element]#identifier {description}
...

type="text/css">
#wrapper {text-align: left; width: 980px; margin: 0 auto;}

...

Селектор атрибутов
a[href="http://example.com"] {font-weight: bold;}
Контекстный селектор (потомков)
div#container div.listener {margin: 5px;} Селектор

дочерних элементов;
div.listener > h2 {color: green;} Селектор соседних элементов
h1 + p {font-size: 24pt;}
Есть еще, но это уже путь в параллельные миры...

элементу.
Внедрение (Embedded). Внедренные стили позволяют управлять отображением той страницы,

где они определены.
Связывание (Linked или External). Описание стилей вынесено во внешний файл, ссылаясь на него можно контролировать отображение всех страниц сайта.

разметки.
Встроенный стиль применяется к любому тегу HTML с

помощью атрибута style:
Пример:


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

заголовке HTML-документа:
... правила CSS ... ...

наиболее удобное решение, когда речь идет об оформлении целого

сайта. Описание правил помещается в отдельный файл, который тегом подключается ко всем страницам:


К странице можно подключить несколько стилевых таблиц
Файлы со стилями могут находиться на другом веб-сервере
Таблица стилей может быть “собрана” из нескольких файлов с помощью директивы @import

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

обработки стилевых правил (по возрастанию):
Наиболее низким приоритетом обладают стили браузера (default styles);
Пользовательские стили (заданные в его настройках браузера);
Авторские стили:
Inherit - наследуемые стили, имеют самый низкий приоритет;
Внешние стили (linked);
Внедренные стили (embedded);
Встроенные стили (inline);
Высшим приоритетом обладают авторские и пользовательские стили, объявленные с директивой !important. Если таких свойств несколько, то предпочтение отдаётся пользовательским стилям.