文字效果"/>
【CSS+DIV】设置文字效果
一、文字样式
1、字体、大小、颜色、粗细、斜体
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字字体</title>
<style>
<!--
h2{font-family:黑体, 幼圆;
}
p{font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{font-family:楷体_GB2312, "Times New Roman";
}
-->
</style></head><body><h2>立 春</h2><p>自秦代以来，我国就一直以立春作为春季的开始。立春是从天文上来划分的，而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5天为一候）平均气温10℃至22℃的时段。</p><p class="kaiti">作者: isaac</p>
</body></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style></head><body><p class="inch">文字大小，0.5in</p><p class="cm">文字大小，0.5cm</p><p class="mm">文字大小，4mm</p><p class="pt">文字大小，12pt</p><p class="pc">文字大小，2pc</p>
</body>
</span><span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字颜色</title>
<style>
<!--
h2{ color:rgb(0%,0%,80%); }
p{color:#333333;font-size:13px;
}
p span{ color:blue; }
-->
</style></head><body><h2>冬至的由来</h2><p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这表明古人对<span>冬至</span>十分重视。人们认为<span>冬至</span>是阴阳二气的自然转化，是上天赐予的福气。汉朝以<span>冬至</span>为“冬节”，官府要举行祝贺仪式称为“贺冬”，例行放假。《后汉书》中有这样的记载：“<span>冬至</span>前后，君子安身静体，百官绝事，不听政，择吉辰而后省事。”所以这天朝庭上下要放假休息，军队待命，边塞闭关，商旅停业，亲朋各以美食相赠，相互拜访，欢乐地过一个“安身静体”的节日。</p><p>唐、宋时期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在这天要到郊外举行祭天大典，百姓在这一天要向父母尊长祭拜，现在仍有一些地方在<span>冬至</span>这天过节庆贺。</p>
</body></span><span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字粗体</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
span.four{ font-weight:400; }
span.five{ font-weight:500; }
span.six{ font-weight:600; }
span.seven{ font-weight:700; }
span.eight{ font-weight:800; }
span.nine{ font-weight:900; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style></head><body><h1>文字<span>粗</span>体</h1><span class="one">文字粗细:100</span><span class="two">文字粗细:200</span><span class="three">文字粗细:300</span><span class="four">文字粗细:400</span><span class="five">文字粗细:500</span><span class="six">文字粗细:600</span><span class="seven">文字粗细:700</span><span class="eight">文字粗细:800</span><span class="nine">文字粗细:900</span><span class="ten">文字粗细:bold</span><span class="eleven">文字粗细:normal</span>
</body></span></pre><pre code_snippet_id="1929513" snippet_file_name="blog_20161014_6_7761193" name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字斜体</title>
<style>
<!--
h1{ font-style:italic; } /* 设置斜体 */
h1 span{ font-style:normal; } /* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style></head><body><h1>文字<span>斜</span>体</h1><p class="one">文字斜体</p><p class="two">文字斜体</p>
</body></span>2、下划线、顶划线、删除线
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>文字下划线、顶划线、删除线</title>
<style>
<!--
p.one{ text-decoration:underline; } /* 下划线 */
p.two{ text-decoration:overline; } /* 顶划线 */
p.three{ text-decoration:line-through; } /* 删除线 */
p.four{ text-decoration:blink; } /* 闪烁 */
-->
</style></head><body><p class="one">下划线文字，下划线文字</p><p class="two">顶划线文字，顶划线文字</p><p class="three">删除线文字，删除线文字</p><p class="four">文字闪烁</p><p>正常文字对比</p>
</body></span>3、英文字母大小写
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>英文字母大小写</title>
<style>
<!--
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 单词首字大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
p.three{ text-transform:lowercase; } /* 全部小写 */
-->
</style></head><body> <p class="one">quick brown fox jumps over the lazy dog.</p><p class="two">quick brown fox jumps over the lazy dog.</p><p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p>
</body></span>二、文字实例：模拟Google公司Logo
<span style="font-family:KaiTi_GB2312;font-size:18px;"><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></span>
三、CSS段落文字
1、水平、垂直对齐
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>水平对齐</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左对齐 */
p.right{ text-align:right; } /* 右对齐 */
p.center{ text-align:center; } /* 居中对齐 */
p.justify{ text-align:justify; } /* 两端对齐 */
-->
</style></head><body> <p class="left">这个段落采用左对齐的方式，text-align:left，因此文字都采用左对齐。<br>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白</p><p class="right">这个段落采用右对齐的方式，text-align:right，因此文字都采用右对齐。<br>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白</p><p class="center">这个段落采用居中对齐的方式，text-align:center，因此文字都采用居中对齐。<br>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。<br>李白</p><p class="justify">这个段落采用左对齐的方式，text-align:justify，因此文字都采用左对齐。床前明月光，疑是地上霜。举头望明月，低头思故乡。<br>李白</p>
</body></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><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></span>2、行间距、字间距
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>行间距</title>
<style>
<!--
p.one{font-size:10pt;line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{line-height: 1.5em; /* 行间距，相对数值 */
}
-->
</style></head>
<body><p class="one">秋分，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180。一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p><p class="second">秋分时节，我国长江流域及其以北的广大地区，均先后进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥菊黄，秋分是美好宜人的时节。</p><p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p></body></span>3、首行放大
<span style="font-family:KaiTi_GB2312;font-size:18px;"><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></span>四、段落实例：百度搜索
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>段落实例:Baidu搜索</title>
<style>
<!--
p{margin:0px;font-family:Arial; /* 定义所有字体 */
}
p.title{padding-bottom:0px;font-size:16px;
}
p.content{padding-top:3px; /* 标题与内容的距离 */font-size:13px; /* 内容的字体大小 */line-height:18px;
}
p.link{font-size:13px;color:#008000; /* 网址颜色 */padding-bottom:25px;
}
span.search{color:#c60a00; /* 关键字颜色 */
}
span.quick{color:#666666; /* 快照颜色 */text-decoration:underline; /* 快照下划线 */
}
p.title span.search{text-decoration:underline; /* 标题处关键字的下划线 */
}
-->
</style></head>
<body><p class="title"><a href="#">中国<span class="search">春节</span>网</a></p><p class="content">欢迎光临中国<span class="search">春节</span>网,您现在的位置是中国<span class="search">春节</span>网首页! "年"兽的传说 熬年的传说 万年创建历法说 中国古代历法发展 <span class="search">春节</span>:传统和现代 元宵灯节源于何时? 猜灯谜的来由 十二生肖的源流、排列与信仰 祭灶 扫尘 贴春联 年画 倒贴福字 除夕夜 ...</p><p class="link">www.chunjie/ 46K 2006-12-18 - <span class="quick">百度快照</span></p><p class="title"><a href="#">喜迎2004<span class="search">春节</span>_TOM新闻</a></p><p class="content">·<span class="search">春节</span>流行三类“拜年短信”:猴、祝福、个性 ·<span class="search">春节</span>期间电视节目早知道(1月19日-1月25日) ·猴年贺岁:短信 彩信...·TOM游戏与大家同过快乐<span class="search">春节</span> 一起来玩免费网游! ·“对对联 贺新春” 玩乐吧强档推荐 许个愿吧 ·<span class="search">春节</span>听觉搜爆-...</p><p class="link">news.tom/hot/2004year/ 82K 2004-1-25 - <span class="quick">百度快照</span></p><p class="title"><a href="#"><span class="search">春节</span> 我把money献给你_阿里巴巴</a></p><p class="content">编者按:新年、<span class="search">春节</span>、情人节,一年中时尚男女血拼的最佳时节。商家借节造势,推出的揽客“花招”也是层出不穷…… 新春最受欢迎的开...·<span class="search">春节</span>期间:这些生意好赚钱(一)(图)01/20 ·鼎大祥“红腰带吉祥裤”销售红火01/18 <span class="search">春节</span> 这些生意好...</p><p class="link">info.china.alibaba/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p>
</body></span>
更多推荐
【CSS+DIV】设置文字效果
发布评论