- •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по их атрибутам.
2.Приоритет стилей. Атрибут style. Директивы @import и!important.
Импорт таблицы стилей
Для импортирования файла таблицы стилей (в том числе с другого сервера) необходимо указать в заголовке HTML-файла между тегами <head> и </head> внутри тега-контейнера <style> следующую строку:
<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>
Помимо адреса импортируемой таблицы стилей, в теге-контейнере <style> можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.
Приоритеты использования таблиц стилей
Браузер расставляет приоритеты таблиц стилей следующим образом:
-встроенные ( inline -) стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
-внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline -стилями (при возникновении такого конфликта будут применены inline -стили);
-импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style> ) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
-связанные стили (стили, присоединенные к html-файлу посредством тега <link> ) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
Использование атрибута STYLE
Вы можете использовать специальный атрибут STYLE в вашем XML-документе, вместо того, чтобы устанавливать одно или несколько определенных свойств отдельного элемента в таблице стилей. Если значение свойства, установленного с помощью атрибута STYLE, конфликтует со значением свойства, установленного в таблице стилей, установка с помощью атрибута STYLE имеет приоритет. Таким образом, атрибут STYLE является удобным средством, чтобы переустановить – для определенного элемента – значение свойства, присвоенное для типа элемента в присоединенной таблице стилей. Тем не менее, использование атрибута STYLE нарушает принцип CSS относительно хранения информации о форматировании отдельно от определения содержимого документа и структуры XML-файла.
Чтобы установить одно или несколько значений свойств, включите объявления в значение атрибута STYLE в виде строки, заключенной в кавычки, отделяя индивидуальные объявления точкой с запятой, как вы это делаете в объявлении блока в CSS.
Например, таблица стилей задает для элементов TITLE курсивное начертание с размером шрифта в 10 пунктов. Однако если вы включите следующий атрибут STYLE в начальный тег определенного элемента TITLE в документе, этот элемент будет отображен шрифтом normal (не курсивом), а размер шрифта составит 14 пунктов:
<TITLE STYLE='font-style:normal; font-size:14pt'>
The Adventures of Huckleberry Finn
</TITLE>
Импорт других таблиц стилей
Вы можете воспользоваться директивой @import в вашей таблице каскадных стилей, чтобы встроить в нее одну или несколько других таблиц стилей. Возможность импорта отдельных таблиц стилей позволяет вам хранить правила для связанных стилей в отдельных файлах, а затем объединять их при создании документов определенного типа
Вот обобщенная форма записи директивы @import, где URLТаблСтил есть полный или относительный URL (Uniform Resource Locator) файла, содержащего таблицу каскадных стилей, которую вы хотите импортировать:
@import url(URLТаблСтил);
Директива @import должна располагаться в начале таблицы стилей перед правилами. Вы можете поместить в начале таблицы стилей несколько директив @import.
Если вы импортируете одну или несколько таблиц стилей, браузер объединяет правила, содержащиеся в основной и импортируемых таблицах стилей. Однако в случае возникновения конфликта правил основная таблица стилей (из файла, в который осуществляется импорт) имеет приоритет над импортируемыми таблицами стилей. Если же вы импортируете несколько таблиц стилей, правила из таблицы стилей, импортированной последней, имеют приоритет над правилами из ранее импортированных таблиц стилей.
Каскадирование
CSS означает Каскадные таблицы стилей (Cascading Style Sheets), поэтому нет ничего удивительного, что каскадирование является важной концепцией. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяются к одному элементу. Имеется три основные концепции, которые управляют порядком, в котором применяются объявления CSS:
-Важность
-Специфичность
-Порядок исходного кода
Важность является наиболее значимой. Если два объявления имеют одинаковую важность, специфичность правил определяет, какое из них будет применяться. Если правила имеют одинаковую специфичность, то порядок исходного кода управляет результатом.
Важность
Важность объявления CSS зависит от того, где оно определено. Конфликтующие объявления будут применяться в следующем порядке, более поздние будут переопределять предыдущие:
Таблицы стилей агента пользователя
Обычные объявления в таблицах стиля пользователя
Обычные объявления в таблицах стиля автора
Важные объявления в таблицах стиля автора
Важные объявления в таблицах стиля пользователя
Таблица стилей агента пользователя является встроенной таблицей стилей браузера. Каждый браузер имеет свои используемые по умолчанию правила, определяющие, как выводить различные элементы HTML, если никакой стиль не определен пользователем или дизайнером страницы. Например, непосещенные ссылки будут обычно выводиться синим цветом и подчеркнутыми.
Таблица стилей пользователя является таблицей стилей, которую определил пользователь. Не все браузеры поддерживают таблицы стилей пользователя, но они могут быть очень полезны, особенно для пользователей с некоторыми типами функциональных недостатков. Например, человек с дислексией может иметь таблицу стилей, которая определяет определенные шрифты и цвета, которые облегчают чтение.
Таблица стилей автора является тем, что мы обычно называем "таблица стилей". Это таблица стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).
Обычные объявления являются именно этим: обычными объявлениями. Противоположными являются важные объявления, которые являются объявлениями, за которыми следует директива !important.
Как можно видеть, важные объявления в таблице стилей пользователя будут перекрывать все остальное, что вполне логично. Этот пользователь с дислексией может, например, захотеть, чтобы весь текст выводился шрифтом Comic Sans MS, если он считает, что этот шрифт легче всего читать. Он мог бы тогда создать таблицу стилей пользователя, содержащую следующее правило:
* {
font-family: "Comic Sans MS" !important;
}
В этом случае не имеет значения, что определил дизайнер, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере, все будет выводиться шрифтом Comic Sans MS.
Используемое по умолчанию в браузере представление будет применяться только в том случае, если эти объявления не переопределены какими-либо правилами таблицы стилей пользователя или таблицы стилей автора, так как таблица стилей агента пользователя имеет наименьший приоритет.
Говоря честно, большинство дизайнеров не слишком задумываются о важности, так как с этим ничего нельзя сделать. Не существует способа, которым можно было бы узнать, что пользователь определил таблицу стилей, которая будет переопределять наш код CSS. Если пользователь это сделал, то, вероятно, для этого в любом случае была уважительная причина. Тем не менее желательно знать, что такое важность, и как она может влиять на представление документов.
Специфичность является некоторой характеристикой, которую каждый автор CSS должен понимать и думать о ней. Можно представлять ее как меру того, насколько конкретным является селектор некоторого правила.
Порядок исходного кода
Если два объявления влияют на один и тот же элемент, имеют одинаковую важность и одинаковую специфичность, то окончательное решение определяет порядок исходного кода. Объявление, которое появляется позже в таблицах стилей будет выигрывать у тех, которые встречаются раньше.