01-lect_html
.pdfселектор, селектор { свойство: значение; свойство: значение; свойство: значение;
}
http://ru.wikipedia.org/wiki/Каскадные_таблицы_стилей
Пример таблицы стилей:
p {
font-family: "Garamond", serif;
}
h2, h3 { font-size: 110 %; color: red;
background: white;
}
.note { color: red;
background: yellow; font-weight: bold;
}
p#paragraph1 { margin: 0;
}
a:hover { text-decoration: none;
}
#news p { color: blue;
}
http://ru.wikipedia.org/wiki/Каскадные_таблицы_стилей
Значение по умолчанию
Наследование
Приоритеты стилей:
Р { color: green; background: yellow }
P { color: green } P { background: yellow }
P { color: green } P { color: red }
Включение в HTML
CSS можно включать в HTML тремя способами:
1.1. Внешние таблицы стилей. Ссылка в HTML, а сами CSS в отдельном файле:
<link rel="stylesheet" type="text/css" href="style.css" />
1.2. Еще один способ подключить CSS, находящиеся в отдельном файле:
<style type="text/css" media="all">@import "style.css";</style>
2.Внутренние таблицы стилей. Непосредственно в HTML-документе: <style type="text/css">
body { color: red;
}
</style>
3.Встроенные стили. Непосредственно в элемент:
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
http://ru.wikipedia.org/wiki/Каскадные_таблицы_стилей
Типы носителей
Описание:
@media тип_носителя { описание стиля }
Пример:
@media screen { h1.Dark {color:Blue;} } @media print { h1.Dark {color:Black;} }
Импорт:
@import url("fancyfonts.css") screen;
Список стилей: all
braille embossed handheld print projection screen speech tty
tv
http://www.w3.org/TR/CSS2/media.html
Селектор класса (class)
<style type="text/css"> h1.Light {color:red} h1.Dark {color:gray}
.Gray {color:gray} </style>
<h1> h1 </h1>
<h1 class="Dark"> h1 </h1> <h1 class="Light"> h1 </h1>
<h2 class="Gray">Gray</h2> <p class="Gray">Gray</p>
Селектор идентификатора (id)
<style type="text/css"> #Blue{color:blue} p#Cyan{color:cyan}
</style>
<h1 id="Cyan">Cyan</h1> <!-- не применится--> <p id="Cyan">Cyan</p>
<p id="Blue">Blue</p>
Комментарии CSS
/* Комментарии */
Контекстный селектор
<style type="text/css">
P B {color:green;}
.menu A {color:green;} </style>
Соседние селекторы
<style type="text/css">
B + I {color:red;}
</style>