CSS Cascading Style Sheet. CSS это правила как должен выглядеть HTML. Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор. - презентация

1 CSS Cascading Style Sheet

2 CSS это правила как должен выглядеть HTML. Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор тэга P { font: bold 12 pt times: } P селектор тэга P { font: bold 12 pt times: } 2. Класс представляет собой свободное правило которое можно применить к любому тэгу. Классу можно дать любое имя. Он применим ко множеству тэгов и является самой гибкой разновидностью селектора..myClass { font: bold 12pt times; }.myClass { font: bold 12pt times; } 3. Правила ID могут применяться также как и классы ко всем тэгам. Однако селекторы ID обычно применяются один раз к тэгу на странице для использования в функции JavaScript. #object1 { position : absolute; top: 10px; } #object1 { position : absolute; top: 10px; }

3 Основной синтаксис CSS правила Selector { property : value ; }

4 Добавление CSS в HTML тэги Можно задавать стили конкретно для каждого тэга. Wonderland Wonderland

5 Добавление CSS на Web страницу H1 { color: red; }….

6 Создание внешнего CSS файла

7 Импортирование внешнего CSS url (filename.css) body { background : white url (picture.gif) no-repeat;}

8 Определение HTML селектора p { color: red; font-size: 12px; line-height: 18px; font-family: verdana, arial; }

9 Определение классов для создания тэгов.copy { color: black; font-size: 12px; line-height: 18px; font-family: verdana, arial, helvetica; }….…. здесь будет текст здесь будет текст

10 Определение ID для идентификации объекта #area { color: red; position: relative; margin-left: 9em; }….….

11 Определение тэгов с помощью одинаковых правил h1,h2,p,.copy { font-size: 12px; color: red; font-size: 12px; line-height: 18px; font-family: verdana, arial, helvetica; }

12 Позиционирование Статическое (static) Статическое (static) Относительное (relative) Относительное (relative) Абсолютное (absolute) Абсолютное (absolute) #object { position: relative top:125px; left: 12em; }

13 С помощью CSS можно управлять Текстом Текстом Шрифтом Шрифтом Списками Списками Цветами и фоном Цветами и фоном Рамками и полями Рамками и полями Позиционированием Позиционированием Видимостью элемента Видимостью элемента и т.д.