В прошлом уроке мы узнали что такое каскадные таблицы стилей и познакомились с их возможностями. В данном уроке научимся создавать таблицу стилей и прикреплять ее к html документу. Также рассмотрим простейшие стили.

Создаетя таблица стилей очень просто. Нужно открыть блокнот и сохранить пустой файл. При сохранении в имени файла нужно поставить расширение css. Это собственно и будет ваша таблица стилей. Подключается таблица стилей внутри тега head вашего html документа. Выглядит это так:

<link href="style.css" type="text/css" rel="stylesheet">

С помощью атрибута href указывается путь к таблице стилей. Если у вас таблица стилей находится в одной папке с html документом то просто нада указать имя таблицы стилей , как в данном примере. Атрибут rel показывает браузеру как связывается подцепляемый документ с html документом.Внутри rel пишем stylesheet, что показывает браузеру что документ является таблицей стилей.

CSS имеет свой синтаксис, точнее правила создания таблицы стилей. В отличии от html в css нет ни тегов, ни атрибутов. Главным объектом является правило, в нем и определяется как будет выглядеть тот или иной элемент документа. С помощью правила мы можем менять внешний вид уже существующих тегов.

Например вы хотите поменять вид тегов p вашей странички. Для этого в уже созданной таблице стилей пишем:

p {color:blue;}
Сначала пишется тег, внешний вид которого мы хотим поменять, потом в фигурных скобках записываем атрибут и его значение. После этого сохраняем таблицу стилей и открываем в браузере html страничку. В результате текст внутри тегов p станет синим.

Можно долгие годы искать что-то или кого-то и в конце концов прийти к выводу, что на самом деле ты искал самого себя.

Если вам нужно чтобы изменился цвет только одного тега то нужно создать собственный класс. Например мы хотим чтоб один из абзацов стал оранжевым. Делается это так:

p.orange {color:orange;}

Записываем тег, потом создаем для него новый класс. Потом в скобках указываем атрибут color и присваиваем ему значение orange. После этого сохраняем таблицу стилей и в коде html ищем тег, внешний вид которого мы хотим изменить и внутри его пишем class="orange". После этого перезагружаем страничку и видим что цвет текста в месте в котором нам нужно изменился на оранжевый:

Интересуясь чужим мнением, ты всегда рискуешь его услышать. А услышав, ты, вполне возможно, должен будешь с ним считаться.

Правила можна применять абсолютно ко всем элементам вашей странички(заголовки, списки, таблицы и т.д.)

---