Учебник CSS. Бесплатные уроки по CSS. Изучаем каскадные таблицы стилей и пробуем красиво оформлять веб-сайты и страницы.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику Уроки CSS. Из этой рубрики вы можете узнать о том, как создать простое CSS меню для сайта, как сделать горизонтальное и вертикальное CSS меню, о возможностях и функциях CSS, а также о том, что такое CSS правила, CSS стили, CSS свойства и значения. Сегодня будет публикация посвященная CSS селекторам и способам группировки в CSS. Из этой публикации вы узнаете о простых CSS селекторах, универсальных CSS селекторах, о способах группировки CSS объявлений и группировки CSS стилей.

CSS селекторы. Группировка CSS.

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

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

Группировка CSS селекторов

Как я уже говорил: ранее мы рассмотрели то, как применить один CSS стиль к одному HTML элементу, но что делать, если мы хотим применить один и тот же стиль для нескольких элементов? Для того, чтобы это сделать можно использовать несколько CSS селекторов, либо применять и создавать несколько CSS стилей к одному или нескольким HTML элементам. Допустим, мы хотим, чтобы цвет текста абзацев, которые создаются при помощи тега <p>, в HTML документе совпадал с цветом заголовков в HTML документе, которые создаются при помощи тегов <h1>, <h2> и так до <h6>. Для этого мы можем создать следующее CSS объявление:

[php]

p, h1, h2, h3, h4, h5, h6 {

color: #1394EF;

}[/php]

За фигурными скобками, в левой части CSS правила я написал CSS селекторы, при помощи которых отбираются нужные элементы, на которые будет распространяться данное CSS правило. Поскольку нам необходимо объединить CSS селекторы, мы разделяем их запятой. Таким образом, CSS стиль, который написан в фигурных скобках будет применен ко всем отобранным элементам, то есть цвет текста всех этих элементов примет значение #1394ef. Запята сообщает браузеру о том, что в правило включено несколько элементов, если запятую не ставить, то правило будет иметь немного другое значение, но об этом позже.

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

[php]

h1 {color: #1394EF;}

h2 {color: #1394EF;}

h3 {color: #1394EF;}

h4 {color: #1394EF;}

h5 {color: #1394EF;}

h6 {color: #1394EF;}

[/php]

А можете сгруппировать CSS селекторы и ваш код существенно уменьшится:

[php] h1, h2, h3, h4, h5, h6 {color: #1394EF;} [/php]

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

Универсальный CSS селектор

В CSS существует универсальный селектор, который позволяет применить CSS стили сразу ко всем элементам на веб-странице, такой селектор называется универсальным и представлен символом “*”. Универсальный CSS селектор соответствует практически любому элементу HTML страницы. Опять же, давайте попробуем задать одинаковый цвет всем HTML элементам на странице:

[php]

*{color: gray;}

[/php]

Конечно, можно было бы сгруппировать все CSS селекторы в один и затем задать для них один общий CSS стиль, но зачем это делать, если есть один универсальный CSS селектор. С помощью универсального CSS селектора мы присвоили атрибуту color каждого CSS селектора значение gray, написав всего лишь одну короткую строчку кода, но будьте осторожны, применяя универсальный CSS селектор, при его использование могут появиться нежелательные последствия.

Группировка CSS объявлений

Как вы уже видели, мы можем группировать CSS селекторы и задавать для них один стиль. Но никто нам не запрещает группировать CSS объявления, предположим, что мы хотим, чтобы в абзаце текст был размером 12 пикселов, был написан шрифтом Arial, цвет текста был оранжевым и написан он был на сером фоне, конечно, мы можем записать CSS стили таким образом:

[php]

p{font: 12px Arial;}

p{color:orange;}

p{background:gray;}

[/php]

Такая запись неудобна, неэффективна, требует лишнего времени и вы можете легко запутаться создавая такие конструкции, допустим если нам придется для одного элемента создать 15-20 стилей CSS, что вполне реально. Поэтому следует группировать CSS объявления, потом будет проще изменять стили:

[php]

p{

font: 12px Arial;

color: orange;

background: gray;

}

[/php]

В этом случае каждый стиль вам придется разделять точкой с запятой, поскольку именно этот символ указывает на окончание одного стиля и начала другого. Допустим, мы забыли поставить точку с запятой после атрибута color.

Тогда браузер интерпретирует запись следующим образом:

[php]

p{

font: 12px Arial;

color: orange background: gray;

}

[/php]

Размер текста и шрифт будут такими, как указано в записи, поскольку здесь написано все правильно. Но, background не является правильным значением для атрибута color, а еще для атрибута color можно присвоить только одно значение, поэтому браузер проигнорирует CSS объявление color. Поэтому вы не увидите ни оранжевого цвета, ни серого фона. Для этих элементов будет задан стиль, который прописан в браузере по умолчанию, чаще всего это черный цвет и белый фон.

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

Группировка CSS селекторов и объявлений

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

[php]

h1, h2, h3, h4, h5, h6{

font: 18px Arial;

color: #555;

background: #1394EF;

border-bottom: 1px solid;

width:200px;

margin: 0 auto;

}

[/php]

Попробуем в этом убедиться, для этого создадим простой HTML документ, в котором создадим 6 заголовков от <h1> до <h6>:

[php]

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html>

<head>

<link rel="stylesheet" href="selector.css" type="text/css" >

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>CSS селекторы</title>

</head>

<body>

<div>

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h4>Заголовок четвертого уровня</h4>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

</div>

</body>

</html>

[/php]

Верхняя строка DOCTYPE! Определят тип и синтаксис HTML документа, в контейнере <head> мы определяем кодировку HTML документа, при помощи тега <link> подключаем нашу таблицу стилей, в которой написано правило из примера выше и даем заголовок HTML документу внутри тега <title>. В контейнере <body> находятся наши HTML заголовки, для которых мы создали стиль. Для начала посмотрим на страницу, в которой мы отключили таблицу стилей:

Так выглядят HTML заголовки при отключенной таблице стилей

Не очень красочно, а теперь посмотрим на страницу, в которой таблица стилей подключена:

Те же HTML заголовки, но с использованием CSS стилей

Мы видим, что фон, который для заголовков стал синего цвета, размеры всех заголовков стали одинаковыми (18px), под каждым заголовком появилась горизонтальная линия толщиной в 1 пиксел (border-bottom: 1px solid;), заголовки разместились по центру страницы (CSS объявление margin: 0 auto; ), ширина заголовков стала 200 пикселов. Мы получили такой эффект за счет того, что, во-первых, мы сгруппировали CSS селекторы, то есть мы применяем один стиль ко многим HTML элементам; и мы сгруппировали объявления, то есть задали для одного элемента на странице несколько CSS стилей. Конечно, можно создать несколько CSS правил, в которых будут прописаны несколько CSS стилей для каждого элемента, но это очень долго и мне лень и потом, редактировать и вносить изменения в такие записи это довольно длительное время, можно было бы тогда пользоваться HTML атрибутами.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)