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

Содержание

1. Основы HTML и CSS Каскадные таблицы стилей (CSS)
2. Каскадные таблицы стилей (CSS): Основные цели и
3. Методы определения CSS — Cascading Style Sheets (каскадные
4. Встроенная информация о стиле (inline) style="color:red; background:#cccccc"Атрибут
5. Информация о стиле в заголовке: элемент STYLE
6. Метод связывания (linking) - Внешние таблицы стилейp {color:red; background:#cccccc}...style.cssindex.htmlsecond.html
7. Каскадирование div{color:green}...Применен связанный стильПрименен вложенный стильПрименен встроенный стильp{color:red}div{color:red}
8. НаследованиеПервый слой Второй слой внутри первого Третий слой внутри второго
9. Единицы измерения размеровem - ems, высота используемого
10. Цвет и адреса URLназвание цвета (red, green,
11. Селекторы типа элемента и классаdiv{color:red}div.green{color:green}.blue{color:blue}Обычный divDiv с
12. Другие селекторы#back{color:red}div#back{color:black}div b{color:green}td td td{color:blue}Div с id
13. И еще о селекторахСоседние селекторыb + i
14. Группировка селекторовh1{ color:red; background:yellow}h2{
15. Псевдоклассы и псевдоэлементы:link:visited:active:hover:focus:first-childa: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:beforep:first-line{color:red}p:first-letter{color:green}p:after{content:”new”}p:before{content:”Att. ”}http://www.w3.org/TR/CSS21/propidx.html
16. Оформление текстовых элементовfont-family: семейства шрифта|тип шрифтаfont-family:Arial,Geneva,Helvetica,sans-serif;font-size: величина|%абсолютная
17. Оформление текстовых элементовfont-style: normal|italicfont-style:italic;font-variant: normal|small-caps font-variant:small-caps; font:
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 Arialwhite-space: normal|pre|nowrapwhite-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|insidelist-style-position:inside;list-style: list-style-type list-style-position list-style-imagelist-style:decimal inside;list-style-image: none|urllist-style-image:url("ball.gif");
21. Свойства цвета и фонаbackground-color: цвет|transparentbackground-color:#330033;color: цветcolor:red;background-position: top|bottom|center|left|right|величина|%background-position:top
22. Лабораторная работаИспользование стилей
23. Отступы и рамкиСодержимоеэлементаtopbottomleftrightmarginborderpadding
24. Отступы снаружиmargin-top: auto|величина|%margin-right: auto|величина|%margin-bottom: auto|величина|%margin-left: auto|величина|%margin: margin-top margin-right margin-bottom margin-leftmargin: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-leftpadding:10px 20px 20px 30px;padding:15px;
26. Рамкиborder-width: величина|%|(thin|medium|thick)border-color: цветborder-style: none|dotted|dashed|solid|double|groove|ridge|inset|outsetborder-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-colorborder:
27. Лабораторная работаИспользование стилей
28. Визуальные свойстваvisibility: hidden|visible|inheritvisibility:hidden;display: none|block|inline|list-itemdisplay:block;overflow: auto|scroll|visible|hiddenoverflow:auto;clip: auto|rect(top right bottom left)clip:rect(10px 20px 30px 10px);
29. Параметры блокаwidth: величина|%width: 100px;height: величина|%height: 100px;float: none|left|rightfloat: left;clear: none|left|right|bothclear: both;
30. Параметры слояtop: auto|величина|%top: 100px;left: auto|величина|%left: 100px;position: static|absolute|relativeposition:
31. Лабораторная работаИспользование стилей
32. ИтогиС помощью стилей мы имеем возможность отделить
33. Скачать презентанцию

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

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

Слайды и текст этой презентации

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

Слайд 2Каскадные таблицы стилей (CSS):
Основные цели и задачи CSS. Способы

добавления стилей на WEB-страницу.
Основные понятия и определения. Грамматика языка

стилей
Создание стилей и классов. Принципы каскадирования и принципы группировки
Применение стилей и классов к элементам документа HTML
Декоративные возможности CSS: формирование рамок и отступов
Позиционирование элементов на странице и управление моделью элемента

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

Слайд 3Методы определения
CSS — Cascading Style Sheets (каскадные таблицы стилей) — это

средство, позволяющее задавать различные визуальные свойства HTML-элементам.

http://www.w3.org/TR/CSS21/cover.html

Методы определения таблицы

стилей в документе HTML:
Связывание(linking)- Внешние таблицы стилей
Вложение(embeding) - Информация о стиле в заголовке: элемент STYLE
Встраивание(inline)- Атрибут style
Импорт (import) - IE

color:red; background:#cccccc

свойство
property

значение
value

декларация
declaration

Методы определения CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-элементам.

Слайд 4Встроенная информация о стиле (inline)
style="color:red; background:#cccccc"
Атрибут style определяет информацию

о стиле одного элемента
Обычный текст
К этому абзацу

применен стиль. Встроенная информация о стиле.

атрибут тега

декларация

Встроенная информация о стиле (inline) style=

Слайд 5Информация о стиле в заголовке: элемент STYLE - Метод вложения

(embeding)

p {
color:red;
background:#cccccc
}

Здесь применен стиль методом вложения.
Другой абзац.
селектор
selector
правило
rule

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

Слайд 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%)

Единицы измерения размеровem - ems, высота используемого элементом шрифтаex - x-height, ширина буквы

Слайд 10Цвет и адреса URL
название цвета (red, green, white...)

#00cc00 - шестнадцатиричное

представление

#0c0 - сокращенное шестнадцатиричное представление

rgb(0,240,125) - в формате RGB

rgb(0%,80%,25%) -

в формате RGB, относительное

url("название файла")
Пример: {background: url("file.gif")}

Цвет и адреса URLназвание цвета (red, green, white...)#00cc00 - шестнадцатиричное представление#0c0 - сокращенное шестнадцатиричное представлениеrgb(0,240,125) - в

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

class="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

Другие селекторы#back{color:red}div#back{color:black}div b{color:green}td td td{color:blue}Div с id = backDiv с контекстным селекторомТретий уровень вложенности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}

http://www.w3.org/TR/CSS21/selector.html

И еще о селекторахСоседние селекторыb + i { color:red }Дочерние селекторыdiv > p { color:red }Селектор атрибутаp[align]

Слайд 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. ”}
http://www.w3.org/TR/CSS21/propidx.html

Псевдоклассы и псевдоэлементы:link:visited:active:hover:focus:first-childa: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:beforep:first-line{color:red}p:first-letter{color:green}p:after{content:”new”}p:before{content:”Att. ”}http://www.w3.org/TR/CSS21/propidx.html

Слайд 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

до 900
400 = normal, 700 = bold
font-weight: bold;

общее-семейство
Существуют следующие общедоступные гарнитуры шрифтов: антиква ('serif'), гротески ('sans-serif'), курсивы ('cursive'), аллегорические ('fantasy') и моноширнные ('monospace') шрифты

Оформление текстовых элементовfont-family: семейства шрифта|тип шрифтаfont-family:Arial,Geneva,Helvetica,sans-serif;font-size: величина|%абсолютная величина: xx-small, x-small, small, medium, large, x-large, xx-large.относительная величина:larger, smallerfont-size:10px;font-weight:

Слайд 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;

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

Слайд 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;

Оформление текстовых элементов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;

Оформление текстовых элементов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 Arialwhite-space: normal|pre|nowrapwhite-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");

Оформление списковlist-style-type: none|circle|disc|square|decimal|lower-alpha|upper-alpha|lower-roman|upper-roman list-style-type:square;list-style-position: outside|insidelist-style-position:inside;list-style: list-style-type list-style-position list-style-imagelist-style:decimal inside;list-style-image: none|urllist-style-image:url(

Слайд 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);

Свойства цвета и фонаbackground-color: цвет|transparentbackground-color:#330033;color: цветcolor:red;background-position: top|bottom|center|left|right|величина|%background-position:top right;background-image: none|urlbackground-image:url(

Слайд 22Лабораторная работа
Использование стилей

Слайд 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;

Отступы снаружиmargin-top: auto|величина|%margin-right: auto|величина|%margin-bottom: auto|величина|%margin-left: auto|величина|%margin: margin-top margin-right margin-bottom margin-leftmargin: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;

Отступы изнутриpadding-top: величина|%padding-right: величина|%padding-bottom: величина|%padding-left: величина|%padding: padding-top padding-right padding-bottom padding-leftpadding: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;

Рамкиborder-width: величина|%|(thin|medium|thick)border-color: цветborder-style: none|dotted|dashed|solid|double|groove|ridge|inset|outsetborder-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-colorborder: 1px solid black;border-left: 3px solid black; Border-right: 1px dotted #ccc;

Слайд 27Лабораторная работа
Использование стилей

Слайд 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);

Визуальные свойстваvisibility: hidden|visible|inheritvisibility:hidden;display: none|block|inline|list-itemdisplay:block;overflow: auto|scroll|visible|hiddenoverflow: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;

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

Слайд 30Параметры слоя
top: auto|величина|%
top: 100px;

left: auto|величина|%
left: 100px;
position: static|absolute|relative
position: absolute;

left:50px">
Этот слой позиционирован абсолютно.

Этот слой позиционирован относительно.

Здесь

должен
быть слой

Фактическое
расположение
слоя

z-index: auto|величина|inherit
z-index:3;

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

Слайд 31Лабораторная работа
Использование стилей

Слайд 32Итоги
С помощью стилей мы имеем возможность отделить содержание HTML документа

от оформления
Таблицы стилей определяются в HTML документе методами связывания, встраивания

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

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

Скачать презентацию

Разделы презентаций

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

Содержание

Слайды и текст этой презентации

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

Слайд 2Каскадные таблицы стилей (CSS): Основные цели и задачи CSS. Способы

добавления стилей на WEB-страницу. Основные понятия и определения. Грамматика языка

Слайд 3Методы определения CSS — Cascading Style Sheets (каскадные таблицы стилей) — это

средство, позволяющее задавать различные визуальные свойства HTML-элементам. http://www.w3.org/TR/CSS21/cover.htmlМетоды определения таблицы

Слайд 4Встроенная информация о стиле (inline) style="color:red; background:#cccccc"Атрибут style определяет информацию

о стиле одного элемента Обычный текстК этому абзацу

Слайд 5Информация о стиле в заголовке: элемент STYLE - Метод вложения

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

Слайд 6Метод связывания (linking) - Внешние таблицы стилейp

{color:red; background:#cccccc}...style.cssindex.htmlsecond.html

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

стильp{color:red}div{color:red}

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

второго

Слайд 9Единицы измерения размеровem - ems, высота используемого элементом шрифтаex -

x-height, ширина буквы "х" испольуемого элементом шрифтаpx - pixels, пикселыin

Слайд 10Цвет и адреса URLназвание цвета (red, green, white...)#00cc00 - шестнадцатиричное

представление#0c0 - сокращенное шестнадцатиричное представлениеrgb(0,240,125) - в формате RGBrgb(0%,80%,25%) -

Слайд 11Селекторы типа элемента и классаdiv{color:red}div.green{color:green}.blue{color:blue}Обычный divDiv с классом green

class="green">Aбзац с классом greenАбзац с классом blueDiv с

H3 с классом blue

Слайд 12Другие селекторы#back{color:red}div#back{color:black}div b{color:green}td td td{color:blue}Div с id = backDiv

с контекстным селекторомТретий уровень вложенностиidконтекстные селекторыэлемент + id

Слайд 13И еще о селекторахСоседние селекторыb + i { color:red }Дочерние

селекторыdiv > p { color:red }Селектор атрибутаp[align] { color:red }p[align="right"]

Слайд 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{

Слайд 16Оформление текстовых элементовfont-family: семейства шрифта|тип шрифтаfont-family:Arial,Geneva,Helvetica,sans-serif;font-size: величина|%абсолютная величина: xx-small, x-small,

small, medium, large, x-large, xx-large.относительная величина:larger, smallerfont-size:10px;font-weight: normal|bold|bolder|lighter|число от 100

Слайд 17Оформление текстовых элементовfont-style: normal|italicfont-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.

10/12px Arialwhite-space: normal|pre|nowrapwhite-space:pre;

;background-attachment: fixed|scroll background-attachment:fixed;background: transparent background-color background-image background-repeat background-attachment background-position background:#ffffff no-repeat

Слайд 22Лабораторная работаИспользование стилей

Слайд 23Отступы и рамкиСодержимоеэлементаtopbottomleftrightmarginborderpadding

Слайд 24Отступы снаружиmargin-top: auto|величина|%margin-right: auto|величина|%margin-bottom: auto|величина|%margin-left: auto|величина|%margin: margin-top margin-right margin-bottom margin-leftmargin: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-leftpadding:10px

20px 20px 30px;padding:15px;

3px solid black; Border-right: 1px dotted #ccc;

Слайд 27Лабораторная работаИспользование стилей

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