集体选择器
选择器的嵌套
字母大小写
一个类似于GOOGLE的标志：
<html> <head> <title>Google</title> <style> <!-- p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> </head> <body> <p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p> </body> </html>
垂直对齐方式：vertical-align
<html> <head> <title>垂直对齐</title> <style> <!-- td.top{ vertical-align:top; } /* 顶端对齐 */ td.bottom{ vertical-align:bottom; } /* 底端对齐 */ td.middle{ vertical-align:middle; } /* 中间对齐 */ --> </style> </head> <body> <table cellpadding="2" cellspacing="0" border="1"> <tr> <td><img src="02.jpg" border="0"></td> <td class="top">垂直对齐方式，top</td> </tr> <tr> <td><img src="02.jpg" border="0"></td> <td class="bottom">垂直对齐方式，bottom</td> </tr> <tr> <td><img src="02.jpg" border="0"></td> <td class="middle">垂直对齐方式，middle</td> </tr> </table> </body> </html>
首字下沉的效果
<html> <head> <title>首字放大</title> <style> <!-- body{ background-color:black; /* 背景色 */ } p{ font-size:15px; /* 文字大小 */ color:white; /* 文字颜色 */ } p span{ font-size:60px; /* 首字大小 */ float:left; /* 首字下沉 */ padding-right:5px; /* 与右边的间隔 */ font-weight:bold; /* 粗体字 */ font-family:黑体; /* 黑体字 */ color:yellow; /* 字体颜色 */ } /* p:first-letter{ font-size:60px; float:left; padding-right:5px; font-weight:bold; font-family:黑体; color:yellow; } p:first-line{ text-decoration:underline; }*/ --> </style> </head> <body> <p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼·春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p> <p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙芋之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说：“此际金凤荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。</p> </body> </html>