Основы синтаксиса CSS

1. Синтаксис CSS

2. селектор Термины CSS
p { свойство значение
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
line-height: 110%; В этом примере указание явно цвета
шрифта излишне, т.к. браузер все равно
color: #000000; (по умолчанию) использует чѐрный цвет
margin: 20px; Это свойство определяет внешний отступ абзаца
от охватывающего его (родительского) элемента
(в нашем случае – это граница ячейки)
}
В данном примере СЕЛЕКТОР – это тег <p> и средствами CSS мы
переопределили некоторые его значения
Смотрите пример

3. Отступ (margin)
отступ

4. Практика: создание правил
CSS для абзацев
1. Создать в «корне сайта» пустой
текстовый файл «style.css»
2. Открыть его в DW
3. В панели CSS STYLE (Shift+F11)
«запустить» создание нового CSS-
правила
4. Указать селектором – тег <p>
5. Прописать внешний отступ – 12 px

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

6. Практика: присоедините файл с
CSS к HTML документу
Пропишите CSS-правила для тега <h1>

7. Cелектор - имя класса
Класс
Имя класса должно начинаться с
точки, первый символ – буква и
НЕ должно совпадать с названием
.pict { margin: 8px; } тега.
<img src="putin.jpg" alt="123" width="123" height="93"
align="left" class="pict" />
Обычно это имя говорит - к какому элементу страницы его применяют,
например .nizmenu - «нижнее» меню

8. Применение классов
• Классы можно применять к любому
элементу ВЕБ страницы
• В одной странице может быть
неограниченное количество элементов
с одним и тем же классом
• В момент создания класса – не лишним
будет написать комментарий – для
чего этот класс
/* комментарий в коде CSS */

9. Практика: создание класса
CSS для картинок в статьях
• Укажите внешний отступ в 10 px

10. Как применить класс к
объекту на странице
• Выделите объект
• В панели «Свойства» (Properties), в списке
«Class» – выберите существующий класс

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

12. Примените класс к ячейке
«подвала»

13. Понятие «Родитель» –
<div class="mainWrap"> «Потомок» в HTML
<h1>Основной заголовок</h1>
<p>абзац текста.</p>
<ul>
<li>пункт 1</li>
<li>пункт 2</li>
</ul>
</div>

14. Вопросы наследования
• Наследованием называется перенос правил
форматирования для элементов, находящихся внутри
других.
• Такие элементы являются дочерними, и они наследуют
некоторые стилевые свойства своих родителей, внутри
которых располагаются.

15. Исключения в наследовании
• Содержимое ячейки (текст) «унаследовал»
CSS правила применѐнные к ней
• Есть теги которые не наследуют некоторые
свойства «родительских элементов»
• Ссылки не наследуют цвет и отключение
«подчѐркивания»

16. Составной селектор
• Составной (или – Контекстный) селектор состоит из
простых селекторов разделенных пробелом.
• Так, для селектора тега синтаксис будет следующий.

17. Контекстный селектор для
«nizmenu»
• Поставьте на ссылку курсор и создайте
новое правило
Продолжение следует…