CSS или Cascading Style Sheets, что переводится как "Каскадные Таблицы Стилей" это особая раметка языка html с помощью которой указываются стили отображения для отдельно взятых элементов сайта или кода в общем. Таблица стилей может быть как в самом коде страницы в виде блока в HEAD:
...так и вынесена за пределы документа в отдельный файл с расширением .css и подключена в страницу вот таким кодом, который добавляется между тегами HEAD:
Сам файл с расширением .css будет при этом представлять из себя обычный текстовый документ с подобным содержанием:
* Начало таблицы стилей */ .style1 {color: #FF0000} /* конец таблицы стилей (это просто комментарий для вас) */
ID и CLASS - В чем разница?
Для начала запомните: назначить какой либо параметр для элемента на странице можно присвоив ему класс (class) или идентификатор (ID). Вот пример присвоения тегу DIV класса
содержимое
и идентификатора:
содержимое
В самом css классы и идентификаторы соответственно пишутся по разному:
/* Вот это класс */ .divstyle {color: #FF0000} /* А вот это идентификатор */ #divstyle {color: #FF0000}
Теперь давайте разберемся, чем же они различаются, ведь кажется что делают они одно и тоже... но нет. Идентификатор - он и есть идентификатор - для каждого элемента он уникальный. Классы же можно присваивать в любом количестве любым элементам. О присвоении классов мы поговорим позднее..
Присвоение классов элементам
Как я уже сказал, класс может быть присвоен множеству разных элементов. Элементу может быть присвоен как один класс:
ТЕКСТ
так и несколько! В этом случае классы прописываются через запятую:
Code
ТЕКСТ
Но можно прописать дополнительные стили прямо в элементе не обращаясь к таблице:
Code
ТЕКСТ
Идентификатор же не допустит такой вольности, его можно указать для каждого элемента только в одном числе:
Code
ТЕКСТ
Селекторы для классов
Первый вид селекторов, это непосредственное указание имени обьекта в стиле(в этом случае перед классом не ставится точка):
p {font-family: "Garamond", serif;}
В этом примере для параграфа назначается шрифт Garamond - тоесть все апраграфы на странице будут выводиться этим шрифтом. Второй вид селекторов, это селекторы с указанием не только класса но и id нужного обьекта (в данном случае стиль будет присваиваться только параграфу с id, равным paragraph1)
p#paragraph1 {margin: 0;}
Так же и наоборот (Класс будет применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным news):
