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

Михаил Дубаков

Начинаем свой путь к мастерству. Он будет достаточно долгим и непростым, но вы справитесь, если у вас есть цель. По крайней мере, к этому моменту вы уже обладаете определенным багажом знаний, достаточным для применения на практике. Однако использовать CSS можно по-разному. Цель данной главы - научить вас применять CSS правильно. Поверьте, это не так просто, как кажется на первый взгляд. Ведь можно просто особо не задумываясь написать таблицу стилей с множеством классов и ненужных объявлений, которая будет корректно работать. Но такая таблица стилей будет неоптимальной и неудобной. Неоптимальной потому, что ее можно значительно сократить и уменьшить объем, что немаловажно. Неудобной потому, что разбираться в неупорядоченном нагромождении классов достаточно сложно. Вообще жестких правил при написании таблицы стилей нет, потому что написать стиль можно по-разному и это будет работать, однако есть множество рекомендаций. Кроме того, можно все же выделить одно главное правило, которое всегда надо применять при использовании CSS.

Правило

Прежде чем написать какой-нибудь стиль или ввести новый класс, задумайтесь, нельзя ли оптимизировать и упорядочить код другим способом. Сделать так, чтобы не вводить этот класс или ввести максимально широко. Логика - незаменимый помощник любого профессионального веб-мастера. Запомните это.

Итак, переходим непосредственно к рассмотрению способов, благодаря которым вы существенно облегчите код и собственную жизнь.

Форматирование таблиц стилей

Главное требование - в таблице стилей должен быть порядок. Возьмем пример из предыдущей главы. Вот эта таблица:

P {color: #000; font: x-small Verdana}

BODY {background: #FFF}

#mainmenu A {color: #000; font: bold small Arial}

H3 {color: #000; font-family: Arial}

.back {background: url(img/fragment_3.gif) no-repeat;}

#submenu A {color: #FFF; font: bold xx-small Arial}

.bluecol {background: #1d3d4e}

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

Учтите, что данная таблица очень маленькая, а в большой неупорядоченной таблице разобраться будет еще сложнее. Если попробовать мыслить логично, то можно вывести несколько правил, которые помогут организовать таблицу стилей.

Как вы помните, существует несколько типов селекторов: элементы, классы, ID. Так что если формировать блоки по типам селекторов уже будет какой-то уровень организованности. Первое правило организации таблиц.

Совет

Разделяйте селекторы, т. е. сформируйте первый блок из селекторов по элементам, второй блок из селекторов по классам, а третий блок из селекторов по ID. Блоки друг от друга можно отделять дополнительным переводом строки.

В нашем случае блок селекторов по элементам будет состоять из H3, P и BODY, второй блок из селекторов по классам будет состоять из .back и .bluecol, третий блок из селекторов по ID будет состоять из #mainmenu и #submenu. А таблица стилей будет выглядеть так:

BODY {background: #FFF}

H3 {color: #000; font-family: arial}

P {color: #000; font: x-small Verdana}

.back {background: url(img/fragment_3.gif) no-repeat;}

.bluecol {background: #1d3d4e}

#mainmenu A {color: #000; font: bold small arial}

#submenu a {color: #fff; font: bold xx-small arial}

Рекомендуем скачать другие рефераты по теме: банк курсовых работ, операции реферат.



1  2  3  4  5  6  7  8  9  10  11 | Следующая страница реферата

Поделитесь этой записью или добавьте в закладки