Иерархия таблицы стилей. Сравнение индивидуальных и сокращенных значений. Способы применения CSS
1. Что такое каскадные таблицы стилей css?
Здравствуйте дорогие мои читатели. Я решил открыть новую часть сайта, посвященную работе с каскадными таблицами стилей css.
Итак, что же такое каскадные таблицы стилей css?
css
(англ. Cascading Style Sheets
— каскадные таблицы стилей
) - язык описания внешнего вида документа, написанного с использованием языка разметки.
Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.
Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.
Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.
Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.
Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.
2. Как создать каскадную таблицу стилей css?
В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.
Итак, делаем так:
1.
Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей.
Пусть, моя папка будет называться "css"
2. Создаем простую html страничку (index.html). Как это делается можете прочитать .
3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.
В результате у Вас должно получиться вот что:
Все, файл который будет содержать в себе стили css готов.
Теперь давайт подключим созданную стаблицу стилей к файлу index.html.
3. Как подключить каскадную таблицу стилей css?
Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге
прописать тег:
Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.
Например, если наш файл index.html будет иметь такой код:
Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".
Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:
Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.
Теперь давайте проверим работу таблиц стилей css.
Итак, начнем с самого простого, и зададим тегу
новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.Для того, что бы установить фоновое изображение, его нужно разметить в папке с нашими файлами.
А если Вы планируете научиться создавать профессиональные интернет магазины на движке Magento, то это легче всего сделать с помощью моего авторского видео курса .
Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом
Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.
Логическое и физическое форматирование
Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.
Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги
, , , безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:
...
...
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
Body {
font-family: "Times New Roman", serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:
...
...
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера
...
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер
...
...
Вопрос журналиста
Ответ интервьюируемого
...
В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
...
...
...
...
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега 1 слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
H1 {
color: red;
background-color: gray;
}
p {
color: green;
background-color: yellow;
}
em {
color: black;
background-color: silver;
}
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега , но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
H1 em {
color: #CC0000;
background-color: gray;
}
А вот пример кода страницы с использованием этого контекстного селектора:
...
...
...
Это - заголовок первого уровня с выделенным
словом
А это - обычный абзац с выделенными словами
...
На сегодня это все. В следующий раз
мы поговорим о правилах форматирования блоковых элементов страницы,
о позиционировании элементов и о других интересных и полезных возможностях,
реализуемых с использованием CSS.
Можно объединить несколько связанных свойств CSS
в одно свойство, чтобы сэкономить время и свои усилия.
Сравнение индивидуальных и сокращенных значений
Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):
div.foo {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
}
Это правило можно записать короче:
div.foo {
margin: 1em 1.5em 2em 2.5em;
}
Задание менее четырех значений для сокращенного свойства
Сокращенное значение
может иметь менее четырех значений, согласно приведенному ниже списку. Результаты упорядочены по числу предоставленных значений:
Справочник сокращений
Граничные сокращения для различных свойств
Необходимо упомянуть еще, что можно даже задать значения свойств границ (border
) только для одной границы элемента следующим образом:
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
Сокращения для некоторых свойств полей (margin
), заполнения (padding
) и
границы (border
)
Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением".
Сокращения для шрифта
С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий код:
font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif
Можно определить все это с помощью следующей строки:
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;
Сокращения для списков
В данном случае аналогичная история со свойствами списков
позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий код:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif) ;
Это эквивалентно следующему:
list-style: circle inside url(bullet.gif);
Применение CSS к HTML
Существует три способа применения 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
Стоит отметить, что соединяющие символы (такие как >
, +
и
Каскадные
(многоуровневые) таблицы стилей
-
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. При использовании тега
© 2024 Все права защищены
Мобильный гид
, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:... ...
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
Body { font-family: "Times New Roman", serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; }
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:... ...
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера ...
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер ...
...Вопрос журналиста
Ответ интервьюируемого
...В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
... ... ... ...
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега 1 слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
H1 { color: red; background-color: gray; } p { color: green; background-color: yellow; } em { color: black; background-color: silver; }
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега , но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
H1 em { color: #CC0000; background-color: gray; }
А вот пример кода страницы с использованием этого контекстного селектора:
... ... ...
Это - заголовок первого уровня с выделенным словом
А это - обычный абзац с выделенными словами
...На сегодня это все. В следующий раз мы поговорим о правилах форматирования блоковых элементов страницы, о позиционировании элементов и о других интересных и полезных возможностях, реализуемых с использованием CSS.
Можно объединить несколько связанных свойств CSS в одно свойство, чтобы сэкономить время и свои усилия.
Сравнение индивидуальных и сокращенных значений
Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):
div.foo { margin-top: 1em; margin-right: 1.5em; margin-bottom: 2em; margin-left: 2.5em; }
Это правило можно записать короче:
div.foo { margin: 1em 1.5em 2em 2.5em; }
Задание менее четырех значений для сокращенного свойства
Сокращенное значение может иметь менее четырех значений, согласно приведенному ниже списку. Результаты упорядочены по числу предоставленных значений:
Справочник сокращений
Граничные сокращения для различных свойств Необходимо упомянуть еще, что можно даже задать значения свойств границ (border ) только для одной границы элемента следующим образом:
border-left-width: 2px; border-left-style: solid; border-left-color: black;
Сокращения для некоторых свойств полей (margin ), заполнения (padding ) и границы (border ) Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением". Сокращения для шрифта С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий код: font-size: 1.5em; line-height: 200%; font-weight: bold; font-style: italic; font-family: Georgia, "Times New Roman", serif
Можно определить все это с помощью следующей строки: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;
Сокращения для списков В данном случае аналогичная история со свойствами списков позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий код: list-style-type: circle; list-style-position: inside; list-style-image: url(bullet.gif) ;
Это эквивалентно следующему:list-style: circle inside url(bullet.gif);
Применение CSS к HTML
Существует три способа применения 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 Стоит отметить, что соединяющие символы (такие как > , + и
Каскадные (многоуровневые) таблицы стилей - 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. При использовании тега
© 2024 Все права защищены
Мобильный гид