CSS
FromCSS ( Cascading Style Sheets — каскадные таблицы стилей) — .
Преимущественно используется как средство описания, оформления внешнего вида и , но может также применяться к любым , например, к или .
Использование CSS[]
CSS используется создателями , или других CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или [источник не указан 220 дней].
Способы подключения CSS к документу[]
Правила CSS пишутся на , внешний вид которого они описывают, так и во внешних CSS. Формат CSS — это четырьмя способами:
- когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>
, включённого в элемент<head>
:
<!DOCTYPE html> <html> <head> ..... <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> ..... </body> </html>
- когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе
<style>
:
<!DOCTYPE html> <html> <head> ..... <style media="all"> @import url(style.css); </style> </head> </html>
- когда стили описаны внутри документа, они могут быть включены в элемент
<style>
, который, включается в элемент<head>
:
<!DOCTYPE html> <html> <head> ..... <style> body { color: red; } </style> </head> <body> ..... </body> </html>
- когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента
<!DOCTYPE> <html> <head> ..... </head> <body> <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif"> ..... </p> </body> </html>
В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.
Для добавления CSS к последний должен содержать специальную ссылку на файл стилей:
<?xml-stylesheet type="text/css" href="style.css"?>
Правила построения CSS[]
В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{» определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор { свойство: значение; свойство: значение; свойство: значение; }
В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
Виды селекторов[]
Универсальный селектор[]
* { margin: 0; padding: 0; }
Селектор тегов[]
p { font-family: arial, helvetica, sans-serif; }
Селектор классов[]
.note { color: red; background-color: yellow; font-weight: bold; }
Селектор идентификаторов[]
#paragraph1 { margin: 0; }
Селектор атрибутов[]
a[href="http://www.somesite.com"] { font-weight: bold; }
Селектор потомков (контекстный селектор)[]
div#paragraph1 p.note { color: green; }
Селектор дочерних элементов[]
p.note > b { color: blue; }
Селектор элементов одного уровня[]
h1 + p { font-size:24px; }
Селектор псевдоклассов[]
a:active { color: blue; }
Селектор псевдоэлементов[]
p::first-letter { font-size: 32px; }
Классы и идентификаторы элементов[]
Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Селекторы классов и идентификаторов </title> <style> p.big { font-family: arial, helvetica, sans-serif; color: red; } div#first { background-color: silver; } </style> </head> <body> <div id="first"> <!-- Это div c серым фоном, стилизованный по id --> </div> <p class="big"> <!-- Это текст красного цвета --> </p> </body> </html>
Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.
Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в для нахождения уникального элемента в документе.
Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
Наследование. Каскадирование. Приоритеты стилей CSS.[]
Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS объявленные для элементов-предков почти всегда наследуются элементами-потомками.
Принцип каскадирования применяется в случае, когда какому-то элементу одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
- Наиболее низким приоритетом обладает стиль браузера;
- Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
- И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
- Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
- Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
- Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел „виды селекторов“), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже.
- Специфичность селекторов делится на 4 группы —
a
,b
,c
,d
:- если стиль встроенный (определён как
style="..."
, тоа=1
, иначеa=0
) ; - значение
b
равно количеству идентификаторов (иначе — id=" ", они начинаются с#
) в селекторе; - значение
c
равно количеству классов (class=" ", они начинаются с.
), псевдоклассов (они начинаются с:
, напримерa:hover
) и селекторов атрибутов (input[type="text"
); - значение
d
равно количеству селекторов типов элементов (h1 { color: blue; }
) и псевдокод-элементов (p::first-line { color: blue; }
). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
- если стиль встроенный (определён как
- Таблица расчёта специфичности[1]:
- Специфичность селекторов делится на 4 группы —
Селектор
a, b, c, d
Число
span
0, 0, 0, 1
1
div .class
0, 0, 1, 1
11
#id .class
0, 1, 1, 0
110
div span
0, 0, 0, 2
2
.class
0, 0, 1, 0
10
#id span
0, 1, 0, 1
101
- Но, самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного правила
!important
. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным автором или пользователем, а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.
Пример таблицы стилей[]
Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами <style>
и размещена в «шапке» той самой веб-страницы, на которую она действует):
p { font-family: arial, helvetica, sans-serif; } h2 { font-size: 20pt; color: red; background: white; } .note { color: red; background-color: yellow; font-weight: bold; } p#paragraph1 { padding-left: 10px; } a:hover { text-decoration: none; } #news p { color: blue; } [type="button"] { background-color: green; }
Здесь приведено семь правил CSS с селекторами p
, h2
, .note
, p#paragraph1
, a:hover
, #news p
и [type="button"]
.
- Первое правило присвоено HTML-элементу
p
(абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства. - Второе правило присвоено HTML-элементу
h2
(заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером. - Третье правило будет применено к любому элементу, атрибут
class
которого равен «note». Например, к параграфу:<p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
- Четвёртое правило будет применяться только к элементу
p
, атрибутid
которого равенparagraph1
. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding). - Пятое правило определяет стиль hover для элементов
a
— , в большинстве браузеров текст элементовa
подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами. - Шестое правило, применяется для элементов
p
, которые находятся внутри какого-либо элемента с атрибутомid
, равным «news
» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше). - Седьмое правило применяется для всех элементов, у которых атрибут
type
равенbutton
. Например, это правило будет применено к элементу<input type="button">
или<button type="button">Кнопка</button>
(обычная кнопка), изменив его цвет фона на зелёный.
CSS-вёрстка[]
До появления CSS оформление веб-страниц осуществлялось исключительно средствами , непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
- Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
- Уменьшение времени загрузки страниц сайта за счёт переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.
- Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.
- Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
Недостатки:
- Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
- Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно увеличивает время редактирования и тестирования.
История создания и развития CSS[]
CSS — одна из широкого спектра технологий, одобренных консорциумом . В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и 4.01 и , и стандарт CSS.
В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин «каскадные таблицы стилей» был предложен Хоконом Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.
В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Уровень 1 (CSS1)[]
Рекомендация W3C, принята , откорректирована [3]. Среди возможностей, предоставляемых этой рекомендацией:
- Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
- Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
- Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
- Выравнивание для текста, изображений, таблиц и других элементов.
- Свойства блоков, такие как высота, ширина, внутренние (
padding
) и внешние (margin
) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие какfloat
иclear
.
Уровень 2 (CSS2)[]
Рекомендация W3C, принята [4]. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
- Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
- Типы носителей. Позволяет устанавливать разные стили для разных носителей (например , КПК).
- Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
- Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
- Расширенный механизм селекторов.
- Указатели.
- Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.
В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1
Уровень 2, ревизия 1 (CSS2.1)[]
Рекомендация W3C, принята .
CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые и вовсе удалены. Удалённые части могут быть в будущем[когда?] добавлены в CSS3.
Уровень 3 (CSS3)[]
CSS3 таксономия и статус: ● Рекомендация ● Кандидат в рекомендации ● Последнее требование ● Рабочий проект
CSS3 ( Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация . Представляет собой . Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования [5], поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.
Преимущественно используется как средство описания и оформления внешнего вида и , но может также применяться к любым , например, к или .
Разрабатываемая версия (список всех модулей)[6].
В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.
Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией (.
Уровень 4 (CSS4)[]
Разрабатывается [10].
Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).
Например:
Наиболее полно поддерживающими стандарт CSS являются работающие на ( и др.), (, , ) и [11] браузеры.
Бывший самый распространённый браузер 6 поддерживает CSS не полностью[13].
Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS, но всё ещё содержал значительное количество ошибок[16].
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3[17].
Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест .
Различные блоковые модели[]
В стандартах CSS от Консорциума (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding
) и рамки (border
). Кроме Internet Explorer 5, эту модель также понимают браузеры 4 и 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing
со значениями content-box
для указания на использование стандартной модели W3C и border-box
для использования модели IE 5.
В браузере при поддержке этого свойства под собственным «рабочим» названием -moz-box-sizing
ввели ещё одно значение — padding-box
, таким образом создав третью блочную модель, в которой width
— это размер содержимого и отступов блока, не включая рамки.
CSS-фильтры[]
Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что 6 применяет правила, использующие селекторы вида * html селектор
(фильтр, известный как «»). Чтобы блоковая модель W3C и IE, работающая в , отображала блок #someblock
шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код:
/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */ #someblock { width: 80px; padding: 10px; }
/* Следующее правило применит только IE6. */ * html #someblock { width: 100px; padding: 10px; }
Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.
Безопасность[]
Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя[18].
CSS Framework[]
Основная статья:
CSS Framework (также Web design framework) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.
Расширения CSS[]
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. В стандартном CSS нет возможностей наследования стилей, вычисляемых значений и прочих зависимостей.
Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
- во время запуска страницы на стороне клиента (средствами )
- во время запуска страницы на стороне сервера
- во время вёрстки сайта средствами специального компилятора
Примеры расширений (препроцессоров) CSS:
- Языки некоторых расширений
См. также[]
Примечания[] Литература[]
- Дэвид Сойер Макфарланд. Новая большая книга CSS = CSS: The Missing Manual. — Санкт-Петербург: .
- Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: .
- Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: .
Ссылки[]