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

Есть три основных способа установки стиля - через атрибут тэга style, через тэг <style> и через файл стилей. Рассмотрим их все.

Атрибут style

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

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

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

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

Тэг <style>

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

Пример: Добавим на страницу тэг <div>.

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

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

6
7
8
9
10
11
12

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

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

Файл стилей

Файл стилей - это основной способ установки стилей для сайта. Большая часть стиля сайта устанавливается именно в нём. Он удобен тем, что создав файл один раз, Вы устанавливаете стиль для всех страниц, к которым этот файл присоединён. А присоединяется он одной строкой.

Пример: Добавим на нашу страницу тэг <p>.

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

Теперь установим ему стиль с помощью файла стилей. В текстовом редакторе зайдите в меню Файл и нажмите "Новый". Появится новая вкладка, в которой мы будем создавать файл стилей. Вкладка со страницей никуда не делась, Вы всегда сможете к ней вернуться. Чтобы было удобнее работать, можно установить новому файлу синтаксис CSS. Это делается в меню Синтаксисы. Код внутри страницы и код в файле стилей пишутся абсолютно одинаково. Файл стилей будет выглядеть так:

1
2
3
4
5

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

Сохраните файл с именем mystyle. Тип файла должен быть Cascade Style Sheets. Если Вы установили синтаксис, то тип файла уже установлен. А если ещё нет, то найдите в строке Тип файла нужный вариант и вибирете. Получится файл mystyle.css Поместим файл в ту же папку, где находится страница. Теперь нужно присоединить файл стилей к странице. Это делается с помощью тэга <link>. Он должен находиться внутри тэга <head>. Добавьте на страницу такую строку:

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

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