Селекторы классов CSS

Последнее обновление 8 мая 2019 11:48:32 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Селекторы классов

Селекторы класса CSS выбирают элементы на странице HTML, если у них есть атрибут с именем class, значение которого совпадает с именем селектора класса .

В документе таблицы стилей имени селектора класса предшествует точка (т . Е. « . »).

Если селектор класса комбинируется с другим или несколькими селекторами типа или класса, селекторам класса должен предшествовать период.

На HTML-странице любое количество элементов может иметь одинаковые значения атрибута class.

синтаксис:

 .classname {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 class selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-class-selector.css' type='text/css'>
</head>
<body>
<p class="w3r" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<p class="w3r" >Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

Результат:

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит.

Integer malesuada tempus enim nec rhoncus. Энея Темпус, ждущий porttitor.

Посмотрите этот простой пример селектора классов CSS в отдельном окне браузера.

Расширенный пример селекторов классов CSS

Код CSS:

.w3resource {
color: red; /* sets color to red */
background-color: aliceblue; /* sets background color to aliceblue */
}
.w3resource1 {
font-weight: bold; /* sets font size to bold */ 
font-variant: small-caps; /* sets the fonts to small caps */ 
}

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 class selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-class-selector.css' type='text/css'>
</head>
<body>
<div>
<p class="w3resource w3resource1" >We are learning CSS class selector, in w3resource.</p>
<p class="w3resource1">We are learning CSS class selector, in w3resource.</p>
</div>
</body>
</html>

Результат:

Мы изучаем селектор классов CSS в w3resource.

Посмотрите этот расширенный пример селектора классов CSS в отдельном окне браузера.

Предыдущая: селекторы атрибутов CSS
Далее: селекторы идентификаторов CSS