CSS: правильное использование - залог успеха
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
?абл. 5.1, но чтобы окончательно вас убедить, я приведу еще один несложный пример. Пусть нам надо создать блок rule, который имеет черную рамку толщиной один пиксел и внутренние отступы величиной 10 пикселов. Ширина блока будет 300 пикселов, а текст в нем будет выводиться полужирным шрифтом Verdana размером 12 пикселов. Если не пользоваться сокращенными формами записи вообще, то код будет такой:
#rule {
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 12px;
width: 300px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px}
Воспользуемся сокращенными формами записи, и правило для блока у нас получится такое:
#rule {
font: bold 12 px Verdana, sans-serif;
width: 300px;
border: 1px solid #000;
padding: 10px}
Первое правило занимало 290 байт, а второе всего 96. Вес уменьшился в три раза, т. е. оптимизация достигла 300%! Конечно, этот пример показывает что будет, если не использовать сокращений вообще, но тем не менее он совершенно реальный и вам частенько придется создавать очень похожие блоки, так что примите к сведению эти 300%.
Группировка
Для оптимизации таблиц стилей надо с умом применять группировку. Как вы уже знаете, группировка - это объединение селекторов с одинаковыми объявлениями. Однако из этого определения не вытекает достаточно неочевидное утверждение, что группировать селекторы можно только в том случае, если они содержат совершенно одинаковые объявления. Например, у нас есть такая таблица стилей:
P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
text-indent: 2em}
BODY {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
Ее можно оптимизировать так:
P, TD, BODY {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
text-indent: 2em}
Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе , то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.
Правило
Все объявления для одного и того же элемента должны находится в одном месте
Это означает, что в нашем примере мы можем объединить только селекторы на элементы надо свести в один, как того требует правило:
BODY, TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif;
text-indent: 2em}
Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент . Тогда придется разбить группу, и таблица стилей будет выглядеть так:
BODY {
color: #000;
background-color: #CCC;
font: 14px Tahoma, Verdana, sans-serif}
TD {
color: #000;
font: 14px Tahoma, Verdana, sans-serif}
P {
color: #000;
font: 14px Tahoma, Verdana, sans-serif;
text-indent: 2em}
Строчные и прописные
Что касается манеры записи селекторов, то селекторы элементов я рекомендую писать заглавными буквами, тогда как все остальные - строчными. На самом деле это не играет большой роли, потому что CSS регистронезависимый язык, т. е. разницы между прописными и строчными буквами нет, поэтому все решает привычка. Объявления я тоже рекомендую писать строчными буквами, хотя это опять же дело привычки.
Вот практически все основные правила написания компактных и корректных таблиц стилей. Давайте сейчас оптимизируем отдельно взятую таблицу стилей, чтобы окончательно на практике закрепить полученные знания.
Оптимизация на практике
Исходная таблица у нас страшно неорганизованная и запутанная:
A:link {font-weight: bold; COLOR: black}
A:visited {font-weight: bold; COLOR: #555555}
A:active {font-weight: bold; COLOR: #FF0000}
A:hover {font-weight: bold; COLOR: #FF0000}
#lnk A:link {color: #666666}
#lnk A:visited {color: #666666}
#lnk A:active {color: #ff9900}
#lnk a:hover {color: #ff9900}
BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} .imgnews {margin-right: 12px}
CODE {color: #00C; font-family: courier new}
em {font-weight: bold; font-style: normal; color: black}
.norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
input {border: 1px solid black; margin: 1px 2px}
TEXTAREA {border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px}
.EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
Разобраться в ней непросто. Как видите, здесь нарушены все правила, описанные в этой главе. Начнем все исправлять и упорядочивать. Прежде всего разобьем таблицу стилей на три блока по селекторам: элементы, классы, ID, а в каждом блоке расположим селекторы в алфавитном порядке. Цифры обозначают порядковый номер строки и к самой таблице стилей не относятся. Получится так:
1. A:link {font-weight: bold; COLOR: black}
2. A:visited {font-weight: bold; COLOR: #555555}
3. A:active {font-weight: bold; COLOR: #FF0000}
4. A:hover {font-weight: bold; COLOR: #FF0000}
5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}
8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}
11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
14. #lnk A:link {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnk a:hover {color: #ff9900}
Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:
перенесем в начало об?/p>