Главная css Синтаксис CSS

Синтаксис CSS

1. Общий способ записи стилевых правил в файле.css имеет следующий вид:

Селектор {имя_параметра1: значение; имя_параметра2: значение; . . . имя_параметраN: значение}

1
body {background: #ffffff color: #333300;}

body { background: #ffffff; color: #333300; }
Селектор { параметр: значение; параметр: значение; }

2. В качестве селектора используется:
  1. либо имя тега (без уголков),
  2. либо значение его атрибута id, перед которым указывается символ #.
  3. для нескольких элементов (тегов) с одинаковыми параметрами селектор можно сгрупировать. В этом случае теги разделяются запятой.
2
h1, 
h2 {
color: red;
font-family: "Times New Roman", Georgia, serif;
line-height: 1.3em;
}

3
h3, p, b {color: olive; font-style: italic;}

<body>
  <h3>Эта запись - h3</h3> 
  <b>Эта запись - тег b</b> 
  <p>Эта запись - <b>тег P</b></p> 
</body>
Результат Примера 3

Эта запись - h3

Эта запись - тег b

Эта запись - тег P

4
В HTML для заголовка:
    <h1 id="myh1">ПРИВЕТ МИР!<h1>
Прописали в CSS:
    #myh1 {color: gray; font-size: 20pt}
Результат Примера 4

ПРИВЕТ МИР!

3. Селектор класса.
Для одного и того же тега можно задать разные стили, называемые КЛАССЫ
Имя класса можно использовать в теге как значение атрибута class.
5
CSS:            
  h2.курсив {font-style: italic}
  h2.подчеркнутый {text-decoration: underline}
        
HTML:
<body>
  <h2>Обычный заголовок</h1>
  <h2 class=курсив>Заголовок курсивом</h1>
  <h2 class=подчеркнутый>Заголовок подчеркнутый</h1>
</body>
Результат Примера 5

Обычный заголовок

Заголовок курсивом

Заголовок подчеркнутый


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

6
p, b {color: olive; font-style: italic;}
p b {color: red; font-style: normal;}
            
<body>
  <b>Эта запись - тег b</b>
  <p>Эта запись - <b>тег P</b></p> 
</body>
Результат Примера 6
Эта запись - тег b

Эта запись - тег P

(Сравни с Прмером 3)
Здесь жирный текст будет отражаться красным и нормальным стилем, если только он применяется внутри абзаца (внутри тега тег p).
Во всех остальных случаях содержимое тега <b> будет просто жирным.

5. Универсальный селектор.
Универсальный селектор обозначается * (звёздочка) и прсваивает значения, описываемые в параметре всем элементам на странице. 
7
* {margin: 0;}
В Примере 7 для всех элементов установлены нулевые внешние отступы.