ilia makarov
CSS
Подключение
<link rel="stylesheet" href="style.css">
<head>
<style>
...
</style>
</head>
<p style="color: #0000ff; background-color: #8a2be2"></p>
Синтаксис
.selector { ... } - класс
#id { ... } - идентификатор
/* comments */ - комментарии
Правила формирования селекторов
<ol class="dico">
<li>Un cobaye</li>
<li>Des cobaux</li>
</ol>
Еще несколько примеров
| Селектор | Значение |
|---|---|
h1 |
ищем элементы по имени тега |
div.containe |
ищем <div> c классом container |
.news |
выбираем элементы по имени класса class=”news” |
div.news |
все элементы <div> c классом «news» |
.wrap .post |
ищем все элементы с классом «post» внутри элемента с классом «wrap» |
.cls1.cls2 |
выбираем элементы с двумя классами «class=”cls1 cls2”» |
h1,h2,.posts |
Перечисление селекторов, выберем всё перечисленное |
li |
Каждый <li> |
ol li |
Каждый <li> внутри родителя <ol> |
.dico li |
Каждый <li> внутри родителя с class="dico" |
Наследование в CSS
p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 { color: grey;}
or
body { color: grey; }
Цвет
HEX (шестнадцатеричные значения)
p { color: #ff0000 }
Цветовую модель RGB
p { color: rgb(0, 255, 0) }
Единицы измерения
Наиболее часто используемые единицы:
px- для пикселей;%- для процентов;
Свойства для работы с текстом
font-size: 16pxfont-style: normal, italicfont-weight: normal, boldtext-align: left, right, center, justifytext-decoration: overline, underline, line-through, nonetext-transform: none, uppercase, lowercase, capitalizecolor: #eeeeee
Для стилизации блоков
background-color: #555555-
background-image: url("paper.gif") border-style: solid, dotted, dashed, double, ...border-width: 2pxborder-color: #777777border: 1px solid #ff0000;border-radius: 10px
Отступы (внешние отступы)
margin-top: 10pxmargin-right: 5pxmargin-bottom: 5pxmargin-left: 10pxmargin: 10px
Поля (внутренние отступы)
padding-top: 5pxpadding-right: 5pxpadding-bottom: 5pxpadding-left: 5px-
padding: 5px height: 100px- высота блокаwidth: 100%- ширина блока
Стилизация списков
list-style-type: none, disc, circle, square- для маркированногоlist-style-type: none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman- для нумерованногоlist-style-image: url('sqpurple.gif')list-style-position: inside, outside
Таблицы
border-collapse: collapse, separatevertical-align: top, middle, bottom
Блочная модель
