css选择的艺术

一、HTML、CSS、JavaScript关系和基础含义

1.HTML、CSS、JavaScript关系

HTML是网页内容的载体
CSS样式是表现(外观控制)
JavaScript是行为，用来实现网页特效效果

2.什么是CSS

CSS层叠样式表(Cascading Style Sheets)
用于定义HTML内容在浏览器内的显示样式

3.为什么学习CSS

CSS简化HTML相关标签,网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页,提高工作效率

二、css基础语法

1.css规则由俩部分构成：选择器，声明

2.引用css样式

行内样式(内联样式)
内部样式表(嵌入样式)
外部样式表
导入式

具体方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css使用方法</title>
    <!-- 嵌入样式 -->
    <!-- <style tyle="text/css">
        p{color: blue;}
        h2{color: red;}
    </style> -->
    <!-- 外部样式 -->
    <!-- <link rel="stylesheet" href="css.css" tyle="text/css"> -->
    <style>
        @import url(css.css);
    </style>
</head>
<body>
    <!-- 行内样式 -->
    <h1 style="color:red;font-size:20px;">css使用方法</h1>

    
    <h2>css使用方法</h2>
    <p>行内样式</p>
    <p>嵌入样式</p>
    <p>外部样式</p>
    <p>导入样式</p>
</body>
</html>

优先级：

行内样式>内部样式>外部样式

说明:

1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

2.最后定义的优先级最高(就近原则)

三、css选择器

标签选择器
全局选择器
类选择器
群组选择器
ID选择器
后代选择器

四、伪类

1.定义：伪类选择器定义特殊状态下的样式无法用标签、id、class及其它属性实现

2.链接伪类

链接的4种状态:激活状态,已访问状态,未访问状态，和鼠标悬停状态。

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

3.链接伪类的顺序

Link > :Visited > :Hover > :Active

说明:

1. a:hover 必须置于a:link和a:visited之后,才有效

2. a:active必须置于a:hover之后,才有效
3.伪类名称对大小写不敏感。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        /*a:link{color: blue;}*//*未访问状态*/
        /*a:visited{color: gray;}*//*已访问状态*/
        /*a:hover{color: green;}*//*鼠标悬浮状态*/
        /*a:active{color: yellow;}*//*激活状态*/
        /*p:hover{color: red;}
        p:active{font-size: 20px;}*/
        /*a.one:link{color: blue;}
        a.one:visited{color: green;}
        a.one:hover{color: red;}
        a.one:active{color: gray;}
        a.two:link{color: green;}
        a.two:visited{color: blue;}
        a.two:hover{color: gray;}
        a.two:active{color: red;}*/
        p a:link{color: blue;}
        p a:visited{color: green;}
        p a:hover{color: red;}
        p a:active{color: gray;}
        div a:link{color: green;}
        div a:visited{color: blue;}
        div a:hover{color: gray;}
        div a:active{color: red;}
    </style>
</head>
<body>
    <p><a href="http://www.imooc.com" target="_blank" class="one">css使用方法</a></p>
    <br>
    <div><a href="http://coding.imooc.com" target="_blank" class="two">css选择器</a></div>
    <p>慕课网</p>
</body>
</html>

五、css层叠

可以定义多个样式
不冲突时,多个样式可层叠为一个
冲突时,按不同样式规则优先级来应用样式

六、css优先级规则

1.同一样式表中:

①.权值相同
就近原则(离被设置元素越近优先级越高)

②.权值不同
根据权值来判断CSS样式，
哪种CSS样式权值高，就使用哪种样式

2.选择器权值

标签选择器:权值为1
类选择器和伪类:权值为10
ID选择器:权值为100
通配符选择器:权值为0
行内样式:权值为1000

3.权值规则

统计不同选择器的个数
每类选择器的个数乘以相应权值把所有的值相加得出选择器的权值

4.总结

!important声明高

CSS使用方法的优先级

　　行内样式>内部样式>外部样式

　　注: link链入外部样式和style内部样式优先级，取决于先后顺序。

样式表中优先级

　　Id选择器> class选择器>标签选择器>通配符

　　权值相同，就近原则；权值不同，使用权值高的。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器优先级</title>
    <style>
        div{color: red;}
        #idgreed{color: green;}
        .classyellow{color: yellow;}
        .classblue{color: blue;}
        div{color: gray;}
    </style>
</head>
<body>
    <p>单独使用</p>
    <div>使用标签选择器样式</div>
    <div id="idgreed">使用ID样式</div>
    <div class="classblue">使用class样式</div>
    <!-- 优先级结果：id选择器>标签选择器 class选择器>标签选择器 -->
    <p>同一个元素引用标签、id、class定义</p>
    <div class="classblue" id="idgreed">css优先级</div>
    <div id="idgreed" class="classblue" >css优先级</div>
    <!-- 优先级结果：id选择器>class选择器>标签选择器 -->
    <p>同一个元素引用标签、id、class定义</p>
    <div class="classblue" class="classyellow">css优先级 蓝色在前</div>
    <div id="idgreed" class="classblue" >css优先级 黄色在前</div>
    <p>同一个元素引用多个标签样式</p>
    <div>css优先级</div>
    <!-- 优先级结构：同类型的多次引用，样式表中后定义的优先级高 -->
</body>
</html>

七、css样式命名规则

采用英文字母、数字以及"-"和"_"命名
以小写字母开头,不能以数字和"-"和"_"开头
命名形式:单字,连字符,下划线和驼峰