1.样式复用,方便网站的后期维护;
2.实现页面的精确控制,实现精美复杂页面;
3布局定位;
4外观美化;
1 【三种使用CSS的方式】
1、行内样式表:直接在HTML开始标签中使用style=""的方式引用;
特点:将CSS代码与HTML代码完全糅杂在一起,不符合W3C关于内容与表现分离的要求。不利于样式复用;
优先级:最高。
2、内部样式表: 在<head></head>中,使用<style type="text/css"></style>方式引用;
特点:将CSS代码与HTML代码分离,但是没有彻底分离CSS文件与HTML文件,不利于多页面复用样式。
3、外部样式表:使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点:实现了CSS与HTML的彻底分离,有利于样式复用及后期维护。
【通用选择器】
1、写法: *{}
2、作用: 选中页面中的所有HTML标签
3、优先级:最低!
【标签选择器】
1、写法: HTML标签名{ }
2、作用: 选中所有对应的HTML标签,并修改其样。
【类选择器 class选择器】
1、写法: .选择器名{}
2、调用: 在需要修改样式的HTML标签上,使用class="选择器名"
3、优先级: 当作用于同一层时,class选择器>标签选择器
.list{
color: blue;
}
【ID选择器】
1、写法: #选择器名{}
2、调用: 在需要修改样式的HTML标签上,使用id="选择器名"
3、优先级:同一层时,id选择器>class选择器
4、ID选择器是唯一的!同一页面严禁出现同名ID!!!
#first{
color: green;
}
【后代选择器】
1、写法: 选择器1 选择器2 …… 选择器N {}
2、生效规则: 选择器2必须是选择器1的【后代】……以此类推
【子代选择器】
1、写法: 选择器1>选择器2>……>选择器N{}
2、生效规则: 选择器2必须是选择器1的【直接子代】……
div>ul>li{
}
【交集选择器】
1、写法: 选择器1选择器2……选择N{}
2、生效规则: 必须同时满足所有选择器,才会生效
li.list#first{
}
【 并集选择器】
1、写法: 选择器1,选择器2,……,选择N{}
2、生效规则: 满足任意一个选择器,均可生效
.list,#first{
color: darkslategray;
}
【选择器命名规范】
1、只能有字母、数字、下划线组成;
2、开头不能是数字。
【选择器优先级】
1、就近原则:近者优先。
2、当作用于同一层时:可有权重计算
权重划分: 标签选择器 1