前端学习-CSS3

最新推荐文章于 2023-11-09 08:06:00 发布

a听闻

最新推荐文章于 2023-11-09 08:06:00 发布

阅读量486

点赞数 1

分类专栏： Web前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/LuKeliyy/article/details/113390962

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

一、概念

Cascading Style Sheets 层叠样式表，用来展现HTML、XHTML的页面标签的外观风格

说明:

官网: https://www.w3.org/Style/CSS/

二、CSS的作用

用来美化页面元素 - 美化外观

用来布局页面元素 - 布局定位

用来实现内容和外观的分离 - 方便维护和修改

三、语法

官方

https://www.w3.org/Style/CSS/learning

推荐教程

https://developer.mozilla.org/zh-CN/docs/Web/CSS

CSS属性索引

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

语法

选择器 {
    属性: 值;
    ...
}

HTML 的元素、标签指代的都是HTML的标签。

说明

选择器：用来选择需要设置样式的元素、类样式等等

属性：用来确定需要设置的内容

值：用来确定具体的效果

四、CSS使用的三种方式

4.1 行内样式(不推荐)

使用style属性在页面标签中书写，通常用于设置当前标签元素的特殊风格

<!--行内样式-->
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

4.2 内部样式（少用）

使用<style>标签在页面内部书写，通常用于设置当前页面的整体风格

<style>标签书写时可以放在任何位置，浏览器解析时会放在head 或者 body中，推荐书写在head中

<!--  内部样式  -->
<head>
  ...
  <style type="text/css">
    h1 {
		font-size:12px;
    }
  </style>
</head>

4.3 外部样式（推荐）

将样式提取出来，放在一个单独文件中，通常用于设置项目的整体风格

外部样式分为链接式与导入式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vQg5GhTU-1611905498865)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/创建css文件.png )]

4.3.1 链接式

<!--  外部样式  -->
<link rel="stylesheet" type="text/css" href="./css/demo01.css">

4.3.2 导入式（因兼容性不好，因此不推荐使用）

注意：使用@imoprt方式时：在CSS文件中需要放在最开始的位置

@import是输入CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

@import url("样式表路径");

五、CSS样式优先级查看

行内样式>内部样式表>外部样式表

就近原则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MObZ2jW-1611905498868)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/CSS样式优先级查看.png )]

六、CSS的三种基础选择器(重要)

6.1 选择器分类

元素选择器：用于设置相同标签的共性风格
类选择器（class选择器）：用于设置不同标签的共性风格
ID选择器：用于设置特定元素的风格**（因为id的唯一性，所有建议少用，甚至不用）**

6.2 元素选择器示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXsLJxv6-1611905498870)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/元素选择器示例.png )]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素选择器示例</title>
    <style type="text/css">
        h3{
            font-size: 18px;
            color: blue;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
<h3><span>多</span>品类齐全，轻松购物</h3>
<h3><span>快</span>多仓直发，极速配送</h3>
<h3><span>好</span>正品行货，精致服务</h3>
<h3><span>省</span>天天低价，畅选无忧</h3>
</body>
</html>

6.3 类选择器示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmD7qSVG-1611905498873)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/类选择器示例.png )]

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器示例# 系列文章目录
<font color=#999AAA >提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">


<font color=#999AAA >提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

@[TOC](文章目录)

</font>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 前言

<font color=#999AAA >提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。</font>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

<font color=#999AAA >提示：以下是本篇文章正文内容，下面案例可供参考

# 一、pandas是什么？


<font color=#999AAA >示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。



# 二、使用步骤
## 1.引入库


<font color=#999AAA >代码如下（示例）：



```c
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

北京欢迎你

北京欢迎你，有梦想谁都了不起！

有勇气就会有奇迹。

```

6.4 ID选择器示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器示例</title>
    <style type="text/css">
        #first{
            font-size: 16px;
        }
        #second{
            font-size: 24px;
        }
    </style>
</head>
<body>
<h1>北京欢迎你</h1>
<p id="first">北京欢迎你，有梦想谁都了不起！</p>
<p id="second">有勇气就会有奇迹。</p>
<p>北京欢迎你，为你开天辟地。</p>
<p>流动中的魅力充满朝气。</p>
</body>
</html>

七、选择器优先级 (重要)

ID选择器 > 类选择器 > 标签选择器

注意

优先级与书写执行顺序无关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
         h1{
            color: red;
        }
        #yellow{
            color: yellow;
        }
        .blue{
            color: blue;
        }
       
    </style>
</head>
<body>
    <h1 id="yellow" class="blue">选择器的优先级</h1>
</body>
</html>

八、CSS样式属性

8.1 字体样式

8.1.1 font-family：设置字体类型

示例：font-family: Consolas,'宋体',sans-serif;
设置字体类型的时候，一定要将英文字体放在中文字体前面，同时在最后推荐加上sans-serif

8.1.2 font-size：设置字体大小

示例：font-size:12px;
字体常用尺寸单位：
- px：绝对单位，页面按精确像素展示
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size，按自身来计算，整个页面内1em不是一个固定的值
- rem：相对单位，基准点为html字体的大小，整个页面内1rem是一个固定的值
- %：相对单位，基准点为父节点对应属性的大小

8.1.3 font-weight：字体粗细的值

示例：font-weight:700;
可以选用的值：
- normal：默认值，定义标准的字体
- bold：粗体字体
- bolder：更粗的字体
- lighter：更细的字体
- 100、200~800、900（400等同于normal，700等同于bold）

8.1.4 font-style：字体风格的值

示例：font-style:italic;
可选用的值：
- normal：正常字体
- italic：斜体字体,使用字体本身的斜体
- oblique：倾斜字体，强制斜体

8.1.5 font：设置字体所有属性

示例：font: italic bold 24px Consolas,'宋体',sans-serif;
上面的顺序最好不要调整

8.2 文本属性

8.2.1 color：设置文本颜色

示例：color:rgba(0,0,255,0.5);
可选的值
- 系统自带，例如：red、blue
- 十六进制，例如：#A983D8、#95F141、#396(#339966)、#906（使用Snipaste获取十六进制颜色）
- rgb，例如：rgb(152,240,0)。r、g、b三个参数取值为0~255
- rgba，例如：rgba(152,240,0,.5)。相比较rgb，多了一个alpha透明度参数，取值为0~1

8.2.2 text-align：设置文本水平对齐方式

示例：text-align:center;
可选的值
- left：把文本排列到左边，默认值，由浏览器决定
- right：把文本排列到右边
- center：把文本排列到中间
- justify：将最后一行以上的文本两端对齐。（为了实现该效果，需要用到伪类样式）

8.2.3 text-decoration：设置文本的修饰线

示例：text-decoration:underline;
可选的值
- none：默认值，定义的标准文本
- underline：设置文本的下划线
- overline：设置文本的上划线
- line-through：设置文本的删除线

8.2.4 text-indent：设置文本的缩进

示例：text-indent:2em;
其可以适配前面我们所学的所有单位，但这里一般都只用em
该效果也可以使用后面我们学的padding来实现

8.2.5 line-height：设置文本的行高

示例：line-height: 1.6em;
其可以适配前面我们所学的所有单位，但这里一般都只用em，一般默认是1.35em，推荐设置1.5em较好

8.2.6 vertical-align：设置行级元素的垂直方向的对齐线

示例：vertical-align:middle;
其本质是设置自身的基准线
- baseline：基线（默认值）
- top：顶部对齐
- middle：中线对齐
- bottom：底部对齐

8.2.7 white-space：设置文本卷行处理方式

示例：white-space:nowrap;
常用属性
- normal：空白会被浏览器忽略（默认值）
- nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象

8.2.8 text-overflow：设置文本溢出的处理方式

示例：text-overflow:ellipsis;
常用属性：ellipsis，多余的文本，使用省略号显示
- 该属性需要同时设置：white-space: nowrap;、overflow: hidden;以及一个指定的宽度，才能生效

8.4 常用的伪类样式

8.4.1 选择器:hover

鼠标悬停在元素上的效果
示例：a:hover{color:#FF7300;}

8.4.2 选择器:active

当元素处于激活状态时的效果（单击未释放的超链接样式）
示例：a:active{color:#999;}

8.4.3 选择器:focus

当元素获得焦点时的效果（一般用于表单元素）
示例：input:focus{color:#999;}

8.4.4 选择器::placeholder

设置输入框的提示文本样式
示例：input::placeholder{color:#999;}

8.4.5 选择器::before

在元素的内部最前面添加一个文本节点
示例：div::before{content: '/';}

8.4.6 选择器::after

在元素的内部最后面添加一个文本节点
示例：div::after{content: '/';}

8.5 列表样式

其拥有list-style-type、list-style-image、list-style-position属性设置方式，以及list-style复合设置方式，但是因为现在一般只用到list-style:none这个样式（清除列表前方的样式），因此其它的不再赘述。

8.6 尺寸属性

8.6.1 属性列表

属性	说明	值
width	宽度	前面所有学过的单位均可，一般使用百分比以及px
min-width	最小宽度	-
max-width	最大宽度	-
height	高度	-
min-height	最小高度	-
max-height	最大高度	-

示例：

width: 50%;

说明：

前面所有学过的单位均可，一般使用百分比以及px

尺寸属性只对块级元素以及行块级元素起效果，对行级元素无效

额外补充两个尺寸单位：

vw：可视区域的宽度，100vw代表一个可视区域的宽度

vh：可视区域的高度，100vh代表一个可视区域的高度

8.7 显示属性

说明：

设置元素的显示布局方式

8.7.1 值列表

值	说明
block	块级元素的默认值，元素会被显示为块级（相当于将其设定为块级元素）
inline	行级元素的默认值，元素会被显示为行级
inline-block	行块级元素，让元素显示为行级，并且具有盒子模型的特性
none	不显示元素
flex	弹性布局（伸缩布局），其为盒子模型提供了最大的灵活性，因为其很复杂，因此我们将在下节课讲解

8.7.2 示例

div span {
    display: none;
}
div span:hover {
    display: inline-block;
}

8.8 背景属性

8.8.1 background-color：设置背景颜色

示例：background-color:#c00;
其设置颜色方式与color样式一样，不过背景属性还有一个特殊的值为transparent（默认值，透明）

8.8.2 background-image：设置背景图像

示例：background-image: url("../img/bg.gif");
该属性一般与background-repeat一起搭配使用
url中可以写相对地址，也可以写网络地址（推荐相对地址）
相对地址是css文件相对于资源的地址，而不是html文件相对于资源的地址

8.8.3 background-repeat：设置背景平铺方式

示例：background-repeat:no-repeat;
常用的值：
- repeat：沿水平和垂直两个方向平铺，如果最后一个图像不适合，它将被剪切（默认值）
- no-repeat：不平铺，即背景图像只显示一次
- repeat-x：只沿水平方向平铺
- repeat-y：只沿垂直方向平铺

8.8.4 background-position：设置背景偏移值或者位置

示例：background-position: 30px -40px;
常用的值：
- Xpos Ypos：使用尺寸单位值表示（一般使用px），第一个值表示水平位置，第二个值表示垂直位置（常用）
- X% Y%：使用百分比表示背景的位置，第一个值表示水平位置，第二个值表示垂直位置（不常用）
- 关键词：使用关键词表示背景的位置，水平方向的关键词left、center、right，垂直方向的关键词有top、center、bottom
我们也可以单独设置某个方向：background-position-x:10px;、background-position-y:10px;
使用background-position可以实现大图片裁切小图的功能

8.8.5 background：复合属性

示例：background:#C00 url("../img/bg.gif") 205px 10px no-repeat;
几个值的顺序可以调整

8.9 透明度

示例：opacity:0.5;
可选的值为0~1，0为完全透明，1为完全显示

8.10 盒子模型

盒子模型的结构：content（显示内容）、border（边框）、padding（内边距：内容与边框的距离）、margin（外间距：外边框与其他相邻元素的距离）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MEdaOjM3-1611905498875)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/盒子模型结构.png )]

8.10.1 设置盒子模型的边框

border-color：边框颜色
- 示例：border-color: #EEFF34；
- 颜色值的设置方式与前面学的一样
- 可以单独设置是个方向的值：border-top-color、border-right-color、border-bottom-color、border-left-color
- 如果合在一起，那么按照顺时针设置：上、右、下、左；如果只设置两个值，那么表示上下一致，左右一致；如果只设置一个值，那么表示上下左右全部一致
border-width：边框粗细
- 示例：border-width: 5px;
- 可以使用前面我们学的各种尺寸(vw和vh除外)
- 可以单独设置是个方向的值：border-top-width、border-right-width、border-bottom-width、border-left-width
- 如果合在一起，那么按照顺时针设置：上、右、下、左；如果只设置两个值，那么表示上下一致，左右一致；如果只设置一个值，那么表示上下左右全部一致
border-style：边框样式
- 示例：border-style: solid;
- 可设置的值有：
  - none：无边框
  - hidden：隐藏边框
  - dotted：点线边框
  - dashed：虚线边框
  - solid：实现边框
- 可以单独设置四个方向的值：border-top-style、border-right-style、border-bottom-style、border-left-style
- 如果合在一起，那么按照顺时针设置：上、右、下、左；如果只设置两个值，那么表示上下一致，左右一致；如果只设置一个值，那么表示上下左右全部一致
border：边框复合属性

8.10.2 设置盒子模型的内边距

padding：按照顺时针设置：上、右、下、左；如果只设置两个值，那么表示上下一致，左右一致；如果只设置一个值，那么表示上下左右全部一致
也可以单独设置四个方向的值：padding-top、padding-right、padding-bottom、padding-left

8.10.3 设置盒子模型的外间距

margin：按照顺时针设置：上、右、下、左；如果只设置两个值，那么表示上下一致，左右一致；如果只设置一个值，那么表示上下左右全部一致
也可以单独设置四个方向的值：margin-top、margin-right、margin-bottom、margin-left

8.10.4 盒子模型宽高计算

内容盒子（默认）：width和height指的是内容的大小
盒子的实际宽度 = width + 左右的内边距 + 左右的边框宽度；
盒子的实际高度 = height+ 上下的内边距 + 上下的边框宽度;
边框盒子：width和height 包括内容。填充距离和边框
- 盒子的实际宽度 = width + 内容宽度 + 左右填充距离 + 左右边框
- 盒子的实际高度 = height + 内容高度 + 上下填充距离 + 上下边框

8.10.5 外间距居中处理

将外间距的左右均设置为auto，表示自动计算剩余的外间距，从而实现水平居中的效果（注意，该方式仅适用于块级的显示方式）

九、CSS3新特新

9.1 text-shadow：文本阴影效果

用于设定文本文字是否有阴影以及模糊效果，其默认值是none，即没有阴影

9.1.1 语法

text-shadow: none | <length> <length> <length> <color>[,<more-shadow>];

第一个：用于设置元素的阴影水平偏移值，可以为负值

第二个：用于设置元素的阴影垂直偏移值，可以为负值

第三个：用于设置元素的阴影模糊值，不可以为负值

color：用于设置阴影的颜色

常用的尺寸单位：px，em，rem

more-shadow是多个阴影的意思，需要用逗号进行分隔

9.1.2 示例

1.单个阴影

div {
    padding-top: 50px;
    font-size: 50px;
    color: red;
    text-align: center;
    /*文本阴影*/
    text-shadow: none;

    text-shadow: 0 0 0 black;
    /*阴影水平向右移动*/
    text-shadow: 5px 0 0 black;
    /*阴影水平向右移动,并且阴影模糊*/
    text-shadow: 5px 0 5px black;
    /*阴影水平向右移动,垂直向上移动,并且阴影模糊*/
    text-shadow: 5px -5px 5px black;
}

2.多个阴影

div {
    padding-top: 50px;
    font-size: 50px;
    color: #fff;
    text-align: center;
    text-shadow: -2px 0 0 black, 2px 0 0 black, 0 -2px 0 black, 0 2px 0 black;
}

9.2 box-shadow：边框阴影

用于设定元素的阴影，其默认值为none，即无阴影

9.2.1 语法

box-shadow: none | <length> <length> <length> <length> <color> inset[,<more-shadow>];

第一个length：用于设置元素的阴影水平偏移值，可以为负值

第二个length：用于设置元素的阴影垂直偏移值，可以为负值

第三个length：用于设置元素的阴影模糊值，不可以为负值

第四个length：用于设置元素的阴影外延值，不可以为负值，可以省略

color：用于设置阴影的颜色

inset：用于设置阴影为内阴影，可以省略，若省略则为外阴影

常用单位：px、em、rem

more-shadow是多个阴影的意思，需要用逗号隔开

9.2.2 示例

div {
    width: 300px;
    height: 300px;
    margin: 50px auto;
    border: 10px solid red;
    /*边框阴影*/
    box-shadow: 0 0 0 0 black;

    /*边框阴影 - 第一个参数水平位移*/
    box-shadow: 10px 0 0 0 black;
    /*边框阴影 - 第二个参数表示垂直位移*/
    box-shadow: 0 10px 0 0 black;
    /*边框阴影 - 第三个参数表示模糊程度*/
    box-shadow: 10px 10px 10px 0 black;
    /*边框阴影 - 第四个参数表示阴影的扩散*/
    box-shadow: 10px 10px 10px 30px black;
    /*边框阴影 - 第五个参数表示阴影的颜色*/
    box-shadow: 10px 10px 10px 30px black;
    /*边框阴影 - 第六个参数表示阴影出现在盒子的里面还是外面*/
    box-shadow: 10px 10px 10px 30px black inset;
}

9.3 border-radius：边框圆角

用于给元素设定圆角效果，默认值为0，表示没有圆角

9.3.1 语法

border-radius: <length>;

第一个length：用于设定水平半径，一共4个参数，参数数量可以是1个、2个、3个、4个
若只有1个参数，那么数值作用于4个角
若只有2个参数，那么第一个作用于上左、下右，第二个作用于上右、下左
若只有3个参数，那么第一个作用于上左，第二个作用于上右、下左，第三个作用于右下
若有4个参数，那么分别作用于上左、上右、下右、下左
常用单位：px、em、rem、%

第二个length：用于设定垂直半径，可以省略，若省略，大小与水平半径一致（一般都不会设置）

9.3.2 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示圆角边框</title>
    <style type="text/css">
        div{
            width: 88%;
            height: 300px;
            margin: auto;
            border:1px solid #CCC;
            border-radius: 5px;
        }

        p{
            width: 88%;
            height: 300px;
            margin: auto;
            border:1px solid #CCC;
            border-radius: 5px 10px 20px 30px;
        }

        #two-radio{
            width: 88%;
            height: 300px;
            margin: 50px auto;
            /* 每一个角度都可以使用两边的角度调整  水平边/垂直边 */
            border-radius: 158px/121px;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
    <div id="two-radio"></div>
</body>
</html>

9.4 background-size：背景图的大小设置

用于设定背景图像的大小，默认值是auto

9.4.1 语法

background-size: auto | cover | contain | <length>;

cover：设定背景图像等比缩放到完全覆盖容器，背景图像可能超出容器（图片显示不全）

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

background-size与background-position可以实现大图裁切小图并任意控制大小的效果

9.4.2 示例

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    width: 400px;
    height: 100px;
    border: 1px solid red;
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;
    /*背景图的大小*/
    background-size: 100% 100%;
    /*背景图等比缩放，完全覆盖容器*/
    background-size: cover;
    /*背景图等比缩放，容器完全包含图像*/
    /*background-size: contain;*/

    background-position: center;
}

9.5 linear-gradient：背景颜色线性渐变

9.5.1 语法

linear-gradient(position,color1,color2,...);

position：设定渐变的角度，以deg为单位。也可以设置预设的方向值（默认to bottom）
to bottom:从上至下
to left：从右至左
to right：从左至右
to top left：从右下至左上
to top right：从左下至右上
to bottom left：从右上至左下
to bottom right：从坐上至右下

color1：起点颜色
color2等等：中间以及终点颜色
渐变色参考网站：https://uigradients.com/

9.5.2 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示颜色渐变</title>
    <style type="text/css">
        div{
            width:300px;
            height: 200px;
            margin: 10px;
            display: inline-block;
            border: 1px solid #ccc;
        }

        .normal{
            background-image: linear-gradient(#2193b0,#6dd5ed);
        }

        .direct{
            background-image: linear-gradient(to right,#2193b0,#6dd5ed);
        }
        .degree{
            background-image: linear-gradient(135deg,#373b44,#4286f4);
        }
        .multi-color{
            background-image: linear-gradient(to right,
            #a80077,#66ff00,#f7ff00,#db36a4,#ff4b1f, #1fddff);
        }
    </style>
</head>
<body>
    <div class="normal"></div>
    <div class="direct"></div>
    <div class="degree"></div>
    <div class="multi-color"></div>
</body>
</html>

9.6 box-sizing：盒子模型的尺寸计算

9.6.1 默认计算

盒子的实际占位宽度 = 左右外边距 + 左右边框宽度 + 左右内边距（填充宽度） + 内容宽度
盒子的实际占位高度 = 上下外边距 + 上下边框宽度 + 上下内边距（填充宽度） + 内容高度

注意事项：默认设置 width 和height 属性指内容的宽高，称为内容盒子

9.6.2 语法

box-sizing: content-box | border-box | inherit;

content-box:默认值

border-box:盒子的宽度或高度等于元素内容的宽度或高度。（盒子的实际占位宽度 = 左右外边距 + width；盒子的实际占位高度 = 上下外边距 + height）

inherit: 此值使元素继承父元素的盒子模型模式

9.6.3 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示盒子尺寸</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            display: inline-block;
            margin: 50px;
            padding:50px;
            border: 50px double #CCC;
        }
        .border-box{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
        }
        .contain-box{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
<div class="normal"></div>
<div class="border-box"></div>
<div class="contain-box"></div>
</body>
</html>

9.7 transform：2D变换

9.7.1 translate：位移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGYXi9Gg-1611905498879)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/HTML5&CSS3/02-CSS3/2D变换-位移.png )]

语法：translate(x,y);

x：表示X轴（横坐标）移动的向量长度，如果为正值，表示元素向 X 轴右侧移动，为负值则向X 轴左侧移动

y：表示Y轴（纵坐标）移动的向量长度，如果为正值，表示元素向Y 轴下侧移动，为负值则向Y 轴上倒移动

x、y常用的单位是px，也可以是百分比

可以单独设置指定方向：translateX(x)、translateY(y)

示例：

li a:hover{
   ...
   transform: translate(4px, 8px);
}

9.7.2 scale：缩放

语法：scale(x,y)或 scale(sx)

x：指定横向坐标（宽度）方向的缩放量
y：指定纵轴坐标（高度）方向的缩放量

x、y默认值为1，0~0. 99的任意值都可以让元素缩小，而任何大于1的值都能让元素放大设置属性

可以只接收一个值，也可以接收两个值。当只有一个值时，第二个值默认和第一个值相等

示例：

li a:hover{
   ...
   transform: scale(1.5);
}

9.7.3 rotate：旋转

语法：rotate(r)

r：角度值，正值表示顺时针旋转，负值表示逆时针旋转；单位使用deg

y：指定纵轴坐标（高度）方向的缩放量

x、y默认值为1，0~0. 99的任意值都可以让元素缩小，而任何大于1的值都能让元素放大设置属性

可以只接收一个值，也可以接收两个值。当只有一个值时，第二个值默认和第一个值相等

示例：

img:hover{
   ...
   transform: rotate(-90deg) scale(2);
}

9.8 transition：过渡效果

9.8.1 语法

其是一个复合属性：transition: [transition-property transition-duration transition-timing-function transition-delay]

9.8.2 transition-property：过渡属性

IDENT：指定的CSS属性（width、height、background-color属性等）

ALL：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

9.8.3 transition-duration：过渡时间

单位是s，可以是整数或者小数，例如2s、1.4s、.5s等等

9.8.4 transition-timing-function：过渡动画函数

ease：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（默认值）

linear：元素样式从初始状态过渡到终止状态时恒速（匀速运动）

ease-in：元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果）

ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢（渐隐效果）

ease-in-out : 元素样式从初始状态过渡到终止状态时速度先加速再减速（渐显渐隐效果）

9.8.5 transition-delay：过渡延迟时间

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断（用的少，甚至不用）

0：默认值，元素过渡效果立即执行

9.8.6 过渡效果的触发机制

伪类触发: :hover、:active、:focus、:checked等

媒体查询：可以通过@media属性判断设备的尺寸、方向等

JavaScript触发：用JavaScript脚本触发

9.8.7 示例

.transition{
    width: 500px;
    height: 500px;
    margin: 20px auto;
    border: 1px solid blue;
    transition: all 1s linear 0s;
}

.transition:hover{			
    border-radius: 250px;
    background-color: black;
}

9.10 animation：动画

9.10.1 制定关键帧动画

使用@keyframes来建立关键帧动画，我们可以通过百分比设置指定关键帧的效果（中间的自动补间动画）；也可以使用from-to直接设置（初始和结束的关键帧，中间自动补间动画）

百分比方式

@keyframes IDENT {
    from {/*CSS样式写在这里*/}
    percentage {/*CSS样式写在这里*/}
    to {/*CSS样式写在这里*/}
}

from-to方式

@keyframes IDENT {
    0% {/*CSS样式写在这里*/}
    percentage {/*CSS样式写在这里*/}
    100% {/*CSS样式写在这里*/}
}

IDENT是一个动画名称，可以取一个任意定义的动画名称，当然语义化一点会更好，使用小写，单词之间使用-分割

9.10.2 animation属性

animation-name：由@keyframes创建的动画名称
animation-duration：设定动画的持续时间
animation-delay：设定动画播放的延迟时间
animation-iteration-count：设定动画的播放次数
- 直接输入数字：表示播放多少次之后，动画就不再播放
- infinite：表示无限次
animation-direction：设定动画播放的方向
- normal：正常播放动画（默认值）
- alternate：轮流反向播放动画
animation-play-state：设定动画的状态为运行/暂停（由JS来操控）
- paused：暂停
- running：播放
animation-fill-mode：设定动画在播放前后，动画效果是否可见
- none：默认值，不改变默认行为
- forwards：动画完成后，保持最后一个属性值
- backwards：保留动画显示前delay所指定的时间内值
- both：向前和向后填充模式都被应用
animation-timing-function：设定动画的速度曲线
- ease：动画从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（默认值）
- linear：动画从初始状态过渡到终止状态时恒速（匀速运动）
- ease-in：动画从初始状态过渡到终止状态时速度越来越快（渐显效果）
- ease-out：动画从初始状态过渡到终止状态时速度越来越慢（渐隐效果）
- ease-in-out : 动画从初始状态过渡到终止状态时速度先加速再减速（渐显渐隐效果）
- steps(n, start)：使用阶跃函数设定帧的过渡效果

9.10.3 示例

篮球上下跳动动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>演示动画的使用</title>
	<style type="text/css">
		.ball {
          display: inline-block;
          background-image: url("./img/lanqiu.png");
          width: 166px;
          height: 166px;
          animation: ball ease-in-out .5s infinite alternate;
        }

        @keyframes ball {
          from {
            transform: translateY(0) rotate(0);
          }
          to {
            transform: translateY(300px) rotate(360deg);
          }
        }
	</style>
</head>
<body>
	<i class="ball"></i>
</body>
</html>

使用steps跳帧，实现正在播放的图标动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>演示动画的使用</title>
	<style type="text/css">
		.live {
            display: inline-block;
            width: 36px;
            height: 36px;
            background: url("./img/zhibo.png");
            animation: live-icon .5s linear infinite;
            animation-timing-function: steps(1);
        }
        @keyframes live-icon {
            0% {
                background-position: 0 0;
            }
            16% {
                background-position-x: -36px;
            }
            32% {
                background-position-x: -72px;
            }
            48% {
                background-position-x: -108px;
            }
            64% {
                background-position-x: -144px;
            }
            80% {
                background-position-x: -180px;
            }
            96% {
                background-position-x: -216px;
            }
        }
	</style>
</head>
<body>
	<i class="live"></i>
</body>
</html>

9.10.4 动画库

https://daneden.github.io/animate.css/

十、高级选择器

10.1 关系选择器

10.1.1 E F 包含选择器

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

10.1.2 E>F 子选择器

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

10.1.3 E+F 相邻选择器

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

10.1.4 E~F 兄弟选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

10.1.5 示例模板

<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>

10.2 属性选择器

10.2.1 E[attr]

选择匹配具有属性attr的E元素

10.2.2 E[attr=val]

选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）

10.2.3 E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配（其中val区分大小写）

10.2.4 E[attr^=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串（其中val区分大小写）

10.2.5 E[attr$=val]

选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串（其中val区分大小写）

10.2.6 示例模板

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first-test">1</a>
    <a href="#" class="links active item" title="test website" target="_blank">2</a>
    <a href="#" class="links item">3</a>
    <a href="#" class="links item">4</a>
    <a href="https://study.163.com/provider/1017089528/index.htm" class="links item">5</a>
    <a href="#" class="links item">6</a>
    <a href="#" class="links item">7</a>
    <a href="#" class="links item">8</a>
    <a href="#" class="links item">9</a>
    <a href="#" class="links item last" id="last">10</a>
</p>

10.3 伪类选择器

10.3.1 选择器:first-child

选择属于选择器的第一个子元素

10.3.2 选择器:last-child

选择属于选择器的最后一个子元素

10.3.3 选择器:nth-child(n)

选择属于选择器的指定位置的子元素

10.3.4 选择器:first-of-type

选择属于选择器的第一个指定选择器的子元素

10.3.5 选择器:last-of-type

选择属于选择器的最后一个指定选择器的子元素

10.3.6 选择器:nth-of-type(n)

选择属于选择器的指定位置的指定选择器的子元素

10.3.7 示例模板

<div>
    <h1>一级标题</h1>
    <p>正文内容1</p>
    <p>正文内容2</p>
    <h1>一级标题</h1>
    <p>正文内容3</p>
    <p>正文内容4</p>
    <p>正文内容5</p>
    <h2>一级标题</h2>
    <p>正文内容6</p>
</div>

10.4 选择器的权重

10.4.1 选择器的权重值列表

选择器	权重值
行内样式	1,0,0,0
ID选择器	0,1,0,0
类选择器	0,0,1,0
元素和伪元素选择器	0,0,0,1
通配符、子选择器、相邻选择器等	0,0,0,0
关系选择器	0,0,0,0

10.4.2 权重生效规则

每个选择器都有自己的权重，级别由加权计算得出

从左往右逐个等级比较，前一等级相等才往后比

权重值相同，那么后者生效，否则权重值高者生效

10.4.3 权重比较规则

第一等：代表内联样式，如: style=””，权值为1,0,0,0

第二等：代表ID选择器，如：#content，权值为0,1,0,0

第三等：代表类，伪类和属性选择器，如.content，权值为0,0,1,0

第四等：代表元素和伪元素选择器如div p，权值为0,0,0,1

通配符、子选择器、相邻选择器等如*、>、+,权值为0,0,0,0

继承的样式没有权值

!important为强制优先（破坏权重，慎用）

10.4.4 权重计算示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>权重计算</title>
    <style type="text/css">
        #container div#header h2 {
            color: red;
        }
        #container #header>h2 {
            color: blue;
        }
        body #container div[id="header"] h2 {
            color: green;
        }
        #header div.paragraph h2 {
            color: orangered;
        }
        #header[class="paragraph"] h2 {
            color: yellow;
        }
        div#header div.paragraph h2.first {
            color: pink;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <h2>CSS简介</h2>
        <p>...</p>
        <div class="paragraph">
            <h2 class="first">使用CSS布局的优点</h2>
            <p>1、XXX 2、XXX 3、XXX 4、XXX</p>
        </div>
    </div>
</div>
</body>
</html>

十一、字体图标

其底层是一个字体，其内部不是英文或者中文，而是一个个小图标

我们可以通过名称，来获取对应的图标

因为其本质是字体，因此我们可以通过font-size控制大小、color控制颜色等

通常我们使用i标签来实现字体图标

常用的字体图标FontAwesome地址：https://fontawesome.dashgame.com/

a听闻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-CSS3

一、概念Cascading Style Sheets 层叠样式表，用来展现HTML、XHTML的页面标签的外观风格说明:官网: https://www.w3.org/Style/CSS/我们在上节课学的各种标签，其实自带有一定的样式，可以通过F12来观察，为了实现某些布局或者效果，我们可能会移除标签的指定样式二、CSS的作用用来美化页面元素 - 美化外观用来布局页面元素 - 布局定位用来实现内容和外观的分离 - 方便维护和修改三、语法官方https://www.w3.or
复制链接

扫一扫

专栏目录