http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2FClass_Selector
HTML/CSS/Style Basics/Class Selector - История изменений
2026-04-04T18:51:41Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Class_Selector&diff=5938&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/Class_Selector&diff=5939&oldid=prev
Admin: 1 версия
2010-05-26T08:17:25Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add style to both ul and li==<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 />
ul, li {<br />
display: inline;<br />
margin: 0;<br />
padding: 0;<br />
font-weight: bold; <br />
font-style: italic;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h3><br />
Table of Contents<br />
</h3><br />
<p><br />
sections:<br />
</p><br />
<ul><br />
<li>D</li><br />
<li>P</li><br />
<li>B</li><br />
<li>W</li><br />
<li class="last">Make One</li><br />
</ul><br />
<p><br />
If there are any objections to how these sections are divided, <br />
please let <a href="n@h.ru">N</a> know about <br />
it.<br />
</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Anchor with class name==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version = "1.0"?><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 />
<style type = "text/css"><br />
a.nodec { text-decoration: none }<br />
<br />
</style><br />
</head><br />
<body><br />
<h1>Shopping list for <em>Monday</em>:</h1><br />
<ul><br />
<li>M</li><br />
<li>B<br />
<ul><br />
<li>W</li><br />
<li>R</li><br />
<li>W</li><br />
</ul><br />
</li><br />
<li>R</li><br />
<li>P</li><br />
<li>P<em>this is a test. </em></li><br />
</ul><br />
<p><a class = "nodec" href = "http://www.wbex.ru"><br />
this is a test. </a></p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==assign multiple classes to an element by putting multiple class names in an element"s class attribute==<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 />
.paragraph2{<br />
margin-bottom:40px;<br />
}<br />
.colorSetting{<br />
color:#ccc<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 class="paragraph2 colorSetting">This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Class assigns a user-defined semantic meaning to an element==<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 />
.paragraph2{<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 class="paragraph2">This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==class for a tag with dot operator==<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 />
p.normal {<br />
padding: 0;<br />
margin-left: 0;<br />
margin-right: 0;<br />
}<br />
p.large {<br />
margin-left: 33%;<br />
margin-right: 5%;<br />
}<br />
p.medium {<br />
margin-left: 15%;<br />
margin-right: 33%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>The heading for this page</h1><br />
<p class="normal">normal class.</p><br />
<p class="large">large class.</p><br />
<p class="medium ">medium class</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==class name + nested tag names==<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>Set text indent to 37%</title><br />
<style type="text/css"><br />
p {<br />
text-indent: 37%;<br />
line-height: 1em;<br />
}<br />
p span.initcap {<br />
font-size: 6em;<br />
line-height: 0.6em;<br />
font-weight: bold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="initcap">O</span>nline. This is test. This is test. <br />
This is test. This is test. This is test. This is test. This is test. <br />
This is test. This is test. This is test. This is test. This is test. <br />
This is test. This is test. This is test. This is test. This is test. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Combined 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 />
* .button {<br />
width: 175px;<br />
padding: 3px 10px;<br />
margin: 20px 0;<br />
text-align: center;<br />
font-weight: bold;<br />
margin-left: 50px;<br />
line-height: normal;<br />
}<br />
* .button.rounded {<br />
color: darkblue;<br />
background-color: white;<br />
line-height: 45px;<br />
margin-top: 30px;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat center<br />
center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<h1>Subclass Selector</h1> <br />
<div> <br />
<p class="button rounded">Rounded</p> <br />
</div> <br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Combine style together==<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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Untitled Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
.copytext1, .copytext2 {<br />
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;<br />
font-weight: normal;<br />
font-size: 11px;<br />
}<br />
.color1 {color:red}<br />
.color2 {color:blue}<br />
.color3 {color:green}<br />
.color4 {color:pink}<br />
.color5 {color:black}<br />
.copytext2 {font-weight:bold;}<br />
p {margin:10px 0;}<br />
</style><br />
</head><br />
<body><br />
<h1>Multiple classes example</h1><br />
<p class="copytext1 color1">Some text that is red</p><br />
<p class="copytext2 color1">Some text that is bold red</p><br />
<p class="copytext1 color2">Some text that is blue</p><br />
<p class="copytext2 color2">Some text that is bold blue</p><br />
<p class="copytext1 color3">Some text that is green</p><br />
<p class="copytext2 color3">Some text that is bold green</p><br />
<p class="copytext1 color4">Some text that is pink</p><br />
<p class="copytext2 color4">Some text that is bold pink</p><br />
<p class="copytext1 color5">Some text that is black</p><br />
<p class="copytext2 color5">Some text that is bold black</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Create a class inside blockquote==<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 />
blockquote .source {<br />
text-align: right;<br />
font-style: normal;<br />
margin-right: 2em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p>One</p><br />
<blockquote><br />
<p>Two</p><br />
<div class="source"><br />
Three<br />
</div><br />
</blockquote><br />
<p>Four</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==init capital==<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>init capital</title><br />
<style type="text/css"><br />
p .initcap {<br />
font-size: 1.2em;<br />
background-color: black;<br />
color: white; <br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="initcap">O</span>nline. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Specify two attributes in class==<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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Untitled Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
ul.rtl {<br />
direction: rtl; <br />
}<br />
.t {text-align:left;}<br />
</style><br />
</head><br />
<body><br />
<ul class="rtl t"><br />
<li>Hello</li><br />
<li>Hello hello</li><br />
<li>Hello Hi</li><br />
<li>Hello Hello</li><br />
<li>Hello HI</li><br />
<li>Hello Hello</li><br />
<li>Hello Hi</li><br />
<li>Hello</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Style for HTML tag in a DIV with class name==<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 />
p.hanging {<br />
text-indent: -5em;<br />
margin-left: 5em;<br />
}<br />
#content p.hanging {<br />
text-indent: -60px;<br />
margin: 0 0 0 60px;<br />
padding: 0;<br />
}<br />
#content h3 {<br />
text-indent: -60px;<br />
margin: 0 0 0 60px;<br />
padding: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<h3>Once more time with feeling</h3><br />
<p class="hanging">handing;</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Subclass Selector==<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 />
* .button {<br />
width: 175px;<br />
padding: 3px 10px;<br />
margin: 20px 0;<br />
text-align: center;<br />
font-weight: bold;<br />
margin-left: 50px;<br />
line-height: normal;<br />
}<br />
* .button.square {<br />
color: darkblue;<br />
background-color: #ccc;<br />
border-left: 1px solid dimgray;<br />
border-right: 2px solid black;<br />
border-top: 1px solid dimgray;<br />
border-bottom: 2px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<h1>Subclass Selector</h1> <br />
<div> <br />
<p class="button square">Square</p> <br />
<br />
</div> <br />
<br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==To style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
*.double-space{<br />
margin-bottom:2em;<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 class="double-space">This is a text.</p><br />
<p>This is a text.</p><br />
</body><br />
</html><br />
</source></div>
Admin