HTML - Урок 3: Как подключить CSS стили оформления в шаблоне?

Как подключить CSS стили оформления в шаблонеКак подключить CSS стили оформления в шаблоне


Итак, мы продолжаем уроки html для начинающих. В прошлом уроке я рассказал о том, что такое DOCTYPE, тег HEAD и о том, как установить кодировку HTML страницы, а также указать ключевые слова и описание к ней. Что же мы узнаем сегодня? В этом уроке мы узнаем о том, как подключить стили в шаблоне. Подробнее далее.

Как подключить стили оформления в шаблоне? Для начала узнаем о том, что такое CSS стили. Стили оформления CSS - это средство оформления WEB – страниц, написанных с помощью языков разметки HTML, XHTML и XML. Их можно указать, как и в самом документе HTML , так и подключить извне, т.е. описать в отдельном файле. Я предлагаю рассмотреть, как первый, так и второй способы. Практически все web страницы и web сайты используют CSS стили оформления.

1. Способ подключения стилей оформления CSS – внутри HTML – документа или подключение внутренних стилей.
Если стили не указаны в отдельном файле, то указывать их нужно в самом документе внутри тега . Пример подключения css-стилей внутри документа:

<head>
.....
<style type="text/css">
body {
color: #777777;
}
</style>
</head>


Подключенные таким способом стили действуют по всему документу, но что делать, если нужно указать их только для одного блока? Описать стили внутри определённого блока (тега) можно с помощью атрибута данного тега – style. Пример подключения стилей для одного тега:

<p style="font-size: 15px; color: red;">Случайный текст 15 размера и красного цвета<p>


Стили, описанные таким способом, не влияют на другие теги документа.

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

Если у Вас стили в отдельном файле, то их нужно подключить специальной строкой. Для того, чтобы указать стили для всего HTML – документа, мы воспользуемся тегом , который должен быть расположен внутри тега , о котором я говорил во втором уроке. Пример такого подключения:

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


Путь к файлу, содержащему стили, указывается в этой части тега: href="style.css" в кавычках. В примере подключен файл стилей, который ежит в одной папке с HTML документом.

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

<head>
.....
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>


Файл стилей css, а точнее путь к нему, в данном способе указывается в скобках.

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

Если CSS стили нужно подключить для XML-документа, то нужно воспользоваться следующей строкой:

<?xml-stylesheet type="text/css" href="style.css"?>


В данном способе подключения путь к файлу со стилями указан в кавычках.

На сегодня урок окончен! Удачной верстки и новых знаний!

Хотите поехать в Европу? Вам нужен загранпаспорт!
Дата: 2012-11-17 18:16:40   Просмотров: 6102

Теги: шаблон шаблоны уроки урок html вебмастеру сайтостроение