УРОК Nº 4.
Самый понятный учебник по созданию более привлекательных вебсайтов
Первые несколько глав этого учебника были посвящены исключительно HTML. Теперь пришло время сделать все (типа) красивым. В этом нам помогут каскадные таблицы стилей - CSS. Можно считать, что CSS определяет "дизайн" веб-страницы. CSS определяет такие параметры, как размер шрифта, поля и цвета, используя язык, совершенно не похожий на HTML.
Почему это отдельный язык? Потому что он служит совершенно иным целям. HTML представляет собой содержимое веб-страницы, а CSS определяет, как это содержимое будет представлено пользователю. Это фундаментальное различие, являющееся основой современной веб-разработки.
CSS содержит терминологию, командующую браузеру что-нибудь вроде такого: "Я хочу, чтобы мои заголовки были очень большими, а боковая панель располагалась слева от основной статьи". HTML не имеет терминологии для подобных указаний по компоновке. Все, что HTML может сказать браузеру: "это заголовок, а это боковая панель".
На этом уроке мы рассмотрим базовый синтаксис CSS, а также способы его подключения к нашим HTML-документам. Цель урока состоит не в том, чтобы стать экспертом по CSS или запомнить все доступные стили, а в том, чтобы понять, как взаимодействуют CSS и HTML. CSS обычно хранится в собственном файле, поэтому, как и в предыдущей главе, правильная организация файлов играет первостепенную роль.
Для простоты мы будем хранить примеры каждого урока этого учебника в отдельной папке. Используя Atom, создайте новый проект hello-css. Мы будем стилизовать страницу hello-css.html, поэтому создайте ее и добавьте следующую разметку:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Hello, CSS</title>
</head>
<body>
<h1>Hello, CSS</h1>
<p>CSS lets us style HTML elements. There’s also
<a href='dummy.html'>another page</a> associated with this example.</p>
<h2>List Styles</h2>
<p>You can style unordered lists with the following bullets:</p>
<ul>
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>
<p>And you can number ordered lists with the following:</p>
<ol>
<li>decimal</li>
<li>lower-roman</li>
<li>upper-roman</li>
<li>lower-alpha</li>
<li>upper-alpha</li>
<li>(and many more!)</li>
</ol>
</body>
</html>
Еше нам понадобится страница-болванка для изучения того, как стили CSS применяются к нескольким веб-страницам. Создайте файл dummy.html и добавьте в него следующее:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
</head>
<body>
<h1>Dummy</h1>
<p>This is a dummy page that helps us demonstrate reusable CSS
stylesheets. <a href='hello-css.html'>Go back</a>.</p>
<p>Want to try crossing out an <a href='nowhere.html'>obsolete link</a>? This
is your chance!</p>
</body>
</html>
Таблицы стилей CSS находятся в текстовых файлах с расширением .css. Создайте новый файл styles.css в папке hello-css. В нем будут храниться все наши примеры фрагментов для этой главы. Добавим одно правило CSS, чтобы можно было определить, правильно ли подключена наша таблица стилей к HTML-страницам.
body {
color: #FF0000;
}
CSS-правило всегда начинается с "селектора", определяющего, к каким HTML-элементам оно применяется. В данном случае мы пытаемся придать стиль элементу <body>. После селектора находится заключенный в фигурные скобки "блок деклараций". Все "свойства", которые мы там зададим, будут влиять на элемент <body>.
color - это встроенное свойство, определенное спецификацией CSS и определяющее цвет текста выбранных HTML-элементов. Оно принимает шестнадцатеричное значение, представляющее цвет. #FF0000 означает ярко-красный цвет.
В свойствах CSS (как и в атрибутах HTML), используются пары "ключ-значение". Только в CSS мы определяем внешний вид, в то время как HTML задает семантический смысл основного контента.
Если вы попробуете загрузить одну из HTML-страниц в браузер, то не увидите нашу таблицу стилей в действии. Это потому, что мы еще не связали их между собой. Для этого предназначен элемент HTML <link/>. В файле hello-css.html изменим <head> на такой:
<head>
<meta charset='UTF-8'/>
<title>Hello, CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
Элемент <link/> указывает браузеру, что при отображении нашей страницы hello-css.html нужно загрузить файл styles.css. Теперь весь текст на странице должен стать красным:
Элемент <link/> - это такой же элемент, как и <a>, но он используется только внутри <head>. Находясь в голове документа, <link/> подключается к метаданным, определенным за пределами данного документа. Также обратите внимание, что <link/> это пустой элемент. Поэтому ему не нужен закрывающий тег.
Атрибут rel устанавливает связь между ресурсом и HTML-документом. Наиболее распространенное значение - stylesheet, но есть и несколько других вариантов. Атрибут href работает так же, как рассказано на предыдущем уроке, только он должен указывать на файл .css, а не на другую веб-страницу. Значение href может быть абсолютной, относительной или корневой ссылкой.
Обратите внимание на отсутствие прямой связи между браузером и нашей таблицей CSS. Браузер может найти ее только через HTML-разметку. Картинки, CSS, и даже JavaScript - все они находятся на HTML-странице, которая "склеивает" все это вместе. Поэтому HTML-страница является сердцевиной большинства веб-сайтов.
Теперь, когда наша таблица стилей подключена, давайте немного поиграем с ней. Этот красный цвет просто ужасен. Давайте сменим тон на приятный глазу серый:
body {
color: #414141; /* Темно-серый */
}
Обратите внимание, что комментарии в CSS отличаются от комментариев в HTML. Вместо синтаксиса <!-- --> в CSS игнорируется все, что находится между символами /* и */.
В блок деклараций CSS можно поместить сколько угодно свойств. Попробуем задать цвет фона всей веб-страницы, изменив наше правило на следующее:
body {
color: #414141; /* Темно-серый */
background-color: #EEEEEE;/* Светло-серый */
}
Свойство background-color очень похоже на свойство color, но оно определяет цвет фона для любого выбранного элемента. Обратите внимание на точки с запятой в конце каждого объявления. Их удаление приведет к нарушению правила CSS, поэтому всегда ставьте точки с запятой!
Почему мы выбрали оттенки серого, а не черно-белый? Использование фона #000000 с цветом текста #FFFFFF дает слишком высокий контраст. Создается впечатление, что страница как-бы вибрирует, что может сильно отвлекать читателя.
Само собой, вы захотите применить стили к элементам, отличным от <body>. Для этого просто добавьте дополнительные правила CSS с различными селекторами. Например, измените размер шрифта заголовков <h1>:
body {
color: #414141; /* Dark gray */
background-color: #EEEEEE;/* Dark gray */
}
h1 {
font-size: 36px;
}
А для изменения размера заголовков h2 добавьте другое правило:
h2 {
font-size: 28px;
}
Многие свойства CSS требуют указания единиц измерения. Существует множество единиц измерения, но наиболее часто встречающиеся - px (пиксель) и em (произносится как "эм"). Первое - это то, что вы интуитивно называете пикселем, независимо от того, есть ли у пользователя дисплей retina или нет. А второе - это текущий размер шрифта рассматриваемого элемента.
Единица em очень удобна для определения размеров относительно некоторого основного шрифта. На скриншоте выше показано масштабирование единиц em для соответствия основным размерам шрифта 12px, 16px и 20px. Конкретным примером является следующий вариант предыдущего кода:
body {
color: #414141; /* Dark gray */
background-color: #EEEEEE;/* Dark gray */
font-size: 18px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
Сначала задаем основной размер шрифта документа - 18px. Тогда наши <h1> будут быть в два раза больше, а наши <h2> - в 1,6 раза. Если захотите уменьшить или увеличить базовый, единицы em позволят соответственно масштабировать всю страницу.
А если мы решим добавить некоторые стили ко всем заголовкам? Мы же не хотим иметь множество почти одинаковых правил, поскольку это в итоге превратится в кошмар для техподдержки:
/* (Вы сильно пожалеете о создании таких вот дублирующихся
стилей) */
h1 {
font-family: "Helvetica", "Arial", sans-serif;
}
h2 {
font-family: "Helvetica", "Arial", sans-serif;
}
h3 {
font-family: "Helvetica", "Arial", sans-serif;
}
/* (и так далее) */
Вместо этого мы можем выделить несколько HTML-элементов в одном CSS-правиле, разделив их запятыми. Добавьте это правило в наш файл styles.css:
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
}
С помощью одного правила мы зададим шрифт для всех наших заголовков. Это здорово. Ведь если мы захотим сделать правки, мы сделаем это только в одном месте. Копировать и вставлять код - плохая идея для разработчиков, а "множественные селекторы" [multiple selectors] позволяют значительно сократить количество подобных действий.
font-family - еще одно встроенное CSS-свойство, определяющее шрифт для выбранного элемента. Оно принимает несколько значений, поскольку не у всех пользователей установлены одинаковые шрифты. На скоиншоте браузер сначала пытается загрузить самый левый шрифт (Helvetica), затем переходит к Arial, если у пользователя его нет, и наконец, выбирает шрифт без засечек, встроенный в систему sans serif.
Исторически сложилось так, что встроенные в систему шрифты ограничивают возможности веб-дизайнеров. Сегодня системные шрифты в значительной степени вытеснены веб-шрифтами. Подробнее об этом можно прочитать в главе Веб-типографика.
Свойство list-style-type позволяет изменять маркет "пульки", используемый для элементов <li>. Как правило, его нужно задавать для родительского элемента <ul> или <ol>:
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
Другие распространенные значения можно найти на hello-css.html. Особо интересно значение none, обычно используемое для разметки навигационного меню с помощью списка <ul>. Значение none позволяет стилизовать элементы списка меню под кнопки. В главе Продвинутое позиционирование мы используем этот прием для создания навигационного меню, показанного ниже.
Это хороший пример разделения контента и внешнего вида. Навигационное меню - есть неупорядоченный список, но в данном случае имеет смысл отображать его в виде кнопок, а не в виде обычного маркированного списка. Грамотно разработанный HTML позволяет поисковым системам делать выводы о структуре нашего содержимого, а CSS - красиво отображать его для людей.
Можно даже создавать собственные маркеры списка для элементов <li> с помощью свойства list-style-image (см. соответствующую статью в MDN).
Определение цвета текста и внешнего вида списка может показаться мелочью. И вообщем так оно и есть. Но взгляните на картину в целом: речь идет о получении полного контроля над внешним видом HTML-документа. Отдельное свойство CSS - да, это мелочь. Но соберите все CSS-свойства вместе, и у вас получится уникальная веб-страница.
Итак, мы определили несколько основных стилей для одной из наших веб-страниц. Было бы очень удобно, если бы мы могли повторно использовать их и на другой странице. Для этого достаточно добавить тот же элемент <link/> на все остальные страницы, которые мы хотим стилизовать. Добавьте в <head> файла dummy.html следующую строку:
<link rel='stylesheet' href='styles.css'/>
Теперь наши страницы dummy.html должны отвечать стилям hello-css.html. При изменении стиля в styles.css эти изменения будут автоматически отражаться на каждой из наших веб-страниц. Таким образом достигается единый внешний вид и восприятие всего сайта.
Почти всегда используется хотя бы одна таблица стилей, применяемая ко всему сайту. Подключать таблицы стилей обычно рекомендуется через корневые ссылки. Это поможет избежать проблем на вложенных страницах. Например, в some-folder/page.html для ссылки на наш файл styles.css следует использовать ../styles.css. Но это может быстро привести к путанице.
Данный курс познакомит вас с множеством существующих различных CSS-свойств. А пока что закончим с некоторыми наиболее распространенными способами форматирования текста.
Подчеркивание текста задается свойством text-decoration. Установив значение none, можно убрать стандартное подчеркивание из всех наших ссылок. Подробнее о стилях ссылок мы поговорим позже.
a {
text-decoration: none;
}
Другим распространенным значением для text-decoration является line-through, которое зачеркивает "удаленный" текст. Но помните, что смысл всегда должен передаваться с помощью HTML, а не CSS. Лучше использовать элементы <ins> и <del>, вместо добавления стиля line-through, например, к элементу <p>.
Метко названное свойство text-align* определяет выравнивание текста в HTML-элементе.
* - align по-английски: "выравнивать".
p {
text-align: left;
}
Другие допустимые значения: right, center или justify. Обратите внимание, что текст всегда выравнивается по всей странице:
Но это не совсем то, что нужно для большинства сайтов. Почему? Узнаете на следующем уроке, когда речь пойдет о CSS-блоках.
Свойство font-weight определяет "жирность" текста в элементе, а свойство font-style указывает, является ли он курсивным или нет.
Давайте предположим, что мы не хотим, чтобы наши заголовки были жирными. Обновим правило шрифта заголовков в styles.css следующим образом:
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial", sans-serif;
font-weight: normal; /* Добавьте эту строку */
}
Эти свойства наглядно демонстрируют разделение содержания (HTML) и внешнего вида (CSS). Следующие правила изменяют внешний вид элементов <em> и <strong>:
/* Пожалуй, не стоит этого делать */
em {
font-weight: bold;
font-style: normal;
}
strong {
font-weight: normal;
font-style: italic;
}
Однако мы не советуем делать это для реальных сайтов. Стили шрифтов это довольно важная тема. Мы углубимся в нее на уроке Веб-типографика.
В CSS правила "каскадируются" (передаются) из нескольких источников. До сих пор мы видели только одно место, где CSS может быть определен: внешние .css-файлы. Однако внешние таблицы стилей - это лишь одно из многих мест, куда можно поместить CSS-код.
Иерархия CSS для каждой веб-страницы выглядит следующим образом:
Порядок следования - от наименьшего к наибольшему. То есть стили, определенные на каждом последующем шаге, отменяют предыдущие. Так, встроенные стили всегда будут заставлять браузер игнорировать стили по умолчанию. Следующие несколько разделов будут посвящены последним двум вариантам, поскольку именно их мы можем контролировать как веб-разработчики (в дополнение к внешним стилям, с которыми мы уже начали работать).
Мы постарались помочь вам с самого начала найти верный подход к работе с внешними стилями. Понимание page-specific и inline стилей очень важно, поскольку вы наверняка столкнетесь с ними в дальнейшей работе. Но внешние стили - это, безусловно, лучшее место для настройки внешнего вида вашего сайта.
Элемент <style> используется для добавления в отдельные HTML-документы соответствующих страниц CSS-правил. Элемент <style> всегда находится в <head> веб-страницы, что логично, поскольку он представляет метаданные, а не контент как таковой.
* - Page-Specific - "стили для конкретной страницы". Другое название Internal, так. наз. "внутреннее" подключение стилей. В Рунете встречаются также названия "глобальный" или "внедренный" вид подключения.
В качестве примера зададим некоторые стили для нашей страницы dummy.html, изменив ее элемент <head> следующим образом:
<head>
<meta charset='UTF-8'/>
<title>Dummy</title>
<link rel='stylesheet' href='styles.css'/>
<style>
body {
color: #0000FF; /* Синий */
}
</style>
</head>
Итак, эти стили будут применяться только для dummy.html. На hello-css.html они не повлияют. Если вы все сделали правильно, то при загрузке dummy.html в браузере вы текст должен стать синим.
В элемент <style> можно поместить все, что и наш элемент styles.css. Он использует точно такой же синтаксис, что и styles.css, но все внутри <style> будет переопределять правила из styles.css. В нашем случае мы приказываем браузеру игнорировать свойство color, определенное для <body> в styles.css. Новое свойство color: #0000FF; заменяет свойство color из styles.css.
Проблема внутренних стилей в том, что их крайне сложно обслуживать. Для применения этих стилей на другой HTML-странице необходимо скопировать и вставить их в раздел <head> HTML-кода другой страницы (см. скриншот выше). Отслеживать излишние CSS-правила в нескольких .html-файлах много сложнее редактирования всего одого файла .css.
Внутренние стили иногда имеют смысл для быстрых изменений внешнего вида конкретной страницы. И все-же мы не рекомендуем помещать CSS код внутрь элемента <style>. Вместо этого, много лучше подключать внешнюю таблицу стилей styles.css.
Правила CSS можно также поместить в атрибут style HTML-элемента. В файле dummy.html у нас есть ссылка, которая никуда не ведет. Давайте сделаем ее красной с помощью встроенного стиля, чтобы мы помнили, что это неработающая ссылка:
<p>Want to try crossing out an <a href='nowhere.html'
style='color: #990000; text-decoration: line-through;'>obsolete link</a>?
This is your chance!</p>
Как и в случае с внутренними стилями, используется тот же синтаксис CSS, с которым мы уже работали. Однако, поскольку он находится в атрибуте, его необходимо сжать до одной строки. Встроенные стили - это самое конкретное определение CSS. Определенные при этом свойства color и text-decoration имеют наивысший приоритет. Даже добавив в элемент <style> некое правило типа text-decoration: none, это не даст никакого эффекта.
Избегайте внутренние стили любой ценой. Одна из причин - их вышеупомянутый приоритет. Изменить стиль страницы из внешнего CSS файла будет невозможно. Если вы захотите изменить стиль своего сайта, будет недостаточно просто изменить несколько правил в файле styles.css. Придется исправлять и обновлять каждый элемент HTML, имеющий атрибут style. Это приводит в ужас.
Впрочем, иногда необходимо применить стили только к конкретному элементу HTML. Для этого всегда следует использовать классы CSS, а не встроенные стили. Классы мы рассмотрим на уроке Селекторы CSS.
Правила CSS можно распределять по нескольким внешним таблицам стилей, просто добавляя несколько элементов <link/> на одну и ту же страницу. Часто используется разделение стилей для различных разделов сайта. Это позволяет выборочно применять согласованные стили к различным категориям веб-страниц.
Представим, что у нас есть куча страниц с товарами, выглядящими иначе, чем страница блога. Тогда мы могли бы использовать следующий код (но на самом деле эти таблицы стилей у нас не определены, поэтому не добавляйте их в наш пример):
<!-- (Все сайты с продуктами имеют такой код) -->
<head>
<link rel='stylesheet' href='styles.css'/>
<link rel='stylesheet' href='product.css'/>
</head>
<!-- (Все статьи блога имеют такой код) -->
<head>
<link rel='stylesheet' href='styles.css'/>
<link rel='stylesheet' href='blog.css'/>
</head>
Порядок следования элементов <link/> имеет особое значение. Таблицы стилей, созданные позднее, будут переопределять, то есть преобладать над стилями, созданными ранее. Обычно "базовые" стили или стили "по умолчанию" (default) помещаются в одну таблицу стилей (styles.css) и дополняются таблицами стилей для конкретных разделов (напр. product.css и blog.css). Это позволяет организовать CSS-правила в управляемых файлах, избегая опасностей, связанных со спецификой страниц и встроенными стилями.
На этом уроке мы много говорили о разделении содержания и внешнего вида. Это позволяет использовать одну таблицу стилей CSS в нескольких HTML-документах, а также применять различные правила CSS к одинаковому HTML-контенту для смартфонов, планшетов и ноутбуков/ПК. Эта технология называется Адаптивный дизайн.
Будучи веб-разработчиком, для работы вы получите уже готовый дизайн. Ваша задача - используя знания CSS, превратить его в реальную веб-страницу. Как говорилось ранее, настройка отдельных свойств CSS на самом деле довольно проста. Самое сложное - объединить огромное число встроенных свойств и создать именно то, что ожидает веб-дизайнер, и сделать это быстро.
На этом уроке речь шла в основном о форматировании текста, но язык каскадных таблиц стилей способен на гораздо большее. На следующем уроке мы начнем изучать, как CSS определяет верстку веб-страниц. Напоминаем, что при возникновении вопросов о том, как работает то или иное свойство, всегда можно обратиться к Руководству по CSS от MDN.