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

дочерних элементов: body > p
Селекторы сестринских документов h1 + h2 { margin-top: -5mm }
универсальный селектор

© НГУЭУ 2013-2014

Введение в Вэб

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

© НГУЭУ 2013-2014

Введение в Вэб

- :link и :visited: a:link {} a:visited {}
Динамические псевдоклассы: :hover, :active и :focus : h1:hover {} h2:active {} input:focus {}

© НГУЭУ 2013-2014

Введение в Вэб

первой буквы - :first-letter : h2 + p:first-letter {text-size: 400%} Псевдоэлементы префикса и постфикса :befor и :after в сочетании со свойством content : p.note:befor {content: “Примечание”} p.note {color: red}

© НГУЭУ 2013-2014

Введение в Вэб

ко всем элементам, наследуется

© НГУЭУ 2013-2014

Введение в Вэб

| 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'> || <'background-position'>] | inherit
применимы ко всем элементам, не наследуются

© НГУЭУ 2013-2014

Введение в Вэб

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

Введение в Вэб

| inherit
- имя гарнитуры шрифта
- имя семейства шрифтов: 'serif' (например, Times), 'sans-serif' (например, Arial), 'cursive' (например, Comic Sans MS), 'fantasy' (например, Western), 'monospace' (например, Courier)
font-style: normal | small-caps | inherit
font-variant: repeat | repeat-x | repeat-y | no-repeat | inherit
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

© НГУЭУ 2013-2014

Введение в Вэб

<проценты> | 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

Введение в Вэб

| square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style: [ || || ] | inherit
применимы к элементам li, наследуются

© НГУЭУ 2013-2014

Введение в Вэб

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

© НГУЭУ 2013-2014

Введение в Вэб

= thin | medium | thick |<длина>
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-left-style: <стиль границы> | inherit
<стиль границы> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style: <стиль границы>{1-4} | inherit

© НГУЭУ 2013-2014

Введение в Вэб

границы> || <цвет> ] | inherit
border: [ <ширина границы> || <стиль границы> || <'border-top-color'> ] | inherit
Применимы ко всем элементам, не наследуются

© НГУЭУ 2013-2014

Введение в Вэб