一、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样式命名规则
- 采用英文字母、数字以及"-"和"_"命名
- 以小写字母开头,不能以数字和"-"和"_"开头
- 命名形式:单字,连字符,下划线和驼峰