CSS: правильное использование - залог успеха

При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими

CSS: правильное использование - залог успеха

Информация

Компьютеры, программирование

Другие материалы по предмету

Компьютеры, программирование

Сдать работу со 100% гаранией
ать явно? Конечно, возможны случаи, когда надо переписать установленный ранее стиль. Например, вы хотите, чтобы все элементы <H1> были подчеркнутыми и пишите стиль:

H1 {

text-decoration: underline;}

Но вдруг вам понадобилось, чтобы некоторые из заголовков первого уровня выводились неподчеркнутыми. Для этого вам придется ввести какой-нибудь дополнительный класс. Например, такой:

H1.nounderline {

text-decoration: none}

То есть вы первым правилом переписали значение по умолчанию для элементов <H1>, поэтому потом пришлось явным образом восстанавливать это значение для заголовков с классом nounderline. В этом случае другого выхода нет, но вообще если вам нет необходимости изменять стили элементов, то и не надо прописывать значения по умолчанию явным образом.

Правило

Не указывайте в таблице стилей значений, которые являются для данного элемента значениями по умолчанию.

Сокращенные формы записи

Второй способ сократить объем таблицы стилей - использование сокращенных форм записи некоторых свойств. В таблице они систематизированы.

Сокращенная формаВходящие свойстваfont: italic small-caps 12px/140% Tahoma, sans-serif font-style: italic

font-variant: small-caps

font-weight: normal

font-size: 12px

line-height: 140%

font-family: Tahoma, sans-serifmargin: 1em 2em 0 1em margin-top: 1em

margin-right: 2em

margin-bottom: 0em

margin-left: 1empadding: 10px 20pxpadding-top: 10px

padding-right: 20px

padding-bottom: 10px

padding-left: 20pxborder: 1px solid #000

border-top: 1px solid #000

border-right: 1px solid #000

border-bottom: 1px solid #000

border-left: 1px solid #000border-width: 1px

border-style: solid

border-color: #000background: url("backgr.gif") #FFF repeat-xbackground-color: #FFF

background-image: url("backgr.gif")

background-repeat: repeat-x

background-attachment: scroll

background-position: 0px 0pxИспользование сокращенных форм записи является делом весьма полезным и нужным, потому что объем таблицы стилей при этом значительно уменьшается. Это видно уже из сравнения правого и левого столбцов табл. 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}

Получилось очень компактно, но зато логика таблицы стилей сильно пострадала. Если вам понадобится изменить какое-либо объявление в элементе <P>, то в большой таблице вы его можете искать очень долго, потому что селекторы на этот элемент будут располагаться в разных местах. Запомните правило.

Правило

Все объявления для одного и того же элемента должны находится в одном месте

Это означает, что в нашем примере мы можем объединить только селекторы на элементы <BODY> и <TD>, а селекторы на элемент <P> надо свести в один, как того требует правило:

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>. Тогда придется разбить группу, и таблица стилей будет выглядеть так:

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. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:

перенесем в начало объявления цвета;

свойство COLOR запишем строчными буквами;

вместо обозначения черного цвета словом black запишем #000;

остальные значения сократим так: #555555 поменяем на #555, #FF0000 поменяем на #F00.

Получится вот что:

1. A:link {

color: #000;

font-weight: bold}

2. A:visited {

color: #555;

font-weight: bold}

3. A:active {

Похожие работы

< 1 2 3 >