Что такое правила в каскадных таблицах стилей?
Мы знаем все версии каскадных таблиц стилей, мы знаем все DOCTYPE для css, мы знаем как использовать стили, но не знаем что использовать, т.е. мы не знаем самих правил, за исключением синтаксиса InLine-стилей.
Чтобы дальше не останавливаться я не буду в своих примерах показывать полный шаблон:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
BODY { font-size:12pt; color: blue }
BODY { font-family:'Times New Roman', verdana, sans-serif; }
</STYLE>
</head>
<body>
А только буду показывать сами правила:
BODY { font-size:12pt; color: blue }
Но вы должны понимать что их нужно помещать в тег-контейнер STYLE или в файл style.css .
Из чего оно состоит правило для CSS?
Правило для каскадных таблиц стилей состоит из двух основных составляющих:
селектор { объявление }
Селектор - это буквенная часть, т.е. имя тега к которому применяется стиль, например BODY, B, H1, A, IMG и так далее, имя селектора пишется в верхнем регистре(большими буквами).
объявление это свойство правил, которое помещается в фигурные скобки. Объявления в свою очередь составляются так-же из двух частей {свойство:значение}, между свойством и значением ставится двоеточие, оно выполняет роль символа равно(=), в html color="red", а css color:red.
Хочу уточнить, что в в тег STYLE можно устанавливать правила сразу для многих тегов:
<STYLE type="text/css">
BODY { font-size:10pt; color: blue }
B { font-size:12pt; color: #008800 }
B { font-family: Tahoma, sans-serif; }
BODY { font-family:'Times New Roman', verdana, sans-serif; }
H1 { text-align:center }
</STYLE>
Каждое правило не обязательно писать с новой строки, можно и так:
<STYLE type="text/css">
BODY{ font-size:10pt } B{ font-size:12pt; color: #008800 }
</STYLE>
Но такой код сложно потом редактировать, лучше каждое правило с новой строки.
Теперь просмотрим правила в каскадных таблицах стилей для одного тега:
1)Это метод в котором для каждого свойства свое правило
<STYLE type="text/css">
BODY { font-size:10pt }
BODY { color: #008800 }
BODY { font-family: Tahoma, sans-serif }
BODY { background-color:#cacaca }
</STYLE>
2)Этот метод в котором правило принимает два или больше свойств, разделенных между собой точкой с запятой:
<STYLE type="text/css">
BODY { font-size:10pt; color: #008800; background-color:#ffffff }
</STYLE>
3) Как и предыдущий за исключением что каждое свойство с новой строки:
<STYLE type="text/css">
BODY {
font-size:10pt;
color: #008800;
background-color:#ffffff;
}
</STYLE>
Все эти три способа правильны, какой из них использовать решать вам.