Същност и приложение на id атрибута

В днешният урок ще разгледаме подробно html атрибута id. Ще се постарая да включа всичко, което трябва да знаеш за него – от начини на стилизиране чрез CSS до добри практики при използването му.

Структура на урока

Какво представлява id атрибута?

Id атрибута представлява уникален идентификатор, който можем да добавим към почти всеки html елемент. Стойността на id е подобна на ЕГН-то на всеки един от нас. Не може двама човека да имат едно и също ЕГН. По същият начин не е разрешено една и съща стойност да бъде използвана повече от веднъж в html документ независимо върху кой елемент се прилага.

Този идентификатор от своя страна може да бъде използван от CSS като селектор или от JavaScript (чрез Document Object Model (DOM)) за манипулиране на елемента (например промяна на стила, поведението му и т.н.).

Също така е важно да отбележа, че атрибута id не трябва да бъде прилаган върху следните елементи: <base>, <head>, <html>, <meta>, <script>, <style>, <title>.

Къде да използвам id атрибута?

Най-честата употреба на id е при изграждането на структурата (layout) на уеб страницата и при маркирането на ключови елементи от нея. Пример за това може да бъде главното меню. Тъй като има само едно главно меню в страницата, то на елемента който го обхваща обикновено се дава id със стойност “menu”.

Друг подобен случай е, когато имаме група елементи и искаме един от тях да бъде стилизиран по различен начин. Това също е удобен момент за използване на id атрибута. Този пример ще го разгледаме в упражнението по-долу.

Структура и начин на прилагане

Както вече знаеш, всички атрибути се поставят в отварящия таг на елемента. Визуално това изглежда така:

Id атрибута се поставя в отварящия таг на елемента

Стойността на атрибута задължително трябва да започне с буква, която може да бъде последвана от комбинация от букви (a-z или A-Z), цифри (0-9), тирета (-), долни черти (_), две точки (:) или точки (.). Също така не е разрешено използването на разстояние.

Освен това, стойността на id е чувствителна към малки и големи букви т.е. id със стойност “paragraph1” се счита за различна от id със стойност “Paragraph1”.

Kратък лист с валидни id стойности

paragraph
paragraph-1
nachalen_paragraph
kraen.paragraph-15

Kратък лист с невалидни id стойности:

1-paragraph (причина: започва с цифра)
nachalen paragraph (причина: има разстояние между думите)
+nachalen-paragraph (причина: започва с непозволен символ)
paragraph+11 (причина: името съдържа непозволен символ)

Съвет: Ще се улесниш значително, ако използваш стойности, които по някакъв начин описват елемента или поведението му. Така, когато отвориш CSS файла след определен период от време и разгледаш кода, няма да се чудиш какъв е елемента с id=“id-11” или “goren-div-1” и т.н. Кратките и описателни стойности ще ти помогнат да се ориентираш по-добре и да придобиеш по-добра представа за работата на кода. Например “download-button”, “paragraph1”, “main-menu” ще ти дадат много повече информация за самия елемент и дори да отвориш файла след няколко месеца, мигновено ще разбереш за какво служи.

Използване на id като CSS селектор

Както споменах по-горе, стойността на id атрибута може да бъде използвана като селектор в CSS.

Може би се питаш “Защо да използвам id след като името на самият елемент също може да бъде селектор?”

Това е наистина добър въпрос. Представи си, че на страницата имаш 5 текстови параграфа. Знаеш, че стила който прилагаш върху <p> елемента, ще се отрази върху всички параграфи на страницата, но искаш третият да бъде малко по-различен. Тук идва на помощ id атрибута. Чрез поставяне на id в този параграф ще имаш възможност да приложиш уникален стил точно върху този елемент, без да се намесваш в стила на останалите параграфи.

Този пример е прекалено елементарен, но изключително добре представя работата на id. Използването на id може да бъде и с малко по-различни цели (например за промяна не само на стила, но и на поведението на елемента), но това е извън обсега на този урок.

Но стига излишни приказки. Нека се заемем със същността на нещата. Основно, използването на id като селектор става ето така:

Id атрибута може да бъде използван като селектор в CSS

В CSS кода започваме със символа # последван от стойността на id атрибута. Това е всичко. Няма никакви други скрити трикове или тайни. Това, което трябва да запомниш е, че трябва да използваш символа # преди стойността. В противен случай браузъра ще го приеме за грешка.

Време е за едно кратно упражнение, в което да приложим всичко това.

Упражнение

Нека пресъздадем примера с петте параграфа, който дадох по-горе.

Стъпка 1

Създай нов html документ и добави 5 параграфа със съдържание по твой избор. Също така не забравяй да прикачиш и външен css файл, който ще използваме за прилагане на стила. Ако се затрудняваш, в урока Прилагане на CSS чрез външен файл можеш да научиш как става това. Моят вариант изглежда ето така:

index.html

copyИзчистенПрозорец

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; 
            charset=utf-8" />
        <title>Работа с атрибута id</title>
        <link href="style.css" rel="stylesheet" 
            type="text/css" />
    </head>
    <body>
        <h2>Работа с атрибута id</h2>
        <p>Текстов параграф 1</p>
        <p>Текстов параграф 2</p>
        <p>Текстов параграф 3</p>
        <p>Текстов параграф 4</p>
        <p>Текстов параграф 5</p>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; 
			charset=utf-8" />
		<title>Работа с атрибута id</title>
		<link href="style.css" rel="stylesheet" 
        	type="text/css" />
	</head>
	<body>
		<h2>Работа с атрибута id</h2>
		<p>Текстов параграф 1</p>
		<p>Текстов параграф 2</p>
		<p>Текстов параграф 3</p>
		<p>Текстов параграф 4</p>
		<p>Текстов параграф 5</p>
	</body>
</html>

Ако запазиш промените и отвориш страницата в браузър, резултата ще изглежда ето така:

Стъпка 1: Нормална страница със стил по подразбиране

Както виждаш, всички параграфи имат един и същи стил, който браузъра прилага по подразбиране. Нека го променим.

Стъпка 2

Отвори css файла и добави следния код:

style.css

p {
	font: 20px Verdana,Arial,sans-serif;
	color: #993333;
}

В този код не срещаме нищо ново. Малка промяна в шрифта и размера на текста както и промяна на цвета. Стила ще въздейства върху всички параграфи без изключение. Резултата е следния:

Стъпка 2: Стилизиране на текстовите параграфи

Стъпка 3

Сега решаваме, че третият параграф трябва да бъде с различен стил, защото в него има някакво по-специално съдържание. Няма проблем, това може да бъде постигнато много лесно с id.

Върни се към html файла и добави id атрибут към третият параграф. Ето така:

Преди
<p>Текстов параграф 3</p>
След
<p id="paragraph3">Текстов параграф 3</p>

Стъпка 4

Сега отвори отново css файла и приложи наученото до тук. Успя ли? Ето как се справих аз:

style.css

#paragraph3 {
	font-weight:bold;
	font-size:24px;
	color:green;
}

Този код удебелява шрифта и увеличава размера му на 24px, след което променя цвета на зелен. Резултата е следния:

Използване на id като селектор и прилагане на стил върху него

Резултата изглежда доста задоволителен и успяхме да постигнем желания ефект. Тук обаче виждам един малък проблем.

Какво ще стане, ако по-късно решим, че петия параграф трябва да изглежда точно като третия? Не можем да използваме същата id стойност, затова ще трябва да добавим ново id с нова стойност към този параграф. Ами, ако решим че и втория параграф трябва да изглежда като третия? Отново id? Не, не бих казал. В този случай ще бъде по-добре, ако използваме атрибута class.