Для стилевого оформления документа с помощью большинства селекторов разработчик может использовать элементы и их размещение внутри Web-документа.
Но иногда разработчики с помощью псевдоэлементов могут задать стиль фрагмента, который не помечен как элемент. К псевдоэлементам CSS2 относятся :: first-letter, ::first-line, ::before И ::after.
Когда использовать селекторы класса и селекторы
Вы хотите определить наилучший способ применения селекторов класса и селекторов ID.
Используйте селекторы класса, когда стиль в документе нужно применять много раз, и селекторы ID для однократного применения стиля в документе.
В приведенной далее таблице стилей #ьаппег и #content— селекторы ID, a .title и .content — селекторы класса.
body { margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .75em; padding: 0;
}
#banner { margin-top: 0; margin-bottom: 0; background-color: #900;
border-bottom: solid lpx #000; padding: 5px 5px 5px lOpx; line-height: 75%; color: #fff;
}
#sub_banner { background-color: #ccc; border-bottom: solid lpx #999; font-size: . 8em; font-style: italic; padding: 3px 0 3px lOpx;
}
#content { position: absolute; margin-left: 18%; width: 40%; top: lOOpx; padding: 5px;
}
#navl {
position: absolute; width: 30%; left: 60%; top: lOOpx; padding: 5px;
}
#nav2 {
position: absolute; padding: 5px 5px 5px lOpx; top: lOOpx; width: 15%;
}
#footer { text-align: center; padding-top: 7em;
}
.warning { font-weight: bold; color: red;
}
.title {
font-size: 120%;
}
.content {
font-family: Verdana, Arial, sans-serif; margin-left: 20px; margin-right: 20px;
}
.footer { font-size: 75%;
Далее приведены селекторы ID и селекторы класса в HTML-коде:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-1 rans it iona1.dtd">
<html>
<head>
<title>CSS Cookbook</title>
<link href="l-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<hl>CSS Collection</hl>
<h2>Showcase of CSS Web Sites</h2>
</div>
<div id="content">
<h3>Content Page Title</h3>
<p class="title">Content Item Title</p>
<p class="content">Content goes here.</p>
</div>
<div id="navigation"> .
<h3>List Stuff</h3>
<a href="http://csscookbook.com/11 >Submit a site</a><br />
<a href="http://csscookbook.com/">CSS resources</a><br />
<a href="http://csscookbook.com/">RSS</axbr />
<h3>CSS Cookbook Stuff</h3>
<a href="http://csscookbook. com/">Home</axbr />
<a href="http://csscookbook.com/">About</axbr />
<a href="http://csscookbook.com/">Blog</axbr />
<a href="http://csscookbook.com/">Services</axbr />
</div>
<div id="blipverts">
<h3>Ads go here.</h3>
</div>
<div id=Hsiteinfo">
<p class="footer">Copyright 2006</p>
</div>
</body>
</html>
Селекторы ID обозначают уникальные атрибуты, представленные одним экземпляром в структурном дереве документа, тогда как селекторы класса могут применяться на Web-странице многократно. Запомните, что в селекторах ID используется знак решетки (#), а селекторы класса начинаются с точки (.).
Как правило, разработчики будут пользоваться селекторами ID для обозначения уникальных секций Web-страницы. В только что приведенном примере страница разделена на следующие секции:
♦ header
♦ content
♦ navigation
♦ blipverts
♦ siteinfo
Назначив этим секциям их собственный селектор ID, дизайнеры могут применить специальные стили к этим областям страницы, не используя эти стили для оформления других секций. Реализуется это с помощью сочетания селекторов потомка с селекторами ID.
В следующем примере к разным элементам ьз применяются разные правила CSS:
#content h3 { font-size: 2em; font-weight: bold;
}
#navigation h3 { font-size: 0.8em; font-weight: normal; text-decoration: underline;
}



Страница: 1 | 2


Правельные рецепты CSS