Синтаксис CSS

Термины CSS

p {

font-family: Verdana, Arial, sans-serif;

font-size: 120%;

line-height: 110%;

color: #000000;

margin: 20px;

}

селектор

свойство значение

В данном примере СЕЛЕКТОР – это тег <p> и средствами CSS мы

переопределили некоторые его значения

В этом примере указание явно цвета

шрифта излишне, т.к. браузер все равно

(по умолчанию) использует чѐрный цвет

Это свойство определяет внешний отступ абзаца

от охватывающего его (родительского) элемента

(в нашем случае – это граница ячейки)

Смотрите пример

Отступ (margin)

отступ

Практика: создание правил

CSS для абзацев

1. Создать в «корне сайта» пустой

текстовый файл «style.css»

2. Открыть его в DW

3. В панели CSS STYLE (Shift+F11)

«запустить» создание нового CSS-

правила

4. Указать селектором – тег <p>

5. Прописать внешний отступ – 12 px

Последовательность действий

Практика: присоедините файл с

CSS к HTML документу

Пропишите CSS-правила для тега <h1>

Cелектор - имя класса

.pict { margin: 8px; }

Имя класса должно начинаться с

точки, первый символ – буква и

НЕ должно совпадать с названием

тега.

Класс

Обычно это имя говорит - к какому элементу страницы его применяют,

например .nizmenu - «нижнее» меню

<img src="putin.jpg" alt="123" width="123" height="93"

align="left" class="pict" />

Применение классов• Классы можно применять к любому

элементу ВЕБ страницы

• В одной странице может быть

неограниченное количество элементов

с одним и тем же классом

• В момент создания класса – не лишним

будет написать комментарий – для

чего этот класс

/* комментарий в коде CSS */

Практика: создание класса

CSS для картинок в статьях

• Укажите внешний отступ в 10 px

Как применить класс к

объекту на странице

• Выделите объект

• В панели «Свойства» (Properties), в списке

«Class» – выберите существующий класс

Практика: создание класса -

.nizmenu

Примените класс к ячейке

«подвала»

Понятие «Родитель» –

«Потомок» в HTML<div class="mainWrap">

<h1>Основной заголовок</h1>

<p>абзац текста.</p>

<ul>

<li>пункт 1</li>

<li>пункт 2</li>

</ul>

</div>

Вопросы наследования• Наследованием называется перенос правил

форматирования для элементов, находящихся внутри

других.

• Такие элементы являются дочерними, и они наследуют

некоторые стилевые свойства своих родителей, внутри

которых располагаются.

Исключения в наследовании

• Содержимое ячейки (текст) «унаследовал»

CSS правила применѐнные к ней

• Есть теги которые не наследуют некоторые

свойства «родительских элементов»

• Ссылки не наследуют цвет и отключение

«подчѐркивания»

Составной селектор

• Составной (или – Контекстный) селектор состоит из

простых селекторов разделенных пробелом.

• Так, для селектора тега синтаксис будет следующий.

Контекстный селектор для

«nizmenu»

• Поставьте на ссылку курсор и создайте

новое правило

Продолжение следует…