Использование CSS для форматирования текста

Основы работы со стилями CSS

Как вы знаете, HTML — это язык разметки. То есть язык, который помогает ориентироваться браузеру в том, чем является данный текст.

Например, если поместить текст внутрь тега h1, он отобразится большим. Если поместить текст внутрь тега h2 — то чуть поменьше, и так далее. Но выразительности тегов стало не хватать для тех, кто разрабатывал сайты. Пользователи хотели изменить цвет текста, или изменить цвет каждой второй буквы текста, или изменить шрифт текста, или же поместить текст в красную рамку. Для решения этой задачи в HTML был введен тег font

<font size="+3" face="Helvetica" color="red">ПРИВЕТ МИР</font>

Более показателен пример типичной разметки с использованием тега font:

<body bgcolor="#f1f1f1">
<h1 align="center"><font size="16px" color="red" face="Tahoma">Основной заголовок</font></h1>
<p><font size="8px" color="gray" face="Arial">Текст параграфа 1</font></p>
 
<h2><font size="10px" face="Tahoma">Подзaголовок 1</font></h2>
<p><font size="8px" color="gray" face="Arial">Текст параграфа 2‹/font›‹/p>
 
<h2><font size="10px" face="Tahoma">Подaголовок 2</font></h2>
<p><font size="8px" color="gray" face="Arial">Текст параграфа 3</font></p>
</body>

Внутрь каждого элемента, внутрь каждого параграфа, нужно вставлять тег font с заданными атрибутами. Получилось, что разметка-то есть, но она используется не по назначению.

В 1994 году Хокон Виум Ли, автор и создатель браузера Opera, и Берт Бос сформулировали эту проблему и предложили решение проблемы - CSS.

Причины появления CSS:

  • Избыточность HTML. HTML стал нести слишком много информации, кроме как про разметку документа.
  • Желание большего числа возможностей для оформления. Это еще больше раздувало HTML разметку.
  • Упрощение оформление страницы.
  • Желание избежать копирования одних и тех же тегов и атрибутов для создания одинакового оформления.
  • Отделение контента страницы от его представления.

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

body {
  background: #flflfl;
}
 
h1 {
  font-size: 16px;
  color: red;
  font-family: Tahoma;
  text-align: center;
}
 
h2 {
  font-size: 10px;
  font-family: Tahoma;
}
 
p {
  font-size: 8px;
  color: gray;
  font-family: Arial;
}
<body>
<h1>Основной заголовок</h1>
<p>Текст параграфа 1</p>
 
<h2>Подзаголовок 1</h2>
<p>Текст параграфа 2</p>
 
<h2>Подзаголовок 2</h2>
<p>Текст параграфа 3</p>
 
</body>

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

CSS — язык стилей, определяющий отображение HTML (и других) документов.

CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

Основные этапы развития:

  • CSS уровень 1 (1996, 1999) – параметры шрифтов, цвета, ...
  • CSS уровень 2 (12 мая 1998) – блочная вёрстка, селекторы, …

CSS уровней 1 и 2 рассматривали разные аспекты стилизации документов. К сожалению, после второй версии спецификации развитие CSS застыло на долгие года. Причиной стал известный верстальщикам браузер — InternetExplorer. Проблема состояла в том, что IE6 поставлялся вместе с операционной системой Windows XP и он не обновлялся автоматически. Получилась ситуация, при которой пользователи были привязаны к конкретному браузеру, а веб-разработчики — не могли внедрять современные стандарты CSS.

В конце 2000 годов первыми, кто начал внедрять новые стандарты, стал браузер Firefox от компании Mozilla. Позже к нему присоединился браузер Chrome от Google и браузер Opera. Это дало толчок для развития новых спецификаций.

  • CSS уровень 2.1 (07 июня 2011)

Работа над спецификацией 2.1 велась более чем 10 лет, потому что браузеры не стремились активно применять эту спецификацию.

Начиная с этого времени размер спецификации стал слишком большой. И его сложно было поддерживать в виде единого документа. Логично было разнести эту спецификацию на несколько разных документов, каждый из которых затрагивает отдельный аспект стилизации элементов. Те спецификации, которые были развитием тех или иных аспектов, которые уже были затронуты в спецификации уровней 1 или 2 получили номер 3. Если спецификация новая и не была сформулирована ранее, ее нумерация начинается с 1.

  • CSS уровней 3 все еще находится в стадии разработки – трансформации, анимация, ...
  • CSS уровней 4 разрабатывается с 29 сентября 2011 года.

Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.

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

Файл со стилями должен иметь расширение *.css. Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:

<link rel="stylesheet" href="имя_файла.css">

В ранее приведенном примере к нашему HTML файлу подключается CSS файл styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок</title>
                <link rel="stylesheet" href="styles.css">
	</head>
	<body>         
		Это основное содержимое страницы.
	</body>
</html>

Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

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

Давайте, например, покрасим все абзацы в красный цвет:

p {
  color: red;
}

Способы задания цвета на CSS

В предыдущем уроке вы увидели, как можно задать цвет ключевым словом. Ключевых слов, однако, немного, и с их помощью нельзя сделать все возможные оттенки всех цветов. Для этого существует еще два способа задания цветов. Через rgb и через решетку #.

Смотрите пример задания цвета через rgb:

p {
  color: rgb(255, 0, 0);
}

Смотрите пример задания цвета через #:

p {
  color: #ff0000;
}

Для того, чтобы получить нужный цвет, используются специальные программы. Вот пример онлайн генератора цвета: colorscheme.ru, а вот пример программы, позволяющей замерять цвет: colorcop.net (см. страницу "Ресурсы").

Ширина и высота элементов на CSS

Для задания ширины и высоты элементов в CSS предназначены свойства width и height. Значения этих свойств, как правило, задаются в пикселях. Пиксели обозначаются как px и добавляются к числу. Например, чтобы задать размер в 100 пикселей, значением свойства следует указать следующее: 100px.

Посмотрим на работу этих свойств на примере. Зададим ячейкам какой-нибудь таблицы ширину в 200px и высоту 100px:

<tab1e border="1“>
 
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
 
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
 
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
 
</table>
td {
  width: 200px;
  height: 100px;
}

Результат выполнения кода:

Выравнивание текста на CSS

Сейчас мы с вами научимся выравнивать текст. Для этого используется свойство text-align. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Например, выровняем текст в абзацах по правому краю:

<p>
  абзац с текстом
</p>
p {
  text-align: right;
}

Результат выполнения кода:

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

<table border="1">
 
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
  <th>Зарплата</th>
</tr>
 
<tr>
  <td>Иван</td>
  <td>Иванов</td>
  <td>200$</td>
</tr>
 
<tr>
  <td>Николай</td>
  <td>Петров</td>
  <td>300$</td>
</tr>
 
</table>
th {
  text—align: left;
}
 
table {
  width: 400px;
}

Результат выполнения кода:

Значение justify
Выравнивание текста по ширине можно увидеть только при наличии достаточно длинного текста. Выглядит это вот так:

Настройка шрифтов на CSS

Рассмотрим несколько свойств, которые позволяют настраивать шрифт вывода текста.

Свойство font-weight позволяет сделать текст жирным или наоборот - отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold, а чтобы отменить жирность - значение normal.

Свойство font-style позволяет сделать текст курсивным или наоборот - отменить курсив. Чтобы сделать текст курсивом, следует добавить значение italic, а чтобы отменить курсив - значение normal.

Размер шрифта на CSS регулируется с помощью свойства font-size, принимающего значение в пикселях.

Свойство font-family позволяет задать семейство шрифта. Наиболее распространенные шрифты: Times New Roman (стоит по умолчанию), Arial, Georgia, Verdana, Trebuchet MS, Impact, Arial Black, Comic Sans MS, Courier New.

Приведенный пример использует все указанные свойства, примененные к любому абзацу в HTML-документе:

p {
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
  font-family: "Arial";
}

Результат выполнения кода:

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

p {
  font-family: "Times New Roman";
}

Межстрочный интервал на CSS

Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height, задающее высоту линии текста.

При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.

Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height - font-size = видимое расстояние между строками текста.

В следующем примере расстояние между строками текста будет 24px - 14px = 10px:

p {
  font-size: 14px;
  line-height: 24px;
  width: 500px;
  text-align: justify;
}

Результат выполнения кода:

Значение line-height без единиц
Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.

К примеру, font-size равен 10px, а line-height - 1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: 15px - 10px = 5px.

Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.

Свойство-сокращение font

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

Описываемое свойство имеет следующий синтаксис:

font: курсив жирность размер_шрифта/межстрочный_интервал семейство

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

Пример:

p {
  font: bold 14px/24px Arial;
}

Красная строка текста на CSS

Давайте теперь разберемся, как сделать красную строку, то есть отступ первой строки текста. Для этого предназначено свойство text-indent. Давайте с его помощью сделаем красную строку для абзацев:

p {
  text-indent: 30px;
  font: 14px Arial;
  text-align: justify;
}

Результат выполнения кода:

Эффекты текста на CSS

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

Давайте посмотрим, какие значения может принимать свойство text-decoration:

  • underline добавляет подчеркивание тексту:
  • overline добавляет линию над текстом:
  • line-through добавляет линию, перечеркивающую текст:
  • none отменяет все эффекты. Обычно используется для отмены подчеркивания ссылок.
<a href="">Ссылка на ресурс</a>
a {
  text-decoration: none; // отмена подчеркивания у ссылок
}
Направление: 
CSS