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

1. Встраиваемый (атрибут style)

Такой стиль можно встроить в различные теги HTML: заголовки, абзацы, ячейки таблицы. Стиль задается при помощи атрибута style. В значении атрибута указывается блок объявлений стилей, без фигурных кавычек. Такой метод позволяет распространять заданый стиль только на один определенный тег.

<p style="color:green; font-size:14px">Абзац зеленого цвета, размер шрифта 14 пикселей</p>

2. ВНУТРЕННИЙ (тег style)

Позволяет прописать стиль ко всей web-странице. Задается при помощи тега style и определенного атибута. Тег <style> необходимо прописывать в голове документа.

<html>
<head>
<style>
h2{color:blue; font-size:14px}
p{color: red}
</style>
</head>

<body>
<h2>Синий заголовок второго уровня</h2>
<p>Шрифт всех абзацев в документе будет красного цвета</p>
</body>
</html>

3. Внешняя таблица стилей

Этот метод мы и будем рассматривать подробнее в этом разделе сайта.

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

Таблица стилей к HTML-странице подключается следующим образом. В голове документа, то есть между тегами <head> и </head>, нужно прописать ссылку на таблицу стилей в таком виде:

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

Если у Вас HTML-файл и таблица стилей лежат в разных папках, то необходимо прописать коректный путь к CSS-файлу.

Предполагаю, что Вы изучали статьи на этом сайте, посвященные HTML. Если так, то у Вас есть папка www, в ней файл index.html и папка images, в каторой находится какая-нибудь картинка.

В папке с нашим файлом index.html создадим еще один текстовой файл с помощью программы "Блокнот". Сохраните этот файл с именем style.css. Это файл и будет нашей внешней таблицей стилей.

В файле index.html уберите весь текст между тегами <body> и в голове документа пропишите ссылку на CSS-файл, как указано выше.
В нашей таблице стилей, — файл style.css, — создадим два правила:

h1{color:red; font-size:16px}
p{color:blue}

А в файле index.html пропишем примерно ледующее (между тегами <body>):

<h1>Сделал первую таблицу стилей</h1>
<p>Все работает, что и не удивительно.</p>

 

Приобрести курс по дизайну

 Уникальный курс от Joomla-Create.ru о том, как за считанные минуты можно самостоятельно изменять дизайн любого сайта.

В курсе шаг за шагом производится изучение принципов изменения дизайна, техника CSS и работа с браузером. 

Подробнее...

Добавить комментарий


Защитный код
Обновить