Урок №2: подключение CSS к HTML
Подключить таблицы стилей можно двумя способами. На предыдущем уроке мы рассмотрели типы таблицей стилей, а сейчас мы научимся создавать вложенную таблицу стилей и внешнюю таблицу стилей, а также подключать их к HTML-коду.
Вложенная таблица стилей
Такая таблица встраивается в HTML-код в контейнере Head с помощью парного тега <style> и параметром type. За тем необходимо задавать значения тегов. Допустим нам необходимо задать красный цвет всех заголовков <h1>, и отформатировать весь текст в абзацах <p> страницы в зеленый цвет и установить размер шрифта 16 пикселей в них. Пишем HTML-код:
|
<html> <head> <title>Подключение CSS к HTML</title> <style type="text/css"> h1{ color:red } p{ color:green; font-size:16px} </style> </head> <body> <h1>Заголовки первого уровня будут красными</h1> <p>Весь текст абзацев будет зеленого цвета с размером в 16 пикселей</p> </body> </html>
|
Вставив этот код в блокнот и сохранив код с расширением html, вы увидите что все получилось: заголовок красного цвета, текст в абзацах зеленого цвета с размером в 16 пикселей. Также стоит знать, что текстовые таблицы стилей по приоритетам стоят выше, чем вложенные и внешние таблицы стилей. Именно поэтому если в тег <p> данного примера вставить такое значение: <p style="color:blue"> Весь текст абзацев будет зеленого цвета с размером в 16 пикселей</p>, то независимо от вложенного в контейнер head стиля, текст данного абзаца будет синим, а остальные по прежнему останутся зелеными.
Внешняя таблица стилей
Внешняя таблица стилей - это текстовый файл, в котором содержаться определенные стили. Такой файл имеет расширение css ( например mystyles.css). Внешние таблицы стилей, как правило, хранятся в той же папке, что и веб-страницы сайта, однако можно создать и отдельную папку, если используются несколько внешних таблиц стилей. В контейнер Head каждой страницы, к которой необходимо подключить внешнюю таблицу стилей, необходимо включить тег <link>, который подключает внешние файлы, в нашем случае он будет выглядеть так:
<link rel="StyleSheet" href="mystyles.css" type="text/css">
|
Где href="путь к вашему файлу таблицы стилей.css". Внешние таблицы стилей являются самыми удобными, ведь управляя одним файлом, можно изменить внешний вид всех страниц, к которым подключена такая таблица.
Дальше продолжим уроки работая исключительно с внешними таблицами стилей, разобравшись в них, вы автоматически разберетесь с другими типами таблиц CSS. Теперь вы знаете как подключить файл внешней таблицы стилей. На следующем уроке рассмотрим, как вводить данные в файл который мы создали с расширением css.
Следующий урок: Селекторы и их свойства
|
R598551293139
