Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта | Справочная информация | Инструментарий | Шаблоны | Все статьи | 

Добрый день.

На сайте несколько новых статей:

  • Создание подчеркивания, в которой описано использование стилей, чтобы сделать разного вида подчеркивания у ссылок и текста.
  • Создание эффективного стиля - некоторые советы и рекомендации по стилевым таблицам.
  • Фреймы - хорошо или плохо - Описаны достоинства и недостатки фреймов, а также способы обхода недостатков с помощью JavaScript.

    Создание эффективного стиля

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

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

    Создавайте свои собственные селекторы
    Селекторы Class удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы употребляются теги SPAN и DIV.
    Тег SPAN предназначен для изменения стиля выделенной части текста, такой как отдельный символ или их набор, а DIV позволяет применять стиль сразу к целому блоку. Перед этим тегом, в отличие от SPAN, автоматически добавляется перенос строки и пустое пространство, аналогично действию параграфа.
    Несколько подряд идущих тегов, задающих форматирование, лучше заменить одним тегом SPAN с заданным стилем.

    Делайте стили удобными для редактирования
    Пока происходит работа над сайтом, файл со стилями приходится изменять по многу раз. Для повышения удобства и понимания цели различных селекторов, используйте комментарий, который помещается между символами /* и */. Комментарий повышает читабельность кода и позволяет легко разобраться в нем даже по прошествии некоторого времени. Другим способом создания удобного стиля является использование различных отступов и пробелов. Лучше для этой цели подходит знак табуляции, он добавляет сразу несколько пробелов, и при этом занимает минимум памяти. Сравните два способа описания параметров (пример 1).

    Пример 1. Написание файла со стилем

    /* Данный стиль краткий, но неудобный для внесение изменений */

    a {font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #003366;}
    a:visited {color: #660066;}
    a:hover {color: #800000;}
    .title {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFEE; text-align: center;}


    /* Тот же самый стиль, но представлен более «красиво» и понятно */

    a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #003366;
    }

    a:visited {
    color: #660066;
    }

    a:hover {
    color: #800000;
    }

    .title {
    font-size: 120%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFEE;
    text-align: center; }


    Несмотря на то, что объем нижнего примера больше, чем у верхнего, управлять параметрами стилей удобней и наглядней.

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

    Переопределяйте стиль тегов
    «Идеальный» код HTML должен содержать только теги и текст, а более ничего лишнего. Для достижения такого результата или хотя бы приближения к нему, описание стилей тегов выносится в отдельный файл, а сам тег пишется без всяких параметров (пример 2). В этом случае происходит сокращение кода и ускорение загрузки веб-страниц.

    Пример 2. Подключение таблицы связанных стилей

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mysite.css">
    или
    <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
    </head>
    <body>
    <h1>Hello, world!</h1>
    </body>
    </html>

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

    • Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
    Материалы данного сайта охраняются законом об авторском праве.
    Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
    http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное