Блог / Html + Css / Классы и ид-шники в css

Классы и ид-шники в css

В этой статья мы с вами разберемся что такое классы(class) и ид-шники(id), какую функцию они выполняют в верстке и как ими пользоваться.
Классы нам приходят на помощь во время работы со стилями, например, если определенному тегу нужно задать параметры мы можем присвоить ему класс.

Классы имеют форму записи class=”имя_класса”. Один тег может иметь несколько классов class=”class1 class2 class3 ”. Имя класса должно содержать латинские символы, также оно может иметь тире (-), подчеркивание (_), и цифру(1,2,3 и тд.), но желательно цифры не использовать, если нужен указатель например class=”class2 ” используйте запись class=”classdva ”.

Также если вы присваиваете класс его имя не должно содержать пробелов. Например: class=”class dva ” это не аналог class=”classdva ” или
class=”ClassDva ” запись с пробелом при использовании будет иметь ошибку. Если вам нужна раздельная запись имени класса используйте тире (-) или подчеркивание(_), class=”class-dva ”, class=”class_dva ”.

Рассмотрим пример, у нас есть несколько текстов и они находятся в разных блоках. Нам нужно изменить размер шрифта и цвет текста в среднем блоке.
Если мы дадим тегу <p> параметры, то они изменяться у всех тегов <p>. Каким образом нам помогут классы:

<head>
<style>
.center-text{color:green; font-size: 27px;}
</style>
</head>
<body>
<div>
<p>С другой стороны новая модель организационной
деятельности способствует повышению актуальности экономической
целесообразности принимаемых решений..</p>
</div>
<div>
<p class=”center-text”>Соображения высшего порядка, а
также реализация намеченного плана развития напрямую
зависит от позиций, занимаемых участниками в отношении
поставленных задач. </p>
</div>
<div>
<p>Таким образом, повышение уровня гражданского сознания
представляет собой интересный эксперимент проверки существующих
финансовых и административных условий. </p>
</div>

На примере видим что для среднего тега <p> мы задали класс class=”center- text” и при обращении к этом у классу в стилях изменили цвет и размер текста.

Ид-шники так же помогают нам работать со стилями, но у него есть свои отличия от класса. Форма записи ид-шника: id=”Имя”
В отличии от класса ид-шник имеет только одно имя и должен встречаться в коде только один раз. Ид-шник также в имени может иметь тире(-) или подчеркивание(_) id=”first-block”, id=”first_block”. У ид-шников приоритет более высокий чем у класса, если у блока есть ид-шник со стилями, то с помощью класса мы стили не перезапишем, это стоит помнить так как у одному тегу мы можем присвоить как класс так и ид-шник. В основном ид-шник дается большому блоку такому как заголовок подвал или меню.

<body>
<div id="header">Заголовок и верхушка сайта</div>
<div id="center">Вся средняя часть сайта</div>
<div id="footer">Нижняя часть сайта, например контакты</div>
</body>
Например, нам нужна определенная высота для всех трех блоков header
=100px, center =300px, footer=50px.
<head>
<style>
#header{height: 100px;}
#center{height: 300px;}
#footer{height: 50px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="center"></div>
<div id="footer"></div>
</body>

Обращения в стилях к классам с помощью точки (.) к ид-шникам с помощью

(#).
<style>
.class{стили}
#id{стили}
</style>

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння