НОУ ИНТУИТ | Лекции по современным веб-технологиям. Лекция 10: Что такое CSS?

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Саратовский государственный университет им. Н.Г. Чернышевского

Опубликован: 17.06.2010 | Доступ: свободный | Студентов: 4564 / 1068 | Оценка: 4.52 / 4.19 | Длительность: 11:02:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 62 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Псевдоклассы

Псевдоклассы используются для обеспечения стилевого оформления различных состояний элементов. Наиболее часто псевдоклассы применяются для оформления состояний ссылок.

Псевдоклассы :link и :visited. Современные браузеры по-разному отображают посещенные и непосещенные ссылки. Для того, чтобы можно было применить к этим типам ссылок различные стилевые правила, в CSS предусмотрены специальные псевдоклассы :link и :visited.

a:link {color: red;}
a:visited {color: green;}

В приведенном выше примере первое стилевое правило будет применяться к непосещенным ссылкам в документе, а второе - к посещенным.

Псевдоклассы :hover, :active и :focus. Стиль отображения некоторых элементов может динамически изменяться в результате определенных действий пользователя. Для этого в CSS используются псевдоклассы :hover, :active и :focus.

Псевдокласс :hover применяется к соответствующему элементу в случае, когда пользователь навел курсор мыши на этот элемент, но не активировал его щелчком мыши.

Псевдокласс :active применяется к соответствующему элементу, когда пользователь нажимает кнопку мыши и до тех пор, пока он ее не отпустит. Как правило, это довольно короткий промежуток времени.

Псевдокласс :focus применяется к соответствующему элементу, когда он получает фокус (в результате нажатия определенных клавиш).

CSS не определяет, к каким именно элементам могут применяться указанные псевдоклассы. Однако современные браузеры поддерживают их только применительно к HTML-элементам A, т.е. к ссылкам, например:

A:link    {color: red}    
A:visited {color: blue}   
A:hover   {color: yellow} 
A:active  {color: green}

Псевдокласс :first-child. Данный псевдокласс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка любого вида и делает его текст жирным:

LI:first-child {font-weight: bold;}

Псевдокласс :lang. Псевдокласс :lang позволяет выбирать элементы, язык которых был задан как определенный язык с помощью атрибута lang. Например, следующий элемент

<P lang="en-US">London is a capital of Great Britan.<P>

можно было бы выбрать с помощью кода

p:lang(en-US) { ... }

Псевдоэлементы

Одним из назначений псевдоэлементов является установка стиля первой буквы или первой строки текста в заданном элементе. Чтобы легко создать буквицу в начале каждого параграфа документа, можно использовать следующее правило:

P:first-letter {
  font-weight: bold;
  font-size: 200%
 }

Первая буква каждого параграфа будет теперь жирной и на 200% больше остального текста параграфа.

Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:

P:first-line {font-weight: bold;}

Другим применением псевдоэлементов является вставка автоматически генерируемого содержимого перед или после указанного элемента. За эти действия отвечают псевдоэлементы :before и :after соответственно. Подробно ознакомиться с особенностями применения данных пседоклассов можно в Спецификации CSS.

Использование комментариев может сэкономить немало времени при поиске определенного стилевого правила в CSS-файлах. Комментарии в CSS не влияют на интерпретацию таблиц стилей браузерами. Однако не рекомендуется использовать комментарии на русском языке, т.к. в некоторых случаях использование кириллицы в CSS-комментариях может приводить к неправильной интерпретации таблиц стилей некоторыми популярными браузерами.

Включение таблиц стилей в HTML-документ

Имеется три способа задания стилей в HTML-документе. Перечислим их в порядке предпочтения.

Внешние таблицы стилей

Для подключения к документу внешней таблицы стилей (т. е. таблицы стилей, хранящейся в отдельном файле) следует поместить в заголовок документа HTML элемент LINK, например:

...
<HEAD>
   <LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
...

В элементе LINK можно дополнительно указать типы устройств, на которые распространяется данная таблица стилей, например:

<LINK rel="stylesheet" href="style.css" type="text/css"
 media="screen, print">

Внешние таблицы стилей рекомендуется использовать в том случае, когда несколько HTML-документов пользуются единой таблицей стилей.

Внутренние таблицы стилей

Для включения в документ внутренней таблицы стилей следует поместить в заголовок документа элемент STYLE. Например:

...
<HEAD>
  <STYLE type="text/css">
      H1 {text-align: center}
  </STYLE>
</HEAD>
<BODY>
  <H1>Этот заголовок имеет указанный выше стиль</H1>
</BODY>

Внутренние таблицы стилей рекомендуется использовать в том случае, когда данная таблица стилей используется только в данном HTML-документе.

Таблицы стилей элементов

Последним способом задания стилей является определение таблицы стилей отдельного элемента путем задания его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:

<H1 style="text-align: center">

Подобной практики следует избегать. Она приемлема только в том случае, когда документ HTML содержит единственный элемент с данным набором стилей.

Наследование

Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам. Наследуются не все свойства CSS: например, поля не наследуются, так как маловероятно, что элементу-потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в Спецификации CSS (http://www.w3.org/TR/CSS21/propidx.html). Однако следует помнить, что значения, заданные в виде процентных величин, не наследуются никогда.

Пусть, например, элемент H1 содержит элемент EM:

<H1>Этот заголовок <EM>очень важен</EM>!</H1>

Если элементу EM не присвоен цвет, то он унаследует цвет своего предка, т.е. элемента H1. Для задания стиля отображения элементов по умолчанию, достаточно задать стиль элемента BODY. Все остальные элементы являются потомками этих элементов, поэтому они будут наследовать их свойства.

Для свойств, которые не наследуются по умолчанию, можно определить принудительное наследование, используя ключевое слово inherit. Например, следующее правило заставит все параграфы наследовать все свойства фона от своих предков:

P {background: inherit;}

Принудительное наследование не предназначено для постоянного использования. Оно может быть полезно для отмены объявления в конфликтующем правиле. Однако данный вид наследования необходимо использовать с осторожностью, так как, например, Internet Explorer, включая версию 7, не поддерживает это ключевое слово.

Каскадирование

Сам термин CSS означает Каскадные таблицы стилей (Cascading Style Sheets), поэтому нет ничего удивительного, что каскадирование является его важной характеристикой. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяется к одному элементу. Например, поверх стилевых спецификаций, примененных к какой-нибудь отдельной веб-странице, может действовать стилевой файл, общий для всех страниц веб-сайта.

Имеется три основных показателя, которые управляют порядком, в котором применяются объявления CSS. К таким показателям относятся важность, специфичность и порядок исходного кода.

Важность объявления CSS зависит от того, где оно определено. Таблицы стилей могут иметь три источника происхождения: автор, пользователь и агент пользователя.

Таблица стилей агента пользователя является встроенной таблицей стилей браузера. Каждый браузер имеет свои используемые по умолчанию правила, определяющие, как выводить различные элементы HTML, если никакой стиль не определен пользователем или создателем страницы. Типичным примером является оформление ссылок: непосещенные ссылки обычно выводятся синим цветом и подчеркнутыми.

Таблица стилей пользователя является таблицей стилей, которую определил пользователь. Не все браузеры поддерживают таблицы стилей пользователя, но они могут быть очень полезны, особенно для пользователей с некоторыми типами функциональных недостатков.

Таблица стилей автора является таблицей стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил к соответствующему документу HTML или включил в него.

Как правило, вес правил таблицы автора больше, чем вес правил таблицы пользователя, а вес правил таблиц автора и пользователя больше, чем вес правил таблицы агента пользователя.

Для того, чтобы правила пользовательской таблицы стилей могли перекрывать авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы стилей, имеющее такой атрибут, имеет больший вес, чем соответствующее правило авторской таблицы стилей. Например, если в пользовательской таблице определено следующее ниже правило, то не имеет значения, что определил автор веб-страницы, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере - все будет выводиться шрифтом Comic Sans MS.

* {
  font-family: "Comic Sans MS" !important;
}

Специфичность можно представить как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам, в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу. Если два или больше объявлений конфликтуют за данный элемент, и все они имеют одинаковую важность, то победителем в правиле будет объявление с наиболее специфичным селектором. В общем случае класс элементов является более специфичным, чем просто элемент, а идентификатор элемента более специфичен, чем класс.

Если два объявления, влияющие на один и тот же элемент, имеют одинаковую важность и специфичность, то окончательное решение зависит от порядка исходного кода. Объявление, которое появляется позже в таблицах стилей, будет выигрывать у тех, которые встречаются раньше. Например, если имеется единственная внешняя таблица стилей, то при возникновении конфликта объявления в конце файла будут переопределять объявления, которые встречаются раньше в файле. Конфликтующие объявления могут также возникать в различных таблицах стилей. В этом случае порядок, в котором присоединяются или включаются таблицы стилей, будет определять, какое объявление будет применяться.

Дальше >>

Авторизоваться

Лекции по современным веб-технологиям

Что такое CSS?