http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FCSS_Controls%2Fdrop_cap
HTML/CSS/CSS Controls/drop cap - История изменений
2026-04-05T11:48:23Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/drop_cap&diff=5394&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/CSS_Controls/drop_cap&diff=5395&oldid=prev
Admin: 1 версия
2010-05-26T08:16:51Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Creating a drop cap using a CSS pseudo-element==<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" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Creating a drop cap using a CSS pseudo-element</title><br />
<style type="text/css" media="screen"><br />
<br />
h1+p:first-letter {<br />
float: left;<br />
font-size: 3em;<br />
line-height: 1.0em;<br />
margin-top: -3px;<br />
margin-right: 0.15em;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="wrapper"><br />
<h1>This is the header</h1><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 />
==Creating a drop cap with span elements and CSS==<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" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Creating a drop cap with span elements and CSS</title><br />
<style type="text/css" media="screen"><br />
h1+p {<br />
font-weight: bold;<br />
color: #222222;<br />
}<br />
.dropCap span {<br />
font-size: 4.8em;<br />
line-height: 1em;<br />
} <br />
<br />
.dropCap {<br />
float: left;<br />
height: 4.7em;<br />
margin-top: -0.2em;<br />
margin-left: -0.4em;<br />
margin-right: 0.5em;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="wrapper"><br />
<h1>Article heading</h1><br />
<p><span class="dropCap"><span>T</span></span>is a test. this is a test. <br />
this is a test. <br />
this is a test. <br />
this is a test. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==drop cap is aligned up and right, and the text is aligned to the right.==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html"; charset="utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myDrop {<br />
float: left;<br />
position: relative;<br />
top: -0.35em;<br />
margin-top: 40px;<br />
margin-left: 20px;<br />
margin-right: 5px;<br />
margin-bottom: -0.7em;<br />
font-size: 80px;<br />
line-height: normal;<br />
font-weight: bold;<br />
color: white;<br />
background-color: black;<br />
padding: 20px 20px 20px 20px;<br />
border: 2px groove black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<span class="myDrop">F</span>loated Drop Cap.<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==DROP CAPS: Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myDrop {<br />
font-size: 40px;<br />
line-height: normal;<br />
font-weight: bold;<br />
vertical-align: baseline;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><span class="myDrop">A</span>bc this is a test. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==DROP CAPS: The drop cap is aligned to the middle of the text. Subsequent lines are not indented.==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myDrop {<br />
font-size: 40px;<br />
line-height: 0.8em;<br />
font-weight: bold;<br />
vertical-align: middle;<br />
background-color: red;<br />
padding: 0 2px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><span class="myDrop">A</span>bc this is a test. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==DROP CAPS: The drop cap is offset to the top of the text. Subsequent lines are not indented.==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myDrop {<br />
font-size: 40px;<br />
line-height: normal;<br />
font-weight: bold;<br />
font-style: italic;<br />
vertical-align: -0.45em;<br />
color: white;<br />
background-color: black;<br />
background-image: url("http://www.wbex/com/style/logo.png");<br />
padding: 0 4px;<br />
border: 1px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><span class="myDrop">A</span>bc this is a test. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Drop cap with lineheight, font size and background==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.dropCap {<br />
float: left;<br />
background: #aaa;<br />
color: #ffffff;<br />
font: 300% sans-serif;<br />
line-height: 100%;<br />
margin: 0 0.2em 0 0;<br />
padding: 0.1em 0.2em;<br />
border: 1px solid #444;<br />
background: #b4b4b4;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="dropCap">T</span>his 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 />
==Drop cap with span==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .indent {<br />
position: relative;<br />
margin-left: 100px;<br />
margin-top: 20px;<br />
}<br />
* .marginal-dropcap {<br />
position: absolute;<br />
left: -77px;<br />
top: -16px;<br />
font-size: 80px;<br />
font-weight: bold;<br />
color: black;<br />
background-color: red;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="indent"><span class="marginal-dropcap">M</span>arginal Drop Cap. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hanging DROP CAPS==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .hanging-indent {<br />
padding-left: 50px;<br />
text-indent: -50px;<br />
margin-top: -25px;<br />
}<br />
* .hanging-dropcap {<br />
position: relative;<br />
top: 0.55em;<br />
left: -3px;<br />
font-size: 60px;<br />
line-height: 60px;<br />
font-weight: bold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="hanging-indent"><span class="hanging-dropcap">H</span>anging <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Padded Drop Cap==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html"; charset="utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .padded-dropcap1 {<br />
padding-left: 5px;<br />
padding-right: 10px;<br />
float: left;<br />
position: relative;<br />
top: -0.25em;<br />
margin-bottom: -0.2em;<br />
margin-left: -3px;<br />
margin-right: 3px;<br />
font-size: 84px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="padded-dropcap1">P</span>added Floating Drop Cap. </p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This drop cap is lowered without affecting the height of the line.==<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"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myDrop {<br />
float: left;<br />
position: relative;<br />
top: -0.25em;<br />
margin-left: -3px;<br />
margin-right: 3px;<br />
margin-bottom: -0.6em;<br />
font-size: 80px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<span class="myDrop">F</span>loated Drop Cap.<br />
<br />
</body><br />
</html><br />
</source></div>
Admin