Все статьи из текущего раздела

Написание правил CSS

Правило CSS состоит из двух частей: селектора, определяющего, к какому тегу (в данном случае это абзац) применяется правило, и объявления, указывающего, что произойдет после применения правила (текст абзаца станет красным). Само объявление состоит из двух элементов: свойства, называющего объект применения (цвет текста) и значения, указывающего состояние свойства (красный цвет).

Базовую структуру селектора и объявления можно расширить тремя способами.
1. Правило может содержать несколько объявлений:

<?php
{color:redfont-size:12pxline-height:15px;}

Это правило задает красный цвет для шрифта текста абзаца, размер шрифта 12 пикселов и высоту строки в 15 пикселов.

CSS требует абсолютной точности — если вы пропустите, например, точку с запятой, все правило будет проигнорировано.
Обратите внимание, что каждое объявление заканчивается точкой с запятой, которая разделяет их между собой.


2. Можно сгруппировать несколько селекторов.
Допустим, если вы хотите выделить шрифт заголовков с 1 по 6 уровень жирным и синим, то можете сделать это с помощью следующего правила:

<?php
hi   
{color:blue;   font-weight:bold;}
h2   {color:blue;   font-weight:bold;}
h3   {color:blue;   font-weight:bold;}
h4   {color:blue;   font-weight:bold;}
h5   {color:blue;   font-weight:bold;}
h6   {color:blue;   font-weight:bold;}

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

<?php
hi
h2h3h4h5h6 {color :bluefont-weight :bold;}

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

3. К одному селектору можно применить несколько правил.
Если, написав предыдущее правило, вы решили, что хотите сделать заголовок hЗ выделенным курсивом, можно просто добавить:

<?php
hi
h2h3h4h5h6  {color:blue;  font-weight:bold;} 
h3  {font-style:italic;}


ПОЛЕЗНЫЕ ССЫЛКИ: