CSS идентификаторы
Селекторы идентификаторов
Селекторы идентификатора CSS выбирают любой элемент на странице HTML, если у него есть атрибут с именем id, значение которого совпадает с именем селектора идентификатора .
В документе таблицы стилей имени селектора идентификатора предшествует " # ".
Если селектор идентификатора комбинируется с другим или несколькими селекторами, селектору идентификатора должен предшествовать знак #.
Идентификаторы могут быть применены только один раз на HTML-странице.
синтаксис:
#idname {CSS-Property: value; ........................} Простой пример селекторов идентификаторов CSS
Код CSS:
#w3r {
color: red; /* sets color to red */
background-color: aliceblue; /* sets background color to aliceblue */
}HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Example of CSS id selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-id-selector.css' type='text/css'>
</head>
<body>
<p id="w3r" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
</body>
</html>
Результат:
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит.
Посмотрите этот простой пример селектора идентификаторов CSS в отдельном окне браузера.
Расширенный пример селекторов идентификаторов CSS
Код CSS:
p#w3r {
color: red; /* sets color to red */
background-color: aliceblue; /* sets background color to aliceblue */
}
h2#w3r {
color: blue; /* sets color to blue */
background-color: lime; /* sets background color to lime */
}
HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS id selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-id-selector.css' type='text/css'>
</head>
<body>
<div>
<h2 id="w3r">CSS examples</h2>
<p id="w3r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
</div>
</body>
</html>
Результат:
Примеры CSS:
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит.
Посмотрите этот расширенный пример селектора идентификаторов CSS в отдельном окне браузера.
Предыдущая: селекторы классов CSS
Далее: CSS псевдо-классы
Новый контент: Composer: менеджер зависимостей для PHP , R программирования