【2017-03-24】CSS样式表
一、样式表的分类
1.内联式 优先级最高,重用性最差,常用
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性,样式属性可以包含任何 CSS 属性
格式:
<div style="width:100px;height:100px;border:1px solid black">这里是内容</div>
2.内嵌式 优先级和重用性都一般,不推荐使用
当单个文件需要特别样式时,就可以使用内嵌样式表。需要在 head 部分通过 <style> 标签定义内部样式表
格式:
<style type="text/css">
.div1{
width:100px;
height:100px;
background-color:red;
}
</style>
(在body部分使用div1)
<div class="div1"></div>
3.外部式 优先级最低,重用性最高,常用
当样式需要被应用到很多页面的时候,通常使用外部样式表
方法:
创建样式表文件.css,添加样式表内容
.div1{
width:100px;
height:100px;
background-color:red;
}
最后在html中调用该格式:将css文件拖到html的<head></head>中或者在<head></head>中输入代码:<link href="css文件的路径" rel="stylesheet" />
二、选择器
1、id选择器
优先级第一,只能选中一个元素。可以覆盖掉其他选择器
#ddd1{
css属性
}
2、class选择器(类别选择器)
优先级第二,可以选中一堆元素。
.div1{
css属性
}
3、标签选择器
根据标签名进行选择,如div、span 优先级最低,能选中一堆元素,不建议使用
div{
css属性
}
4、复合选择器
(1)群组选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
.div1,.div2,#ddd1{
css属性
}
(2)后代选择器(包含选择器)
用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开
.div1 #ddd1{
css属性
}