正文
2017-3-25 css样式表（一）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
样式表：
一、样式表的概念： CSS(Cascading Style Sheets)层叠式样式表，作用是美化HTML网页。
二、样式表的分类：样式表分内联式样式表、内嵌式样式表和外部样式表三种。
1、内联式样式表： A、写在标签里面 。
B、style="样式" 例如：<div style="height:200px;"></div>
C、控制精确，样式优先级最高，但是代码重用性差。
2、内嵌式样式表： A、作为一个独立的区域内嵌在网页里，必须写在head标签里面。<style type="text/css">样式</style>
B、控制没有内联的精确，样式优先级第二，代码重用性好。
3、外部样式表： A、新建一个CSS文件，用来放样式表，如果要在HTML文件中调用样式表，一般用<link href="test.css" rel="stylesheet" />
B、控制没有内联的精确，样式优先级最低，代码重用性最好。
选择器：
选择器是样式表用来选择元素的。
选择器分为四种：标签选择器、Class 选择器、ID选择器、复合选择器。
1、标签选择器： A、用标签名做选择器。
B、优先级最低。
例如：<style type="text/css>
p{
样式：
}
</style>
注：格式对P标签起作用。
2、Class选择器： A、根据Class名来筛选元素，都是以"."开头。
B、优先级排名第二。
例如：<head>
<style type="text/css>
.aaa{
样式：
}
</style>
</head>
<body>
<div class="aaa"></div>
</body>
3、ID选择器： A、根据ID名来筛选出唯一元素，都是以"#"开头。
B、优先级最高。
例如：
<head>
<style type="text/css>
#aaa{
样式：
}
</style>
</head>
<body>
<div id="aaa"></div>
</body>
4、复合选择器：
（1）逗号并列： 用","隔开，表示并列。
例如：<style type="text/css>
p,span{
样式：
}
</style>
注：格式对P标签和span标签起作用。
（2）空格后代： 用空格隔开，表示后代。
例如：<style type="text/css>
.p .span{
样式：
}
</style>
注：找到使用样式p的标签，在该标签里面span标签使用该样式。
（3）用"."筛选： 用"."表示筛选。
例如：<style type="text/css>
p.span{
样式：
}
</style>
注：在p标签中的class="span"的标签，使用此样式。
