- •5. Каскадные таблицы стилей
- •1.Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.
- •2.Приоритет стилей. Атрибут style. Директивы @import и!important.
- •3.Единицы измерения в css.
- •4 Управление размером элементов с помощью css. Использование процентного размера.
- •5.Правила записи стилевых правил.
- •7. Форматирование шрифта с помощью css.
- •1.Форматирование абзацев с помощью css.
- •2.Управление цветом с помощью css.
- •3.Форматирование объектов с помощью css: отступы и границы.
- •4.Внешние и внутренние отступы в css.
- •5.Позиционирование с помощью css.
- •6.Управление видимостью объекта в css.
- •7.Графика с помощью css.
- •8.Оформление таблиц с помощью css.
- •9.Оформление списков с помощью css.
- •10.Плавающие элементы в css.
- •11.Построение навигационных меню с помощью css. Вертикальное меню.
- •12.Создание горизонтального навигационного меню с помощью css.
- •13.Разметка страницы с помощью css.
- •14.Сравнение табличной и блочной верстки.
- •15.Блочная фиксированная разметка с помощью css.
- •16.Блочная гибкая разметка с помощью css.
- •17.Применение абсолютного позиционирования на странице. Правило z-index.
- •18.Применение относительного позиционирования. Создание эффектов объема и тени.
- •19.Правило display. Его назначение и применение.
- •20.Управление стилями элементов htmLпо их атрибутам.
5.Правила записи стилевых правил.
Порядок применение CSS-правил к объектам.
Любой HTML-элемент (блок, список ссылка, картинка и т.д.) имеет свойства, соответствующие каждому визуальному атрибуту. Если какие-то свойства элемента не определены - тогда они могут быть унаследованы от родительского элемента или принимают значение по умолчанию.
Проблемы начинаются тогда, когда есть несколько определений одного свойства, образующие каскад.
Порядок в каскаде стилей.
Объявление одного и того же свойства может появляться в нескольких таблицах стилей, а может появиться несколько раз внутри одной таблицы стилей. Потому порядок применения правил к элементу очень важен. Этот порядок и называется "каскадом".
В соответствии со спецификацией CSS2 свойства применяются от "низкого к высокому":
Стили браузера
Пользовательские стили
Авторские стили
Авторские стили, использующие свойство !important
Пользовательские стили, использующие свойство !important
В этом списке высоким считается пятый пункт, а низким - первый. То есть стили браузера являются наименее важными, а пользовательские важнее авторских только в том случае, если их объявление было со свойством !important (отмечено как важное).
Свойства с одинаковым порядком применяются в зависимостри от их появления в коде - последние имеют больший вес (то есть находятся "ниже").
Свойства, прописанные в HTML-тегах переводятся в соответствующие CSS-объявления. Они рассматриваются как Авторские стили с низким приоритетом.
Специфичность применения правил определена стандартом CSS2 таким образом, что за каждый элемент начисляется различный вес:
ставим 1, если объявление из аттрибута "style" внутри тега. В противном случае - 0(=a)
считаем количество идентификаторов (ID) в селекторе (=b)
считаем количество классов и псевдо-классов в селекторе (=c)
считаем количество тегов и псевдоэлементов (=d)
Объединение всех четырех полученных чисел abcd и дает нам специфичность применения, или говоря иначе - вес применяемого правила.
Стоит отметить, что встроенные стили (прописываемые через атрибут тега "style") имеют наибольший вес и всегда перекрывают иные стили. Но добавление свойства !important в связанных или глобальных стилях перекрывает даже встроенные стили.
Подключение CSS к веб-странице
Существует три вида подключения CSS к веб-странице - создание внешних стилей, применение встроенных каскадных таблиц и внутренние стили.
Внешние стили
Внешние стили CSS (их еще называют связанными) подразумевают запись параметров каскадных таблиц в отдельном текстовом документе с расширением "css". Стилевой документ помещают в корне сайта, либо в отдельной папке, которая тоже находится(как правило) в корневой директории. Но, ничего не мешает, если очень нужно, создать свой файл стилей для любой отдельной веб-страницы, главное правильно присоединить такой файл к html-странице.
Стилевой файл связывают с html-страницей при помощи тега LINK, который располагают в контейнере HEAD. Вот пример двух способов подключения файла style.css к веб-документу:
<html>
<head>
<title>подключение внешних стилей</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://divsite.ru/style.css">
</head>
<body>
</body>
</html>
В первой строке адрес файла style.css указан относительно корня сайта, или если оба файла находятся в одной директории. Во втором случае - используется абсолютный адрес стилевого файла.
Параметры rel и type всегда одинаковы, меняется лишь значения атрибута href, т. е. адреса файла. Абсолютный адрес дает возможность подключать файлы стилей с любого стороннего интернет-сайта.
Встроенные(глобальные) стилевые таблицы
Этот способ взаимодействия html и CSS подразумевает, что таблица стилей внедряется втег HEAD заголовока html-странички при помощи тегов <style> и </style>, с параметром type, который показывает, что идет подключение именно таблиц стилей CSS, ведь существуют и другие. Пример записи кода глобальных стилей:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальныестили</title>
<style type="text/css">
H3 {
font-size: 130%;
font-family: Verdana, sans-serif;
color: #4DB849;
}
</style>
</head>
<body>
<h3>Пирменение глобальных стилей</h3>
</body>
</html>
Как видно из примера заголовок Н3 зеленого цвета, таким же он будет для всех подобных заголовков на странице.
Главный недостаток этого способа очевиден - таблицу стилей необходимо создавать для каждой отделбной веб-страницы. Также, в сложных по дизайну сайтах, значительно увеличиваеся вес html-страницы, что ведет к увеличению времени загрузки проекта.
Внутренние таблицы стилей
Внутренней называют таблицу стилей, которая задана непосредственно внутри самого элемента HTML, также при помощи атрибута style, а в роли его значений подставляют стилевые правила. Возьмем пример прошлого кода(только изменяемое содержимое тега DODY, все остальное не изменится), и дополним его внутренними стилями для тега SPAN:
<body>
<h3><span style="font-size: 140%; color: #E86F0E">Применение</span> глобальных стилей</h3>
</body>
Применение различных способов подключения стилей ставит перед веб-мастером вопрос их приоритета.
Тут в силу вступает принцип каскадирования, который и разрешает все конфликты: в нашем примере внутренние таблицы имеет более высокий приоритет, поэтому первое слово заголовока и изменилось. По этому принципу получается, что первым будет применяется внутренний стиль, потом глобальный стиль и уже в последнюю очередь внешние стили.