HTML--CSS样式表的基本概念

CSS（Cascading Style Sheet 叠层样式表）

作用：美化HTML网页

（一）样式表分类

一.内联样式表

和HTML联合显示，控制精准，但是可重用性差，冗余多。

例如：<p style="font-size:14px;">内联样式表</p>

二.内嵌样式表

作为一个独立区域内嵌在网页里，必须写在<head>标签里。

例如：

 1 <style type="text/css">
 2 
 3 p //格式对标签p起作用
 4 
 5 {
 6 
 7 样式
 8 
 9 }
10 
11 </style>

View Code

（对什么标签起作用，可以直接写标签名）

三.外部样式表

新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点击右键→CSS样式表→附加样式表。一般用link链接方式。

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

 1 <style type="txet/css">
 2 
 3 *//格式对所有的标签都起作用
 4 
 5 {
 6 
 7 margin:0px;
 8 
 9 padding:0px;
10 
11 }
12 
13 </style>

View Code

（二）选择器

1.标签选择器。用标签名做选择器。

1 <style type="text/css">
2 p //格式对p标签起作用
3 {
4 样式；
5 }
6 </style>

View Code

2.class选择器。都是以“.”开头。

<head>
<style type="text/css">

.main /*定义样式*/
{
    heigth:42px;
    width:100%;
    text-align:center;
}
</style>
</head>
<body>
<div class="main">  <!--调用class样式-->
</div>
</body>

View Code

3.ID选择器。以“#”开头。

<div id="样式名">
<head>
<style type="text/css">

 #main  /*定义样式*/
{
heigth:42px;
width:100%;
text-align:center;}

</style>
</head>
<body>
<div id="main">   <!--调用id样式-->
</div>
</body>

View Code

4.复合选择器

1）用“，”隔开，表示并列。

<style type=text/css>
p,span  /*标签p、span两者同样的样式*/
{
样式；
}

</style>

View Code

2）用空格隔开，表示后代。

<style type="text/css">
.main p  /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
{
样式；
}

</style>

View Code

3）筛选“.”

<style type="text/css">
p.sp /*在标签p中的class=“sp”的标签，执行以下样式*/

{
样式；
}
</style>

View Code

链接的Style

a:link 超链接被点前状态

a:visited 超链接被点后状态

a:hover 悬停在超链接时的状态

a:active 点击超链接时的状态

在定义这些状态时有个顺序 l v h a (必须按照这个顺序)

注：在CSS样式表里，字体的大小后面必须要加上PX，不然设置的值无效。