Можно определить все это с помощью следующей строки:
font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;
Сокращение для фона
С помощью одной строки CSS можно определить цвет фона, фоновое изображение, повторение изображения и позицию изображения. Возьмем следующий код:
background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Это можно представить с помощью следующего сокращения:
background:#000 url(image.gif) no-repeat top left;
Сокращения для списков
В данном случае аналогичная история со свойствами списков
позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий код:
Существует три способа применения CSS
к документу HTML
:
строковые;
вложенные;
внешние таблицы стилей.
Строковые стили
Можно применить таблицу стилей к элементу, используя атрибут
style
следующим образом:
Внутри этого атрибута перечисляются все свойства CSS
и их значения.
Преимущество строковых стилей состоит в том, что браузер
будет вынужден использовать эти настройки. Все другие стили, определенные в других таблицах стилей, или даже вложенные в заголовок документа
, будут переопределены этими стилями.
Серьезна проблема у строковых стилей состоит в том, что они делают обслуживание стилей значительно труднее. Использование CSS
предназначено для разделения представления документа и его структуры, но строковые стили делают именно обратное - рассеивают правила представления по документу.
Кроме проблем с обслуживанием, вы не получите никаких преимуществ самой в существенной части CSS
: каскадировании.
Вложенные стили
Вложенные таблицы стилей помещаются в заголовке документа внутри элемента style
, как в следующем примере страницы:
Преимущество вложенных таблиц стилей состоит в том, что не нужно добавлять атрибут
style
в каждый параграф
- можно оформить их все с помощью одного единственного определения. Это означает также, что если потребуется изменить внешний вид всех параграфов, это можно будет сделать в одном единственном месте, однако все это, тем не менее, ограничено одним документом.
Внешние таблицы стилей
Внешние таблицы стилей означают размещение
всех определений CSS
в отдельном файле, сохраняя его с расширением файла CSS
, и затем применение его к документам HTML
, используя элемент link
в заголовке документа. Например:
Внешние таблицы стилей позволяют хранить все определения оформления в одном единственном файле. Это означает, что можно вносить изменения на всем сайте, изменяя только один файл
. Веб- браузер
при этом может загрузить его один раз и затем кешировать для всех других документов, которые на него ссылаются, что уменьшает объем загружаемой информации.
Импорт таблиц стилей
Существует и другой способ импорта внешних таблиц стилей в файлы HTML
- оператор @import
. Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS
. Синтаксис
выглядит следующим образом:
Двумя фундаментальными концепциями CSS
являются наследование
и каскадирование
. Наследование
связано с тем, как элемент в разметке HTML
наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование
имеет дело с объявлениями CSS
, которые применяются к документу, и как конфликтующие правила переопределяют друг друга.
Наследование
Наследование
в CSS
является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам.
Используя наследование
можно, например, определить свойства шрифта для элементов html
или body
, и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере.
Каждый элемент в документе HTML
будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента (html
), который не имеет предка.
Каскадирование
Каскадирование
- это механизм, который управляет конечным результатом, в случае когда несколько конфликтующих объявлений CSS
применяются к одному элементу. Имеется три основные концепции, которые управляют порядком, в котором применяются объявления CSS
:
Важность
Специфичность
Порядок исходного кода
Важность
является наиболее значимой. Если два объявления имеют одинаковую важность, специфичность правил определяет, какое из них будет применяться. Если правила имеют одинаковую специфичность, то порядок исходного кода управляет результатом.
Важность
Важность
объявления CSS
зависит от того, где оно определено. Конфликтующие объявления будут применяться в следующем порядке, более поздние будут переопределять предыдущие:
Таблицы стилей агента пользователя
Обычные объявления в таблицах стиля пользователя
Обычные объявления в таблицах стиля автора
Важные объявления в таблицах стиля автора
Важные объявления в таблицах стиля пользователя
Таблица стилей агента пользователя
является встроенной таблицей стилей браузера. Каждый браузер
имеет свои используемые по умолчанию правила, определяющие, как выводить различные элементы HTML
, если никакой стиль не определен пользователем или дизайнером страницы. Например, непосещенные ссылки будут обычно выводиться синим цветом и подчеркнутыми.
Таблица стилей пользователя
является таблицей стилей, которую определил пользователь
. Не все браузеры поддерживают таблицы стилей пользователя, но они могут быть очень полезны, особенно для пользователей с некоторыми типами функциональных недостатков. Например, человек с дислексией может иметь таблицу стилей, которая определяет определенные шрифты и цвета, которые облегчают чтение.
Таблица стилей автора
является тем, что обычно и называется " таблица стилей
". Это таблица стилей
, которую автор
документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).
Для того чтобы превратить обычное объявление в важное за ним необходимо разместить директиву !important
. Как можно видеть, важные объявления в таблице стилей пользователя будут перекрывать все остальное, что вполне логично.
Используемое по умолчанию в браузере представление
будет применяться только в том случае, если эти объявления не переопределены какими-либо правилами таблицы стилей пользователя или таблицы стилей автора, так как таблица стилей
агента пользователя имеет наименьший приоритет.
Специфичность
Специфичность
опеределяют как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav
, который соответствует только элементу с id
совпадающим с nav
).
Специфичность селектора можно легко вычислить. Если два или больше объявлений конфликтуют за данный элемент, и все объявления имеют одинаковую важность, то приоритет в правиле будет иметь объявление с наиболее специфичным селектором.
Специфичность имеет четыре компоненты, которые можно обозначить как a
, b
, c
и d
. Компонента a
является наиболее разграничивающим, d
- наименее.
Компонента a
определяется очень просто: это 1
для объявления атрибута style
, иначе это 0
.
Компонента b
является числом селекторов id
в селекторе (тех, которые начинаются с
#).
Компонента c
является числом селекторов атрибутов
, включая селекторы классов - и псевдо-классов.
Компонента d
является числом типов элементов и псевдо-элементов в селекторе.
После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления CSS
в атрибуте style
не имеют селектора, поэтому их специфичность всегда будет 1,0,0,0
.
В таблице приведены некоторые примеры.
Селектор
a
b
c
d
Специфичность
h1
0
0
0
1
0,0,0,1
.foo
0
0
1
0
0,0,1,0
#bar
0
1
0
0
0,1,0,0
html>head+body ul#nav *.home a:link
0
1
2
5
0,1,2,5
Стоит отметить, что соединяющие символы (такие как >
, +
и
Наверное всем известно, что HTML
задает структуру документа, а CSS
(Cascading Style Sheets, каскадные таблицы стилей) отвечает за оформление веб-страницы, положение и вид элементов. Так сложилось, что HTML и CSS отдельно не используются. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих
технологий не получится грамотно сверстать ни один документ. Многие из нас изучали эти технологии подробнее. Но лично мне до конца так и не удалось «постичь» все истины и возможности CSS. Далее я постараюсь выделить самые важные моменты, которые нужно знать о CSS.
Что такое каскадные таблицы стилей?
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Посмотрите на рисунки ниже, чтобы понять разницу:
Исходный код такого документа имеет вид:
1 2 3 4 5 6 7 8 9 10 11 12 13
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns=
>
<head
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
<title
>
Флексагон</
title
>
<link
rel
=
"stylesheet"
href
=
"style.ess"
type
=
"text/css"
/
>
</
head
>
<body
>
<h1
>
Флексагок</
h1
>
<р>
Флексагок представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.</
р>
</
body
>
</
html
>
Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано ниже:
font-size
:
llpt;
background-color
:
#f0f0f0
;
/* Цвет фона веб-страницы */
color
:
#333
;
/* Цвет основного текста */
}
h1 {
color
:
#а52
а2
а;
/* Цвет заголовка */
font-size
:
24pt
;
/* Размер шрифта в пунктах */
font-family
:
Georgia,
Times,
serif
;
/* Семейство шрифтов */
font-weight
:
normal
;
/* Нормальное начертание текста */
}
p {
text-align
:
justify
;
/* Выравнивание по ширине */
margin-left
:
бОрх;
/* Отступ слева в пикселах */
margin-right
:
Юрх;
/* Отступ справа в пикселах */
border-left
:
lpx solid
#999
;
border
-bottom
:
lpx solid
#999
;
padding
-left
:
Юрх;
padding
-bottom
:
1Opx;
}
В файле style.css
как раз и описаны все параметры оформления таких тегов как, <body
>
,
и <p
>
Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объема повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
. Подобные стили применяются при использовании «чистого» HTML.
Стиль пользователя.
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Если возникает конфликт при изменении стиля одного и того элемента документа, то стиль пользователя имеет самый высокий приоритет, далее следует стиль автора и стиль браузера.
Как добавить стили на страницу?
Добавить CSS стили на страницу можно несколькими способами:
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
