Основы работы с CSS
       

Подключение таблицы стилей


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

  1. Подключение внешней таблицы стилей

    Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идельно подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:

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

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

    Некоторые замечания:

  1. внешнюю таблицу стилей можно создать в любом текстовом редакторе;
  2. файл с внешней таблицей стилей не должен содержать никаких тегов html;
  3. файл с внешней таблицей стилей необходимо сохранить с расширением .css.

Пример:

ul {margin-left: 10pt} li {font-family: arial} body {background-color: blue}

Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.

Пример с пробелом — "margin-left: 20 px";

пример без пробела — "margin-left: 20px".

  • Подключение внутренней таблицы стилей

    Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:

    <head> <style type="text/css"> li {font-family: arial} p {font-size: 25%} h1 {margin-right: 10pt} </style> </head>

    В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:

    <head> <style type="text/css"> <!-- body {background-color: green} table {border-style: dotted} --> </style> </head>

  • Встроенные стили

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

    Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.

    Пример:

    <body style="background-color: blue" > <h1 style="color: yellow" >Заголовок H1</h1> </body>

    В примере показано, как задать цвет фона документа и цвет заголовка h1.



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