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

ttx9n

网页制作Webjx文章简介：有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。 CSS功能的强大在webjx.com中早已经展现很
有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。
CSS功能的强大在jb51.net中早已经展现很多，而有关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.jb51.net</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 typography Close line height and letter spacing, almost connected lines...</p> <p class="letters2">Potential use for magazine style typography Close line height and letter spacing, almost connected lines...</p> <p class="letters3">Potential use for magazine style typography Close 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="https://www.jb51.net">Typography Examples by Ross Johnson - www.jb51.net</a></p> </html>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]

.l4

为全额万千瓦

平平安安

问问问企鹅哇哇哇哇哇

i1efp6c

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

thywok

了乐趣了去了去了去了去了

pwseqn1h

借款金额看了就立刻

adm1n

额UI废物iuhfujewfiewnnfen

ppwxcg

啦啦啦啦啦啦哈哈哈

dingzhi521

我找了挺久终于找到了

a971560

天天源码社区www.tiantianym.com