Для добавления стилей на веб-страницу существует три основных способа, которые различаются своими возможностями и назначением.
Первые два не требуют внешней таблицы стилей и не дают особых преимуществ перед HTML. C ними мы только ознакомимся, а третьим способом займемся плотнее. Изучив третий способ, Вы легко сможете пользоваться первыми двумя, если они Вам понадобятся.
1. Встраиваемый (атрибут style)
Такой стиль можно встроить в различные теги HTML: заголовки, абзацы, ячейки таблицы. Стиль задается при помощи атрибута style. В значении атрибута указывается блок объявлений стилей, без фигурных кавычек. Такой метод позволяет распространять заданый стиль только на один определенный тег.
<p style="color:green; font-size:14px">Абзац зеленого цвета, размер шрифта 14 пикселей</p>
2. Внутрений (тег style)
Позволяет прописать стиль ко всей web-странице. Задается при помощи тега style и определенного атибута. Тег <style> необходимо прописывать в голове документа.
|
|
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>
