Основы HTML и CSS Каскадные таблицы стилей (CSS). - презентация

1 Основы HTML и CSS Каскадные таблицы стилей (CSS)

2 Каскадные таблицы стилей (CSS): Основные цели и задачи CSS. Способы добавления стилей на WEB-страницу. Основные понятия и определения. Грамматика языка стилей Создание стилей и классов. Принципы каскадирования и принципы группировки Применение стилей и классов к элементам документа HTML Декоративные возможности CSS: формирование рамок и отступов Позиционирование элементов на странице и управление моделью элемента

3 Методы определения CSS Cascading Style Sheets (каскадные таблицы стилей) это средство, позволяющее задавать различные визуальные свойства HTML-элементам. Методы определения таблицы стилей в документе HTML: Связывание(linking)- Внешние таблицы стилей Вложение(embeding) - Информация о стиле в заголовке: элемент STYLE Встраивание(inline)- Атрибут style Импорт (import) - IE color:red; background:#cccccc свойство property значение value декларация declaration

4 Встроенная информация о стиле (inline) style="color:red; background:#cccccc" Атрибут style определяет информацию о стиле одного элементаstyle Обычный текст К этому абзацу применен стиль. Встроенная информация о стиле. атрибут тега декларация

5 Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding) p { color:red; background:#cccccc } Здесь применен стиль методом вложения. Другой абзац. селектор selector правило rule

6 Метод связывания (linking) - Внешние таблицы стилей p { color:red; background:#cccccc }... style.css index.html second.html

7 Каскадирование div{color:green}... Применен связанный стиль Применен вложенный стиль Применен встроенный стиль p{color:red} div{color:red}

8 Наследование Первый слой Второй слой внутри первого Третий слой внутри второго

9 Единицы измерения размеров em - ems, высота используемого элементом шрифта ex - x-height, ширина буквы "х" испольуемого элементом шрифта px - pixels, пикселы in - inches, дюймы cm - centimeters, сантиметры mm - millimeters, миллиметры pt - points, пункты(1pt = 1/72in = 0,35mm) pc - picas, пики(1pc = 12pt) % - относительные значения(например +20%)

10 Цвет и адреса URL название цвета (red, green, white...) #00cc00 - шестнадцатиричное представление #0c0 - сокращенное шестнадцатиричное представление rgb(0,240,125) - в формате RGB rgb(0%,80%,25%) - в формате RGB, относительное url("название файла") Пример: {background: url("file.gif")}

11 Селекторы типа элемента и класса div{color:red} div.green{color:green}.blue{color:blue} Обычный div Div с классом green Aбзац с классом green Абзац с классом blue Div с классом blue H3 с классом blue элемент элемент + класс класс Обычный div Div с классом green Aбзац с классом green Абзац с классом blue Div с классом blue H3 с классом blue

12 Другие селекторы #back{color:red} div#back{color:black} div b{color:green} td td td{color:blue} Div с id = back Div с контекстным селектором Третий уровень вложенности id контекстные селекторы элемент + id

13 И еще о селекторах Соседние селекторы b + i { color:red } Дочерние селекторы div > p { color:red } Селектор атрибута p[align] { color:red } p[align="right"] { color:green } p[align~="right"] { color:green } div[lang|="en"] { color:red } Универсальный селектор *{color:black}

14 Группировка селекторов h1{ color:red; background:yellow } h2{ color:blue; background:yellow } h3{ color:green; background:yellow } h1,h2,h3{ background:yellow } h1{ color:red; } h2{ color:blue; } h3{ color:green; }

15 Псевдоклассы и псевдоэлементы :link :visited :active :hover :focus :first-child a:link{color:blue} a:visited{color:blue} a:active{color:red} a:hover{color:green} input:focus{color:red} p:first-child{color:blue} :first-line :first-letter :after :before p:first-line{color:red} p:first-letter{color:green} p:after{content:new} p:before{content:Att. }

16 Оформление текстовых элементов font-family: семейства шрифта|тип шрифта font-family:Arial,Geneva,Helvetica,sans-serif; font-size: величина|% абсолютная величина: xx-small, x-small, small, medium, large, x-large, xx-large. относительная величина:larger, smaller font-size:10px; font-weight: normal|bold|bolder|lighter|число от 100 до = normal, 700 = bold font-weight: bold; общее-семейство Существуют следующие общедоступные гарнитуры шрифтов: антиква ('serif'), гротески ('sans-serif'), курсивы ('cursive'), аллегорические ('fantasy') и моноширнные ('monospace') шрифты

17 Оформление текстовых элементов font-style: normal|italic font-style:italic; font-variant: normal|small-caps font-variant:small-caps; font: font-style font-variant font-weigth font- size font-family Порядок важен. Можно все опустить, кроме font-size и font-family. font:bold 10px Arial !important;

18 Оформление текстовых элементов text-align: left|right|center|justify text-align:right; text-decoration: none|overline(|)underline(|)line- through text-decoration:underline; text-indent: величина|% text-indent:10px; text-transform: none|capitalize|uppercase|lowercase text-transform:uppercase;

19 Оформление текстовых элементов letter-spacing: normal|величина letter-spacing:10px; word-spacing: normal|величина word-spacing:10px; vertical-align: baseline|sub|super|top|text- top|middle| bottom|text-bottom|% vertical-align:top; line-height: normal|величина|% line-height:5%; font:bold 10/12px Arial white-space: normal|pre|nowrap white-space:pre;

20 Оформление списков list-style-type: none|circle|disc|square|decimal|lower-alpha|upper- alpha|lower-roman|upper-roman list-style-type:square; list-style-position: outside|inside list-style-position:inside; list-style: list-style-type list-style-position list-style-image list-style:decimal inside; list-style-image: none|url list-style-image:url("ball.gif");

21 Свойства цвета и фона background-color: цвет|transparent background-color:#330033; color: цвет color:red; background-position: top|bottom|center|left|right|величина|% background-position:top right; background-image: none|url background-image:url("fon.gif"); background-repeat: repeat|repeat-x|repeat-y|no-repeat background-repeat:repeat-x ; background-attachment: fixed|scroll background-attachment:fixed; background: transparent background-color background-image background-repeat background-attachment background-position background:#ffffff no-repeat url(fon.gif);

22 Лабораторная работа Использование стилей Файл lab-5-1.html должен отображаться в браузере так: 1 1 основные цвета: чёрный текст на белом фоне; абзацы выравниваются справа; заголовки выравниваются справа и записываются рубленым шрифтом красного цвета; термины, выделяемые курсивом, записываются зелёным цветом; основные цвета: чёрный текст на белом фоне; абзацы выравниваются справа; заголовки выравниваются справа и записываются рубленым шрифтом красного цвета; термины, выделяемые курсивом, записываются зелёным цветом; 2 2

23 Отступы и рамки Содержимое элемента top bottom left right margin border padding

24 Отступы снаружи margin-top: auto|величина|% margin-right: auto|величина|% margin-bottom: auto|величина|% margin-left: auto|величина|% margin: margin-top margin-right margin-bottom margin-left margin:10px 20px 20px 30px; margin:15px; margin-left: 10px; margin-right: 5px;

25 Отступы изнутри padding-top: величина|% padding-right: величина|% padding-bottom: величина|% padding-left: величина|% padding: padding-top padding-right padding-bottom padding-left padding:10px 20px 20px 30px; padding:15px;

26 Рамки border-width: величина|%|(thin|medium|thick) border-color: цвет border-style: none|dotted|dashed|solid|double|groove|ridge|inset| outset border-top-(width|color|style) border-right-(width|color|style) border-bottom-(width|color|style) border-left-(width|color|style) border: border-width border-style border-color border: 1px solid black; border-left: 3px solid black; Border-right: 1px dotted #ccc;

27 Лабораторная работа Использование стилей Используя файл lab-5-2.html, экспериментируйте со свойствами стилей: 1 1 font size color background border margin padding font size color background border margin padding 2 2

28 Визуальные свойства visibility: hidden|visible|inherit visibility:hidden; display: none|block|inline|list-item display:block; overflow: auto|scroll|visible|hidden overflow:auto; clip: auto|rect(top right bottom left) clip:rect(10px 20px 30px 10px);

29 Параметры блока width: величина|% width: 100px; height: величина|% height: 100px; float: none|left|right float: left; clear: none|left|right|both clear: both;

30 Параметры слоя top: auto|величина|% top: 100px; left: auto|величина|% left: 100px; position: static|absolute|relative position: absolute; Этот слой позиционирован абсолютно. Этот слой позиционирован относительно. Здесь должен быть слой Фактическое расположение слоя z-index: auto|величина|inherit z-index:3;

31 Лабораторная работа Использование стилей Используя файл lab-5-3.html, создайте трехмерный заголовок, как на изображении внизу 1 1

32 Итоги С помощью стилей мы имеем возможность отделить содержание HTML документа от оформления Таблицы стилей определяются в HTML документе методами связывания, встраивания и вложения Определенный стиль привязывается к селектору, в роли которого может выступать тег, класс и идентификатор Стили можно разделить на группы: оформления текстовых элементов, цвета и фона, отступов и рамок, параметров блока, слоев и др.