Статья: Использование CSS

Преимущества каскадных таблиц стилей (CSS)

Неодобрению подверглось большинство элементов форматирования HTML версии 4.0, и Консорциум W3C запретил их использовать. Web-дизайнерам стали рекомендовать к использованию CSS (Cascading Style Sheets — каскадные таблицы стилей).

Главные преимущества которых заключаются в:

1. Более чистом коде, который:
   • легко поддерживается;
   • быстрее загружается;
   • лучше оптимизирован для поисковых систем.
2. Модульном коде, для которого характерны:
   • возможность применения правил стиля ко множеству страниц;
   • единообразный дизайн;
   • код легче поддерживается.
3. Силе дизайна, включающей в себя точность контроля (позиционирование, размер, поля и др.).
4. Разделении труда.
5. Лучшей доступности, для которой характерно:
   • использование тегов по назначению;
   • отсутствие необходимости в позиционировании невидимых картинок;
   • возможность переписывания пользователями стилевых таблиц автора.

Правила CSS

Этими правилами определяются стили элементов или групп элементов.

В правилах используется следующий синтаксис:

селектор {свойство:значение; свойство:значение; свойство:значение;}

Все пары, указанные в фигурных скобках, представляют собой декларации. Селектором определяются элементы, на которые воздействуют эти правила. Приведем пример правила:

p {

color:darkgreen;

font-family:Verdana;

font-size:10pt

Комментарии в CSS

В CSS они начинаются символом «$/*$» и заканчиваются «$*/$». Например:

p {

color:red; $/*$ Текст во всех параграфах должен быть красного цвета $*/$

CSS применяют в HTML или XHTML, используя методы связывания (linking), внедрения (embedding) и встраивания (inlining).

В связанном методе таблицы стилей создаются и хранятся в отдельных файлах с расширением .css . Их называют связанными (внешними) стилями.

Во внедрённом методе CSS хранятся в виде HTML-страниц в теге между тегами и представляют собой внедрённые (внутренние) стили.

Встроенный метод CSS хранится непосредственно в атрибуте стиля HTML и называется встроенным стилем, например:

Bold Font

Наиболее используемым является первый метод.

Связывание

CSS хранятся в отдельном файле, для ссылки на который используется тег между тегами , как показано ниже, который предполагает, что таблица стилей хранится в файле с именем «style.css».

Тег link состоит из 3 атрибутов:

• rel сообщает браузеру тип и цель ссылки;
• type сообщает браузеру MIME-тип подключаемого файла;
• href сообщает браузеру URL для нахождения файла (в данном примере URL относительный, а может быть и абсолютным).

В «style.css» содержится одно правило, указывающее на то, что текст в параграфе должен отображаться полужирным шрифтом:

р {

font-weight: bold;

}

Встраивание

Пример встраивания правила приведен в теге:

Внедрение

Внедренные (внутренние) CSS используются в динамически генерируемых страницах, однако это использование рекомендуют сделать минимальным.

Внедрённые CSS находятся в заголовке HTML-документа, требующем стилизации. В следующем примере пользователь желает, чтобы текст в HTML-документе выделялся бы полужирным шрифтом.

CSS находится в элементе . Атрибутом type="text/css" браузеру сообщается, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. А стилевое правило p {font-weight: bold; } указывает браузеру выполнить выделение всего текста в любом параграфе полужирным шрифтом.

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

Сокращение времени загрузки веб-страниц с помощью CSS

Несмотря на то, что широкополосный доступ к Интернету все больше распространяется, проблемы скорости загрузки HTML-страниц все еще остаются актуальными. В устранении этой проблемы может помочь CSS, с помощью которого пользователь сэкономит время и трафик. Ниже приведем ряд правил, которых рекомендуется придерживаться.

1. Нужно избегать по возможности использование таблиц при разметке страницы.
   • Приведем причины, по которым лучше использовать CSS для разметки страниц:
   • браузерами анализируются таблицы дважды: первый раз для оценки структуры таблицы, а второй — для определения их содержимого;
   • таблицы отображаются сразу полностью, а не по мере загрузки;
   • в таблицах используются прозрачные картинки для определения ширины колонок и т.п.;
   • для CSS характерен гораздо меньший код, который выносится во внешний файл, загружаемый всего однажды и хранящийся в кэш-памяти браузера;
   • CSS позволяет осуществлять контроль очередности загрузки элементов страницы.
2. Не нужно использовать картинки при отображении текста. Большинство кнопок и надписей отображаются с помощью CSS.
3. Загрузку картинок, в том числе и фоновых изображений, лучше осуществлять с помощью CSS. К примеру, для отображения картинки размером 200х100, можно использовать следующий код:
   Пример 4

   , которому соответствует код CSS: pretty-image { background: url(filename.gif); width: 200px; height: 100px }

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

4. Используйте контекстные стили. Вместо присваивания класса каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:
   Пример 5

   … .text p { color: #03c; font-size:2em }

   Данный код укажет браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

5. Используйте сокращения при указании шрифтов, границ, фона.
6. Минимизируйте пробелы, переводы строк и комментарии. Каждый лишний символ будет увеличивать размер страниц. Поэтому необходимо как можно меньше нажимать клавиши Enter и Tab в процессе вёрстки. А также важно не забывать про объединение CSS-стилей.
7. Важно использование относительных ссылок, так как абсолютные занимают намного больше места и создают дополнительную нагрузку на браузер.
8. Не нужно увлекаться использованием META-тегов.
9. Необходимо выносить CSS и JavaScript в отдельные файлы.
10. Нужно ставить знак «/» в конце ссылок на каталоги.

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