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>).
Layouting
Отдельным большим блоком в CSS является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.
Bootstrap
Раньше каждый верстальщик копировал из проекта в проект заготовки CSS для упрощения разработки (а кто-то делает это и сейчас). В конце концов, появились люди, которые увидели закономерности и смогли их обобщить. Так появились первые CSS-фреймворки. Их центральным элементом была модульная сетка, набор стилей, в простейшем случае позволяющая разбить все пространство на независимые блоки. По сути, это каркас, на который уже можно нанизывать конкретные элементы.
Дальнейшее их развитие привело к созданию таких монстров как Bootstrap. Bootstrap - это больше, чем просто CSS-фреймворк. Кроме модульной сетки, Bootstrap поставляется с большим количеством компонентов, благодаря которым можно собрать сайт практически любой сложности. Ко всему этому стоит добавить то, что он автоматически хорошо работает и для разных размеров экранов, и для мобильных устройств. А благодаря огромному комьюнити, он развивается огромными темпами.
Хекслет целиком и полностью построен на Bootstrap'e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.
Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.
Полезные ссылки
Developer Tools
Инструментарий разработчика, предлагаемый браузерами, позволяет просматривать не только структуру HTML, но и CSS. Более того, вы можете очень быстро проводить эксперименты, изменяя CSS прямо тут же.
В нашем курсе Основы HTML, CSS и веб-дизайна есть урок, посвященный Chrome Developer Tools.
Заключение
Как видно, владение CSS на должном уровне — совсем не то же самое, что и понимание HTML. Чтобы хорошо его применять, недостаточно прочитать справочник. Нужно целенаправленно учиться и практиковаться. Однако, это не означает, что все его знают. Большинство веб-разработчиков знают CSS так себе. Все же это прерогатива верстальщиков, да и фреймворки, такие как Bootstrap, позволяют оставаться в неведении.
На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
- 130 курсов, 2000+ часов теории
- 900 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Используйте Хекслет по максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт