Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Оформление текстовых элементов font-family: семейства шрифта|тип шрифта = sans-serif,serif,monospace font-family:Arial,Geneva,Helvetica,sans-serif; font-size: величина|% font-size:10px; абсолютная величина: xx-small, x-small, small, medium, large, x-large, xx-large. относительная величина:larger, smaller font-weight: normal|bold|bolder|lighter|число от 100 до 900 400 = normal, 700 = bold (Жирность) font-style:bold
Оформление текстовых элементов font-style: normal| (italic накланяет шрифт если он не прорисован) font-style:italic; font-variant: normal|small-caps (делаест строчные заглавными но размер останиться строчным) font-variant:small-caps; font: font-style font-variant font-weigth fontsize font-family Порядок важен. Можно все опустить, кроме font-size и font-family. font:bold 10px Arial !important; font:4em/3em calibri, "myriad pro", sans-serif;
Оформление текстовых элементов text-align: left|right|center|justify text-align:right; text-decoration: none|overline(|)underline(|)linethrough (подчеркнуть, надчеркнуть, зачеркнуть) text-decoration:underline; text-indent: величина|% (От куда начинаеться первая строчка, отступ) text-indent:10px; text-transform: none|capitalize|uppercase|lowercase (все с заглавными буквами, все заглавные буквы, все строчные буквы) text-transform:uppercase;
Оформление текстовых элементов letter-spacing: normal|величина (расстояние между симвалами) letter-spacing:10px; word-spacing: normal|величина (Расстояние между словамиу) word-spacing:10px; vertical-align: baseline(тоже что и 0)|sub|super|top|texttop|middle| bottom|text-bottom|%|величина (сдвигаем эемент вверх или вниз от базовой линии) vertical-align:top; white-space: normal|pre(не сокращаюстся пробелы и не переносяться на новую страку|nowrap(пробелы сокращаються но переносы по ним запрещены) (учитывает, не сокращает пробелы) white-space:pre; line-height: normal|величина|% (высота линии, увеличивает растояние сверху и снизу от шрифта) line-height:5%; font:bold 10/12px Arial
Оформление списков
list-style-type: (маркер)
none|
circle|
disc|
square|
decimal=Нумерация выполняется арабскими цифрами (1, 2, 3,...)|
lower-alpha=Нумерация выполняется строчными буквами (a, b, c,...)|
upper-alpha=Нумерация выполняется прописными буквами (A, B, C,...)|
lower-roman=Нумерация выполняется малыми римскими цифрами (i, ii, iii,...)|
upper-roman=Нумерация выполняется большими римскими цифрами (I, II, III,...)
list-style-type:square;
list-style-position: outside(за пределами пораграфа, выходит за текст)|inside (в пределах текста, пораграфа)
list-style-position:inside;
list-style-image: none|url (картинка вместо маркера)
list-style-image:url("ball.gif");
list-style: list-style-type list-style-position list-style-image
list-style:decimal inside;
Свойства цвета и фона
color: цвет
color:red;
background-color: цвет|transparent = прозрачный
background-color:#330033;
background-image: none|url
background-image:url("fon.gif")
background-position: top|bottom|center|left|right|величина|% (пазиционирование фоновой картинки)
background-position:top right;
background-size: величина|% (растянуть фоноваую картинку)
background-size:100% 100%;
-moz-background-size:100% 100%;
Свойства цвета и фона background-attachment: scroll|fixed (указание от чего считаються координаты) background-attachment:fixed; background-repeat: repeat|repeat-x|repeat-y|norepeat (пвторять, повторять по оси, не повтарять) background-repeat:repeat-x; background: transparent background-color background-image background-repeat background-attachment background-position background:#ffffff no-repeat url(fon.gif);
H1 — блочный элемент стал строчным
SPAN — строчный элемент стал блочнымПервый параграф стал списком
Второй параграф стал списком
Третий параграф стал списком
Значения по умолчанию
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
Отступы и рамки
Рамки 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 Отступы снаружи - от области ширины родительского контейнера Может быть отрицательным Для строчных элементов по вертикали игнорируеьться margin-top: auto|величина em,ex,px|% margin-right: auto|величина|% margin-bottom: auto|величина|% margin-left: auto|величина|% margin: margin-top margin-right margin-bottom margin-left margin:10px 20px 20px 30px; margin:10px 20px 20px (если нет то береться показания left) margin:10px 20px (если нет то береться показания top) (если нет то береться показания left) margin:10px (со всех сторон одинакого) Отступы изнутри - от области родительского контейнера нет отрицательных значений для строчных элементов - на другие контейнеры не отражаеться только видимый эффект padding-top: величина|% padding-right: величина|% padding-bottom: величина|% padding-left: величина|% padding: padding-top padding-right padding-bottom padding-left padding:10px 20px 20px 30px; padding:10px 20px 20px (если нет то береться показания left) padding:10px 20px (если нет то береться показания top) (если нет то береться показания left) padding:10px (со всех сторон одинакого)
Параметры блокаwidth: величина|% (Ширина - по умолчанию auto) width: 100px; height: величина|% (Высота - по умолчанию auto) height: 100px; float: none|left|right (Обтекание элемента. элемент становитьчся блочным, его размеры определяються размером его контента, margin-collaps игнорируеться, блочные элементы его игнарируют - строчные обтикают) float: left; clear: none|left|right|both (этот элемент должен учесть плавующие с ...) clear: both;
Визуальные свойства display: none|block|inline|list-item display:block; visibility: hidden|visible|inherit visibility:hidden; z-index: auto|величина|inherit z-index:3; overflow: auto-автамотический расчет если нужны полосы прокрутки и по каким осям| scroll-появиться полосы прокрутки даже если они не нужны (х,у)| visible-по умолчанию| hidden-спрятать все что вылезло (если контент выходит за области контейнера) overflow:auto; overflow-x:hidden; overflow-y:auto; clip: auto|rect(top right bottom left) clip:rect(10px 20px 30px 10px); list-style:none (не отабражать пункты у списков)
Параметры слояposition: static по умолчанию| absolute = элемент становиться блочным, его размеры определяються его контентом, маржин колабс не учавстует(не делиться отступами), не взаимадийствует с другими элементами(они его не видят)| relative = теперь элемент можно двигать, Строчные элементы бдут считать то элемент остался на месте position: absolute; Строчные элементы бдут считать то элемент остался на месте relative дает контейнер для absolute fixet = z-index:1; (0-по умолчанию, нахождение слаев по оси Z) top: auto|величина|% top: 100px; left: auto|величина|% left: 100px; Пример выплывющего меню
Начало вставка и продолжение текстаБоковое меню position:fixed;Этот слой позиционирован абсолютно.Этот слой позиционирован относительно.
Поиск элементов
id уникальны - class не уникальный
.news{1,2}
.last{2,3}
<,p class="news">1
<,div class="news last">2
<,p class="last">3
Поиск по атрибутам
[title]{0,1 2,1 3,14}
[title="1 2"]{1 2}
[title~="1"]{1 2,1 3}
[title*="1"]{1 2,1 3,14}
<,p title="0">0 /p>
<,p title="1 2">1 2 /p>
<,p title="1 3">1 3 /p>
<,p title="14">14 /p>
[href]{
padding-left:20px;
background-image:url(icon.png);
background-repeat:no-repeat;
margin-right:30px;
}
[href^="http"]{
background-position:0 -32px
}
[href$="pdf"]{
background-position:-32px 0
}
[href$="doc"]{
background-position:-16px -16px
}
"http://ya.ru/" - Внешняя ссылка
"/docs/1.pdf" - файл pdf
"/docs/2.doc" - файл doc
Псевдо класс - тогда когда поисходит какое то дествие, наведение мышки, клик и т.д.
:link{
}непосещенная ссылка
:visited{
}посещенные ссылки
p:hover{
}у всех параграфов при наведении мыши
p:active{
}у всех рараграфов при клике
:focus{
}там где элемент тап индекс ставиться, выделение с помощью табуляции
p:first-child{
}Первый дочерний контейнер, первый дочерний параграф,/ первый ребенок своего родителя
p:first-line{
}первая строчка в параграфах
p:first-letter{
}Первая буква в параграфах
Click
/*Контекстный селектор - предки-потомки*/
div strong{
11,21,3
}
/*Дочерний селектор - родитель-ребенок*/
div > strong{
3
}
/*Смежный селектор - ближайший смежный элемент сверху в коде*/
h1 + *{
11,21
}к любому элементу за h1
/*Смежный селектор - любой смежный элемент сверху в коде*/
h1 ~ *{
11,12,21,22,3
Все кто в контейнере после h1
<*body*>
<*div*>
<*h1*>0<*/*h1*>
<*p*><*strong*>11<*/*strong*>12<*/*p*>
<*p*><*strong*>21<*/*strong*>22<*/*p*>
<*strong*>3<*/*strong*>
<*/*div*>
<*p*><*strong*>41<*/*strong*>42<*/*p*>
<*/*body*>
Приорететы 0 I II III !important style #id .class tags :pseudo-class ::pseudo-elements [attributes]
@import url(test.css) Загрузка внешнего фаила CSS Указываеться в фаиле .css
| Вид | Значение | Пример — навести курсор на ячейку | Браузер |
| auto | Браузер самостоятельно определяет вид курсора | Все | |
 |
default | style="cursor: default;" | Все |
 |
pointer | style="cursor: pointer;" | Все |
 |
crosshair | style="cursor: crosshair;" | Все |
 |
text | style="cursor: text;" | Все |
 |
wait | style="cursor: wait;" | Все |
 |
help | style="cursor: help;" | Все |
| inherit | Значение наследуется от родительского элемента | Все | |
 |
move | style="cursor: move;" | Все |
 |
e-resize | style="cursor: e-resize;" | Все |
 |
ne-resize | style="cursor: ne-resize;" | Все |
 |
nw-resize | style="cursor: nw-resize;" | Все |
 |
n-resize | style="cursor: n-resize;" | Все |
 |
se-resize | style="cursor: se-resize;" | Все |
 |
sw-resize | style="cursor: sw-resize;" | Все |
 |
s-resize | style="cursor: s-resize;" | Все |
 |
w-resize | style="cursor: w-resize;" | Все |
 |
progress | style="cursor: progress;" | Все |
 |
col-resize | style="cursor: col-resize;" | IE, Moz, Webkit |
 |
not-allowed | style="cursor: not-allowed;" | IE, Moz, Webkit |
 |
row-resize | style="cursor: row-resize;" | IE, Moz, Webkit |
 |
vertical-text | style="cursor: vertical-text;" | IE, Moz, Webkit |
 |
url(uri) | style="cursor: url(mycursor.cur), cursor_type;" | IE, Moz Webkit — ошибка с точкой привязки Opera — применит стандартное значение |
 |
all-scroll | style="cursor: all-scroll;" | IE Moz, Webkit — аналогичен «move» |
 |
no-drop | style="cursor: no-drop;" | IE Moz, Webkit — аналогичен «not-allowed» |