2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
一、样式表
（一）样式表的分类
1.内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余较多。
例：<p style="font-size:14px;">内联样式表</p>
2.内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
<style type="text/css">
p //格式对p标签起作用
{
样式；
}
</style>
3.外部样式表
新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：
选择器
1，标签选择器。用标签名做选择器
<style type="text/css">
p{
样式
}
</style>
2,class选择器。都是“.”开头
<head>
<style type="text/css">
.main{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div class="main"> <!--调用class样式-->
</div>
</body>
3,ID选择器 以“#”开头
<div id="样式名">
<head>
<style type="text/css">
#main /*定义样式*/
{
heitht：42px；
width：100%；
text-align：center；
}
</style>
</head>
<body>
<div id="main"> <!--调用id样式-->
</div>
</body>
4,复合选择器
①用“，”隔开，表示并列。
<style type="text/css">
p,span /*标签p、span两者同样的样式*/
{
样式
}
</style>
②用空格隔开，表示后代。
<style type="text/css">
.main p /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
{
样式；
}
</style>
③筛选“.”
<style type="text/css">
p.sp /*在标签p中的class=“sp”的标签，执行以下样式，类似于并列？ 或者独立设 置一个sp标签*/
{
z样式；
}
</style>
二、样式属性
1,背景
background-color:#foo; 背景色，样式表优先级高
background-image:url(); 设置背景图片（默认）
background-attachment:fixed; 背景是固定的，不随字体滚动
background-attachment:scroll; 背景随字体滚动
background-repeat:no-repeat; no repeat不平铺；repeat-x横向平铺；
background-position：center; 背景图片居中，设置背景图片时，repeat 必须为no-repeat
background-position：right top; 背景图放置在右上角
background-position：left 100px top 200px; 离左边100px，离上边200px
2，前景字体：
font-family:"微软雅黑"； 设置字体
font-size：12px； 设置字体大小
font-weight：bold； bold是加粗，normal是正常
font-style：italic； 倾斜，normal是正常
color:#F00; 设置文字颜色
text-decoration:underline; 下划线 overline line-through删除线 none无
text-align：center； 水平居中对齐；left左对齐；right右对齐；
vertical-align：middle； 垂直居中对齐；top是顶端对齐 bottom底部对齐
text-indent：28px； 首行缩进量
line-height：24px； 行高。一般为1.5-2倍字体大小
display:none; none是不显示；
inline-block 显示为块，不自动换行，宽高可设；
block 显示为块，自动换行
inline 效果同span标签，不自动换行，宽高不可设
visibility：hidden； 可视性，hidden隐藏但是占用空间；visible显示
3，边界和边框
border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）
border:5px solid blue; 四边框：5像素宽、实线、蓝色（相当于以下的三行语句）
border-width：5px；
border-style：solid；
border-color：blue；
border-top：5px solid blue 上边框：5像素宽、实线、蓝色
border-bottom：5px solid blue 下边框：5像素宽、实线、蓝色
border-left：5px solid blue 左边框：5像素宽、实线、蓝色
border-right：5px solid blue 右边框：5像素宽、实线、蓝色
margin：10px； 四边外边框宽度为10像素，auto，居中
margin-top:10px; 上边外边框宽度为10像素；其他三边边框类似
margin：20px 0px 20px 0px；
padding：10px； 内容与边框的四边间距为10像素
padding-top：10px； 内容与边框的上间距为10像素；与其他三遍间距类似
padding：20px 0px 20px 0px
4，列表与方块
width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。
list-style：none； 取消序号
list-style:circle; 序号变为圆圈，相当于无序
list-style-image：url（图片地址）； 图片做序号
list-style-position：outside； 序号在内容外面
list-style-position：inside；序号跟内容在一起
链接的style：
a: link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
