CSS — Введение в веб-разработку

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 является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.

Css layouting

Bootstrap

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

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

Bootstrap

Хекслет целиком и полностью построен на Bootstrap'e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.

Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.

Полезные ссылки

Developer Tools

Инструментарий разработчика, предлагаемый браузерами, позволяет просматривать не только структуру HTML, но и CSS. Более того, вы можете очень быстро проводить эксперименты, изменяя CSS прямо тут же.

Dev Tools

В нашем курсе Основы HTML, CSS и веб-дизайна есть урок, посвященный Chrome Developer Tools.

Заключение

Как видно, владение CSS на должном уровне — совсем не то же самое, что и понимание HTML. Чтобы хорошо его применять, недостаточно прочитать справочник. Нужно целенаправленно учиться и практиковаться. Однако, это не означает, что все его знают. Большинство веб-разработчиков знают CSS так себе. Все же это прерогатива верстальщиков, да и фреймворки, такие как Bootstrap, позволяют оставаться в неведении.

На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.