Базовый синтаксис CSS.

В CSS основным понятием выступает селектор — это шаблон, который используется для выбора одного или нескольких элементов HTML и применения к ним параметров форматирования. Общий способ базового синтаксиса CSS выглядит следующим образом:


Базовый синтаксис CSS.

Селектор – указывает на тег, класс или идентификатор к которому применяются стилевые параметры.

Свойство – указывает, какое стилевое свойство применять к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).

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

Пример использования стилей:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style>
   h1 {
    color:#a6780a;
    font-weight:normal;
   }
   h2 { 
    color: olive;
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body> 
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2> 
 </body>
</html>

Страница будет выглядить так:


Базовый синтаксис CSS.

Правила применения стилей

1. Форма записи

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

td { background: blue; }
td { color: red; }
td { border: 1px solid black; }

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

td {
  background: blue; /* Синий цвет фона */
  color: red; /* Красный цвет текста */
  border: 1px solid black; /* Чёрная рамка */
}
2. Значения

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

3. Комментарии

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


Базовый синтаксис CSS.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Один ответ к “Базовый синтаксис CSS.”

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: