Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 2:

Синтаксис CSS и примеры использования

< Лекция 1 || Лекция 2: 123 || Лекция 3 >

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

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

  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".

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

    Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <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>
  3. Встроенные стили

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

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

    Пример:

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

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

Несколько таблиц стилей

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

Например, внешняя таблица стилей имеет следующие свойства для селектора p:

p 
{
font-family: "sans serif";
margin-left: 10pt;
font-style: italic;
font-weight: bold
}

А внутренняя таблица стилей имеет для селектора p следующие свойства:

p
{
margin-left: 20pt;
font-style: normal;
font-weight: bolder
}

Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:

font-family: "sans serif";
margin-left: 20pt;
font-style: normal;
font-weight: bolder

Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.

< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Данила Некрасов
Данила Некрасов
Россия, Пермь, ПНИПУ
Сергей Федоров
Сергей Федоров
Россия