Как сверстать, если никогда не верстал

Как сверстать, если никогда не верстал

В прошлом совете я рассказал, как сделать простую веб‑страницу в текстовом редакторе. Но страница с одним текстом и без оформления выглядит неприглядно:

Красиво оформить страницу можно с помощью языка стилей ЦСС.

Как устроен ЦСС

ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.

ЦСС‑код наглядный, его легко читать и понимать. Сначала пишут какой элемент стилизовать, затем в фигурных скобках пишут свойства внешнего вида этого элемента.

Например, так можно задать всем заголовкам первого уровня на странице синий цвет текста, крупный кегль и отступ снизу. Названия свойств и их значения говорят сами за себя:

h1 {
  color: blue;
  font-size: 48px;
  margin-bottom: 20px;
}

Где пишут ЦСС

ЦСС можно писать прямо внутри ХТМЛ‑файла в особом теге style, код внутри этого тега применится к странице:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
  </body> 
</html>

Как стилизовать точно и надёжно

В примере выше мы стилизовали элементы прямо по названию ХТМЛ‑тегов. Если бы подходящих тегов было больше, то стили применились бы к каждому из них:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
    <p>Второй параграф</p>
    <p>И третий, тоже красный</p>
  </body> 
</html>

Такая стилизация по тегам подходит для описания базовых стилей страницы, но не подходит для точечной стилизации отдельных элементов. Например, когда нужно выделить цветом только один параграф из десятка.

В ХТМЛ класс пишется без точки, а в ЦСС — с точкой

Более точный и гибкий способ стилизации — классы. Элементам в ХТМЛ пишут имя класса в одноимённом атрибуте, а затем в ЦСС указывают стили для элементов с таким классом:

В ХТМЛ класс пишется без точки, а в ЦСС — с точкой
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      .highlighted {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
    <p class="highlighted">И выделяю цветом только определённый параграф</p>
    <p>А этот снова чёрный</p>
  </body> 
</html>

Стили класса можно описать один раз, а затем повесить этот класс на сколько угодно элементов.

И теги и классы в ЦСС называют селекторами. Селектор — значит указатель на один или несколько ХТМЛ‑элементов.

Кроме селекторов‑тегов и селекторов‑классов, есть много других селекторов. Они помогают точнее описывать стили для элементов на основе разных условий. Например, можно стилизовать только чётные элементы или только соседние.

Чтобы уверенно и ловко оформлять страницы, полезно изучить разные типы селекторов и применять их сообразно ситуации.

Как работает наследование стилей

Все теги на странице наследуют стили от родителей — тегов, внутри которых они находятся. Если задать шрифт для body, то шрифт изменится во всех вложенных тегах:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      body {
        font-family: Helvetica;
      }
    </style>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
  </body> 
</html>

Наследуемые свойства можно переопределять:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      body {
        font-family: Helvetica;
      }
      p {
        font-family: Times;
      }
    </style>
  </head>
  <body>
    <h1>Моя прекрасная веб-страница</h1>
    <p>Я верстаю и сияю как заря!</p>
  </body> 
</html>

Наследование — одна из ключевых концепций языка ЦСС, которой нельзя пренебрегать. Наследование позволяет не повторяться и писать гораздо меньше кода, последовательно стилизовать страницу от общего к частному.

Используя полученные знания, базово оформим страницу. Идём от общего к частному, все основные свойства указываем для родителя, а для вложенных элементов лишь точечно переопределяем нужное:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>😎 Моя прекрасная веб-страница</title>
    ​  
    <style>
      body {
        font-family: Helvetica;
        font-size: 18px;
        line-height: 20px;
        background-color: #000; 
        color: #fff;
      }
      h1 {
        font-size: 32px;
      }
      p {
        max-width: 250px;
        opacity: 0.9;
      }
      .highlighted {
        color: #ffd500;
      }
    </style>
  </head>
  <body>
    <h1>
      Моя прекрасная <span class="highlighted">веб-страница</span>
    </h1>
    <p>Я верстаю и сияю как заря, ещё и ЦСС знаю!</p>
    <p>☀ ♥ ★</p>
  </body> 
</html>

Сейчас мы изучили и использовали только основы, язык ЦСС гораздо глубже и интереснее.

Этих основ достаточно для оформления простой страницы и понимания принципов работы стилей в вебе, поэтому в следующем совете мы пойдём дальше — я расскажу, как загрузить получившуюся страницу в интернет, чтобы её могли увидеть другие люди.

А если вы хотите глубже погрузиться в ЦСС, вот какие темы я советую изучать в первую очередь:

Приглашаю уважаемых советчиков поделиться в комментариях другими полезными материалами и ссылками по теме :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы