HTML отвечает за то, ЧТО будет выведено на экран. А вот за то, КАК оно будет выглядеть, и где будут располагаться разные части страницы, отвечает CSS.
Проще говоря, HTML — это структура и содержание, а CSS - внешний вид.
CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.
Основной целью разработки CSS являлось разделение структуры страницы от описания внешнего вида документа. Это позволяет создавать представления (можно сказать, «версии») одного HTML-документа, адаптированные для людей с ограниченными возможностями, оптимизированные под мобильные устройства, предназначенные для печати и так далее. Кроме того, последние версии CSS позволяют накладывать анимацию и, фактически, рисовать.
Допустим, вы хотите изменить внешний вид всех абзацев (элементов <p>...</p>
). С помощью CSS-кода ниже мы сделаем так, что у всех элементов p
будет синий фон, отступ со всех сторон по 10 пикселей и шрифт Arial:
<head>
...
<style>
p {
background-color: blue; /* Фон */
margin: 10px; /* Отступы от границ блока с абзацем */
font-family: Arial; /* Шрифт */
}
</style>
...
</head>
<body>
<p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
<p>Это еще один абзац с голубым фоном, отступами и шрифтом Arial</p>
</body>
Элемент <style>...</style>
вставляется в HTML страницу внутрь элемента head
(то есть между тегами <head>
и </head>
).
Но что, если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).
<head>
...
<style>
.strange {
background-color: blue; /* Фон */
margin: 10px; /* Отступы от границ блока с абзацем */
font-family: Arial; /* Шрифт */
}
</style>
...
</head>
<body>
<p class="strange">Это абзац с голубым фоном, отступами и шрифтом Arial</p>
<p>Это абзац без стилей</p>
</body>
Атрибут class
есть у каждого тега, а значит, можно изменить внешний вид и расположение всего, что представлено на странице (иногда с ограничениями).
Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи. Другой пример — логотип сайта где-нибудь наверху. Для уникальных «разовых» элементов стоит использовать id:
<head>
...
<style>
#important {
color: red; /* красный цвет шрифта */
}
</style>
...
</head>
<body>
<p id="important">Это абзац с красным текстом</p>
</body>
В CSS id указываются через решетку #
, а классы — через точку .
. А в HTML они пишутся прямо словами: например, <p class="strange">
или <p id="important">
.
В наших примерах CSS p
, .strange
и #important
называются селекторами. Ими мы выбираем то, к чему применять стиль.
В CSS существует несколько видов селекторов, но для начала достаточно знать о трёх:
div
– элементы конкретного типа, в данном примере div
(тег <div>...</div>
)#id
– элемент с данным id.class
– элементы с таким классомПопробуйте создать файл index.html
со следующим содержанием и открыть его в браузере:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
.note {
color: grey;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p style="font-size: 20px; color: green;">Абзац со стилем, указанным прямо в теге!</p>
<div class="note">Абзац класса "note"</div>
</body>
</html>
С помощью CSS можно менять сотни разных свойств. Поэкспериментируйте со своей страницей и стилями.
Каждый браузер содержит определенный набор стилей «по умолчанию». Этот набор применяется всегда и формирует базовое представление элементов. С одной стороны, это избавляет от необходимости писать стили тогда, когда устраивает умолчание, но с другой — появляются серьезные проблемы.
Этот набор отличается от браузера к браузеру. Все усугубляется тем, что и сами стили работают по-разному в разных браузерах. В этот момент проявляется самая большая боль вёрстки. Необходимо знать тонкости старых и новых браузеров, причём в современном мире это не только браузеры для обычных компьютеров, но также браузеры для мобильных устройств и даже для автомобилей с телевизорами (например, Tesla).
Есть определенные инструменты, позволяющие частично сгладить эту проблему, но системно, скорее всего, она не решится никогда, и чем дальше, тем больше появляется подобных различий. Их можно увидеть на сайте caniuse.com.
В реальных приложениях стили описывают не внутри HTML-страниц, а в отдельных файлах, например style.css
, и с помощью специального тега подключают на страницу:
<link rel="stylesheet" href="style.css">
Эта строчка должна также находиться внутри элемента head
(то есть между тегами <head>
и </head>
).
Отдельным большим блоком в CSS является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.
Раньше каждый верстальщик копировал из проекта в проект заготовки CSS для упрощения разработки (а кто-то делает это и сейчас). В конце концов, появились люди, которые увидели закономерности и смогли их обобщить. Так появились первые CSS-фреймворки. Их центральным элементом была модульная сетка, набор стилей, в простейшем случае позволяющая разбить все пространство на независимые блоки. По сути, это каркас, на который уже можно нанизывать конкретные элементы.
Дальнейшее их развитие привело к созданию таких монстров как Bootstrap. Bootstrap - это больше, чем просто CSS-фреймворк. Кроме модульной сетки, Bootstrap поставляется с большим количеством компонентов, благодаря которым можно собрать сайт практически любой сложности. Ко всему этому стоит добавить то, что он автоматически хорошо работает и для разных размеров экранов, и для мобильных устройств. А благодаря огромному комьюнити, он развивается огромными темпами.
Хекслет целиком и полностью построен на Bootstrap'e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.
Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.
Инструментарий разработчика, предлагаемый браузерами, позволяет просматривать не только структуру HTML, но и CSS. Более того, вы можете очень быстро проводить эксперименты, изменяя CSS прямо тут же.
В нашем курсе Основы HTML, CSS и веб-дизайна есть урок, посвященный Chrome Developer Tools.
Как видно, владение CSS на должном уровне — совсем не то же самое, что и понимание HTML. Чтобы хорошо его применять, недостаточно прочитать справочник. Нужно целенаправленно учиться и практиковаться. Однако, это не означает, что все его знают. Большинство веб-разработчиков знают CSS так себе. Все же это прерогатива верстальщиков, да и фреймворки, такие как Bootstrap, позволяют оставаться в неведении.
На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.
Вам ответят команда поддержки Хекслета или другие студенты.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт