01-lect_html
.pdfДочерние селекторы
<style type="text/css">
B > I {color:red;}
</style>
Селектор атрибута
[атрибут] { стиль } Селектор[атрибут] { стиль }
Атрибут со значением
[атрибут=значение] { стиль } Селектор[атрибут=значение] { стиль }
Значение атрибута заканчивается определенным текстом
A[href$=”.ru”] {…}
A[href$=”.com”] {...}
A[href$=”.org”] {...}
Значение атрибута содержит определенный текст
A[href*=”mysite”] {…}
Универсальный селектор
* {...}
Псевдоклассы
E:link
E:visited
E:active
E:hover
E:focus
E:lang(c)
E:first-child
http://www.w3.org/TR/CSS2/selector.html
Псевдоэлементы
:first-line :first-letter :before :after
Пример:
p:first-line { text-transform: uppercase } p:first-letter { font-size: 3em; font-weight: normal }
http://www.w3.org/TR/CSS2/selector.html
Fonts
'font-family' Value: [[ <family-name> | <generic-family> ] [, <family-name>| <genericfamily>]
body { font-family: Gill, Helvetica, sans-serif }
<family-name>
<generic-family>: 'serif' (e.g., Times); 'sans-serif' (e.g., Helvetica); 'cursive' (e.g., ZapfChancery); 'fantasy' (e.g., Western); 'monospace' (e.g., Courier);
'font-style' Value: normal | italic | oblique | inherit
h1, h2, h3 { font-style: italic }
'font-variant' Value: normal | small-caps | inherit
h3 { font-variant: small-caps }
'font-weight' Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
p { font-weight: normal } |
/* 400 */ |
h1 { font-weight: 700 } |
/* bold */ |
http://www.w3.org/TR/CSS2/fonts.html
Fonts
'font-size' Value: |
<absolute-size> | <relative-size> | <length> | <percentage> | inherit |
1=xx-small, x-small, 2=small, 3=medium, 4=large, 5=x-large, 6=xx-large, 7
p { font-size: 16px; }
@media print { p { font-size: 12pt; } } blockquote { font-size: larger }
em { font-size: 150% } em { font-size: 1.5em }
'font' Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'lineheight'> ]? <'font-family'> ] | caption | icon | menu | message-box |
p { font: 12px/14px sans-serif } p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif } p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
button p { font: 600 9px Charcoal }
http://www.w3.org/TR/CSS2/fonts.html
button p {
font-family: Charcoal; font-style: normal; font-variant: normal; font-weight: 600; font-size: 9px; line-height: normal;
}
Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' h1 { margin-top: 2em }
Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
blockquote { padding-top: 0.3em }
Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left- width', and 'border-width'
h1 { border-width: thin thick medium }
Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left- color', and 'border-color'
p { color: black; border: solid; }
Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset #new { border-style: solid dotted }
Border shorthand properties: 'border-top', 'border-right', 'border-bottom', 'border-left', and 'border'
h1 { border-bottom: thick solid red }
'border' Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
http://www.w3.org/TR/CSS2/box.html
Изображения
IMG - вставка изображения. Этот тег не закрывается.
SRC - имя или URL
ALT - альтернативное имя (отобразится, если в браузере запретить отображать картинки)
TITLE - краткое описание изображения (отобразится при наведении курсора на картинку)
WIDTH, HEIGHT - размеры (если не совпадают с истинными размерами картинки, то изображение "растянется"/"сожмется") ALIGN - задает параметры обтекания текстом (top, middle, bottom, left, right)
VSPACE, HSPACE - задают размеры вертикального и горизонтального пространства вокруг изображения
Пример:
<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой: <A HREF=url ><IMG SRC=url></A>
http://ru.wikipedia.org/wiki/Элементы_HTML