css3.

雪球不会消失了

已于 2024-03-12 10:46:40 修改

阅读量528

点赞数 1

文章标签： css3 前端 css

于 2023-01-21 23:58:52 首次发布

本文链接：https://blog.csdn.net/m0_61925586/article/details/128730151

版权

学习b站黑马程序员视频的笔记内容：前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程_哔哩哔哩_bilibili

1.1 后代选择器（儿子，孙子，重孙等等所有后代都会选中）

扩展 img标签和background-image属性的区别

3、元素的显示模式（是独占一行的还是一行显示多个的这种现象）

1.12 行内元素垂直方向的内外边距不生效

一、基础认知

1、CSS的基本概念

CSS代码的位置顺序：

1.1 CSS的介绍

CSS通俗来讲就是美化网页，给HTML标签设置样式。

1.2 CSS语法规则

花括号里是控制样式的css属性和属性值

CSS都是通过属性名:属性值的方式来设置标签的样式

选择器 {                           //选择器的作用：选中HTML标签，为其添加样式
        
        属性名:属性值;             //大括号里面写css的属性
}

注意：在css中，数字类的属性值都要加px像素单位

2.1 CSS的引入方式

内嵌式：将CSS写在style标签中，style标签一般写在head标签里，title标签的下面

内嵌式案例：

外联式：将CSS写在一个单独的.css文件中，然后在HTML文件中的head标签里面的title标签下通过link标签引入

外联式案例：

行内式： 将CSS写在标签的style属性中

行内式案例：

用的几率很小

2、基础选择器

2.1 标签选择器

语法：在选择器部分直接写标签名

标签名 {                           //在选择器部分直接写标签名
        
        属性名:属性值;             //大括号里面写css的属性
}

作用：找到页面中所有的某个标签设置样式。

注意：

标签选择器会选中一类标签，而不是单独某一个
标签选择器无论嵌套关系多深，都能找到对应的标签

2.2 类选择器

语法：

①先用.开头定义类选择器，后面紧跟类名

①然后在HTML标签中用class="类选择器的名字"属性 指定要用的类选择器

结构：

.类名 {                           //.开头定义类选择器，后面紧跟类名
        
        属性名:属性值;             //大括号里面写css的属性
}

作用：类选择器通过标签的类名，找到页面中所有这个类名的标签，设置样式

所有HTML标签都有class属性，class属性的值称为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
一个标签可以同时有多个类名，类名之间用空格分隔
类名可以重复，一个类选择器可以同时选中多个标签

案例：

2.3 id选择器

②用HTML标签的 id="id值" 属性来设置元素的id值

结构：

#id {                           //通过#开头定义id选择器，后面紧跟元素的id属性值
        
        属性名:属性值;             //大括号里面写css的属性
}

作用：通过id值找到页面中所有这个id属性值的标签设置样式

注意：

所有HTML标签中都有id属性
标签的id值在一个页面中是唯一的
一个标签只能有一个id值
一个id选择器只能选中一个标签

3.4 通配符选择器

*号就代表通配符，表示找到所有标签。

3、文字样式和文本样式

3.1 字体大小

浏览器中字体大小默认是16

案例：

3.2 字体粗细

案例：

3.3 字体倾斜

案例：

3.4 常见字体系列

常见的字体系列分为三大类

（一个字体系列包含很多种字体）

如：微软雅黑属于无衬线字体，宋体属于衬线字体

3.5 字体系列

font-family属性的取值可以取很多个值

（一个字体系列包含很多种字体）

案例：

3.6 样式的层叠问题

如果给一个标签设置了相同的属性，那么后设置的会覆盖前面的

3.7 字体样式相关属性的连写

font开头的属性都是可以简写的

属性名：font

取值：style weight size family；

复合属性：一个属性有多个属性值。

案例：

3.8 文本缩进

文本缩进：控制每段话开头的缩进

em单位就是一个字的大小

案例：

3.9 文本水平对齐方式

text-align属性给文本所在的标签设置

案例：

3.10 文本修饰（其实就是控制线的）

案例：

3.11 行高

属性值取倍数的意思就是只取一个数字，字号的几倍

案例：

拓展

二、css进阶

1、进阶选择器

复合选择器：

1.1 后代选择器（儿子，孙子，重孙等等所有后代都会选中）

作用：给选择器1元素下的选择器2元素设置样式。

语法：

选择器1 选择器2{  //选择器1是父级选择器:选中父标签；选择器2是后代选择器：选中后代。
    CSS
}

案例：

属性选择器

语法：选中带有某个属性的标签

语法：

[HTML标签的属性] {
    CSS
}

例如：

1.2 子代选择器（只会选中儿子）

作用：给选择器1元素下的选择器2元素设置样式（只有选择器1元素的直接子元素才会被选中）。

语法：选择器1 > 选择器2 {CSS代码}

案例：

1.3 并集选择器

作用：同时选中多种标签，设置样式。

语法：选择器1,选择器2{CSS}

案例：

1.4 交集选择器

选择器语法：选择器1之后什么都不要加，连着写选择器2即可。

案例：

1.5 hover伪类选择器（hover：悬停）

作用：鼠标悬停在选择器选中的标签上时，显示某种css状态。

案例：

2、背景相关的css属性

2.1 设置背景图片

案例：

2.2 背景平铺

案例:

2.3 背景图位置

案例：

2.4 背景相关的复合属性

背景图片的位置取单词时顺序可以乱写，写像素单位时就不可以了。

案例：

扩展 img标签和background-image属性的区别

重要的可以用img标签，不重要的可以用background-image属性

3、元素的显示模式（是独占一行的还是一行显示多个）

元素即标签即标记

3.1 块级元素（块级显示模式）

显示特点：

独占一行（一行只能显示一个）
宽度默认是父元素的100%。，高度默认由内容撑开
可以设置宽度，高度，内外边距和边框等样式属性

代表元素：

3.2 行内元素（行内显示模式）

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开，不可以设置宽高，设置了宽高后也不会生效
垂直方向上的padding、margin设置了也不会生效

代表标签：

3.3 行内块元素（行内块显示模式）

3.4 元素显示模式的转换

目的：改变元素默认的显示模式，让元素符合布局要求。

案例：

拓展 HTML嵌套规范

“但是”后面的话是直接禁止的

4、css的特性

4.1 继承性

继承性的特性：子元素继承父元素的样式

可以继承的常见属性：（控制文字的属性都可以继承）

继承的原则：本身就具有属性，不会再继承父元素的样式

案例一：

说明：给子标签的父标签加控制文字的css属性后，子标签也会有同样的效果。

继承失效的情况

继承的原则：如果子元素本身就具有属性，就不会再继承父元素的样式

下面两个元素是浏览器设置了默认的样式，所有继承不会生效。

如：

4.2 层叠性

案例：

给div标签同时设置color属性，这叫样式相同，此时样式会覆盖

给div标签设置了color、属性并且后面又设置了font-size属性，此时样式会叠加

4.3 优先级

行内样式：说的就是把style当做一个属性写在标签里面，取值和写css样式的格式一样。例如：<div style="color: pink;">这是div标签</div>

4.不能给继承的子元素添加！important，因为自己有样式无法继承父元素的样式。

4.3 通过权重叠加计算，计算优先级

先数每一个复合选择器里的以上四种选择器的个数，然后再去比较

比较规则：

先从第一级比较的来，①如果第一级数字相同，再去比较第二级，以此类推②如果比较出来了后面的就都不用看了；③如果最后所有数字都相同，表示优先级都相同，则看层叠性（后面写的覆盖前面的）

注意：！important权重最高，如果有！important则有！important的属性优先级最高。

例子：

此时会生效color: orange;因为div #one选择器的权重最高。

三、css盒子模型

1、盒子模型的介绍

1.1 盒子模型的组成

作用：盒子模型是用来做布局的

案例：

浏览器效果

蓝色区域的是内容，对应前三个属性。绿色区域的是内边距，对应padding：20px。橙色区域的是外边距，对应margin：50px。

1.2 盒子的内容区域

整个盒子的尺寸=（width+边框的尺寸）*（height+边框的尺寸）

案例：

1.3 盒子的边框（会撑大盒子）

10px：设置边框的粗细 solid：控制边框线的种类 red：控制边框的颜色（三者先写谁都可以）

①border复合属性的连写

案例：

②单方向设置边框

案例：

1.4 盒子模型的案例

布局顺序写css代码：先写宽高背景色，放内容然后调节内容的位置，控制文字的细节。

1.5 盒子模型的内边距（会撑大盒子）

概述：内边距通过padding属性来设置，取值是：数字px

padding属性其实也是复合属性，最多有4个取值。多值写法就是从上开始顺时针转一圈，如果数不够，没有的那边和对边的一样。（如果要求上下左右内边距都一样只写一个值就可以）

1.6 内减模式

1.7 盒子模型的外边距

margin：在盒子的四个方向都设置外边距

margin-top:设置盒子的顶部外间距

margin-bottom:设置盒子的低部外间距

margin-left:设置盒子的左部外间距

margin-right:设置盒子的右部外间距

这些属性的取值都为：数字px

1.8 清除默认的内边距和外边距

如p标签和标题标签会有默认的外边距：

1.9 标签自适应居中

为标签加上一个margin：0 auto;

margin设置盒子的外边距属性，取值的0表示上下都为0，auto表示左右自适应居中。

综合案例：

版心自适应居中和消除默认内外边距的代码可以先全部一起写在一个通配符选择器里面

1.10 两个块级元素间外边距的合并现象

总结：两个垂直布局的块级元素上下外边距会合并，只给其中一个盒子设置margin属性即可。如果两个盒子都设置过，则浏览器会取最大值

案例：

1.11 块级元素外边距的塌陷现象

先记住：第2种解决方案

案例：

1.12 行内元素垂直方向的内外边距不生效

margin或padding都无法改变行内标签的垂直位置，只能通过line-height来改变行内元素垂直方向的位置

四、CSS标签的浮动

1、结构伪类选择器

选中父元素的第n个子元素，并且是E（子）标签

重点记第三个就可以了，因为第三个就可以选中全部了

小括号里的n还可以填公式：

n依次取值为：0，1，2，3，4，5，6、......

公式	功能
2n	找2的倍数个
2n+1	找奇数个
-n+5	找到前5个
n+5	找到第5个之后的

案例：

找到列表的第4个和第八个li

2、伪标签

1、伪标签使用css模拟出的标签，网页的非主体（装饰性）内容可以使用伪元素去做。

2、伪元素有两类：

::before	在元素内容的前面加一个伪元素
::after	在元素内容的后面加一个伪元素

3、伪元素的content属性：用content写伪元素的内容，content属性不加不生效。

4、伪元素默认为行内元素

案例：

3、标准流

标准流:标签的默认排版规则。如：是换行的还是不换行的

4、浮动

重要的认识：浏览器解析行内块或行内元素时，换行书写会产生一个空格的间隙，把块级元素转化成行内块元素也是一样的

1.1 浮动的作用

浮动现在用来做网页布局，让块标签排在一行。（如div）

2.1 浮动的特点

1、浮动元素会脱离标准流，在网页中不占位置。

2、下一个浮动的元素会在上一个浮动元素的后面

3、浮动元素可以覆盖标准流中的元素

4、浮动元素具有行内块元素的特点：一行显示多个，可以设置宽高

5、浮动的元素用text-align：center或margin：0 auto设置居中不能生效

2.2 浮动元素居中

解释：因为浮动元素无法用text-align：center和margin：0 auto设置居中，所有用一个大盒子div来做居中，设置版心居中后，在版心div里面写浮动的元素。

5、清楚浮动（暂空）

五、标签的定位

1、定位的基本介绍

1.1 网页常见的布局方式

1.2 应用

2、定位的基本使用

2.1 使用定位的步骤

先用position属性设置定位方式

再用方位属性设置偏移值来定位（用偏移值（l，r，t，b）来定位）

读：距离参照左边的距离

2.2 相对定位

介绍：相对自己本来的位置来定位(偏移)。

代码：position:relative;

特点：

在页面中占位置，没有脱标

应用场景：

配合绝对定位组CP（子绝父相）
用于小范围移动

案例：

2.3 绝对定位

介绍：参照已定位的父级标签进行定位，没有就参照以浏览器窗口进行定位。

代码position:absolute;

特点：

默认相对于浏览器可视区域进行移动
在页面中不占位置，已脱标

应用场景：

配合绝对定位组CP，子绝父相

子绝父相：一般父级使用相对定位，子级使用绝对定位（父级用相对定位比较可控）

绝对定位如何找父级标签为参照：就近找已经定位的父级

绝对定位的标签居中：绝对定位过的标签不能使用margin：0 auto来居中，只能使用以下方法来居中。

水平方向居中：①设置偏移值left：50%；②然后再设置左外边距margin-left：-150px；往左移盒子宽度的一半。

垂直方向居中：①设置偏移值top：50%；②然后再设置顶部外边距margin-top：-150px；往上移盒子高度的一半。

2.4 固定定位

介绍：参照浏览器窗口来定位

代码：position:fixed;

特点：

①会脱标，不占位置
②永远参照浏览器窗口来定位
③具备行内块特点

应用场景：

让盒子固定在屏幕中的某个位置

案例：

2.5 元素的层级关系

层级问题：谁压在谁身上

针对于定位的标签来说：默认看书写顺序，哪个后写的就在上。如果要改变层级就加z-index:整数；整数取值越大显示顺序越在上

六、装饰

1.1 基线

基线：浏览器解析文字（行内元素和行内块元素）时默认按照基线对齐。

浏览器解析行内元素和行内块元素默认按照文字类型来处理，文字是按照基线来对齐的。

1.2 文字对齐方式

1.3 垂直对齐方式

1.垂直对齐方式，解决行内块元素和行内块元素对齐，行内块元素和文字对齐

2.vertical-align属性只能加在行内或行内块标签里，加在块标签里无效。

案例：

如图解决两个行内块标签一个在上一个在下的问题

2.1 装饰光标

场景：设置光标移动到标签上时会变成什么样式

属性名：cursor

案例：

3.1 设置盒子为圆角边框

属性名：border-radius

属性值：数字px、百分比

最多可以取四个值：从盒子的左上角开始顺时针赋值，没有赋值看对角。

案例：

圆角边框常见的应用

案例：

4.1 溢出部分如何显示

溢出部分：盒子的内容超出盒子的内容区域

场景：控制内容溢出的部分如何显示

属性名：overflow

属性值	作用
visible	溢出部分可见，默认值
hidden	隐藏溢出部分
scroll	无论是否溢出都显示滚动条
auto	根据内容是否溢出，显示或隐藏滚动条

5.1 元素隐藏

场景：让元素隐藏起来。如：鼠标：hover之后元素隐藏

常用属性：

visibility：hidden；（占位隐藏）

display：none；（不占位隐藏）

6.1 元素的透明度

通过 opacity 属性可以控制元素的透明度，取值范围为 0（完全透明）到 1（完全不透明）。

注意点：opacity会让元素整体透明。包括里面的内容，如：文字，子元素等...

七、动画

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
    <style>
        /* 先定义一个动画animation:用@keyframes定义动画 后面写动画名 */
        @keyframes change-color{
            /* 动画:就是在什么时间套用什么CSS */
            from{background-color: red;}   /* 从背景颜色红色变为背景颜色蓝色 */
            to{background-color: blue ;}
        }

        .box{
            width: 200px;
            height: 200px;
            background-color: grey;
        }

        /* 在选择器中应用动画 */
        .box-animation{
            animation-name: change-color;    /* 指定要套用的动画 */
            animation-duration: 2s;     /* 指定动画的持续时间 */  
            animation-iteration-count: 2;   /* 指定动画跑几次 */
            /* animation-iteration-count: infinite; */   /* 指定动画跑无限次 */
            animation-delay: 2s;    /* 指定动画延迟多久再跑 */
        }
    </style>
</head>
<body>
    <!-- animation -->
    <h1>css教学</h1>
    <div class="box box-animation"></div>
</body>
</html>            <!-- <html>元素代表整个网页 -->

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
    <style>
        /* 先定义一个动画animation:用@keyframes定义动画 后面写动画名 */
        @keyframes change-color{
            /* 动画:就是在什么时间套用什么CSS */
            0% {background-color: red;top: 10px; left: 10px;}   /* 帕数：某段时间的某个时间点 */
            20% {background-color: orange;top: 20px; left: 20px;}
            40% {background-color: yellow;top: 30px; left: 30px;}
            60% {background-color: blue;top: 40px; left: 40px;}
            80% {background-color:green;top: 50px; left: 50px;}
            100% {background-color: purple;top: 60px; left: 60px;}
        }

        .box{
            width: 200px;
            height: 200px;
            background-color: grey;
            position: relative;
        }

        /* 在选择器中应用动画 */
        .box-animation{
            animation-name: change-color;    /* 指定要套用的动画 */
            animation-duration: 10s;     /* 指定动画的持续时间 */  
        }
    </style>
</head>
<body>
    <!-- animation -->
    <h1>css教学</h1>
    <div class="box box-animation"></div>
</body>
</html>            <!-- <html>元素代表整个网页 -->