Пятый урок. Знакомство с CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) используются для задания внешнего вида страниц. CSS работает как бы над HTML, то есть вначале задается html-разметка, а после пределяется её оформление.

CSS очень большой язык, который состоит из структурных модулей, описывающих каждое своё свойство и поведение. На сегодняшний день мы верстаем по стандарту CSS Level 3.

Здесь необходимо сделать небольшую ремарку. Дело в том, что поддержка браузерами CSS несколько различается. Несколько лет назад ситуация была настолько печальна, что верстальщикам приходилось исхитряться так, чтобы обеспечить поддержку старых и новых браузеров одновременно. Главная проблема — это браузер Internet Explorer, который имел самую большую аудиторию, но и самую слабую поддержку CSS. На сегодняшний день верстальщики осуществляют поддержку только последних двух версий браузеров. Поскольку они выходят достаточно часто, то «отставание» в поддержке CSS совсем незаметное. Исключение — IE 11 версии, который больше не поддерживается. Если необходима его поддержка, то следует учитывать его ограниченные способности. Иначе мы предполагаем, что поддержка этого браузера не нужна. У пользователя есть возможность использовать любой современный браузер (FireFox, Chrome, Vivaldi).

Есть специальный сайт, где можно проверить поддержку CSS-свойства по браузерам: caniuse.com. Сейчас вам он не нужен, но сохраните его в закладки. В будущем пригодится. Также обратите внимание на справочник CSS.

В CSS-коде указывается селектор (например тэг) и его свойства. Существуют два способа использовать CSS на странице.

Первый в виде html-атрибута style вот так:

<p style="color: red;">текст текст текст</p>

В данном примере color — это css-свойство, а red его значение. Таким образом в этом тэге P текст окажется красным.

Можно указывать несколько свойств через точку с запятой:

<p style="font-weight: bold; margin-top: 20px;">текст текст текст</p>

Свойства через style очень часто применяется при верстке, но, когда стилей много, возникает проблема с его поддержкой. Представьте себе текст из 10 абзацев, где потребуется сменить текст с красного на синий. А если абзацев 100? Придется каждый менять.

Для таких случаев используется атрибут class, который указывает на класс стилей.

Классы стилей могут быть во внешнем css-файле или быть прямо встроенными в HEAD-секции страницы.

CSS-стили всегда должны быть так или иначе располагаться в секции HEAD. Данное правило является обязательным, поскольку размещение css-стилей в секции BODY делает html-код невалидным. Однако следует особо отметить, что в новом стандарте HTML 5.2 (рекомендация от 14/12/2017 г.) css-стили теперь могут встраиваться в секцию BODY. Пока браузеры ещё не в полной мере поддерживают эту рекомендацию, мы будем придерживаться «традиционного» размещения стилей: только в секции HEAD.

Для подключения внешнего css-файла используют такой вариант:

<!DOCTYPE HTML>
<html>
<head>
	...
	<link rel="stylesheet" href="http://сайт/style.css">
	...
</head>

...

CSS-файл должен быть доступен по адресу http://сайт/style.css, только в этом случае он будет подключен.

Стили для HEAD указываются немного проще:

<!DOCTYPE HTML>
<html>
<head>
	...
	<style>
		тут будет css-код
	</style>
	...
</head>

...

CSS-стили задаются селекторами и их свойствами вот по такой схеме:

селектор {
	свойство1: значение1; 
	свойство2: значение2;
}

Селектор — это то, к чему будет применены указанные свойства, например html-тэг. Например пусть все абзацы на странице будут красными:

p {
	color: red;
}

Браузер найдет все тэги P на странице и сделает их красным текстом. Если нужно будет поменять цвет на другой (синий) и добавить жирность, то нужно будет только исправить стили класса:

p {
	color: blue;
	font-weight: bold;
}

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

p.red {
	color: red;
}

p.blue {
	color: blue;
}

В данном случае браузер применит стили к тэгу P, у которого указан класс red или blue:

<p>обычный текст</p>

<p class="red">красный текст</p>

<p>обычный текст</p>

<p class="blue">синий текст</p>

<p>обычный текст</p>

Если нам нужен класс, который будет применён к любому тэгу, то используется универсальный селектор, который обозначается символом звездочки «*»:

*.red {
	color: red;
}

*.blue {
	color: blue;
}

*.bold {
	font-weight: bold;
}

В CSS в подобных случаях допускается не указывать «*» и код можно сократить:

.red {
	color: red;
}

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Это полностью идентичные записи. Теперь эти классы можно применять к любым html-тэгам:

<p>обычный текст</p>

<div class="red">красный текст</div>

<p>обычный текст <span class="blue">синий текст</span> обычный текст</p>

<p class="blue">синий текст</p>

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

<p class="blue bold">синий и жирный текст</p>

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

Более подробно изучать css-селекторы (и другие теоретические основы верстки) мы будем во второй части курса.

Задания

1. Прочитайте в справочнике как задаётся цвет. Сделайте класс для 16-ричного представления цвета.

2. Узнайте какие css-свойства используются для задания жирного текста, курсива, подчеркивания и зачеркивания. Создайте классы для этих свойств.

3. Найдите в википедии новую статью на астрономическую тему и разметьте её с помощью созданных css-классов.