前端学习笔记day48 CSS介绍

1. CSS-----层叠样式表

设置样式的三种方式：

1. 直接在标签内写style属性设置该标签的样式（又叫内联标签）

2. 在head标签中写style标签设置body标签中子标签的样式；

3.把样式直接写在一个css文件中直接在html文件的head标签的link子标签通过href属性关联css文件中写好的样式；

2. CSS注释 /**/

3. 选择器（其实就是对哪一个标签使用样式这个标签就是选择器）

3.1 基本选择器

3.1.1 标签选择器（其实就是直接标签名写样式即可一般用于该类标签的通用样式设置）

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p>我是一个p标签</p><div>我是一个div标签</div></body>
</html>

p{color:red;font-size:18px
}div{color:green; font-size:20px
}

运行结果：

3.1.2 ID选择器（为特定的选择器设置特定的样式--因为每一个标签都有一个唯一标识的id属性）

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p id="p0">我这个p标签没有ID选择器所以使用标签选择器的样式</p><p id="p1">我是一个p标签</p><p id="p2">我也是一个p标签</p></body>
</html>

ID选择器-html

p{color:red;font-size:18px
}
#p1{color:green;font-size:18px
}  /*ID选择器 用标签的ID号*/
#p2{color:black;font-size:20px
}

ID选择器-CSS

运行结果：

3.1.3 类选择器（一个标签使用了哪些样式的类可以使用多个类）

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p class="c1 c2">我是一个p标签 我使用了2个类选择器样式</p><p>我只是一个普通的标签选择器</p></body>
</html>

类选择器-html

p{color:red;font-size:18px
}
.c1{color:hotpink;
}
.c2{font-size:40px

类选择器-CSS

运行结果：

3.2 通用选择器(*{color:red})

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p class="c1 c2">我是一个p标签 我使用了2个类选择器样式</p><p>我只是一个普通的标签选择器</p><div>我是一个div标签</div></body>
</html>

通用选择器-html

.c1{color:hotpink;
}
.c2{font-size:40px
}
*{color:blue;
}

通用选择器-CSS

3.3 组合选择器

3.3.1 后代选择器

p{color:blue;
}
#d1 p{color:red;
}  /*中间空格 是后台选择器，div标签中的所有后代标签都设置为红色*/

后代选择器-CSS

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div标签中的p标签</p><div id="d2"><p>我是嵌套在div标签的div标签中的p标签</p></div></div></body>
</html>

后代选择器-html

运行结果：

3.3.2 儿子选择器

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div标签中的p标签</p><div id="d2"><p>我是嵌套在div标签的div标签中的p标签</p></div></div></body>
</html>

儿子选择器-html

p{color:blue;
}
#d1>p{color:red;
}  /*中间>是儿子选择器，仅仅div标签中的儿子标签设置为红色*/

儿子选择器-CSS

运行结果：

3.3.3 毗邻选择器

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div标签中的p标签</p><div id="d2"><p>我是嵌套在div标签的div标签中的p标签</p></div></div><hr>  <!--水平线--><div id="d3">我是一个div标签</div><p>我是跟d3标签同级的p标签</p></body>
</html>

毗邻选择器-HTML

p{color:blue;
}
#d3+p{color:red;
}  /*中间+是毗邻选择器，div标签后面相邻的标签设置为红色*/

毗邻选择器-CSS

运行结果：

3.3.4 弟弟选择器

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p>我是在div标签上面的p标签，我不会使用弟弟选择器的样式</p><div id="d1">我是一个div标签</div><p>我是跟d1标签同级的p标签</p><p>我也是跟d1标签同级的p标签</p></body>
</html>

弟弟选择器-html

p{color:blue;
}
#d1~p{color:red;
}  /*中间~是弟弟选择器，div标签后面同级的所有标签设置为红色*/

弟弟选择器-CSS

运行结果：

3.4 属性选择器（就是某一类标签有可能都有某个属性可以根据属性设置标签样式）

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p>我只是一个普通的p标签</p><p class="cc1">我是一个p标签(我的属性是cc1)</p><p class="cc2">我是一个p标签（我的属性是cc2）</p><p class="cc2">我是一个p标签（我的属性是cc2)</p></body>
</html>

属性选择器-html

p{color:red;
}
p[class="cc1"]{color:green;
}
p[class="cc2"]{color:blue;
}

属性选择器-CSS

运行结果：

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p xx="xuanxuan">我是一个p标签</p><p xx="xixi">我也是一个p标签</p><p cc="haha">我还是一个p标签</p><p>我又是一个p标签</p></body>
</html>

属性选择器-html

p{color:lightpink;
}
[xx^="x"]{color:green;
}  /*标签内有xx属性的 且以x开头的颜色设置为green*/
[xx$="a"]{color:red;
}

属性选择器-CSS

运行结果：

3.5 分组和嵌套

分组就是多个标签可以使用同一组样式（而类选择器是一个标签可以使用多个类选择器的样式）；

嵌套其实就是上面的组合选择器（后代选择器，儿子选择器，毗邻选择器，弟弟选择器）

<! DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择器</title><link rel="stylesheet" href="index.css">   <!--样式来自于index.css文件--></head><body><p>我只是一个普通的p标签</p><div>我是一个普通的div标签</div></body>
</html>

分组-html

p,div{color:red;
} /*两个标签都是用这个样式*/

分组-CSS

运行结果：

3.6 选择器的优先级

找到一个标签有很多很多选择器可以使用样式；

用标签选择器可以找到一个标签，给它包裹一种样式使用ID选择器又可以为同一种标签包裹另一种样式那浏览器在渲染页面时应该用哪一种去呈现呢？这就涉及到选择器的优先级

1. 内联样式（直接在标签内借助style属性写的样式）优先级最高；

2. 选择器相同时（比如都是标签选择器，或者都是ID选择器）谁靠近标签谁生效；

3.选择器不一致时按照下面的优先级顺序：
内联样式（1000）> ID选择器（100）>类选择器（10）>标签（元素）选择器（1）

权重计算永不进位（也就是只要出现ID选择器，优先级低的无论出现多少次都是使用ID选择器的样式）

转载于:https://www.cnblogs.com/xuanxuanlove/p/10008864.html