Каскадные таблицы стилей (CSS) – язык описания внешнего вида веб-документа. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS).
Чтобы статья не была утомительной, пробегусь тезисами по основным моментам. Итак, стиль страницы можно подгружать как из отдельного файла с помощью тега link
<link type='text/css' rel='stylesheet' <b>href='URL.css'</b> />
так и с помощью тега style (для Blogger – в шаблоне <b:skin>)
<style type='text/css'> ... ... ... </style>
или атрибута style, которым не рекомендуется злоупотреблять, поскольку это усложняет поиск нужного фрагмента для корректировки и ведёт к повышению времени загрузки страницы в браузере, то есть стили желательно прописывать до </head>
<div style=" ... ... ... "> контент </div>
Стили выполняются в том же порядке, в котором читаются: сверху вниз, слева направо. Например,
<html>
<head>
<title>Как использовать css</title>
<style type="text/css">
div {
color: green;
color: red; /* если бы не был указан атрибут style, то цвет текста был бы красным, а не зелёным */
}
</style>
</head>
<body>
<div style="color: blue;">синиц цвет текста</div>
</body>
</html>
<style type="text/css">
#demoID { color: red; }
.demoCLASE { color: green; }
</style>
<div id="demoID" class="demoCLASE"> содержимое </div>
Приоритет отдаётся более узкой записи
<style type="text/css">
#demoID.demoCLASE { color: red; }
#demoID { color: green; }
</style>
<div id="demoID" class="demoCLASE"> содержимое </div>
id в отличии от class нельзя использовать два раза
Не правильно
<style type="text/css">
#demoID { color: red; }
</style>
<div id="demoID"> содержимое </div>
<div id="demoID"> содержимое </div>
Правильно
<style type="text/css">
#demoIDRAZ { color: red; }
#demoIDDVA { color: red; }
</style>
<div id="demoIDRAZ"> содержимое </div>
<div id="demoIDDVA"> содержимое </div>
Оптимально. Объединяем два элемента через запятую, поскольку они имеют одинаковые стили.
<style type="text/css">
#demoIDRAZ, #demoIDDVA { color: red; }
</style>
<div id="demoIDRAZ"> содержимое </div>
<div id="demoIDDVA"> содержимое </div>
Может быть и так
<style type="text/css">
#demoIDRAZ, .demoDVA { color: red; }
</style>
<div id="demoIDRAZ"> содержимое </div>
<div class="demoDVA"> содержимое </div>
И совсем другой результат при отсутствии запятой
<style type="text/css">
#demoIDRAZ .demoDVA { color: red; }
</style>
<div id="demoIDRAZ"> содержимое </div>
<div class="demoDVA"> содержимое </div>
<div id="demoIDRAZ"><div class="demoDVA"> содержимое </div></div>
<div class="demoDVA"><div id="demoIDRAZ"> содержимое </div></div>
Контекстные селекторы (второй пример)
div { color: red; }
div p { color: red; }
<div> содержимое </div> <div> содержимое <p> содержимое </p> </div>
Есть ли различия между этими двумя вариантами?
.demo { color: red; }
p.demo { color: red; }
<div class="demo"> содержимое </div> <p class="demo"> содержимое </p>
<div class="demo"> содержимое </div> <p class="demo"> содержимое </p>
Каковы различия между
.demo p { color: red; }
p.demo { color: red; }
<div class="demo"> <p> красная палитра </p> <span> любого другого цвета </span> <p> красная палитра </p> </div>
Аналогично с псевдоклассом :hover (изменения производятся при наведении мышки).
<style type="text/css">
.demo { color: red; }
.demo:hover { color: blue; }
</style>
<span class="demo"><div class="demo">
<p> Образец как использовать CSS <span>текст в span</span> и далее. </p>
</div></span>
<style type="text/css">
.demo { color: red; }
.demo:hover span { color: blue; }
</style>
Между ними нет различия.
<style type="text/css">
.demo { background: red; }
.raz { color: yellow; }
.dva { color: white; }
</style>
<div class="demo raz"><span class="demo2 raz">содержимое</span></div>
<div class="demo dva"><span class="demo2 dva">содержимое</span></div>
<style type="text/css">
.raz { color: yellow; background: red; }
.dva { color: white; background: red; }
</style>
<div class="raz"><span class="raz1">содержимое</span></div>
<div class="dva"><span class="dva1">содержимое</span></div>
Стили применяются только для тега с определённым атрибутом.
<style type="text/css">
p[align="center"] { color: red; }
</style>
<p> содержимое </p>
<p align="center"> содержимое </p>
Если свойство состоит из нескольких параметров, то разделять их должны пробелы.
div {
background: #AAA url() no-repeat left top;
}
Вот этот вариант не будет функционировать в IE, поскольку нет пробела между url()no-repeat:
div {
background: #AAA url()no-repeat left top;
}
Все свойства заканчиваются точкой с запятой (;).
a {
color: #AAA;
outline: none;
text-decoration: underline;
}
Комментарии в CSS выглядят иначе, нежели в HTML.
<style> /* это комментарий */ </style>
В тег <style> нельзя включать другие теги.
<b:skin><![CDATA[ ....... <style type="text/css"> ... ... ... </style> ....... ]]></b:skin>