一起学HTML基础-CSS样式表常用样式属性

样式属性

背景与前景：

background-color:#F90; /*背景颜色，样式表优先级最高*/

background-image:url（路径）; /*设置背景图片（默认）*/

background-attachment:fixed; /*背景是固定的，不随字体滚动*/

background-attachment:scroll; /*背景随字体滚动*/

background-repeat:no-repeat; /*no-repeat,不平铺，repeat,平铺，repeat-x,横向平铺，repeat-y,纵向平铺*/

background-position:center; /*背景图居中，设置背景图位置时，repeat必须为no-repeat*/

background-position:right top; /*背景图放在右上角*/

background-position:left 100px top 200px; /*背景图离左边100像素，离上边200像素*/

字体：

font-family:"新宋体"; /*字体。常用微软雅黑、宋体*/

font-size:12px; /*字体大小。常用像素12px/14px/18px。还可以用“em”，“2.5em”即默认字体2.5倍，还可以用百分数*/

font-weight:bold; /*bold是加粗，normal是正常*/

font-style:italic; /*倾斜，normal是不倾斜*/

color:#03C; /*字体颜色，直接用color*/

text-decoration:underline; /*下划线，overline是上划线，line-through是删除线，none是去掉下划线*/

text-align:enter; /*（水平对齐）居中对齐，left是左对齐，right是右对齐*/

vertical-align:middle; /*（垂直对齐）居中对齐，top是顶部对齐，bottm是底部对齐。一般设置行高后使用*/

text-indent:28px; /*首行缩进量*/

line-height:24px;/**/

display:none;/*none,不显示，inline-block,显示为块，不自动换行，宽高可设，block，显示为块，自动换行；inline，效果同span标签，不自动换行，宽高不可设*/

visibility:hidden;/*可视性。hidden，是隐藏但是占用空间，visible,显示*/

边界和边框：border（表格边框、样式等）、margin（表外间距）、padding（内容与单元格间距）

border:5px solid bule;/*四边框：5像素宽、实线、蓝色，相当于以下三行内容：

border-weight:5px;

border-style:solid;

border-color:bule;*/

border-top:5px solid bule;/*上边框：5像素、实线蓝色（bottom下边框、left左边框、right右边框）*/

margin:10px;/*四边外边框间距为10像素。auto 居中。*/

margin-top:10px;/*上边框间距10px，其他三边边框类似*/

margin:20px 0px 20px 0px;/*上-右-下-左间距，顺时针顺序*/

padding:10px;/*内容与四边边框边距为10像素。auto 居中。*/

padding-top:10px;/*内容与上边框边距10px，其他三边边框类似*/

padding:20px 0px 20px 0px;/*上-右-下-左边距，顺时针顺序*/

列表：

width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用

list-style:none;/*取消序号*/

list-style:circle;/*序号变为圆圈，样式相当于无序*/

list-style-image:url（图片地址）;/*图片做序号*/

list-style-position:outside;/*序号在内容外*/

list-style-position:inside;/*序号跟内容在一起*/