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

Элемент <p></p> - параграф

Запускайте веб-сервер (Denwer) и открывайте два ключевых файла: index.html, который лежит в корне сайта, и style.css в каталоге «css».

Наши прошлые эксперименты надо отменить, поэтому таблица стилей должна быть пустой, а содержимое индексного файла должно быть следующим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" />
    </head>
    <body>
        <p>
            Test.ru - сайт для тестеров
        </p>
        <p>
            Test.ru - сайт для тестеров
        </p>
        <p>
            Test.ru - сайт для тестеров
        </p>
    </body>
</html>

Для начала познакомимся с новым элементом разметки <p></p> — параграфом. Им достаточно удобно выделять логически законченные элементы печатного текста. Изначально параграф уже имеет внешний отступ, который в таблицах стилей задается параметром margin.

Заключенный между <p> и </p> текст помещен в некий контейнер (блок) и к его содержимому можно применить различные свойства.

 

Заведите себе привычку находить полное название и перевод тегов, атрибутов, параметров, значений и функций. Так, например,  элемент <p> есть не что иное, как Paragraph (Параграф), а тег обрыва строки <br/> есть Break – разрыв. В дальнейшем знание английского языка может значительно упростить освоение программ.

 

Блочные и неблочные (строчные) элементы

В нотации HTML5 "приравняли" блочные и строчные элементы - вернее таких определений для гипертекста формально больше не существует - это прерогатива исключительно таблиц стилей.

Фактически любой элемент можно сделать блоком, если в стилях параграфа прописать свойство display:block; - это присвоит ему свойства блоков. Однако, это скорее исключение, чем правило - для организации верстки пользуйтесь блочными элементами (например,<div></div>).

Вложенность блока ограничена лишь вашим логическим умозаключением. Каждый элемент внутри контейнера является дочерним, в то время как для каждого содержащегося в нем блока он будет родительским элементом. Каждый дочерний элемент наследует свойства родительского элемента. Так, например, если выставить для тега <body> цвет текста красный (color:red;), то текст во всех блоках любой вложенности будет красным, если им не присвоено свое уникальное индивидуальное свойство.

Рассмотрим это на примере. Создайте текст из трех параграфов так, чтобы параграфы шли последовательно. Содержимое параграфов — произвольный текст.

Совет: Начинайте запоминать комбинации клавиш («горячие клавиши»). Это значительно сократит время, затраченное на выполнение операций. Так, например, кроме общеизвестных комбинаций ctrl+z, ctrl+x, ctrl+c, ctrl+v, (соответственно: отменить последнее действие, вырезать, копировать, вставить), есть очень полезное свойство редактора Notepad++ дублировать выделенный фрагмент – ctrl+D. По сути, он заменяет очередность команд копировать-вставить, но вставляет дубль сразу за выделением. Таким образом, в данном примере я набрал один параграф и два раза продублировал эту строку командой ctrl+D.

Просмотрите в браузере сохраненные изменения. Получилось три равноудаленные друг от друга параграфа. Цвет текста, который мы применили для главного контейнера <body>, распространился и на параграфы. Проанализируйте эти блоки с помощью дополнения firebug. При наведении на элемент <p> он подсвечивается в окне браузера. Сверху и снизу заметны внешние отступы margin, выделенные желтым цветом.

image03

Анализ фрагмента кода в Firebug

Теперь зададим всем параграфам общий фиксированный отступ. Задавать отступы будем, используя единицу измерения «пиксел» (обозачается как px). Запишем:

p {
    margin:5px 0;
}

Объявлять отступы можно для каждой стороны отдельно или по группам (верх-низ, лево-право). Наша запись аналогична записи:

p {
    margin-top:5px;
    margin-bottom:5px;
    margin-left:0;
    margin-right:0;
}

или

p {
    margin:5px 0 5px 0;
}

Последняя запись вам должна показать, как указывать очередность отступов. Представьте себе квадрат. Верх – top, а далее по часовой стрелке: right bottom left. Этот принцип применяется и для многих других параметров. Запомните его.

Сохраните любую из приведенных записей, добавив ее ниже существующих параметров в style.css. Из записей видно, что сначала объявляется элемент, у которого будем изменять параметры. Затем в фигурных скобках записываются группы параметров. Каждый параметр отделен от предыдущего знаком «точка с запятой». Наименование параметра отделяется от значения двоеточием. Если имеется несколько значений, они перечисляются через пробел.

Обновите окно браузера функциональной клавишей F5 и проследите за изменениями. Внимательно следите за оформлением кода. Гораздо удобнее работать с кодом, выделенным по иерархии отступами (табуляция, но не пробелами).

Классы (class)

Как же теперь назначить только среднему параграфу уникальный параметр? Ответ заключается в заголовке статьи. С помощью классов или идентификаторов. Классы (class) применяются для изменения любых элементов, которым он будет присвоен. Присваивать можно неограниченное количество раз. Для назначения класса у тега в html-файле записывается атрибут «class» со значением «имя класса». Чтобы стало понятно, назначим первому и третьему параграфу одинаковые классы.

<p class="krasnyi">Test.ru –сайт для тестеров</p>
<p>Test.ru –сайт для тестеров</p>
<p class="krasnyi">Test.ru –сайт для тестеров</p>

В css-файл добавим следующую запись:

p.krasnyi{
    margin:5px 10px;
    color:red;
}

Сохраните файлы и обновите окно браузера. Поменялся цвет текста и появились отступы слева и справа у нужных параграфов.

image04

Применение классов к двум объектам

Как вы уже заметили, свойства классу присваиваются посредством объявления имени класса через точку. Перед точкой без пробела пишется элемент, в данном случае p. В тех случаях, когда один класс может содержать настройки для разных элементов (не обязательно тег <p> а например <span>), такой способ крайне удобен. Например:

p.krasnyi{
    margin:5px 10px;
    color:red;
}
span.krasnyi{
    margin:10px;
    color:yellow;
}

В index.html добавьте еще одну строчку:

<p class="krasnyi">Test.ru –сайт для тестеров</p>
<p>Test.ru –сайт для тестеров</p>
<p class="krasnyi">Test.ru –сайт для тестеров</p>
<span class="krasnyi">Test.ru –сайт для тестеров</span>

Позже я вам расскажу про контейнер span, но сейчас не хочется терять мысль.

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

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

<p class="krasnyi">Test.ru –сайт для тестеров
       <span>Test.ru –сайт для тестеров</span>
</p>
<p>Test.ru –сайт для тестеров</p>
<p class="krasnyi">Test.ru –сайт для тестеров</p>

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

p.krasnyi span{
    color:yellow;
}

Обновите страничку. Как видите, текст снова стал желтым. Теперь данная настройка будет распространяться ко всем тегам span, содержащихся в параграфах с классом “krasnyi”. Обратите внимание, что класс не должен содержать пробелы, заменяйте их дефисом. А вот между классом и дочерним элементом (в нашем случае span) ставится пробел! Применение пробелов в названиях классов мы рассмотрим на других примерах.

Идентификаторы (id)

В отличие от классов, идентификаторы применяются только один раз и для конкретного тега. Иными словами один и тотже идентификатор не болжен встречаться на странице более одного раза. В противном случает ваш код не пройдет проверку валидности, хоя и будет работать корректно. Объявляется идентификатор id=”idname”, а в стилях вместо точки пишется решетка #. Назначим тегу span идентификатор:

<p class="krasnyi">Test.ru –сайт для тестеров
       <span id="orange">Test.ru –сайт для тестеров</span>
</p>
<p>Test.ru –сайт для тестеров</p>
<p class="krasnyi">Test.ru –сайт для тестеров</p>

В стилях сотрем старую запись и пропишем:

#orange{
    color:orange;
}

Цвет текста внутри спана снова сменится, теперь уже на оранжевый цвет.

Можно комбинировать различные варианты классов и идентификаторов с неограниченной вложенностью, но помните, что идентификатор имеет приоритет выше класса, а стиль указанный не во внешнем файле, а непосредственно в элементе имеет самый высокий приоритет и отменит все другие настройки.

Еще пара слов о приоритетах

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

Пусть в вашем файле стилей будет две записи для идентификатора:

#orange{
    color:orange;
}
#orange{
    color:red;
}

Если вы обновите страницу, то увидите что цвет спана стал красным. Это доказывает, что действует самое нижнее свойство из всех для одного и того же элемента.

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

<body>
        <p class="krasnyi">Test.ru –сайт для тестеров
            <span id="orange" style="color:green;" >Test.ru –сайт для тестеров</span>
        </p>
        <p>Test.ru –сайт для тестеров</p>
        <p class="krasnyi">Test.ru –сайт для тестеров</p>
 </body>

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

Существует модификатор '!important' (важный)?. Измените таблицу стилей следующим образом:

#orange{
    color:red !important;
}

Посмотрите результат. Цвет снова изменится на красный, хотя в стиле самого элемента указан зеленый цвет. Данный модификатор устанавливает наивысший приоритет. Что же произойдет, если к свойствам одного элемента применить этот модификатор? Последний считанный будет самым главным. Пробуйте:

<body>
        <p class="krasnyi">Test.ru –сайт для тестеров
            <span id="orange" style="color:green !important;" >Test.ru –сайт для тестеров</span>
        </p>
        <p>Test.ru –сайт для тестеров</p>
        <p class="krasnyi">Test.ru –сайт для тестеров</p>
</body>

Мы снова изменили цвет на зеленый. Поэкспериментируйте с данными свойствами и никогда их не забываете.

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

Примеры вложенности и их расшифровка

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

div.content ul#orange li{
    color:orange;
    padding-left:20px;
}

В данном примере объяснение свойств звучит так: Для всех пунктов li ненумерованного ul списка с идентификатором orange внутри всех контейнеров div с классом content применяются свойства: цвет текста оранжевый и внутренний отступ слева на 20px

Еще пример:

div#content div.header p,h1,h2,h3 {
    padding:0;
    margin:0;
    font-size:20px;
}

Для любых параграфов (p) и заголовков первого, второго и третьего уровней (h1,h2,h3), встречающихся в контейнерах div с классом header, которые в свою очередь находится в контейнере div с идентификатором content, применяются свойства: все отступы по нулям, размер шрифта 20px.

Как видите, в последнем примере перечисленные через запятую теги будут иметь одинаковые свойства. Как только запятые замерите пробелами, появится иерархия: заголовок h3 в заголовке h2 в заголовке h1 и так далее..

Присвоение нескольких классов элементу

На большинстве сайтов (в том числе и на данном) в исходном коде можно встретить подобную запись:

<ul class="categories-module nav nav-tabs nav-stacked">
    ...
</ul>

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

.nav {
    list-style: outside none none;
    margin-left: 0;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav-stacked > li {
    float: none;
}
.categories-module {
    padding: 0;
}

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

<ul class="class1">
    ...
</ul>
<ul class="class2">
    ...
</ul>

В таблице стилей мы для каждого из классов пропишем следующие свойства:

.class1{
    padding: 0;
    margin-left: 15px;
    list-style: none;
    color: red;
}
.class2{
    padding: 0;
    margin-left: 15px;
    list-style: none;
    color: green;
}

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

.class1{
    color: red;
}
.class2{
    color: green;
}
.class3{
    padding: 0;
    margin-left: 15px;
    list-style: none;
}

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

<ul class="class3 class1">
    ...
</ul>
<ul class="class3 class2">
    ...
</ul>

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

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

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле

Комментарии   

Виталий Николаев
+2 # Виталий Николаев 27.04.2016 06:58
Присвоение нескольких классов элементу где оно??? толку от всей этой писанины, хоть бы не позорились и убрали из названия главы
Ответить | Ответить с цитатой | Цитировать
Юрий Деменский
0 # Юрий Деменский 11.05.2016 09:31
Позор исправлен. Спасибо за критику - когда пишешь большую статью, зачастую что-то упускаешь, и очень хорошо, что находятся внимательные читатели, вроде Вас, Виталий. Всего доброго Вам и жду дальнейших комментариев.
Ответить | Ответить с цитатой | Цитировать
Лора
0 # Лора 27.09.2016 20:30
Не могу найти информацию, прошу помощи)
Например структура

Название

main-page-title
main-page-body
main-page-footer



[class^="main"] {
color: blue; }
[class^="main-page"] {
font-size: 20px; }

[class="main-page-title"] {
font-weight: bold; }


Или есть более красивое решение?
Ответить | Ответить с цитатой | Цитировать
Лора
-1 # Лора 27.09.2016 20:35
сорри, не встал полноценно код (

Не могу найти информацию, прошу помощи)
Например структура
<pre>
<div class="main">
<h1>Название</h1>
<div class="main-page">
<div class="main-page-title">main-page-title</div >
<div class="main-page-body">main-page-body</div&g t;
<div class="main-page-footer">main-page-footer</d iv>
</div>
</div>
<style>
[class^="main"] {
color: blue; }
[class^="main-page"] {
font-size: 20px; }

[class="main-page-title"] {
font-weight: bold; }
</style>
</pre>
Или есть более красивое решение?
Ответить | Ответить с цитатой | Цитировать
Boom
0 # Boom 28.09.2016 19:40
А в чем, собсно, вопрос? Если об использовании "умных" селекторов, то да это классно, а вопрос-то о чем?
Ответить | Ответить с цитатой | Цитировать