内容概要
一、css基本语法
二、css三种引入方式
三、css选择器
四、标签、id、class、三种选择器和行内样式的优先级
五、分组和嵌套
1、css基本语法
选择器 {
属性名1：属性值1;
属性名2:属性值2;
}
<style>
h1{
color:blue;
}
</style>
View Code
注释
/*单行注释*/
/*
多行注释
多行注释
*/
2、css三种引入方式
第一种：在head标签下的style标签下书写css代码
第二种：通过link标签从外部引入css
第三种：行内样式，在某个单独标签下书写样式（不常用，因为会造成html和css代码间的强耦合，一般只在临时修改的情况下使用）
第一种：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color:blue;
}
</style>
</head>
View Code
第二种：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="testCSS.css">
</head>
View Code
第三种：
<body>
<h1 style="background-color: orange">标题</h1>
</body>
View Code
3、css选择器
在使用css修改html内的某个标签样式前，我们要知道要修改哪个标签的样式，并想办法获取它，于是就有了选择器，选择器用于筛选需要改变样式的标签
基本选择器有4种
1、id选择器
2、class类选择器
3、元素/标签选择器
4、通用选择器
id选择器
通过id修改对应标签以及该标签所包含的所有子标签的样式
书写格数：需要在id名称前加入#号，以区别与id同名的其它普通标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
color:red;
}
</style>
</head>
<body>
<div id="d1">div 1</div>
<div>div 2</div>
</body>
View Code
class类选择器
通过class修改对应的多个（也可以是单个或没有）标签以及该标签所包含的所有子标签的样式
书写格式：需要在class前加入.号
需要特别注意的是，一个标签可以“继承”多个类
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 {
color:red;
}
</style>
</head>
<body>
<div class="c1 c2">div 1</div>
<div class="c2">div 2</div>
</body>
View Code
元素/标签选择器(不常用)
通过标签名称找到所有的同名标签以及其下的所有子标签
书写格式：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color:red;
}
</style>
</head>
<body>
<div>div 1</div>
<div>div 2</div>
<p>p 1</p>
</body>
View Code
通用选择器(不常用)
所有标签
书写格式：* {属性名：属性值}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color:red;
}
</style>
</head>
<body>
<div>div 1</div>
<div>div 2</div>
<p>p 1</p>
</body>
View Code
组合选择器有4种
1、后代选择器
2、儿子选择器
3、毗邻选择器
4、弟弟选择器
后代选择器
用空格表示
div包含的所有span都会被修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>div 1
<p>div p 2
<span>div p span 1</span>
</p>
<p>div p 3</p>
<span>div span</span>
</div>
<div id="d2">div 2</div>
<p>p 1</p>
<p>p 2</p>
</body>
View Code
儿子选择器
用>表示
div包含的仅下一层的所有span都会被修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span{
color:red;
}
</style>
</head>
<body>
<div>div 1
<p>div p 2
<span>div p span 1</span>
</p>
<p>div p 3</p>
<span>div span 1</span>
<span>div span 2</span>
</div>
<div id="d2">div 2</div>
<p>p 1</p>
<p>p 2</p>
</body>
View Code
毗邻选择器
用+表示，只有同级的并且紧挨着（位于下方）的标签以及其包含的所有标签会被修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2+p{
color:red;
}
</style>
</head>
<body>
<div>div 1
<p>div p 2
<span>div p span 1</span>
</p>
<p>div p 3</p>
<span>div span 1</span>
<span>div span 2</span>
</div>
<p>p 3</p>
<div id="d2">div 2</div>
<p>p 1
<span>p span1</span>
</p>
<p>p 2</p>
</body>
View Code
弟弟选择器
用~线表示，只有同级的位于下方的所有标签以及其包含的所有后代标签会被修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2~p{
color:red;
}
</style>
</head>
<body>
<p>p 3</p>
<div id="d2">div 2</div>
<p>p 1
<span>p span1</span>
</p>
<p>p 2</p>
<div>div 3</div>
<p>p 4</p>
</body>
View Code
属性选择器有三种
1、只有属性名没有属性值
2、同时有属性名和对应属性值
3、同时有属性名和对应属性值的一类标签
属性选择器使用[]标明
只有属性名没有属性值
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[username]{
background-color: red;
}
</style>
</head>
<body>
<div username="zhangsan">div 1</div>
<div username="lisi">div 2</div>
<p username>p1</p>
<p username="zhangsan">p2</p>
</body>
View Code
同时有属性名和对应属性值
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[username="zhangsan"]{
background-color: red;
}
</style>
</head>
<body>
<div username="zhangsan">div 1</div>
<div username="lisi">div 2</div>
<p username>p1</p>
<p username="zhangsan">p2</p>
</body>
View Code
同时有属性名和对应属性值的一类标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[username="zhangsan"]{
background-color: red;
}
</style>
</head>
<body>
<div username="zhangsan">div 1</div>
<div username="lisi">div 2</div>
<p username>p1</p>
<p username="zhangsan">p2</p>
</body>
View Code
伪类选择器和类元素选择（它们不太好理解）
伪类选择器
<style>
<!--未点击时a标签的状态-->
a:link{
color:red;
}
<!--鼠标悬浮时的状态-->
a:hover{
color:green;
}
<!--鼠标点击不松开时的状态-->
a:active{
color:blue;
}
<!--点击过后的状态-->
a:visited{
color:orange;
}
</style>
</head>
<body>
<a href="http://www.jd.com" target="_blank">点我</a>
</body>
View Code
对于伪类选择器，我将它理解成选择标签的不同状态
伪元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--设置文本第一个字的样式-->
p:first-letter{
font-size:48px;
color:red;
}
<!--在p标签内容前添加内容，这里通过css而非html设置文本，css
设置的文本是不可选中的-->
p:before{
content:"内容前缀";
}
<!--在p标签内容后添加内容-->
p:after{
content:"内容后缀";
}
</style>
</head>
<body>
<p>一段内容</p>
</body>
View Code
对于伪元素选择器，我将它理解成设置标签内的虚拟文本
4、标签、id、class、三种选择器和行内样式的优先级
有两种情况
（1）标签相同，但是顺序不同
（2）标签不同
-标签相同，但是顺序不同
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color:red;
}
</style>
<link rel="stylesheet" href="testCSS.css">
</head>
<body>
<h1 style="color:green;">一段内容</h1>
</body>
View Code
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color:red;
}
</style>
<link rel="stylesheet" href="testCSS.css">
</head>
<body>
<h1>一段内容</h1>
</body>
View Code
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="testCSS.css">
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>一段内容</h1>
</body>
View Code
标签的渲染优先级符合就近原则
即相同标签的情况下，优先级按顺序排列
-标签不同
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="testCSS.css">
<style>
#idh1{
color:red;
}
.clh1{
color:blue;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1 id="idh1" class="clh1" style="color:orange;">一段内容</h1>
</body>
View Code
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="testCSS.css">
<style>
#idh1{
color:red;
}
.clh1{
color:blue;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1 id="idh1" class="clh1">一段内容</h1>
</body>
View Code
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="testCSS.css">
<style>
/*#idh1{*/
/* color:red;*/
/*}*/
.clh1{
color:blue;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1 id="idh1" class="clh1">一段内容</h1>
</body>
View Code
当标签不同时，css渲染的优先级无视顺序。
优先级排序：
行内样式>id选择器>class选择器>标签选择器
精准度越高的选择器有限度越高
5、分组和嵌套
如果想让不同种类的标签使用同一种样式
比如有div、span、p标签，都使用color:red样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color:red;
}
span{
color:red;
}
p{
color:red;
}
</style>
</head>
<body>
<div>
div 1
</div>
<span>
span 1
</span>
<p>
p 1
</p>
</body>
View Code
很明显，出现了重复代码
使用,可以并列多个选择器，对这些选择器同时修改
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,span,p{
color:red;
}
</style>
</head>
<body>
<div>
div 1
</div>
<span>
span 1
</span>
<p>
p 1
</p>
</body>
View Code
***待回顾***
