- Введение.
- CSS - что такое?
- Использование стилей внутри тега.
- Использование стилей в теге <head> </head>
- Использование стилей в отдельном файле.
Язык стилей CSS был разработан для разделения содержимого страницы html и его представления (цвет, фон, размер и т.д) . CSS - это каскадная таблица стилей, язык представления страницы сайта.
Стили для страницы html , для каждого элемента html есть свои атрибуты, они либо используются по умолчанию, либо задаются определенным образом, в коде сайта.
Есть несколько вариантов задания стилей для элементов html:
Для каждого элемента, тега задается свои стили. Не рекомендуется, перегружает код сайта. Пример:
<p style="font-size:12px">Абзац с текстом шрифт размера 12 пиксель</p> <p style="font-size:16px">Абзац с текстом шрифт размера 16 пиксель</p>
Результат:
Абзац с текстом шрифт размера 12 пиксель
Абзац с текстом шрифт размера 16 пиксель
Для всей страницы задаются стили для различных тегов внутри тега <style> </style>.Задается между тегами <head> </head> Пример:
<html> <head> ......... <style type="text/css"> p {color:blue;} </style> ......... </head> <body> <p>Голубой цвет текста во всех абзацах html-страницы</p> <p>Голубой цвет текста во всех абзацах html-страницы</p> </body> </html>
В результате получим
.........
Голубой цвет текста во всех абзацах html-страницы
Голубой цвет текста во всех абзацах html-страницы
Стили задаются в отдельном файле с расширением CSS. Позволяют всем страницам сайта выглядеть в едином стиле. Подключается файл тегом
<link rel="stylesheet" type="text/css" href="mysite.css">
где
link rel="stylesheet" type="text/css"
неизменно, а href указывает на подключаемый файл.