Селекторы типа CSS

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

script1adsense2code

script1adsense3code

Тип селекторов

Селекторы типа CSS выбирают каждый экземпляр элемента на странице HTML.

Синтаксис:

 elementName {CSS-Property: value; ........................}

Простой пример селекторов типа CSS

Код CSS:

h1 {
color: blue; /* color of all the elements should be blue */
} 
p {
background-color: aliceblue;
color: maroon;
}

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 type selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-type-selector.css' type='text/css'>
</head>
<body>
<h1>Example of CSS type selector.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Aenean tempus adipiscing porttitor. Quisque aliquam nunc vel arcu varius aliquam.</p>
</body>
</html>

Результат:

Пример селектора типа CSS.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит. Integer malesuada tempus enim nec rhoncus.

Энея Темпус, ждущий porttitor. Алисквам, полный аликвам.

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

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

Код CSS:

*{color:blue;}  /* sets color blue  */
em {color: red}   /* sets color red for em */

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

Результат:

Lorem Ipsum Dolor Sit Amet , Concetetur Adipiscing Elit. Донецк урна элит. Integer malesuada tempus enim nec rhoncus.

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

Предыдущая: CSS универсальный селектор
Далее: CSS потомки селекторов