CSS教程:CSS控制网页文字排版实例

2024-07-11 08:22:04

字体：大中小

来源：转载

供稿：网友

css功能的强大在VeVb.com中早已经展现很多，而有关css基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的css排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。

h3.reflect_1 { color: #333333; border-bottom: 6px solid #dddddd; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 150%; }
h3.reflect_2 { color: #cecece; margin: 0; line-height: .6em; border-top: 1px solid #eeeeee; padding: 0 0 0 10px; font-size: 150%;}

h3.line_drop { font-family:"trebuchet ms", garamond, georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;
letter-spacing: -2px; }

h3.elegant { letter-spacing: -2px; font-family:georgia, "times new roman", times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }

h3.handwriting { font-style: italic; font-weight: bold; font-family: "comic sans ms"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"trebuchet ms", garamond, georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "comic sans ms"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }

h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #ffff66; }

h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }
h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}

p.letters { line-height: .64em; letter-spacing: -2px; font-family: "courier new", courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "times new roman", times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: georgia, "times new roman", times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #cccccc; width: auto; line-height: 1em; }

h3.newspaper span { font-family: georgia, "times new roman", times, serif; }

h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #cccccc; width: auto; line-height: 1em; font-variant: small-caps;}

h3.funky { font-family: "trebuchet ms", garamond, georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}
h3.funky span { letter-spacing: 5px;}

h3.el { font-family: verdana, arial, helvetica, sans-serif; color: #bbbbbb; border-bottom: #cccccc 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}

h3.num_blend { font-size: 36px; font-weight: 100;}

h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}

h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "courier new", courier, monospace; font-weight: 100;}

h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: impact, arial, verdana; text-transform: uppercase; border-bottom: #cc0000 10px solid; font-weight: 100; }
h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: impact, arial, verdana; text-transform: uppercase; position: relative; font-weight: 100; }

h3.g { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #133bc1; }
h3.o1 { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e33b21; }
h3.o2 { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e6b500; }
h3.l { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #4bce54; }
h3.lg { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #0048e3; }
h3.e { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e33b21; font-style: italic; }

.gray { background: #000000; padding: 20px; }

h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: garamond, georgia, "times new roman";
letter-spacing: .5em; font-weight: 100; color: #ffffff; border-top: 1px solid #cccccc; border-bottom: #cccccc 1px solid; width: 600px; text-align: center; }

h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: verdana, arial, helvetica, sans-serif; }
h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }

h3.y1 { float: left; font-size: 500%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 0;
font-weight: 0; color: #ff0000; }

h3.y2 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #ff0000; }

h3.y3 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #ff0000; }

h3.y4 { float: left; font-size: 300%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #ff0000; }

h3.y5 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #ff0000; }

h3.y6 { float: left; font-size: 350%; font-family: verdana, arial, helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #ff0000; }

p.tag a { font-size: 85%; text-align: center; color: #ff3300; }
p.tag a:hover { background: #ffff66; }

运行代码框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>css typography - examples for css and web typography - www.VeVb.com</title><style type="text/css">html, body { width: 75%; }h3.reflect_1 { color: #333333; border-bottom: 6px solid #dddddd; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 150%; }h3.reflect_2 { color: #cecece; margin: 0; line-height: .6em; border-top: 1px solid #eeeeee; padding: 0 0 0 10px; font-size: 150%;}h3.line_drop { font-family:"trebuchet ms", garamond, georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;letter-spacing: -2px; }h3.elegant { letter-spacing: -2px; font-family:georgia, "times new roman", times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }h3.handwriting { font-style: italic; font-weight: bold; font-family: "comic sans ms"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"trebuchet ms", garamond, georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "comic sans ms"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #ffff66; }h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}p.letters { line-height: .64em; letter-spacing: -2px; font-family: "courier new", courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "times new roman", times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: georgia, "times new roman", times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #cccccc; width: auto; line-height: 1em; }h3.newspaper span { font-family: georgia, "times new roman", times, serif; }h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #cccccc; width: auto; line-height: 1em; font-variant: small-caps;}h3.funky { font-family: "trebuchet ms", garamond, georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}h3.funky span { letter-spacing: 5px;}h3.el { font-family: verdana, arial, helvetica, sans-serif; color: #bbbbbb; border-bottom: #cccccc 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}h3.num_blend { font-size: 36px; font-weight: 100;}h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "courier new", courier, monospace; font-weight: 100;}h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: impact, arial, verdana; text-transform: uppercase; border-bottom: #cc0000 10px solid; font-weight: 100; }h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: impact, arial, verdana; text-transform: uppercase; position: relative; font-weight: 100; }h3.g { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #133bc1; }h3.o1 { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e33b21; }h3.o2 { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e6b500; }h3.l { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #4bce54; }h3.lg { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #0048e3; }h3.e { font-size: 500%; font-family: georgia, "times new roman", times, serif; font-weight: 100; float: left; margin: 0; color: #e33b21; font-style: italic; }.gray { background: #000000; padding: 20px; }h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: garamond, georgia, "times new roman";letter-spacing: .5em; font-weight: 100; color: #ffffff; border-top: 1px solid #cccccc; border-bottom: #cccccc 1px solid; width: 600px; text-align: center; }h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: verdana, arial, helvetica, sans-serif; }h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }h3.y1 { float: left; font-size: 500%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 0;font-weight: 0; color: #ff0000; }h3.y2 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #ff0000; }h3.y3 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #ff0000; }h3.y4 { float: left; font-size: 300%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #ff0000; }h3.y5 { float: left; font-size: 350%; font-family: garamond, georgia, "times new roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #ff0000; }h3.y6 { float: left; font-size: 350%; font-family: verdana, arial, helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #ff0000; }p.tag a { font-size: 85%; text-align: center; color: #ff3300; }p.tag a:hover { background: #ffff66; }</style></head><body><br /><h3 class="reflect_1">kindek inc</h3><h3 class="reflect_2">kindek inc</h3><h3 class="line_drop">web design rockstarz</h3><h3 class="elegant">the chapple de la ross johnson</h3><h3 class="handwriting">don't forget to turn off the lights when you leave!</h3><h3 class="handwriting2">don't forget to turn off the lights when you leave!</h3><h3 class="handwriting3">don't forget to turn off the lights when you leave!</h3><h3 class="capital">c<span>aptivating, </span>c<span>reative</span></h3><h3 class="capital">l<span>ogan's </span>l<span>itigation</span></h3><h3 class="capital">z<span>efer </span>z<span>oo</span></h3><h3 class="capital">b<span>est </span>b<span>uilding</span></h3><p class="letters">potential use for magazine style typographyclose line height and letter spacing,almost connected lines...</p><p class="letters2">potential use for magazine style typographyclose line height and letter spacing,almost connected lines...</p><p class="letters3">potential use for magazine style typographyclose line height and letter spacing,almost connected lines...</p><h3 class="newspaper"><span>webdesign</span> times</h3><h3 class="newspaper2">webdesign times</h3><h3 class="funky">fun<strong><em>k</em></strong>y <br /><span> we<em>b<strong>d</strong></em>esign!</span></h3><h3 class="el">saturday march 19th 2046</h3><h3 class="num_blend">rock<span>5</span>tar and a de<span>51</span>gner</h3><h3 class="scaps">more typerighter style, less cluttered.</h3><h3 class="gr">gray's</h3><h3 class="gr2"> anatomy</h3><br style="clear: both;" /><h3 class="g">g</h3><h3 class="o1">o</h3><h3 class="o2">o</h3><h3 class="lg">g</h3><h3 class="l">l</h3><h3 class="e">e</h3><br style="clear: both;" /><div class="gray"><h3 class="gray2">gray's anatomy</h3></div><br style="clear: both;" /><h3 class="fed">fed<span>ex</span></h3><h3 class="y1">y</h3><h3 class="y2">a</h3><h3 class="y3">h</h3><h3 class="y4">o</h3><h3 class="y5">o</h3><h3 class="y6">!</h3><br style="clear: both;" /><p class="tag"><a href="http://www.VeVb.com">typography examples by ross johnson - www.VeVb.com</a></p></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

上一篇：CSS教程:条件注释的格式以及作用

下一篇：div层被flash层遮盖问题解决思路