В прошлый раз мы познакомились с базовой базой HTML — языка разметки, который задаёт структуру и содержание веб-страниц. Теперь черёд CSS — языка для описания внешнего вида и форматирования HTML-документов.
Что такое CSS
CSS (Cascading Style Sheets, «каскадные таблицы стилей») — это язык стилей, с помощью которого оформляют веб-страницы. Он определяет, как именно должны отображаться элементы HTML, включая макет, цвета, шрифты и другие визуальные аспекты. CSS используют для того, чтобы отделить содержание веб-страницы от её оформления. За счёт этого страницы удобнее изменять и поддерживать.
Представьте, что HTML — это каркас здания, который определяет его структуру: где находятся комнаты, окна и двери. CSS по такой же аналогии — это дизайн интерьера и экстерьера этого здания: цвет стен, стиль мебели, шторы и так далее. И поскольку дизайн не определён каркасом, нам не нужно сносить дом и строить новый, чтобы изменить оформление.
Возьмём для примера главную страницу журнала «Код». Вот как она выглядит благодаря стилям CSS:
А теперь отключим стили и посмотрим, что получилось. Стало сильно хуже в визуальном плане:
Синтаксис и структура CSS
CSS — декларативный язык. Это значит, что он не содержит явный код для стилизации, а описывает, как следует стилизовать элементы веб-страницы. Мы не программируем шаги для достижения желаемого результата, а указываем, что должно получиться.
Структура CSS включает комментарии, селекторы, свойства и значения. В коде они указываются в таком же порядке. Комментарии оформляются и выглядят так: /* комментарий */. Они используются для объяснения и деления кода на логические блоки. Комментарии не обязательны, но мы будем их использовать, чтобы было понятнее.
Селектор, свойство и значение образуют правило. Правило, в свою очередь, содержит блок деклараций — одно или несколько свойств и их значений в фигурных скобках. Каждая декларация состоит из пары «свойство: значение», разделённой точкой с запятой:
/* комментарий */
селектор {
свойство: значение;
}Теперь копнём поглубже.
Как подключить стили CSS к HTML
Самый простой способ передать информацию о стилях браузеру, чтобы он отобразил страницу так, как мы хотим, — это прописать стили прямо в HTML-документе. Но в реальном мире веб-разработки необходимо хранить код HTML, CSS и JavaScript в отдельных файлах — так проще и удобнее поддерживать проекты. Мы будем учиться сразу делать правильно. Сохраним CSS-код в файл styles.css в ту же папку, в которой лежит HTML-документ, и подключим стили в него:
<link rel="stylesheet" href="styles.css">Эта строка сообщает браузеру, к какому файлу ему обращаться, чтобы знать, как оформлять страницу. Стили всегда подключаются в блоке «головы» страницы:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>Пример HTML-документа</title>
<!-- подключаем стили -->
<link rel="stylesheet" href="styles.css">
</head>CSS-свойства
Свойства CSS определяют атрибуты стиля, которые нужно применить к элементам HTML. Они управляют различными аспектами внешнего вида:
font-family,font-size,font-weight,font-style— свойства шрифта;color,background-color,border-color— свойства цвета;text-align,text-decoration,text-transform— свойства текста;display,float,position,margin,padding— свойства макета;background-image,background-repeat,background-position— свойства фона.
CSS-значения
Значения CSS определяют желаемые настройки стиля для свойств. Это могут быть отдельные значения, числа, цветовые коды, ключевые слова или более сложные выражения. Вот несколько примеров значений:
font-family: Arial, sans-serif,color: #ff0000,background-image: url(image.png),margin: 10px 20px,text-align: center.
На практике это работает так. Допустим, мы делаем свой список задач в браузере и для этого создали страницу для дальнейшей работы. Если не использовать стили, то браузер возьмёт все значения шрифтов, отступов и прочего оформления по умолчанию и получится что-то такое:
А теперь дадим этой странице немного стиля и посмотрим, что поменяется:
/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
text-align: center;
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
/* Настраиваем внешний вид поля ввода*/
input {
display: inline-block;
margin: 20px auto;
border: 2px solid #eee;
padding: 10px 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
/*Закончили со стилями*/
Типографика и цвета
Основные аспекты типографики включают шрифты, размеры, интервалы и стили текста. Семейство шрифтов font-family определяет список шрифтов, которые будут использоваться для текста. Обычно указываются несколько шрифтов на случай, если первый недоступен. Например, такие значения говорят, что нужно использовать шрифты Arial или Sans Serif:
font-family: Arial, sans-serif;
Размер шрифта font-size определяет, какого размера должен быть текст. Такое значение сообщает, что шрифт должен быть размером 16 пикселей:
font-size: 16px;
Стиль шрифта font-style определяет стиль шрифта, например курсив, как в этом примере:
font-style: italic;
Толщина шрифта font-weight определяет толщину текста. Например, можно задать жирный шрифт:
font-weight: bold;
Цвета в CSS используются для определения цвета текста, фона, границ и других элементов. Цвет текста указывается с помощью свойства color, а цвет фона элемента — с помощью свойства background-color.
Указывать цвета можно разными способами:
- стандартным именем, например
color: blue;, - шестнадцатеричным кодом
HEX — color: #ff0000;, - значениями RGB (красный, зелёный и синий) —
color: rgb(255, 0, 0);, - значениями RGBA, где к RGB добавляется прозрачность —
color: rgba(255, 0, 0, 0.5);, - значениями HSL (оттенок, насыщенность и светлость) —
color: hsl(0, 100%, 50%);, - значениями HSLA, где к HSL добавляется прозрачность —
color: hsla(0, 100%, 50%, 0.5);.
CSS-селекторы
CSS-селектор — это часть CSS-правила, которая указывает, к каким элементам HTML будут применяться заданные стили. Если проще, они идентифицируют элементы: «такой элемент должен отображаться вот так». Простые селекторы указывают на элементы на основе их имён:
h1,p,ul,a,img— селекторы тегов;.highlight,.button,.image-container— селекторы классов;#main-content,#header,#footer— селекторы идентификаторов;*— универсальный селектор, который выбирает все элементы;type=”text”— селектор атрибута (в данном случае текста).
Сложные селекторы объединяют простые и позволяют более точно выбирать элементы на основе их отношений, состояния или атрибутов. Возьмём пример с селекторами из статьи про соседние и родственные селекторы. Суть в том, что мы отформатируем текст на странице с их помощью так, чтобы первые абзацы после подзаголовков были красными, а остальные не менялись:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Соседние селекторы</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 16px;
}
/* используем соседний селектор */
h2 + p {
color: red;
}
</style>
</head>
<body>
<h1>Что такое спринты в программировании</h1>
<h2>Ситуация</h2>
<!-- это будет красным -->
<p>У команды разработчиков есть большой проект, где нужно сделать много разных вещей:</p>
<!-- а это — нет -->
<p>— придумать архитектуру всего сервиса,<br>
— написать серверную часть,<br>
— сделать вёрстку и дизайн для мобильных приложений,<br>
— выпустить сайт, который может делать то же самое, что и приложения,<br>
— предусмотреть интеграцию с другими сервисами,<br>
— сделать авторизацию через популярные соцсети.</p>
<p>Времени на всё — 6 месяцев, и кажется, что этого достаточно. Но это может быть обманчиво, потому что команда расслабляется, каждый начинает делать что-то своё, а за месяц до финала выясняется, что вместе эти отдельные части работать не будут. Например, сервер не отдаёт данные в нужном формате для веб-страницы, приложения хранят данные только у себя и не умеют отправлять их на сервер, а авторизация в соцсетях работает только на Андроиде.</p>
<h2>Что такое спринт</h2>
<p>Спринт — это небольшой фиксированный отрезок времени, в который команда делает какую-то ограниченную часть проекта. Например, команда может двигаться двухнедельными спринтами, с каждым спринтом добавляя в проект новые возможности. </p>
<p>Задача спринта — чтобы по его итогу что-то работало. Например, если мы взяли в спринт единую авторизацию в сервисе, то к концу спринта она должна работать и быть протестированной. Нельзя к концу спринта сказать «Ой, ну ничего, в следующий раз доделаем». К концу спринта должно быть готово.</p>
</body>
</html>
Блочная модель и макет
Блочная модель, или Box Model, рассматривает каждый элемент как прямоугольную коробку, состоящую из областей (изнутри наружу):
content— область, в которой располагается какой-то контент (текст, изображение и так далее).padding— внутренний отступ, то есть пространство между содержимым и границей элемента. Он прозрачный и увеличивает размер элемента.border— граница, то есть линия, которая окружает элемент и обрамляет padding.margin— внешний отступ, то есть пространство между границей элемента и соседними. Как и padding, он прозрачный, но не влияет на размер элемента.
Макет, или Layout, — это способ размещения и выравнивания элементов на веб-странице. Вот основные модели компоновки макета:
- стандартный поток,
- флексбокс,
- сетка,
- позиционирование,
- обтекание.
Стандартный поток документа, или Normal Flow, — это базовый способ размещения элементов, при котором блочные элементы располагаются один под другим, а строчные элементы — один за другим в строке. Блочные элементы <div>, <p>, <h1> и так далее располагаются вертикально. В блочные элементы помещаются встроенные, например <span>, <a>, <strong>. Они располагаются горизонтально и занимают только необходимую ширину.
Флексбокс, или flexbox, использует пространство более эффективно и выравнивает элементы в контейнере. С помощью флексбокса создают гибкие и адаптивные макеты.
Сетка, или grid, позволяет создавать сложные макеты с использованием строк и столбцов и точно определять размещение элементов.
Позиционирование — способ управления расположением элементов относительно их нормального потока или других элементов.
Обтекание, или flex, используется для обтекания элементов текстом и создания многостолбцовых макетов. С появлением флексбокса и позиционирования такой способ используют всё реже.
Что дальше
Дальше будет продолжение про CSS — препроцессоры, флексбоксы и прочие классные штуки, которые позволяют сделать практически любую красоту на странице. Подпишитесь, чтобы не пропустить продолжение наших материалов по вёрстке.
