http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FStyle_Basics%2FElement_Selector
HTML/CSS/Style Basics/Element Selector - История изменений
2026-04-04T13:25:02Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Element_Selector&diff=5936&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/Element_Selector&diff=5937&oldid=prev
Admin: 1 версия
2010-05-26T08:17:24Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Group style in different css sections==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /><br />
<meta http-equiv="content-language" content="en-us" /><br />
<title>Exercise 1</title><br />
<style type="text/css" media="all"><br />
/* Paragraph text is black and in 12pt font */<br />
p {<br />
font-size: 12pt;<br />
color: black;<br />
}<br />
/* h1, h2 and p are in Times New Roman font */<br />
h1, h2, p {<br />
font-family: "Times New Roman";<br />
}<br />
/* h1 and h2 have green text and 22pt font */<br />
h1, h2 {<br />
color: green;<br />
font-size: 22pt;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1><br />
Heading 1<br />
</h1><br />
<h2><br />
Heading 2<br />
</h2><br />
<p><br />
Some paragraph text.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==h1 and h2 have green text and 22pt font==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /><br />
<meta http-equiv="content-language" content="en-us" /><br />
<style type="text/css" media="all"><br />
<br />
h1, h2 {<br />
color: green;<br />
font-size: 22pt;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1><br />
Heading 1<br />
</h1><br />
<h2><br />
Heading 2<br />
</h2><br />
<p><br />
Some paragraph text.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Mix group selector and element selector==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<title>CSS Positioning Example</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<style rel="stylesheet" type="text/css"><br />
div.page {<br />
border: 1px solid #000000;<br />
margin: 10px;<br />
padding: 10px;<br />
width: 250px;<br />
}<br />
span.explanation {<br />
font-size: 10px;<br />
border: 1px solid #000000;<br />
}<br />
strong {<br />
font-weight: bold;<br />
font-size: 18px;<br />
line-height: 22px;<br />
border: 1px solid #000000;<br />
}<br />
code {<br />
font-size: 12px;<br />
font-weight: bold;<br />
border: 1px solid #000000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="page"><br />
<span class="explanation">The <br />
<code>span</code> <br />
<strong>inline</strong> <br />
</span><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Selectors choose the element to apply formatting to.These may also be grouped together.==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /><br />
<meta http-equiv="content-language" content="en-us" /><br />
<title>Selectors and Grouping</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font-family: Arial;<br />
font-size: 14pt;<br />
}<br />
h1 {<br />
color: black;<br />
border: 5px solid black;<br />
}<br />
h2 {<br />
color: orange;<br />
border: 4px solid orange;<br />
}<br />
h3 {<br />
color: blue;<br />
border: 3px solid blue;<br />
}<br />
h1, h2, h3 {<br />
letter-spacing: 5px;<br />
padding: 10px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1><br />
Heading 1<br />
</h1><br />
<h2><br />
Heading 2<br />
</h2><br />
<h3><br />
Heading 3<br />
</h3><br />
<p><br />
Selectors choose the element to apply formatting to. These may also be <br />
grouped together.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Separate the 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 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
body, p {<br />
font-family: verdana, arial, helvetica, sans-serif;<br />
color: #000;<br />
}<br />
body {<br />
margin: 0px;<br />
padding: 0px;<br />
background-color: #ccc;<br />
}<br />
p {<br />
font-size: 0.7em;<br />
line-height: 1.4em;<br />
}<br />
#MainText {<br />
padding: 10px;<br />
margin: 5px;<br />
background-color: #fff;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="MainText"><br />
<p>this is a test. this is a test. this is a test. this is a test. .</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for div, h1 and p together==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<title>CSS Positioning Example</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<style rel="stylesheet" type="text/css"><br />
div,h1,p {<br />
font-family: arial, verdana, sans-serif;<br />
border: 1px solid #000000;<br />
margin: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="page"><br />
<h1>This is the heading</h1><br />
<p>Here is paragraph one.</p><br />
<p>Here is paragraph two.</p><br />
<p>Here is paragraph three.</p><br />
</div><br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for more than one tags==<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" lang="en" xml:lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h1, h2, h3 {<br />
font-size: 200%;<br />
background-image: url(bkgd2.jpg);<br />
background-repeat: no-repeat;<br />
background-attachment: fixed;<br />
background-position: center;<br />
padding: 1.5em;<br />
text-align: center;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>header 1</h1><br />
<p>This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Style reuse across tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><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"xml: lang="en"lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
<br />
body, div, p, td, ol, ul, li, h1, h2, h3 {<br />
font-family: verdana, arial, helvetica, sans-serif;<br />
color: #000;<br />
}<br />
p {<br />
font-size: 0.7em;<br />
line-height: 1.4em;<br />
}<br />
#MainText {<br />
padding: 10px;<br />
margin: 5px;<br />
background-color: #fff;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="MainText"><br />
<p>this is a test. this is a test. this is a test. this is a test. .</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Styles are shared between h2 and label elements that appear inside of a form==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
form h2, form label {<br />
font-size: 15px;<br />
padding: 3px;<br />
}<br />
<br />
</style><br />
<title>Feedback Form - Widgets and What"s-its</title><br />
</head><br />
<body><br />
<h1>Widgets and What"s-its</h1><br />
<form><br />
<h2>Tell us what"s on your mind..</h2><br />
<div><br />
<label for="feedback[name]">Name:</label><br />
<input type="text" size="25" name="feedback[name]" /><br />
</div><br />
<div><br />
<label for="feedback[email]">Email:</label><br />
<input type="text" size="25" name="feedback[email]" /><br />
</div><br />
<div><br />
<label for="feedback[address]">Address:</label><br />
<textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[message]">Comments:</label><br />
<textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea><br />
</div><br />
<div><br />
<label for="feedback[heard]">How"d you hear about us?</label> <br />
<select name="feedback[heard]"><br />
<option value="">Choose...</option><br />
<option value="newspaper">Newspaper</option><br />
<option value="magazine">Magazine</option><br />
<option value="television">Television</option><br />
<option value="radio">Radio</option><br />
<option value="other">Other</option><br />
</select><br />
</div><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table in a DIV tag==<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 />
.center {<br />
text-align: center;<br />
}<br />
.center table {<br />
width: 50%;<br />
margin: 0 auto;<br />
text-align: left;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2 id="warning">Lorem ipsum dolor sit amet</h2> <br />
<div class="center"><br />
<table width="50%" border="1" cellpadding="30"><br />
<tr><br />
<td>This is the first cell</td><br />
<td>This is the second cell</td><br />
</tr><br />
<tr><br />
<td>This is the third cell, it"s under the first cell</td><br />
<td>This is the fourth cell, it"s under the second cell.</td><br />
</tr><br />
</table><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Tag style selector==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> exercise 4-1 </title><br />
<style type="text/css" media="all"><br />
body {<br />
font-size: 12px;<br />
}<br />
h1 {<br />
font-size: 2.1em;<br />
background: pink;<br />
padding: 1em;<br />
border: thin solid black;<br />
}<br />
p {<br />
font-size: 0.9em;<br />
padding: 1em;<br />
border: thin solid black;<br />
background: gray;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1><br />
This is a heading<br />
</h1><br />
<p><br />
This is a paragraph of text.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==To style all elements in a document with no bottom margin using * {margin-bottom:0;}==<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 />
* {<br />
margin-bottom:0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>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>This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==To style all paragraphs in a document with a bottom margin of 10 pixels using p{margin-bottom:10px;}.==<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 />
p {<br />
margin-bottom:10px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>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>This is a text.</p><br />
</body><br />
</html><br />
</source></div>
Admin