码迷,mamicode.com
首页 > 其他好文 > 详细

设置样式

时间:2016-05-18 21:36:13      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

设置粗体,在css样式中设置a{font-weight:bold;}(为a标签设置粗体)

设置字体样式,在css样式中设置span{font-family:"Microsoft Yahei";}

设置斜体:在css样式中设置p{font-style:italic;}也可在body标签中设置<em>文字</em>为文字设置为斜体

为文字增加下划线强调:在css样式中加入text-decoration:underline,(span{text-decoration:underline;}

为文字增加删除线:在css样式中加入(.oldPrice{text-decoration:line-through;})

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5 <title>删除样式</title>
 6 <style type="text/css">
 7 .oldPrice{text-decoration:line-through;}
 8 </style>
 9 </head>
10 <body>
11 <p>原价:<span class="oldPrice">300</span>元 现价:230 元</p> 
12 </body>
13 </html>

为段落设置2缩进:在css样式中p{text-indent:2em;}(indent表示缩进,2em表示文字的2倍大小,text和indent间的空格线不能去掉)

设置行间距:在css中p{line-height:2em;}

设置中文间距或字母间距在css样式中h1{letter-spacing:10px;},设置单词间的间距h1{word-spacing:10px;}

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>字间距</title>
 6 <style type="text/css">
 7 h1{letter-spacing:20px;}
 8 </style>
 9 </head>
10 <body>
11 <h1>hello world!你好!</h1>
12 </body>
13 </html>

text-align:让内容居中,如果用img{text-align:center;}(因为img没有包含内容,所以不能居中)用div{text-align:center;}(div标签包含img,故能让img居中),text-align只能让块级元素居中,而img是内联块元素,

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>对齐</title>
 6 <style type="text/css">
 7 div{text-align:center;}
 8 </style>
 9 </head>
10 <body>
11 <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
12 </body>
13 </html>

 

设置样式

标签:

原文地址:http://www.cnblogs.com/633sylss/p/5506491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!