Как сверстать, если никогда не верстал
ЦСС, оформление страницы
Как сверстать, если никогда не верстал
ЦСС, оформление страницы
В прошлом совете я рассказал, как сделать простую веб‑страницу в текстовом редакторе. Но страница с одним текстом и без оформления выглядит неприглядно:
Красиво оформить страницу можно с помощью языка стилей ЦСС.
Как устроен ЦСС
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код наглядный, его легко читать и понимать. Сначала пишут какой элемент стилизовать, затем в фигурных скобках пишут свойства внешнего вида этого элемента.
Например, так можно задать всем заголовкам первого уровня на странице синий цвет текста, крупный кегль и отступ снизу. Названия свойств и их значения говорят сами за себя:
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.