Инструкции
Главная / Разработчикам / Работа со стилями / Стандарты/требования

Стандарты/требования

 

Структура правила имеет следующий вид:

Селектор {свойство1: значение; свойство2: значение; ...}

Сначала идет селектор (в качестве селектора может быть тег, класс, идентификатор), затем в фигурных скобках идет блок объявления стилей этого селектора. Каждое объявление состоит из свойства и значения, которые отделяются друг от друга двоеточием. Друг от друга объявления отделяются точкой с запятой.
   
Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>.
 
Идентификатор - определяет уникальное имя элемента. Используется на странице единожды (уникальность).

Идентификатор в CSS записывается так:

    Тег#Имя_идентификатора { свойство1: значение; свойство2: значение; ... }
    #Имя_идентификатора { свойство1: значение; свойство2: значение; ... }
   
Например:

div#header {height:150px; background:#585858;} 

Блоку header (шапка сайта) задаем высоту и цвет фона. Поскольку шапка у сайта одна, то целесообразно использовать идентификатор.

#menu a {color:#000000;} 

Этим правилом мы покрасили в черный цвет ссылки, находящиеся в блоке с идентификатором menu.

В HTML идентификатор записывается так: <тег id="Имя_идентификатора">...</тег>.

Например:

<div id="header ">
<ul id="menu">
    <li><a href="main/">Главная</a></li>
    <li><a href="about/">О компании</a></li>
    ...
</ul>
</div>

Класс - может многократно использоваться на странице.

Класс в CSS записывается так же как идентификатор, но вместо решетки (#) пишется точка (.):

Например:

Поменяем цвет и написание шрифта у элементов span с классом blue.

span.blue {color:blue; font-family: "Times New Roman", Times;}

Создадим класс grey и зададим ему серый цвет текста.

.grey {color:#888888;}

 Запись в HTML:

<p class="grey">Текст этого абзаца будет серым, т.к. мы к этому абзацу применили класс grey.</p>
<p>В текcте этого абзаца будут встречаться слова <span class="blue">синего цвета</span>,
т.к. к ним применен стиль <span class="blue">blue</span>.</p>
<p class="grey">Обратите внимание на то, что класс, в отличие от идентификатора, можно применять
<span class="blue">несколько раз</span>. Класс <span class="blue">blue</span> привязан
к элементам span, а класс grey не привязан ни к какому элементу, поэтому класс grey мы
<span class="blue">можем применять к <strong class="grey">любому</strong> элементу.</span></p>

Результат выполнения кода:

CSS не чувствителен к переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Данный сайт использует файлы cookie и прочие похожие технологии. В том числе, мы обрабатываем Ваш IP-адрес для определения региона местоположения. Используя данный сайт, вы подтверждаете свое согласие с политикой конфиденциальности сайта.
OK