Задание стилей внутри документа.
Первый и самый простой способ – задать стиль непосредственно в самом теге. Для этого используется атрибут style со списком свойств и их значений:
<p style=”color:#005500; margin-left:30px; font-style:italic”> Зелёный текст ... </p>
Этот стиль будет действовать только на содержание данного тега.
Такое включение стилей используется очень редко, т.к. для изменения
дизайна придётся редактировать содержимое страницы.
Ещё один способ задания стилей – использование тега <style>. Эти стилевые правила будут действовать на весь документ. Тег <style> должен находиться внутри тега <head>.
<html> <head> <title>CSS</title> <style> H1 { text-align:center; }
H2 { color:green } </style> </head>
<body> <h1>Текст расположен в центре строки</h1> <h2>Зелёный текст</h2> </body> </html>
Подключение стилей из внешних файлов.
Это очень удобный и наиболее часто встречающийся
способ. Его преимущества очевидны. При таком подходе нет необходимости
при смене дизайна отдельно редактировать каждую страницу сайта.
Подключить внешнюю таблицу стилей можно двумя способами.
Первый – использование тега <link> в нутрии тега <head>:
<link rel="stylesheet" type="text/css" href="style.css">
Второй – применение директивы @import внутpи тeгa <style>. Она должна применяться до любых стилевых правил. Пример:
<style> @import url(style.css) H1 { color:red }
P { margin-left:30px; border:none }
...
</style>
|