Анатомия CSS-правила

Главная / Анатомия CSS-правила

CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.

Хотя дизайн целой страницы может быть довольно сложным процессом, создание отдельного CSS-правила является довольно простым.


p {
  color: blue;
}

CSS-правило включает в себя селектор. В данном случае это элемент p, и данный селектор означает, что заданное правило должно относиться ко всем параграфам на всей HTML-странице.

За селектором следуют открывающая и закрывающая фигурная скобка, внутри которых содержится CSS-декларация. Она состоит из двух частей: свойства и значения.

Имена свойств предварительно определяются спецификацией, и каждое свойство может иметь определенные значения.

Каждое свойство со значением разделяется двоеточием и заканчивается точкой с запятой.

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

Конечно, CSS-правило может содержать несколько деклараций:


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

В этом примере мы говорим, что наши параграфы должны быть определенного цвета, иметь определенный размер шрифта и определенную ширину.

Набор CSS-правил будет называться таблицей стилей.


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}

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

Но обычно у вас будет гораздо больше одного.

Далее, давайте посмотрим на CSS внутри HTML-документа.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анатомия CSS-правила</title>
<style>
p {
  color: blue;
  font-size: 20px;
  width: 250px;
}
h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Анатомия CSS-правила</h1>
<h2>Первый подзаголовок</h2>
<p>CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.</p>
<h2>Второй подзаголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet semper erat. Donec mi risus, efficitur malesuada purus at, egestas placerat libero. Vestibulum in mattis lorem.</p>
</body>
</html>

В этом примере у нас есть заголовок, два подзаголовка и два параграфа. И мы назначаем этим элементам немного кастомных стилей.

Мы добавляем наши стили внутри <head>, внутри тега <style>.

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

Давайте взглянем на это в браузере.

Заголовок имеет определенный размер и расположен по центру. Параграфы тоже имеют свой размер и цвет, и занимают отведенные им 250 px.

Если вы обратите внимание на подзаголовки <h2>, вы заметите что они имеют больший размер шрифта и более жирное начертание чем обычный текст. Но этого мы не указывали.

Эти неуказанные стили исходят из самого браузера.

Во многих случаях браузеры определяют стили по умолчанию, например для таких вещей как заголовки и подзаголовки. Часто вашей работой будет стилизовать эти элементы для своего собственного дизайна.

Вкратце

В этом посте мы поговорили о синтаксисе CSS-правила:

  • Селектор
  • Декларация
  • Пара свойство/значение

Также мы поговорили о комбинировании CSS-правил в одну таблицу стилей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *