Урок 12. Что такое id и class

Снова привет! Я очень давно не писал уроки верстки, но поставил себе цель завершить этот 30-ти дневный курс HTML/CSS. В сегодняшнем уроке мы рассмотрим id и class, а именно как они работают и для чего их используют. Это очень важно и тоже входит в базовые знания верстки.
Сейчас попробую по простому и быстренько показать и расказать :)

<html>
<head>
	<title>Урок 11. Что такое id и class</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<ul>
		<li>ананас</li>
		<li>апельсин</li>
		<li>груша</li>
		<li>слива</li>
		<li>помидор</li>
	</ul>
</body>
</html>

Вот мы имеем простенький список. Как видите style.css подключен и далее я уже наверное не буду об этом напоминать. Для тех кто лень читать все уроки или искать, вот ССЫЛКА где всё об этом рассказано.
Список в браузере изначально выглядит так:
список html css

Если нужно поменять цвет строчек, мы делаем это в css. Вот, например, мы хотим чтобы буквы были красными.

li {
	color: red;
}

И получилось такое
список html css красный

Но конечно же иногда нам нужно создать не на столько простенький список. Да и вообще, когда вы будете верстать более сложные проекты, там будет много списков, и все разные, а свойства у вас написаны только для одного. Для того и используют id и class. Но чаще всего именно class. В примере, немного ниже, я задал class одному из элементов списка и назвал его another (имя не имеет значения, можете сами придумать).

<html>
<head>
	<title>Урок 11. Что такое id и class</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<ul>
		<li>ананас</li>
		<li class="another">апельсин</li>
		<li>груша</li>
		<li>слива</li>
		<li>помидор</li>
	</ul>
</body>
</html>

А сейчас задам этому классу свойства в css файле. А именно оранжевый цвет:

.another {
	color: orange;
}

И смотрим как всё изменилось
список html css оранжевый

Как видим, всё очень просто. Для эксперимента дадим цвет еще одной строчке.

	<ul>
		<li>ананас</li>
		<li class="another">апельсин</li>
		<li>груша</li>
		<li>слива</li>
		<li class="pomidor">помидор</li>
	</ul>

и ксс

.another {
	color: orange;
}

.pomidor {
	color: red;
}

Как все уже догадались, список изменился так:
список html css цветной

В примерах я задал класс для элементов списка, но его можно применять абсолютно ко всему.
Сейчас немного об id. По своему принципу работы он похож на class, но он более “важен”. Это можно задавать элементу только тогда, когда элемент больше не повторяется на странице!

То есть можно сделать так:

	<ul>
		<li>ананас</li>
		<li class="another">апельсин</li>
		<li>груша</li>
		<li>слива</li>
		<li class="another">помидор</li>
	</ul>

но нельзя делать так:

	<ul>
		<li>ананас</li>
		<li id="another">апельсин</li>
		<li>груша</li>
		<li>слива</li>
		<li id="another">помидор</li>
	</ul>

Работать конечно будет, но это очень серьезная ошибка!
В ксс id следует записывать не так как классы (через точку), а через решетку. Вот так:

#another {
	color: orange;
}

#pomidor {
	color: red;
}

Для каждого элемента вы можете задать одновременно id и class. При чем если например в классе вы указали красный цвет, а в айди зеленый, то цвет будет зеленый, потому что id приоритетнее!

Спасибо за внимание :)

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>