前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
一丶CSS简介
叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
特点:
1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠
2.使数据和显示分开
3.降低网络流量
4.使整个网站视觉效果一致
5.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
二丶CSS的引入方式
行内样式
### 在body标签内
<!-- 行内样式:优先级最高-->
<p style="color: darkcyan">唉不穿的覆盖惠健康</p>
内接样式
### 在head标签内
<!-- 内接样式 -->
<style>
div{
color: darkmagenta;
}
</style>
外接样式-链接式
### 在head标签内
<!-- 外接样式 链接式 -->
<link rel="stylesheet" href="commons.css">
外接样式-导入式
<!--外接样式 导入式 -->
<style>
@import url('commons.css');
</style>
三丶CSS的基本选择器
CSS优先级 : id选择器 > 类选择器 > 元素选择器
标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
<style>
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
</style>
<body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</body>
ID选择器
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
<style>
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
</style>
<body>
<div id="box">娃哈哈</div>
<div id="s1">爽歪歪</div>
<div id="s2">QQ星</div>
</body>
通用选择器
<style>
/*通用选择器:
如果标签没有设置属性,会被统一进行操作.比如:上色
所有的标签都会被选中*/
* {
color: yellow;
}
</style>
<body>
<p>段落</p>
<div>div标签</div>
</body>
四丶CSS的高级选择器
后代选择器用法如下:👇
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<style>
/*后代选择器
使用 '空格' 表示后代选择器
*/
div span {
color: peachpuff;
}
</style>
<body>
<!--后代选择器
使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
-->
<div>父选择器
<span>子代选择器</span>
<div>
<p>
<span>重孙代选择器</span>
</p>
<span>孙代选择器</span>
</div>
</div>
</body>
子代选择器用法如下:👇
使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
<style>
/*子代选择器
> 号, 只找子代div标签的span儿子标签
*/
div>span{
color: darkorange;
}
</style>
<body>
<!--子代选择器
> 号,找到div下的所有的子标签
-->
<div>
<span>div-->span 子标签</span>
<p>
<span>span 子标签</span>
</p>
<div>
<span>div-->span 子标签</span>
</div>
</div>
</body>
毗邻(兄弟)选择器用法如下:👇
<style>
/* 毗邻(兄弟)选择器
+ 相连 ,所有的邻居应用样式
*/
span+a{
color: aqua;
}
</style>
<body>
<!--邻居选择器
+ 号相连, span标签的 a标签应用样式
-->
<div>
<a href="#">第一个a标签</a>
<span>span 标签 </span>
<div>
<span>span标签</span>
<a href="#">第二个a标签</a>
</div>
<div><a href="#">第三个a标签</a></div>
<a href="#">第四个a标签</a>
<span >span 标签 </span>
<a href="#">第五个a标签</a>
</div>
</body>
弟弟选择器用法如下:👇
<style>
/* 弟弟选择器
~ 相连,在div之下的都是弟弟标签,都应用样式,嵌套必须重新定义div,否则无效
*/
div~span{
color: darkturquoise;
}
</style>
<body>
<!--
弟弟选择器
~ 号 ,只找所有的弟弟,在其之下的都是弟弟标签
-->
<div>
哥哥1
<div>
<span>这是孙代标签</span>
</div>
<span>这是嵌套的弟弟</span>
</div>
<hr>
<span>这是离得近的弟弟标签</span>
<span>这是离得近的弟弟标签</span>
<span>这是离得近的弟弟标签</span>
<hr>
<div>哥哥2</div>
<a href="#">123</a>
<label>这是邻居</label>
<br>
<span>这是离得远的弟弟标签</span>
</body>
并集选择器(组合选择器)用法如下:👇
多个选择器之间使用 逗号 隔开.表示选中的页面中的多个标签.一些共性的元素,可以使用并集选择器
<style>
/* 并集选择器
逗号分隔,所有的标签都应用样式
*/
ul,ol,span{
background-color: darkturquoise;
}
</style>
<body>
<!--并集选择器(组合选择器)
逗号分隔 , 所有的标签都应用样式
-->
<ul>
<li>u-li1</li>
<ul>
<li>u-li2</li>
</ul>
</ul>
<ol>
<li>o-li</li>
</ol>
<div>
<div> <span>span标签</span></div>
</div>
<span>123
<br>
<span>span标签</span></span>
</body>
交集选择器用法如下:👇
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.box1.box2那么它表示两者选中之后元素共有的特性。
<style>
/*交集选择器*/
div.box1.box2{
background-color: red;
width: 200px;
height: 200px;
}
div.box1{
background-color: green;
width: 200px;
height: 200px;
}
</style>
<body>
<!--交集选择器
点( . ) , 应用符合div标签的类选择器的标签
-->
<div class="box1 box2">box1box2</div>
<div class="box2">box1</div>
<div>aaa
<div class="box1">这是嵌套的div</div>
</div>
<span class="box1 ">span标签</span>
</body>
伪类选择器用法如下:👇
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
<style>
a:link{
/* 没有浏览过,应用此颜色 */
color: cornflowerblue;
}
a:visited{
/* 浏览过后,应用此颜色*/
color: chartreuse;
}
a:active{
/* 鼠标点击事件 */
color: rebeccapurple;
}
a:hover{
/* 鼠标悬浮事件*/
color: firebrick;
}
input:focus{
/* 点击聚焦事件*/
background-color: fuchsia;
}
div{
width: 100px;
height: 100px;
background-color: lightgray;
}
div:hover{
/* div标签 鼠标悬浮事件 */
background-color: pink;
}
</style>
<body>
<!--#### 伪类选择器
a : link visited active
input: focus
通用: hover
-->
<a href="http://www.xiaohuar.com">这是应用了伪类选择器</a>
<input type="text">
<div></div>
</body>
伪元素选择器用法如下:👇
<style>
/* 伪元素选择器 */
p:first-letter{
/* 在文本的最开头用于第一个字 */
color: greenyellow;
}
div:before{
/* 在文本的最开头添加content 内容,并应用样式 */
content: '$$$';
color: pink;
}
span:after{
/* 在文本的最末尾添加content 内容,并应用样式 */
content: 'abc';
color: aqua;
}
</style>
<body>
<!--#### 伪元素选择器
标签:first-letter 在文本的最开头用于第一个字
标签:before 在文本的最开头添加content 内容,并应用样式
标签:after 在文本的最末尾添加content 内容,并应用样式
-->
<p>你好啊~~,今天吃了吗1</p>
<div>你好啊~~,今天吃了吗2</div>
<span>你好啊~~,今天吃了吗3</span>
</body>
属性选择器用法如下:👇
属性选择器，字面意思就是根据标签中的属性，选中当前的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 属性选择器
语法:属性选择器 [属性]/[属性='值']
# 单个属性 : input[type='text']
# 多个属性 : input[type='password'][id='in']
*/
input[type='text']{
background-color: mediumspringgreen;
}
input[type='password'][id='in']{
background-color: gold;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="password" id="in">
</div>
</body>
</html>
