- Подробности
- Категория: Базовые уроки
Для добавления стилей на веб-страницу существует три основных способа, которые различаются своими возможностями и назначением.
Первые два не требуют внешней таблицы стилей и не дают особых преимуществ перед 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 и работа с браузером.
