css3复习P1（引入方式+选择器+三大特性）

最新推荐文章于 2023-09-20 11:08:31 发布

今天你四百冷了吗

最新推荐文章于 2023-09-20 11:08:31 发布

阅读量242

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_48931100/article/details/125994854

版权

文章目录

一、css初认识
二、css语法
二、css的引入方式
三、css选择器
四、CSS三大特性

一、css初认识

全称：Cascading Style Sheets（层叠样式表）
通俗来说css就是用来修饰html的一种语言，将html干巴巴的身体结构穿上美丽的新衣。

二、css语法

1.css声明

①一个css声明包含属性名、冒号、属性值；

     标签/其他选择器{
      属性名：属性值;
      ……
      }

在这里插入图片描述
②写多个css声明时，需要使用分号隔开，并且使用{}将这些声明包含在一起，构成一个css声明块；

③css规则集：
选择器（Selector）：它选择了一个或多个需要添加样式的元素，就是要选中需要设置样式的那个元素，需要使用选择器；

声明（Declaration）：上一点有写

属性（Properties）：改变 HTML 元素样式的途径，简单讲就是画画可以用到的工具；

属性的值（Property value）：就是画画所需工具可以做的事，可以将画描绘成的样式的属性组成；
在这里插入图片描述

2.注释

注释不能嵌套使用！！！

/* 这里就是CSS的注释 */

3.速记写法

可能由四个属性或者是多个属性合并成一个属性，就是多个属性的简写形式：

 div {
      border:width style color;
      border: 1px solid red;
      border-width: 1px;
      border-style: dashed;
      border-color: aquamarine;
    }

二、css的引入方式

1.内联样式（行内样式）

内联样式表就是把css代码直接写在现有的HTML标签中：

<div style="border: 1px solid red;">我是一个div</div>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开：

<div style="color:red;font-size:14px">
    设置字体颜色为红色，并且字体大小为14px
</div>

优点：优先级较高；
缺点：样式与结构冗余，只会对当前标签起作用在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用。

2.内部样式表

将样式表编写到head标签中的style标签中：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css引入方式</title>
  <style>
    div {
      font-size: 30px;
      background-color: skyblue;
    }
  </style>
</head>

优点：可以将样式与结构分离，可以同时为多个元素设置样式，方便后期的维护。
**缺点：**样式复用率低

3.外部样式表

①link标签引入外部css文件

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css引入方式</title>
  <link rel="stylesheet" href="style.css">
  </style>
</head>

优点：将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式；

②@import url()导入css文件

要写在style标签的最前面，否则不会生效或者直接在外部css文件中直接使用。

style标签中：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css引入方式</title>
  <style>
     @import url('style.css'); 
     ……
    /* 失效：
    @import url('style.css'); */
  </style>
</head>

外部样式表中：

@import url('style1.css');

div {
  color: red;
  background-color: green;
}

不推荐使用： @import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

三种引入方式的优先级：

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

三、css选择器

标签选择器

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性格式：
格式:
标签名称{
属性:值;
}
注意点:
1.标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签选择器</title>
  <style>
    /* 标签选择器 */
    div {
      font-size: 30px;
      color: pink;
    }
  </style>
</head>

<body>
  <div>我是一个div
    <div>我是子元素div
      <div>我是子孙元素div</div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:
#id名称{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input …
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>id选择器</title>
  <style>
    /* id选择器：#id名 给一个标签设置样式*/
    #box1 {
      font-size: 28px;
      color: aquamarine;
    }
  </style>
</head>

<body>
  <div id="box1">我是id为box1的div</div>
  <div id="box1">我是另一个id为box1的div</div>
  <div id="box2">box2</div>
</body>

</html>

注意： id名重复不会报错，但规定不能这么使用！

类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
.类名{
属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class=“类名1 类名2 …”>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>class选择器</title>
  <style>
    /* 类选择器：.class名 给一类标签设置样式 */
    .box {
      background-color: skyblue;
    }

    .box3 {
      color: red;
    }
  </style>
</head>

<body>
  <div class="box">box3</div>
  <div class="box box3">我是多类名div box3</div>
</body>

</html>

后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签,然后在设置属性
例如：div p{}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器和子元素选择器</title>
  <style>
    /* 后代选择器：所有后代 （空格隔开） */
    div p {
      color: pink;
    }
  </style>
</head>

<body>
  <div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <div>
      <p>我是一个p</p>
      <p>我是一个p</p>
      <p>我是一个p</p>
      <p>我是一个p</p>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
标签名称1>标签名称2{
属性:值;
}

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子元素选择器</title>
  <style>
    /* 子元素选择器：直接子代,不包括其他后代（>隔开） */
    .div1>p {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div class="div1">
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <div>
      <p>我是一个p</p>
      <p>我是一个p</p>
      <p>我是一个p</p>
      <p>我是一个p</p>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

后代选择器和子元素选择器之间的区别?

后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

后代选择器和子元素选择器之间的共同点？

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去

在企业开发中如何选择？

如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
选择器1选择器2{
属性: 值;
}
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器</title>
  <style>
    /* 交集选择器 */
    p.p1 {
      font-size: 30px;
      color: red;
    }
  </style>
</head>

<body>
  <p class="p1">第1个标签</p>
  <p>第3个标签</p>
  <p>第4个标签</p>
</body>

</html>

在这里插入图片描述

并集选择器

作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
    /* 并集选择器 */
    .p1,
    #p2 {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <p class="p1">第1个标签</p>
  <p id="p2">第2个标签</p>
  <p>第3个标签</p>
  <p>第4个标签</p>
</body>

</html>

在这里插入图片描述

兄弟选择器

相邻兄弟选择器 (css2)

作用:
给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟选择器</title>
  <style>
    /* 相邻兄弟选择器 CSS2 */
    .p1+p {
      font-size: 30px;
      color: pink;
    }
  </style>
</head>

<body>
  <p class="p1">第1个标签</p>
  <p>第2个标签</p>
  <p>第3个标签</p>
  <p>第4个标签</p>
  <p>第5个标签</p>
</body>

</html>

在这里插入图片描述

通用兄弟选择器 (css3)

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟选择器</title>
  <style>
    /* 通用选择器css3 */
    .p1~p {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <p class="p1">第1个标签</p>
  <p>第2个标签</p>
  <p>第3个标签</p>
  <p>第4个标签</p>
  <p>第5个标签</p>
</body>

</html>

在这里插入图片描述

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

序选择器（结构伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别中的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7…
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素仅有的一个子元素。仅有一个子元素时生效
注意点: 不区分类型

2.同级别同类型中的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素的特定类型的唯一子元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    /* 伪类选择器：使用范围：同级别 */
    p:first-child {
      color: aqua;
    }
    p:nth-child(8) {
      color: blue;
    }

    div:last-child {
      color: pink;
    }

    p:nth-child(even) {
      background-color: orange;
    }

    p:nth-child(odd) {
      background-color: green;
    }

    /* n从0开始 */
    p:nth-child(3n+1) {
      font-size: 30px;
    }

    /* 同级别同类型的选择器 */
    div:last-of-type {
      color: red;
    }
  </style>
</head>

<body>
  <p>第1个p标签</p>
  <p>第2个p标签</p>
  <p>第3个p标签</p>
  <p>第4个p标签</p>
  <p>第5个p标签</p>
  <p>第6个p标签</p>
  <p>第7个p标签</p>
  <p>第8个p标签</p>
  <div>我是一个div</div>

  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
</body>

</html>

在这里插入图片描述

动态伪类选择器

选择器:link（链接伪类选择器）：选择匹配的元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
选择器:visited（链接伪类选择器）：选择匹配的元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
选择器:active（用户行为选择器）：选择匹配的元素，且匹配元素被激活。常用于链接描点和按钮上
选择器:hover （用户行为选择器）：选择匹配的元素，且用户鼠标停留在元素上。

a标签的动态伪类选择器

1.通过我们的观察发现a标签存在一定的状态
1.1默认状态, 从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态
2.格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
3.注意点
3.1 a标签的伪类选择器可以单独出现也可以一起出现
3.2 a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
编写的顺序必须要遵守爱恨原则 love hate
3.3 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

/* 简写格式 */
a{
    color: green;
}
/* link:和 :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/
/*a:link{*/
    /*color: green;*/
/*}*/
/*a:visited{*/
    /*color: green;*/
/*}*/

否定伪类

作用：可以从已选中的元素中剔除出某些元素

p:not(.hello){
  background-color: yellow;
}

伪元素选择器

使用伪元素来表示元素中的一些特殊的位置
::after
表示元素的最后边的部分
一般需要结合content这个样式一起使用，
通过content可以向after的位置添加一些内容
::before
表示元素最前边的部分
一般需要结合content这个样式一起使用，
通过content可以向before的位置添加一些内容
::first-letter
为第一个字符来设置一个样式
::first-line
为第一行设置一个样式

属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:[attribute]

[attribute=value]：
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

属性的取值是以什么开头的：
[attribute|=value] CSS2
[attribute^=value] CSS3

<input type="text" name="user-name" id="">
<input type="password" name="username" id="">

两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

属性的取值是以什么结尾的
[attribute$=value] CSS3
属性的取值是否包含某个特定的值
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到

通配符选择器

作用: 给当前界面上所有的标签设置属性
格式:
*{
属性:值;
}
注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器。

四、CSS三大特性

（1）、继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的,当做子元素
3.2 h标签的文字大小是不能继承的，在做子元素

（2）、层叠性

作用: 层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

（3）、优先级

优先级判断的三种方式

间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

优先级之!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值的后面，分号前面
5.!important前面的感叹号不能省略
6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

优先级权重

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重的计算规则
内联样式，如: style=“…”，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
标签选择器、伪元素选择器，如div p，权值为0001。
通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
继承的样式没有权值

首先先计算选择器中有多少个id, id多的选择器优先级最高
如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

也就是说优先级如果一样, 那么谁写在后面听谁的

注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的