http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2FID_Selector
HTML/CSS/Style Basics/ID Selector - История изменений
2026-04-04T12:31:15Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/ID_Selector&diff=5924&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/ID_Selector&diff=5925&oldid=prev
Admin: 1 версия
2010-05-26T08:17:23Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==An ID should be unique within a document. If it is not, ID will match all elements with the same IDs.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#paragraph3{<br />
margin-bottom:40px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2 class="double-space">This is a header<br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
</h2><br />
<p id ="paragraph3">This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Combine the style from ID and class==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
* .z {<br />
padding: 5px;<br />
border: 5px solid black;<br />
}<br />
#float {<br />
width: 150px;<br />
height: 50px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div>this is a test. <br />
<div>this is a test. <br />
<div id="float" class="z">Sized Float</div> <br />
</div> <br />
</div> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==id locator with #==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#banner {<br />
width: 550px;<br />
height: 561px;<br />
overflow: hidden;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="frame"><br />
<div id="banner"><br />
<h1>header 1<br /><span>span</span></h1><br />
</div><!-- end #banner --><br />
<p>...</p><br />
</div><!-- end #frame --><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==tagName#id: use id name plus tag name to mark a style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h2#warning {<br />
background: red;<br />
}<br />
h2#questions {<br />
background: pink;<br />
}<br />
h2#comment {<br />
background: yellow;<br />
}<br />
h2#document {<br />
background: purple;<br />
}<br />
h2#print {<br />
background: gold;<br />
}<br />
h2#search {<br />
background: gray;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2 id="warning">warning</h2> <br />
<h2 id="questions">question</h2> <br />
<h2 id="comment">comment</h2> <br />
<br />
<h2 id="document">document</h2> <br />
<h2 id="print">print</h2> <br />
<h2 id="search">search</h2> <br />
<p>this is a text.</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==To style one paragraph with an extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom:40px;}.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#paragraph3{<br />
margin-bottom:40px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2 class="double-space">This is a header<br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
this is a test. this is a test. <br />
</h2><br />
<p id ="paragraph3">This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source></div>
Admin