Способы установки стиля

Есть три основных способа установки стиля:

через атрибут тэга style
через тэг <style>
через файл стилей

Рассмотрим их все.

Атрибут style

У тэгов, которые добавляют на страницу контент, есть атрибут style. Он устанавливает стиль именно этому элементу страницы. На другие элементы, в том числе такого же тэга, этот стиль не распространяется. Так как элемент, которому устанавливается стиль, уже известен, то селектор не требуетя. В атрибуте перечисляются только свойства. Свойства отделяются друг от друга точкой с запятой, в последнем свойстве точку с запятой ставить не обязательно.

Пример установки стиля:

8	<h1 style="color: Red; font-size: 20px">Текст</h1>

Стиль, установленный через атрибут тэга, имеет наибольший приоритет. Если свойства, указанные другими способами, противоречат свойствам атрибута, то используются свойства, установленные в атрибуте.

Тэг <style>

Тэг <style> находится внутри тэга <head> и устанавливает стиль всей странице.

Для примера добавим на страницу тэг <div>.

9	<div>Стиль через тэг</div>

Теперь зададим ему стиль. Для этого внутри тэга <head> создадим тэг <style>. В нём будет CSS код. Установим стиль для всех тэгов <div>.

6
7
8
9
10
11
12

<style>
div
  {
  color: Blue;
  font-size: 30px;
  }
</style>

Текст тэга <div> должен отображаться на странице синим цветом и крупнее, чем заголовок

Файл стилей

Файл стилей - это основной способ установки стилей для сайта. Использоваль файл удобно. Ведь вы создаёте его один раз и присоединяете к любому количеству страниц.

Для примера добавим на нашу страницу тэг <p>.

17	<p>Стиль через файл</p>

Теперь установим ему стиль с помощью файла стилей. В текстовом редакторе создадим новый файл. Назовём его mystyle. Расширение должно быть css. Поместим файл в ту же папку, где находится страница.

Код в файле будет такой:

1
2
3
4
5

p
  {
  font-size: 30px;
  color: Yellow;
  }

Теперь нужно присоединить файл стилей к странице. Это делается с помощью тэга <link>. Он должен находиться внутри тэга <head>. Добавьте на страницу такую строку:

6	<link rel="stylesheet" href="mystyle.css" />

Атрибут rel указывает, что это файл стиля, а href указывает путь к файлу. Если вы сохранили файл стилей не в той папке, где находится страница, то правильно напишите путь к файлу. Если Вы всё сделали правильно, то все тэги <p> на странице будут отображаться жёлтым цветом и достаточно крупным шрифтом.