Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 2:

Синтаксис CSS и примеры использования

< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Аннотация: Рассматривается грамматика CSS, способы подключения таблиц стилей, приводятся примеры использования CSS.
Ключевые слова: синтаксис, css, HTML, атрибут, значение

Синтаксис

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.

  1. Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:
    p {font-size: 75%}
  2. Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:
    h1 {font-family: "lucida calligraphy"}
  3. Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:
    table { font-family: arial, "sans serif"; border-style: dotted}
  4. Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
    h2
    {
    font-family: arial; 
    margin-right: 20pt; 
    color:#ffffff }
  5. При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы абзацев, таблиц и списков. Все эти элементы будут выведены шрифтом sans serif:
    p,table,li
    {
    font-family: "sans serif";
    }

Селектор класса (class)

При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.

Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:

h1.stepleft {margin-left: 10pt}
h2.stepright {margin-left: 20pt}

Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

<h1 class="stepleft">
Заголовок с внешним отступом 10 пунктов.
</h1>

<h2 class="stepright">
Заголовок с внешним отступом 20 пунктов.
</h2>

В то же время не допускается следующее определение атрибута class:

< h1 class="stepleft" h2 class="stepright">,

т.е. можно определить только один атрибут class

Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.

.left {margin-left: 40pt}

В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":

<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам. 
</table>

<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p>

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

Селектор идентификатора (id)

Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.

Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":

#fontsz{font-size: 50%}

Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":

ul#first
{
list-style: disc;
color: #ffffff
}

Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.

Комментарии CSS

Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:

/* Первый комментарий. */
table
{
/* Второй комментарий. */
margin-left: 10pt;
font-family: "sans serif"
/* Третий комментарий. */
border-style:outset; 
}
< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия