Каскадная таблица стилей css. Как задаются и работают CSS-стили. Некоторые параметры шрифта
Каскадные
(многоуровневые) таблицы стилей
-
cascading
style sheets (CSS)
-
это мощный стандарт на основе текстового
формата, определяющий представление
данных в браузере. Если
формат HTML предоставляет информацию о
составе документа, то таблицы стилей
сообщают, как он должен выглядеть. Таким
образом, каскадные таблицы стилей дают
возможность хранить содержимое отдельно
от его представления.
Стиль
включает все типы элементов дизайна:
шрифт, фон, текст, цвета ссылок, поля и
расположение объектов на странице.
CSS
разрабатывались так, чтобы обеспечить
больший уровень контроля над размещением
текста и графики. Каскадные таблицы
стилей обеспечивают должный уровень
единства оформления, организации и
контроля во время разработки узла,
который является недостижимым с помощью
одного только HTML.
CSS
предполагает 3 типа таблиц стилей -
встроенные, внедренные (внутренние) и
связанные (внешние).
Впервые
идея форматирования HTML-документов
с помощью CSS
была рекомендована Консорциумом
W3C
в
1996 году. Эта рекомендация, которая была
обновлена в 1998 году, используется
Web-разработчиками,
и по сей день.
Что
значит слово "каскадный"?
Термин
"каскадный" означает, что в одной
странице HTML
могут использоваться разные стили.
Браузер, поддерживающий таблицы стилей,
будет следовать их порядку (как по
каскаду), интерпретируя информацию
стилей. Это означает, что вы можете
использовать все три типа стилей, и
браузер будет интерпретировать сначала
связанные, затем внедренные и, наконец,
встроенные стили. Даже если ко всему
узлу будут применены образцы стилей,
можно будет управлять отдельными
аспектами страниц с помощью внедренных
стилей, а отдельными областями внутри
этих страниц - с помощью встроенных
стилей.
Другой аспект каскадирования
- наследование
(inheritance
).
Наследование
означает, что если не указано иное, то
конкретный стиль будет унаследован
другими элементами страницы HTML.
Например, если вы примените определенный
цвет текста в теге <р>
,
то все теги внутри этого абзаца наследуют
этот цвет, если не оговорено иное.
Существует
ряд методов, с помощью которых таблицы
стилей могут применяться к документу
HTML.
Синтаксис соответствует реальной
структуре информации, содержащейся
внутри таблицы стиля.
Существует
три метода для применения таблицы стилей
к документу HTML:
Встроенный
(Inline).
Этот
метод позволяет взять любой тег HTML и
добавить к нему стиль. Использование
встроенного метода предоставляет
максимальный контроль над всеми
свойствами Web-страницы. Предположим,
вы хотите задать внешний вид отдельного
абзаца. Вы можете просто добавить
атрибут style к тегу абзаца, и броузер
отобразит этот абзац с помощью параметров
стиля, добавленного в код.
Внедренный
(Embedded)
Внедрение
позволяет контролировать всю страницу
HTML. При использовании тега
. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css"
является обязательным и служит для указания браузеру использовать CSS
.
3. Встраивание в теги документа
Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE
, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен
, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
4. Импортирование
В теге , и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.
Преимущество вложенных таблиц стилей состоит в том, что не нужно добавлять атрибут
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
Стоит отметить, что соединяющие символы (такие как >
, +
и
Для чего нужны таблицы стилей?
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются
следствием дальнейшего развития HTML и дают нам возможность перейти на следующий
уровень представления информации. Таблицы стилей позволяют разделить смысловое
содержимое странички и его оформление.
Как мы помним, в первых версиях стандарта HTML не было предусмотрено никаких
средств для управления внешним видом информации. Общая концепция гипертекста
была направлена на доступность информации для любых устройств, способных воспроизводить
текст. Для разметки рекомендовалось использовать только логические теги, определяющие
заголовки, подзаголовки, списки, абзацы, цитаты и т.д. - то есть, те элементы,
которые и составляют структуру документа. Интерпретация же внешнего вида оставалась
полностью на совести оконечного терминала.
Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную
стройность. Вначале Netscape добавил "улучшенные теги", которые позволили
более широко управлять внешним видом представляемой информации. Нововведение
прижилось, и все расширения Netscape стали стандартом de facto. Потом точно
также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную
смесь логических и оформительских тегов, несовместимых расширений и полностью
перестал отвечать первоначальной концепции - представлять информацию на любом
устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на
свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по
местам все нововведения и выработал общие рекомендации для производителей броузеров.
Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его
стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей
и универсальная объектная модель броузера.
В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая
версия, как и первая, рекомендует создавать странички таким образом, чтобы они
могли быть воспроизведены на любом устройстве - будь это 21" монитор или
маленький черно-белый экрансотового телефона.
Каким же образом была решена проблема с представлением внешнего вида информации?
В этом и заключается революционность подхода. Все оформление рекомендуется вынести
во внешний стилевой файл. Основная же страничка будет содержать только информацию
и ссылки на необходимые стили.
При показе странички конкретному устройству должна быть задействована соответствующая
случаю таблица стилей. Для сотового телефона и монитора компьютера они, разумеется,
должны быть разными. В первом случае мы используем минимальное оформление, которое
позволит представить информацию наиболее оптимально и компактно. Во втором же
случае в нашем распоряжении имеется все богатство шрифтового и цветового оформления.
Таблицу стилей нужно написать всего один раз при создании сайта для каждого
из устройств, на котором планируется вывод информации. К тому же таблица стилей
может быть единой для целого сайта. И, следовательно, не нужно будет повторять
одни и те же описания стилей на каждой из страниц.
Размещение всей стилевой информации в одном внешнем файле открывает нам и другие
полезные возможности - ведь изменив содержимое только одного (!) стилевого файла,
мы можем в считанные секунды сменить весь дизайн сайта. Причем никаких других
переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально
сайт был спроектирован верно.
Разобравшись немного с теорией, давайте переходить к практике, и начнем мы
с вопроса подключения таблицы стилей к HTML-файлу.
Подключение таблиц стилей
Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых
методов:
Начнем с самого простого, с так называемого inline-описания или описания, встроенного
в тег:
Этот текст переопределен
стилем
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые
параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь
одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно
будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ
не слишком отличается, к примеру, от прямого описания внешнего вида при помощи
тега .
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии
просто применять их к соответствующим тегам. Это будет второй способ - описание
в секции заголовка. Его действие распространяется на всю страничку. Определение
стилей происходит при помощи классов, которые представляют собой списки с определением
всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо разместить в секции
заголовка:
....
Теперь эти стили можно применять в любом месте html-кода. Для этого используется
следующая конструкция:
Этот текст написан стилем header
Этот текст написан красным цветом
Как видите, все не так уж сложно. Главное понять основные принципы. Кроме определения
новых классов мы также имеем возможность переопределять стандартные теги. Например,
тег
Теперь весь текст, заключенный в теги, будет выглядеть
так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать
уже существующие странички к использованию стилей. Кроме того, это несколько
уменьшает объем файла за счет отсутствия лишних атрибутов class.
И наконец, третий способ - вынесение описания стилей во внешний файл. Диапазон
его воздействия простирается на все файлы, в которые включено описание. Это
способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется
изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот
файл. Сравните его с предыдущими способами. В одном из них придется менять описание
на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется,
совершенно не вдохновляет.
Каким же образом производится внедрение внешнего файла? Для начала создается
стилевой файл с описанием всех нужных нам классов (mystyle.css):
Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться
именно им.
Почему я сказал "основной"? Дело в том, что на практике приходится
пользоваться всеми тремя способами, и здесь в игру вступает "каскадность"
стилей. Но об этом мы поговорим уже в следующий раз.
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью
стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся
параметров, применяемых при создании стилей.
Каскадность стилей
Итак, для начала разберемся, почему стили называются каскадными. Позволь, дорогой
читатель, я еще раз приведу способы внедрения стилей на страничку:
использование отдельного стилевого файла и вставка его при помощи тега
описание стиля в заголовке документа
применения стиля как параметра в теге.
Каскадность заключается в том, что стили могут переопределяться. Приведенный
выше список способов внедрения стилей соответствует порядку переопределения.
Нижерасположенный способ может переопределять вышерасположенный.
Например, мы определили во внешнем стилевом файле, что текст в теге
должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке
странички мы дополнительно укажем, что тот же текст в теге
должен
быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем
- т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
Для чего это нужно? О, это очень полезная вещь. И сейчас я покажу это на конкретном
примере. Предположим, что для всех ссылок в заголовке на нашей страничке определен
следующий стиль:
И, следовательно, любой текст, который является гиперссылкой, автоматически
становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички
указать копирайт, но сделать это не сильно заметно, чтобы не акцентировать на
этом внимание. Но, тем не менее, мы хотим, чтобы копирайт также был ссылкой.
Сделать это нам нужно всего лишь в одном месте странички и определять для этого
дополнительный класс нецелесообразно. В этом случае нам на помощь придет каскадность
стилей. Достаточно локально переопределить цвет ссылки:
Copyright
(C)
1998-2001 Cherry-Design
Сделали мы это при помощи параметр style, а он, как Вы помните, действует лишь
в пределах того тега, в котором был определен. Что нам и нужно.
Вы наверняка обратили внимание, что в вышеприведенном примере я ввел в обращение
новый тег . Он предназначен специально для таких случаев.
Все, что он делает - это определяет некую область, к которой мы можем применить
стиль. Это очень удобный тег, т.к. не вставляет ни до, ни после себя ненужных
отбивок (т.е. пустое вертикальное пространство), как это делает тег
В каких тегах лучше определять стили посредством класса? Чаще всего для этого
используется одна из следующих конструкций:
Что-то
Что-то
Что-то
Тег
подобен , но только с тем отличием, что делает
до и после себя отбивку (точно так же, как и
). А вот стиль текста,
которым набрано основное содержимое странички, лучше всего сделать переопределением
тега
А не определением отдельного класса.
И небольшое дополнение, связанное с корректным показом в обоих броузерах -
если Вы используете табличную верстку для дизайна сайта, то определять стиль
основного текста нужно не только в теге
, т.к. Netscape
категорически отказывается наследовать стили, присвоенные до таблицы.
Разобравшись с каскадностью, давайте поговорим о синтаксисе.
Синтаксис CSS
Описание каждого класса делается при помощи конструкции, подобной этой:
Small { font-size: 9pt; }
Сначала указывается имя класса - оно может быть произвольным, но желательно
все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются
все необходимые параметры для данного класса. Параметры отделяются друг от друга
точкой с запятой. Вот еще один пример, в котором используется более длинное
описание:
Small { font-size: 9pt; color: #eeeeee; text-align: center; }
Заметьте, что в обеих конструкциях я начал имя класса с точки и таким образом
определил универсальный класс, т.е. такой, который может быть применен к любому
тегу. И делается это при помощи следующей конструкции:
Раз есть универсальные классы, то, вероятно, существуют и какие-то другие?
Все правильно, еще бывают так называемые теговые классы:
p.small { font-size: 9pt; }
Класс, определенный таким образом, сработает только в том теге, для которого
он предназначен, а для всех остальных будет проигнорирован:
Этот текст будет выведен стилем small
Мы можем определять параметры не только для одного тега, но и сразу для нескольких.
Для этого в определении стиля достаточно перечислить их через запятую:
p, td { font-size: 9pt; color:green;}
Такой прием называется группировкой, и в данном случае мы определили и для
В случае переопределения существующих тегов, в описании стиля можно указывать
не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные
параметры примут значения по умолчанию, которые для разных тегов различны.
Псевдоклассы
В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие
псевдокласса распространяется не на весь текст, к которому применен данный стиль,
а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее,
давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении
на них курсора. Эффект достаточно распространенный, и его можно наблюдать в
том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать
вышеописанного эффекта:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Заметьте, что и в том, и в другом случае действие стиля распространяется либо
на определенное состояние (пользователь собирается щелкнуть по ссылке), либо
на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается
смысл псевдоклассов.
Наверное всем известно, что 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, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
