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连接方式。

　　有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：

选择器

，标签选择器。用标签名做选择器
<style type="text/css">
p{
样式
}
</style>

,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>

,复合选择器
①用“，”隔开，表示并列。
<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 点击超链接时