Практика разработки Web-страниц
         

Стили работают некорректно


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

Если стили работают некорректно, сделайте следующее.

  1. Убедитесь, что все открывающие тэги, такие как <H1> или <P>, имеют соответствующие закрывающие тэги. Броузеру необходимо знать, когда начинать использовать каждый стиль и когда заканчивать.
  2. Чтобы исключить броузер как проблему, протестируйте ваши стили, используя версию 5 или более позднюю версию. Если все в порядке, испытайте другие броузеры, которыми могут пользоваться посетители. (Для решения проблем с броузером см. раздел "Стили не работают в определенном броузере".)

  3. Если ни один стиль, описанный в таблице стилей, не действует, убедитесь, что вы вставили стили между тэгами <STYLE> и </STYLE> в секции <HEAD> или сопоставили файл с таблицей стилей, используя тэг <LINK>:

    <link rel=stylesheet type="text/css" href="styles.css">

    Также убедитесь, что файл таблицы стилей существует в папке с вашими страницами (или в папке, определенной в атрибуте href).

  4. Проверьте формат вашей таблицы стилей на предмет ошибок. Убедитесь, что каждое описание стиля использует следующий формат (разрыв строки не важен, но всегда отделяйте селекторы стиля запятой, а описания – точкой с запятой):

    tag, another-tag { style-property :setting ; another-property :setting ; }

    Или, для определений стиля, включенных в тэг HTML с атрибутом style:

    <html-tag style="style-property :setting ;another-property :setting">






  5. Если стиль не применяется, убедитесь, что вы правильно написали название свойства и определили установки этого свойства. (Держите под рукой справочную таблицу CSS – см. Приложение B.) Например, нижеследующие правила стиля выглядят неплохо, но не работают:

    body {background:happy.gif } p, li {font-color:#cccccc }

    Что не так? Веб-адреса, такие как графический файл GIF, должны использовать идентификатор url(). И font-color – не свойство CSS; должно быть color. Правильно так:

    body {background:url(happy.gif)} p, li {color:#cccccc }

  6. Проверить правильность ваших установок для таблицы стилей можно в службе CSS по адресу jigsaw.w3.org/css-validator.


  7. Убедитесь, что тэги HTML или атрибуты не подавляют определений стиля. Например, даже если ваша таблица стилей определила шрифт Arial для тэга <P>, тэг <FONT> может поменять настройки:


    увеличить изображение
    Служба CSS Validation Service может указать на ошибки форматирования и другие возможные проблемы в вашей таблице стилей

    <p><font face="Verdana"> Text is Verdana </font></p>



  8. Если вы используете в тэге класс custom, убедитесь, что включили точку в таблицу стилей, но не в атрибут класса:

    <style> .blues {color:blue;font-size:7pt } </style> <p class=blues>I am 7 point text,and I have the blues.</p>



  9. Помните, что HTML элементы наследуют настройки стиля из окружающих их тэгов. Например, если вы установили свойство color в тэге <TABLE> как синий цвет, все элементы переднего плана таблиц: заголовки, текст и абзацы – станут синими, если только в определениях стиля в этих тэгов не определен другой цвет.

    table {color:blue;}/*Everything in all my tables has the blues */

    Если вы не хотите, чтобы настройка применялась ко всему блоку тэгов, создайте класс и применяйте его выборочно (см. шаг 8) или используйте контекстное определение стиля – такое, которое применяется только тогда, когда вы хотите. Следующее определение стиля делает так, что тэг <H1> использует синий текст, но только в пределах таблиц:



    table h1 {color:blue;}/* Headers in tables have the blues */

  10. Если стили по-прежнему не работают, попробуйте что-нибудь еще. Используйте готовую таблицу стилей FrontPage, или поищите простую таблицу на сайте (ищите простые таблицы стилей) и измените ее, чтобы получить то, что вам нужно.




Поддержка броузера для CSS

Можно создать дизайн с помощью CSS и потом выяснить, что стили, которые вы использовали, не поддерживаются некоторыми броузерами. Производители программного обеспечения ориентируются на стандарты CSS (Консорциум производителей программного обеспечения для WWW, см. на www.w3.org/Style/CSS), но ни один броузер полностью не поддерживает их.

Решая, использовать ли CSS, примите во внимание следующее.

  • Версия 5 и более поздние версии броузеров, особенно Internet Explorer 5.5 и поздние, поддерживают CSS, так что вы можете уверенно использовать большинство возможностей таблицы стилей. Дополнительные возможности, такие как макет страницы для печати и нестандартный интервал между словами, могут работать некорректно.
  • Internet Explorer 3 и 4, как и Netscape 4, имеют довольно хорошую поддержку форматирования шрифта и цвета. Они также поддерживают некоторые границы, отступы, цвет фона, но не в полном объеме.
  • Netscape 4 интерпретирует отступы и границы иначе, чем другие броузеры, но он не слишком распространен. Обдумайте отдельную таблицу стилей для Netscape 4.
  • Менее чем 3 процента пользователей используют броузеры, которые не понимают стилей вообще. Даже WebTV броузер различает стили и использует их как может (в пределах ограниченного набора шрифтов).


Полная информация о поддержке CSS есть на www.richinstyle.com/bugs/table.html или www.webreview.com/wr/pub/guides/style/mastergrid.html.


Содержание раздела