18. синтаксис css
DESCRIPTION
Основы синтаксиса CSSTRANSCRIPT
Синтаксис 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»
• Поставьте на ссылку курсор и создайте
новое правило
Продолжение следует…