[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные



Web - программирование / CSS /

Встраивание стилей в HTML документ

В этой статье мы рассмотрим способы встраивания CSS в HTML документ. Всего будет рассмотрено четыре способа.



Первый способ.
Один из самых простых способов это привязка стилей к элементу при помощи атрибута style. Атрибут style может использоваться для любого тега, расположенного в теле документа. Форма записи свойства следующая: <элемент style="свойство1: значение1; свойство2: значение2;">:

 

<h1 style="color: red;">Заголовок красного цвета.</h1>


Второй способ.
Следующий способ заключается в создании таблицы стилей прямо в документе. Для этого в HTML используется парный элемент style. Данный элемент имеет один обязательный атрибут type – MIME тип содержимого и один не обязательный media – устройства для вывода документа. Для таблицы стилей значение первого атрибута должно быть равным text/css. Второй атрибут может принимать одно из следующих значений:

• all – для всех устройств.
• aural – для синтезаторов речи.
• braille – для устройств отображения азбуки брайля.
• embossed – для печати азбукой брайля.
• handheld – для переносных устройств, например для КПК или смартфонов.
• print – для печати документа на принтере.
• projection – для проекционных устройств.
• screen – для экранных устройств, например монитор.
• tty – для устройств с фиксированной шириной символов, например телетайп.
• tv – для телевизионных устройств.

Хорошим тоном является указание конкретных устройств, для которых используется таблица стилей, media="screen". Хотя запись media="all" также не будет ошибочной. Если необходимо задействовать таблицу стилей для нескольких устройств, то их можно перечислить через запятую media="screen, print".

Элемент style должен располагаться в HEAD блоке HTML документа. Использование элемента в теле документа строго исключается! Вот пример таблицы стилей, расположенной в документе:

 
<html>
<head>
    <style type="text/css" media="all">
        body { 
            background: silver; 
            padding: 0; 
        } 
        h1 { color: red; }
    </style>
</head>
<body>
    <h1>Заголовок красного цвета.</h1>
</body>
</html>


Третий способ.
В HTML есть такой элемент, как link. Элемент link располагается в HEAD блоке HTML документа. Он предназначен для создания связи между документами. В CSS этот элемент используется для подключения внешних таблиц стилей. Внешними, называются таблицы, расположенные отдельно от HTML документа, но используемые им. Элемент link, как и style имеет два необходимых атрибута type и media. Значения этих атрибутов, такие же, как и для элемента style. Для этого элемента необходимо задать ещё два атрибута href и rel. Атрибут href определяет URL таблицы стилей. Атрибут rel принимает в качестве своего значения тип связи между документами и для таблиц стилей, он должен принимать значение stylesheet. Для одного HTML документа можно подключить несколько внешних таблиц стилей. Например:

 
<html>
<head>
    <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
</head>
<body>
    <h1>Заголовок красного цвета.</h1>
</body>
</html>


Теперь остаётся создать файлы main.css и ptint.css, который будет содержать все необходимые инструкции CSS.

 
h1 { color: red; }


Четвёртый способ.
Ну что же, вот мы и подошли к последнему способу подключения стилей к HTML документу. Данный способ, немного отличается от других, т.к. он не базируется на HTML элементах или их атрибутов. Речь пойдёт о директиве @import. Эта директива из CSS, и содержаться она может только в CSS документе, то есть либо в элементе style либо во внешней таблице. Эта директива должна стоять перед всеми инструкциями CSS.

 
<html>
<head>
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
<body>
<h1>Заголовок красного цвета.</h1>
</body>
</html>


Результат будет эквивалентен предыдущему способу подключения.

Заключение.
Вот и всё, теперь вы знаете о CSS ещё на чуть больше, чем раньше. Не забывайте: CSS даёт вам безграничные возможности по форматированию документов!

Источник: www.mlib.com.ru


[ вверх ]


Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 4473 сегодня - 1

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 4696 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 4488 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 4450 сегодня - 0

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 5198 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects