18. синтаксис css

686 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
686
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

18. синтаксис css

  1. 1. Синтаксис CSS
  2. 2. селектор Термины CSSp { свойство значение font-family: Verdana, Arial, sans-serif; font-size: 120%; line-height: 110%; В этом примере указание явно цвета шрифта излишне, т.к. браузер все равно color: #000000; (по умолчанию) использует чѐрный цвет margin: 20px; Это свойство определяет внешний отступ абзаца от охватывающего его (родительского) элемента (в нашем случае – это граница ячейки)} В данном примере СЕЛЕКТОР – это тег <p> и средствами CSS мы переопределили некоторые его значения Смотрите пример
  3. 3. Отступ (margin) отступ
  4. 4. Практика: создание правил CSS для абзацев1. Создать в «корне сайта» пустой текстовый файл «style.css»2. Открыть его в DW3. В панели CSS STYLE (Shift+F11) «запустить» создание нового CSS- правила4. Указать селектором – тег <p>5. Прописать внешний отступ – 12 px
  5. 5. Последовательность действий
  6. 6. Практика: присоедините файл с CSS к HTML документуПропишите CSS-правила для тега <h1>
  7. 7. Cелектор - имя класса Класс Имя класса должно начинаться с точки, первый символ – буква и НЕ должно совпадать с названием.pict { margin: 8px; } тега.<img src="putin.jpg" alt="123" width="123" height="93"align="left" class="pict" /> Обычно это имя говорит - к какому элементу страницы его применяют, например .nizmenu - «нижнее» меню
  8. 8. Применение классов• Классы можно применять к любому элементу ВЕБ страницы• В одной странице может быть неограниченное количество элементов с одним и тем же классом• В момент создания класса – не лишним будет написать комментарий – для чего этот класс /* комментарий в коде CSS */
  9. 9. Практика: создание классаCSS для картинок в статьях• Укажите внешний отступ в 10 px
  10. 10. Как применить класс к объекту на странице• Выделите объект• В панели «Свойства» (Properties), в списке «Class» – выберите существующий класс
  11. 11. Практика: создание класса - .nizmenu
  12. 12. Примените класс к ячейке «подвала»
  13. 13. Понятие «Родитель» –<div class="mainWrap"> «Потомок» в HTML <h1>Основной заголовок</h1> <p>абзац текста.</p> <ul> <li>пункт 1</li> <li>пункт 2</li> </ul></div>
  14. 14. Вопросы наследования• Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.• Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
  15. 15. Исключения в наследовании• Содержимое ячейки (текст) «унаследовал» CSS правила применѐнные к ней• Есть теги которые не наследуют некоторые свойства «родительских элементов»• Ссылки не наследуют цвет и отключение «подчѐркивания»
  16. 16. Составной селектор• Составной (или – Контекстный) селектор состоит из простых селекторов разделенных пробелом.• Так, для селектора тега синтаксис будет следующий.
  17. 17. Контекстный селектор для «nizmenu»• Поставьте на ссылку курсор и создайте новое правилоПродолжение следует…

×