Каскадные таблицы стилей. Обзор типов селекторов и свойств элементов

1. Каскадные таблицы стилей: обзор типов селекторов и свойств элементов

Краткий обзор

2. Селекторы

селектор типа
универсальный селектор
группировка селекторов
селекторы потомков: div p, div * p
Селекторы дочерних элементов: body > p
Селекторы сестринских документов
h1 + h2 { margin-top: -5mm }
универсальный селектор
© НГУЭУ 2013-2014
Введение в Вэб
2

3. Селекторы атрибутов

Селектор элементов для которых установлено значение атрибута –
[att] :
img [usemap] {…}
Селектор элементов для которых установлено определенное
значение атрибута - [att=val]:
ol [start=1]
Атрибут HTML class и селекторы классов - .classname
p.note
*.footer
Атрибут HTML id и ID cелекторы - #:
*#main1
© НГУЭУ 2013-2014
Введение в Вэб
3

4. Псевдоклассы

Псевдокласс выбора первого дочернего – :first-child :
div > p:first-child {…}
Псевдоклассы ссылок - :link и :visited:
a:link {}
a:visited {}
Динамические псевдоклассы: :hover, :active и :focus :
h1:hover {}
h2:active {}
input:focus {}
© НГУЭУ 2013-2014
Введение в Вэб
4

5. Псевдоэлементы

Псевдоэлемент первой строки – :first-line :
p:first-line { text-transform: uppercase }
Псевдоэлемент выбора первой буквы - :first-letter :
h2 + p:first-letter {text-size: 400%}
Псевдоэлементы префикса и постфикса :befor и :after в сочетании со
свойством content :
p.note:befor {content: “Примечание”}
p.note {color: red}
© НГУЭУ 2013-2014
Введение в Вэб
5

6. Свойства цвета переднего фона блока (текста)

7. Свойства фона

background-color: <цвет> | transparent | inherit
background-image: url("<url>") | none | inherit
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
background-attachment: scroll | fixed | inherit
background-position: [ [ <проценты> | <длина> | left | center | right ]
[ <проценты> | <длина> | top | center | bottom ]] | inherit
background: [<'background-color'> || <'background-image'> ||
<'background-repeat'> || <'background-attachment'> || <'backgroundposition'>] | inherit
применимы ко всем элементам, не наследуются
© НГУЭУ 2013-2014
Введение в Вэб
7

8. Свойства текста

text-indent: <длина> | <проценты> | inherit (абзацный отступ)
text-align: left | right | center | justify | inherit
text-decoration: none | [ underline || overline|| line-through || blink ] | inherit
text-transform: capitalize | uppercase | lowercase | none | inherit
letter-spacing: normal | <длина> | inherit
word-spacing: normal | <длина> | inherit
white-space: normal | pre | nowrap | inherit
clear:
применимы ко всем элементам, наследование (кроме
декорирования)
© НГУЭУ 2013-2014
Введение в Вэб
8

9. Свойства шрифтов

10. Свойства шрифтов +

font-size: <абсолютный размер> | <относительный размер> | <длина> |
<проценты> | inherit
<абсолютный размер> = xx-small | x-small | small | medium | large | x-large | xx-large
<относительный размер> = larger | smaller
line-height: normal | <число> | <длина> | <проценты> | inherit
font: [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [
/ <'line-height'> ]? <'font-family'> | inherit
применимы ко всем элементам, наследуются
© НГУЭУ 2013-2014
Введение в Вэб
10

11. Свойства списков

list-style-image: <url> | none | inherit
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lowerroman | upper-roman | lower-greek | lower-latin | upper-latin | armenian |
georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style: [ <list-style-type> || <list-style-position> || <list-style-image> ] | inherit
применимы к элементам li, наследуются
© НГУЭУ 2013-2014
Введение в Вэб
11

12. Структура блока

13. Свойства полей и отступов

margin-top, margin-right, margin-bottom, margin-left:
<ширина поля> | inherit
margin: <ширина поля> {1-4} | inherit
padding-top , padding-right , padding-bottom, padding-left : <ширина
отступа> | inherit
<ширина поля> = <длинна> | <проценты> | auto
<ширина отступа> = <длинна> | <проценты>
padding: <ширина отступа> {1-4} | inherit
применимы не ко всем элементам (в частности внимательно к
табличным тегам!), не наследуются
© НГУЭУ 2013-2014
Введение в Вэб
13

14. Свойства границ

border-top-width, border-right-width, border-bottom-width, border-left-width:
<ширина границы> | inherit
border-width: <ширина границы>{1-4} | inherit
border-top-color, border-right-color, border-bottom-color, border-left-color:
<цвет> | transparent | inherit
border-color: [ <цвет> | transparent ]{1-4} | inherit
border-top-style, border-right-style, border-bottom-style, border-leftstyle: <стиль границы> | inherit
<ширина границы> = thin | medium | thick |<длина>
<стиль границы> = none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset
border-style: <стиль границы>{1-4} | inherit
© НГУЭУ 2013-2014
Введение в Вэб
14

15. Свойства границ +

border-top, border-right, border-bottom, border-left:
[ <ширина границы> || <стиль границы> || <цвет> ] | inherit
border: [ <ширина границы> || <стиль границы> || <'border-topcolor'> ] | inherit
Применимы ко всем элементам, не наследуются
© НГУЭУ 2013-2014
Введение в Вэб
15

16. Дополнительная литература

http://www.w3c.org/
http://www.freeartists.ru/category/web-standards/
HTML 4.01
CSS 2.1
© НГУЭУ 2013-2014
Введение в Вэб
16

English Русский Rules