【CSS+DIV】设置文字效果
2016-10-14 18:46
483 查看
一、文字样式
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.net.cn/ 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.com/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.com/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p> </body></span>
相关文章推荐
- Jquery结合div+css实现文字间断停顿向上滚动效果
- css 文字自动换行并垂直居中div效果
- 用DIV+CSS实现文字及面板阴影效果
- CSS+DIV 设置圆角边框加阴影效果
- CSS设置div对象盒子里部分文字加粗的实例介绍
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- CSS设置文字在div的中央显示(转)
- div+css设置文字不换行
- css设置图片某个区域为文字区域(让两个div重合)
- div+CSS设置一行内文字超过宽度不换行且不显示
- 看截图:给图片罩上一层半透明文字描述效果(二)DIV+CSS+SPAN
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- 用DIV+CSS布局中,如何设置图片与文字在同一高度?
- div+CSS设置一行内文字超过宽度不换行且不显示
- 用div+css设置文字竖排
- 用css设置文字的描边效果
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- css设置图片某个区域为文字区域(让两个div重合)
- CSS 设置圆角div和阴影效果