码迷,mamicode.com
首页 > Web开发 > 详细

HTML 样式属性

时间:2015-12-01 22:43:59      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

 1 @charset "utf-8";
 2 /* CSS Document */
 3 <style>
 4 p{
 5     /*背景与前景*/
 6 background-color:#000;/*背景色,样式表优先级高*/
 7 background-image:none;/*设置背景图片(默认)*/
 8 background-attachment:fixed;/*背景是固定的,不随字体滚动*/
 9 background-repeat:no-repeat;/*不平铺,regeat 平铺,regeat-x-y横向平铺 纵向平铺*/
10 background-position:center;/*背景图居中,设置背景图位置时,regeat必须为no-regeat*/
11 background-position:right top;/*背景图放右上角(防卫可以自己更改)/
12 background-position:left 100px top 200px;/*离左边100像素,离上边200像素(可以设为负值)*/
13 /*字体*/
14 font-family:"新宋体";/*字体,常用微软雅黑.宋体*/
15 font-size:18px;/*字体大小.常用像素12px,14px,18px,还可以用"em","2.5em"即默认字体的2.5倍,还可以用百分比*/
16 font-weight:bold;/*加粗,normal正常*/
17 font-style:italic;/*倾斜,normal不倾斜*/
18 color:#000;/*颜色*/
19 text-decoration:underline;/*下划线,overline上划线,line-through删除线,none去下划线*/
20 text-align:center;/*(水平对齐)居中对齐,left左对齐,right右对齐*/
21 text-indent:28px;/*首行缩进量*/
22 vertical-align:middle;/*(垂直对齐)居中对齐,top上对齐,bottom底部对齐,一般设置行高后使用*/
23 line-height:24px;/*行高,一般为1.5-2倍字体大小*/
24 display:none;/*不显示*/
25 display:inline-block;/*,inline-block 显示为块,不自动换行,宽高可设*/
26 display:block;/*显示为块,自动换行*/
27 display:inline;/*效果同span标签,不自动换行,宽高不可设*/
28 visibility:hidden;/*可视性,hidden隐藏但是占空间,visible 显示*/
29 /*边界与边框*/
30 /*border(表格边框,样式等)margin(表外间距)padding(内容与单元格间距)*/
31 border:5px solid blue;/*四边框,5像素,实线,蓝色*/
32 border-width::5px;/*边框5像素*/
33 border-style:solid;/*实线边框*/
34 border-color:blue;/*蓝色*/
35 border-top:5px solid blue;/*上边框:5像素,实线,蓝色(分写同上)*/
36 border-bottom:5px solid blue;/*下边框:5像素,实线,蓝色(分写同上)*/
37 border-left:5px solid blue;/*左边框:5像素,实线,蓝色(分写同上)*/
38 border-right:5px solid blue;/*右边框:5像素,实线,蓝色(分写同上)*/
39 margin:10px;/*四边外边框宽度为10px,auto 居中*/
40 margin-top:10px;/*上边外边框宽度为10px,其他三遍类似*/
41 margin:20px 0px 20px 0px;/*上-右-下-左.内容与边框的四边距顺时针顺序*/
42 padding:10px;/*内容与边框的四边间距为10px*/
43 padding-top:10px;/*内容与边框的上间距为10px,其他三遍类似*/
44 padding::20px 0px 20px 0px;/*上-右-下-左,内容与边框的四边间距顺时针顺序*/
45 /*列表与方块*/
46 /*width,height(top,bottom,left,right)只有在绝对坐标情况下才有用*/
47 list-style:none;/*取消序号*/
48 list-style:circle;/*序号变为圆圈,样式相当于无序*/
49 list-style-image:url;/*图片做序号*/
50 list-style-position:outside;/*序号在内容外*/
51 list-style-position:inside;/*序号跟内容一起*/
52 
53 
54 }
55 </style>

 

HTML 样式属性

标签:

原文地址:http://www.cnblogs.com/jirser/p/5011330.html

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