Использование каскадных таблиц стилей css. Наследование и каскад
27.03.2019
СSS - Cascading Style Sheets (Таблицы Каскадных Стилей)
- это язык, содержащий набор свойств для описания внешнего вида любых HTML документов.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Существует три вида таблиц
стилей:
Внутренние таблицы стилей -
(Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные таблицы стилей
- (Global Style Sheets) определяют стиль элементов во всем документе.
Связанные таблицы стилей -
(Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.
Основным понятием CSS является стиль
– т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы
.
Практическое освоение CSS
Существует четыре способа связывания документа и таблицы стилей
:
Связывание -
позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
Внедрение -
позволяет задавать все правила таблицы стилей непосредственно в самом документе
Встраивание в теги документа
- позволяет изменять форматирование конкретных элементов страницы
Импортирование
- позволяет встраивать в документ таблицу стилей, расположенную на сервере
Остановимся на каждом из этих способов более подробно.
1. Связывание
Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK
, располагающегося внутри тега HEAD
ваших страниц:
Первые два параметра
этого тега являются зарезервированными именами
, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS.
Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.
2. Внедрение
Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD
, в теге STYLE type="text/css">...
. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css"
является обязательным и служит для указания браузеру использовать CSS
.
3. Встраивание в теги документа
Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE
, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен
, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
4. Импортирование
В теге , и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.
Теперь эти стили можно применять в любом месте 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, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
