Вложенные таблицы стилей. Уроки CSS.
Подготовил: Александр Головко Дата публикации: 30.12.2010Последнее обновление: 05.01.2011
Вторая статья из цикла «подключение CSS» посвящена вложенным таблицам стилей. Вложенные таблицы обладают существенно большей гибкостью, чем встроенные стили.
Во-первых, это уже полноценная таблица стилей в которой можно писать любые допустимые правила (ты, конечно, помнишь, что встроенные стили содержали только часть правила — список определений для какого-нибудь конкретного элемента).
Во-вторых, опять таки, в отличие от встроенных стилей, правила не разбросаны по всему HTML, а сгруппированы в единый логических блок с которым удобно работать.
Ключ к вложенным таблицам — тег style
Знакомься, тег style:
- должен располагаться в секции head;
- содержимое тега представляет собой таблицу стилей, применяющуюся к документу;
- в одном документе может быть несколько тегов style.
Пример применения:
<head>
<title>Заголовок окошка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,body {
height: 100%;
}
img {
border: none;
}
ul{
list-style: none;
}
:focus{
-moz-outline-style:none;
}
-->
</style>
</head>
Атрибуты тега style
Обрати внимание, у тега присутствует атрибут type=»text/css», который сообщает браузеру, что содержимое — таблица стилей.
Так же можно задать атрибут media, который позволяет применять таблицу стилей только для определенных устройств отображения. Например:
<style type="text/css">
<!--
body {
background:url(../../../learn/css/css-including/grad.png) repeat-x;
}
/* на мониторе сайт будет иметь какой-нибудь красиывй фон */
-->
</style>
<style type="text/css" media="print">
<!--
body {
background:none;
}
/* а при выводе на устройство печати фон отключаем */
-->
</style>
Обратная совместимость
Ты, наверное, уже заметил, что в приведенных выше примерах содержимое тега style взято в HTML комментарии. Зачем? Все очень просто. Некоторые особо старые браузеры (я сейчас не имею в виду IE6) могут не понимать этот тег. Тогда они сам тег преспокойненько пропустят, а все его содержимое запросто могут вывести на экран.
Хотя по-идее содержимое находится в секции head и отображаться все же не должно, но кто ж их знает, этих древних браузеров! Не исключено, что в каменном веке выводилось на экран не только содержимое тега body! В общем, безопасным считается взять всю таблицу в комментарии. Тогда уж точно ни один питекантроп не увидит CSS кода вверху страницы.
Недостатки вложенной таблицы
Достоинства, по сравнению с встроенными стилями, были описаны в самом начале. Теперь пришла пора добавить ложку дегтя. Нормальную такую ложку. Половник.
Главное ограничение четко звучит в самом названии — «вложенная таблица». Тег style, расположенный в секции head, навеки впечатал такой CSS в HTML файл! Что же это получается? Если у меня на сайте несколько сотен страниц сделанных под единое оформление, то в каждую нужно вставить одинаковый код таблицы (возможно десятки килобайт)? Фактический объем сайта раздуется неимоверно. А какая работа мне предстоит, если я захочу, допустим, поменять на всех страницах цвет фона, даже и подумать страшно! Правда, с повсеместным распространением движков на базе шаблонов, это уже не может считаться недостатком.
Тем не менее, получаем ту же проблему, что и при встроенных стилях, только в масштабе не отдельной страницы, а всего сайта в целом!
Не волнуйся — решение существует! Самый правильный и удобный вариант заключается в том, чтобы для подключения CSS использовать внешние таблицы стилей.
Область применения
А для чего же тогда вложенные? Их удобно применять там, где стили уникальны для данной страницы и составляют с HTML единый компактный блок. Вот, например, на нашем сайте, на всех демонстрационных примерах (там, где они вынесены на отдельную страницу) используется вложенная таблица стилей. Это удобно. Пользователь открыл один файл и сразу увидел весь интересующий его код.
Еще один вариант — это критические, с точки зрения быстродействия, участки. Все-таки один файл с HTML и вложенной таблицей загрузиться быстрее, чем два (если CSS храниться отдельно и за ним придется еще раз «ходить» на сервер).
Резюме
Подключение CSS с помощью вложенных таблиц стилей имеет очень ограниченную область применения. В реальных проектах такое подключение без необходимости лучше не использовать.
Вложенные таблицы стилей — Xiper.net
Автор: Александр Головко Дата публикации: 30.12.2010
Вторая статья из цикла «подключение CSS» посвящена
Во-первых, это уже полноценная таблица стилей в которой можно писать любые допустимые правила (ты, конечно, помнишь, что встроенные стили содержали только часть правила — список определений для какого-нибудь конкретного элемента).
Во-вторых, опять таки, в отличие от встроенных стилей, правила не разбросаны по всему HTML, а сгруппированы в единый логических блок с которым удобно работать.
Ключ к вложенным таблицам — тег style
Знакомься, тег style:
- должен располагаться в секции head;
- содержимое тега представляет собой таблицу стилей, применяющуюся к документу;
- в одном документе может быть несколько тегов style.
Пример применения:
<head>
<title>Заголовок окошка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,body {
height: 100%;
}
img {
border: none;
}
ul{
list-style: none;
}
:focus{
-moz-outline-style:none;
}
-->
</style>
</head>
Атрибуты тега style
Обрати внимание, у тега присутствует атрибут type=»text/css», который сообщает браузеру, что содержимое — таблица стилей.
Так же можно задать атрибут media, который позволяет применять таблицу стилей только для определенных устройств отображения. Например:
<style type="text/css">
<!--
body {
background:url(grad.png) repeat-x;
}
/* на мониторе сайт будет иметь какой-нибудь красиывй фон */
-->
</style>
<style type="text/css" media="print">
<!--
body {
background:none;
}
/* а при выводе на устройство печати фон отключаем */
-->
</style>
Обратная совместимость
Ты, наверное, уже заметил, что в приведенных выше примерах содержимое тега style взято в HTML комментарии. Зачем? Все очень просто. Некоторые особо старые браузеры (я сейчас не имею в виду IE6) могут не понимать этот тег. Тогда они сам тег преспокойненько пропустят, а все его содержимое запросто могут вывести на экран.
Хотя по-идее содержимое находится в секции head и отображаться все же не должно, но кто ж их знает, этих древних браузеров! Не исключено, что в каменном веке выводилось на экран не только содержимое тега body! В общем, безопасным считается взять всю таблицу в комментарии. Тогда уж точно ни один питекантроп не увидит CSS кода вверху страницы.
Недостатки вложенной таблицы
Достоинства, по сравнению с встроенными стилями, были описаны в самом начале. Теперь пришла пора добавить ложку дегтя. Нормальную такую ложку. Половник.
Главное ограничение четко звучит в самом названии — «вложенная таблица». Тег style, расположенный в секции head, навеки впечатал такой CSS в HTML файл! Что же это получается? Если у меня на сайте несколько сотен страниц сделанных под единое оформление, то в каждую нужно вставить одинаковый код таблицы (возможно десятки килобайт)? Фактический объем сайта раздуется неимоверно. А какая работа мне предстоит, если я захочу, допустим, поменять на всех страницах цвет фона, даже и подумать страшно! Правда, с повсеместным распространением движков на базе шаблонов, это уже не может считаться недостатком.
Тем не менее, получаем ту же проблему, что и при встроенных стилях, только в масштабе не отдельной страницы, а всего сайта в целом!
Не волнуйся — решение существует! Самый правильный и удобный вариант заключается в том, чтобы для подключения CSS использовать внешние таблицы стилей.
Область применения
А для чего же тогда вложенные? Их удобно применять там, где стили уникальны для данной страницы и составляют с HTML единый компактный блок. Вот, например, на нашем сайте, на всех демонстрационных примерах (там, где они вынесены на отдельную страницу) используется вложенная таблица стилей. Это удобно. Пользователь открыл один файл и сразу увидел весь интересующий его код.
Еще один вариант — это критические, с точки зрения быстродействия, участки. Все-таки один файл с HTML и вложенной таблицей загрузиться быстрее, чем два (если CSS храниться отдельно и за ним придется еще раз «ходить» на сервер).
Резюме
Подключение CSS с помощью вложенных таблиц стилей имеет очень ограниченную область применения. В реальных проектах такое подключение без необходимости лучше не использовать.
Основы Sass: Вложенность
Когда вы только начинаете использовать Sass, первое, с чем вы сталкиваетесь — это вложенность (nesting). Одна из причин, по которой мы используем препроцессоры, заключается в том, что они помогают сократить количество кода. В частности, вложенность позволяет использовать сокращения при написании правил. Однако проблема всех отличных инструментов в том, что ими легко злоупотребить. Излишнее использование вложенности приводит к сложным, не поддающимся сопровождению стилям.
Что такое вложенность
Вложенность позволяет записывать селекторы, имитирующие структуру HTML. Это дает возможность использовать сокращения при написании стилей. Например:
div {
p {
color: black;
}
}
Это простейший пример вложенности, элемент div содержит элемент p. Скомпилированный результат:
div p { color: black; }
Элементу div мы можем задать собственные свойства:
div {
font-size: 14px;
p {
color: black;
}
}
Этот пример скомпилируется в два разных правила, одно для элемента div, другое — для p.
div { font-size: 14px;}
div p { color: black; }
Как использовать вложенность
Использовать вложенные стили достаточно просто: нужно всего лишь записать селектор (или селекторы) между фигурными скобками другого селектора.
.parent {
.child {
}
}
Вложенность может иметь столько уровней, сколько вы захотите. Это значит, что вы можете вложить элемент внутрь другого элемента, который сам содержится внутри третьего элемента.
.first-level {
.second-level {
.third-level {
.fourth-level {
}
}
}
}
Ограничения на уровень вложенности действительно нет. Но если что-то можно сделать, это не значит, что это нужно делать. Хорошей практикой считается сохранение не более трех уровней вложенности. Большее число уровней влияет на читаемость кода. Sass призван помочь нам писать CSS быстрее, а не превратить его в кучу неподдерживаемых стилей. Например:
.page {
font-family: sans-serif;
.content {
background-color: black;
.text {
color: white;
font-size: 12px;
.headline {
font-weight: bold;
a {
color: blue;
&:visited {
color: green;
}
&:hover {
color: red;
}
&:active {
color: yellow;
}
}
}
}
}
}
Пять уровней вложенности выглядят вполне безобидно. Взгляните на скомпилированный CSS, чтобы лучше понять проблему:
.page { font-family: sans-serif; }
.page .content { background-color: black; }
.page .content .text { color: white; font-size: 12px; }
.page .content .text .headline { font-weight: bold; }
.page .content .text .headline a { color: blue; }
.page .content .text .headline a:visited { color: green; }
.page .content .text .headline a:hover { color: red; }
.page .content .text .headline a:active { color: yellow; }
Представьте, что мы изменим структуру страницы, например, поменяем .content на .article. Все вложенные стили должны быть переписаны, поскольку все они зависят от .content.
Если мы захотим использовать стили для .text где-нибудь еще на сайте, мы не сможем, потому что правила для .text зависят от элементов, которые его окружают.
Ссылки на родитеский селектор
В страшном примере выше мы использовали &, который должен замещаться на родительский селектор. Символ : использовался для создания псевдо-классов для ссылок.
a {
color: blue;
&:visited {
color: green;
}
&:hover {
color: red;
}
&:active {
color: yellow;
}
}
Скомпилируется в:
a { color: blue; }
a:visited { color: green; }
a:hover { color: red; }
a:active { color: yellow; }
Само по себе это легко читается и вполне поддерживаемо. Символ & также можно использовать для создания сложных селекторов, добавив в нему окончания. Например:
.col {
&-span1 { width: 8.33%; }
&-span2 { width: 16.66%; }
&-span3 { width: 24.99%; }
}
Получим:
.col-span1 { width: 8.33%; }
.col-span2 { width: 16.66%; }
.col-span3 { width: 24.99%; }
Вложенность свойств
Sass также позволяет использовать сокращения для свойств. Обычно для определения свойств из одного пространства имен, например border, мы должны каждое свойство записывать отдельно. В Sass мы можем задать пространство имен, а внутри перечислить свойства.
.example {
border: {
style: dashed;
width: 30px;
color: blue;
}
}
Скомпилируется в:
.example {
border-style: dashed;
border-width: 30px;
border-color: blue;
}
В результате пространство имен добавилось к каждому свойству. В отличие от вложенных селекторов для вложенных свойств не нужно использовать &, чтобы подставить значение пространства имен.
Заключение
Теперь, когда вы познакомились с вложенностью, пожалуйста, используйте ее ответственно. Очень просто с помощью вложенности превратить стили в ночной кошмар читаемости. Где и как использовать вложенность зависит от вас, если вы решите использовать 8 уровней вложенности, пожалуйста. Но будьте готовы к долгим ночным часам работы при рефакторинге проекта.
SASS для Начинающих: Вложенные стили, Фрагменты, Импорт
В этом уроке мы рассмотрим одни из наиболее полезных и мощных функций SASS: вложение стилей, фрагментирование и импорт.
01. Вложенные стили SASS
Вложенные стили SASS — это еще одна отличная функция, которая позволяет писать CSS правила и вкладывать их друг в друга. Вложение позволяет писать CSS в той же структуре, что и HTML, создавая визуальную иерархию в селекторах.
Например, вот обычный CSS код:
nav a{
text-decoration:none;
}А с помощью SASS можно создавать нечто подобное:
nav{
a{
text-decoration:none;
}
}Давайте добавим немного HTML, чтобы увидеть вложенные стили в действии.
Следудующий код представляет собой навигацию, находящуюся внутри “шапки сайта”:
<header>
<nav>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">SASS</a>
<a href="#">LESS</a>
</nav>
</header>Вы видите, что наши ссылки расположены в header, внутри nav. Этот код имеет очевидную визуальную иерархию. Давайте зададим стили для всех HTML элементов используя SASS.
Обратите внимание на правила, вложенные в другие правила:
nav{
height: 40px;
a{
display: inline-block;
color: #666;
text-decoration: none;
padding: 0 20px;
}
}А вот как выглядел бы тот же код на нативном CSS:
nav {
height: 40px; }
nav a {
display: inline-block;
color: #666;
text-decoration: none;
padding: 0 20px; }Вложение — это отличный способ организации и менеджмента вашего CSS кода.
Вложенные стили могут иметь столько уровней, сколько вам необходимо. Это отличная и полезная функция, но не переусердствуйте. Вот пример плохого использования вложенных стилей:
body{
header{
.container{
.row{
.left{
.logo{
img{
}
}
}
}
}
}
}Потому что то же самое можно сделать с помощью следующего короткого правила:
header{
.logo{
img{
}
}
}02. SASS фрагментирование — Разделение таблиц стилей
SASS фрагменты позволяют отделать небольшие части кода в отдельные файлы и использовать их позже при необходимости. Их можно импортировать с помощью команды @import и поместить в файл со стилями. С помощью фрагментов проще управлять большим количеством стилей. Если у вас есть отдельные таблицы стилей для header, вы можете назвать их _header.scss. Нижнее подчеркивание в начале дает SASS понять, что файл является фрагментом и может быть импортирован в другую таблицу стилей.
SASS фрагменты — Пример
В этот раз мы отделим SASS и CSS файлы в разные папки. Давайте создадим папку sass. Внутри папки sass создайте файл style.scss, который будет нашим основным файлом со стилями. Не нужно создавать папку CSS, так как SASS автоматически создаст ее сам.
Компиляция SASS в SCSS просходит следующим образом: откройте командную строку (возможно, понадобится открыть командную строку ruby) и вбейте:
sass --watch sass:css
Эта команда компилирует все внутри папки SASS в CSS папку. Вы возможно заметили, что папка CSS создалась автоматически. CSS папка содержит два файла: style.css и style.css.map.
Теперь создаим новые папки внутри папки SASS: папки header, main и footer.
- Внутри папки header создайте фрагмент _header.scss;
- В папке main 2 фрагмента _main.scss и _aside.scss;
- В папке footer один фрагмент _footer.scss.
Давайте напишем рандомные CSS правила во все фрагмент-файлы. Если вы сейчас сохранитесь, то ничего не изменится, потому что мы еще не подключили фрагменты к нашей гланой таблице стилей style.scss.
Использование SASS фрагментов
Ранее упоминалось, что для подключения SASS фрагментов используется директива @import. В нашем случае style.scss должен выглядеть примерно так:
// Header @import "header/header.scss"; // Main @import "main/main.scss"; @import "main/aside.scss"; // Footer @import "footer/footer.scss";
Если вы откроете style.css после сохранения всех CSS правил, которые вы записывали в разных файлах, то увидите, что все эти правила компилированы в один CSS код. Это и есть магия SASS фрагментирования.
03. SASS импортирование
Функция импортирования в SASS позволяет нам импортировать CSS, написанный на SASS, в другой SASS файл.
Эта функция также доступна в CSS и позволяет делить CSS код на маленькие части и использовать их при необходимости.
SASS импортирование нужно потому, что если вы используете для импорта CSS, то каждый файл создает отдельный HTTP запрос. Это означает, что страница будет грузиться медленнее. Импортирование с помощью SASS создает только один CSS файл, который грузится быстрее.
Использование SASS импорта
Мы уже использовали SASS импорт в предыдущей части урока. Мы испортировали header/_header.scss в нашу таблицу стилей style.scss:
@import "header/header.scss";
Здесь нет нижнего подчеркивания, да? Это потому что мы используем подчеркивание для того, чтобы проинформировать SASS. Нет необходимости также писать расширение в конце. SASS и так уже знает, что мы импортируем только .scss файлы. В таком случае синтаксис импорта должен выглядеть вот так:
@import "header/header";
Эта функция очень полезна для быстрого и простого кодинга. Мы можем использовать один файл в нескольких проектах. Если он вдруг понадобился, просто возьмите файл и импортируйте.