Lecture
The identifier (also called the “ID selector”) defines a unique element name that is used to change its style and access it through scripts.
The syntax for using the identifier is as follows.
When describing an identifier, you first specify a hash sign (#), followed by the identifier name. It must begin with a Latin character and can contain the hyphen (-) and underscore (_) characters. The use of Russian letters in identifier names is not allowed. Unlike classes, identifiers must be unique, in other words, they appear only once in the document code.
The identifier is accessed in the same way as classes, but the id attribute is used as a keyword for the tag, the value of which is the identifier name (example 9.1). The grid symbol is no longer indicated.
Example 9.1. Use id
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Идентификаторы</title> <style> #help { position: absolute; /* Абсолютное позиционирование */ left: 160px; /* Положение элемента от левого края */ top: 50px; /* Положение от верхнего края */ width: 225px; /* Ширина блока */ padding: 5px; /* Поля вокруг текста */ background: #f0f0f0; /* Цвет фона */ } </style> </head> <body> <div id="help"> Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет. </div> </body> </html> In this example, the style of the <div> tag is defined using an identifier named help (Fig. 9.1).
Fig. 9.1. The result of the use of the identifier
As with the use of classes, identifiers can be applied to a specific tag. The syntax will be as follows.
First, the name of the tag is indicated, then without spaces, the lattice character and the name of the identifier. Example 9.2 shows the use of an identifier as applied to the <p> tag.
Example 9.2. ID with tag
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Идентификаторы</title> <style> P { color: green; /* Зеленый цвет текста */ font-style: italic; /* Курсивное начертание текста */ } P#opa { color: red; /* Красный цвет текста */ border: 1px solid #666; /* Параметры рамки */ background: #eee; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <p>Обычный параграф</p> <p id="opa">Параграф необычный</p> </body> </html> The result of this example is shown in Fig. 9.2.
Fig. 9.2. Type of text after applying the style
In this example, the style is entered for the <p> tag and for the same tag, but with the indication of the identifier opa.
1. In what situations can the names of identifiers and classes be called the same?
2. What identifier name is spelled incorrectly?
3. What error is contained in the following code?
<div class = "frame1">
<div id = "_ nav"> <a href="209.html"> Connecting to MySQL via PHP </a> </ div>
<div id = "_ nav"> <a href="213.html"> Creating tables in phpMyAdmin </a> </ div>
<div id = "_ nav"> <a href="211.html"> Database Structure </a> </ div>
</ div>
4. How to set the correct style for the <div> tag with the loom identifier?
1. In any case.
2. cravedko
3. Duplicate identifiers.
4. #loom {font-size: bold; }
Comments
To leave a comment
Cascading CSS / CSS3 Style Sheets
Terms: Cascading CSS / CSS3 Style Sheets