css总结

已于 2024-03-19 21:26:36 修改
阅读量781 收藏 16
点赞数 9
文章标签： css 前端
于 2023-12-07 15:18:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74206393/article/details/134855963
版权

一，css入门

引入css：内部引入，行内引入，外部引入

1.1 内部样式
也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

1.2 行内样式
也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

1.3 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

二，css选择器

（1）基础选择器

1，标签选择器——使用HTML标签作为选择器的名称

img{
   width:100px;
}

2，类选择器 ——以 . 号作为前缀，同时调用多个类选择器时，以 空格 分隔

 .container{
    background-color: #fff;
  }

3， ID选择器 ——以 # 作为前缀，以标签的id属性作为样式应用的依据，一对一的关系

（2）复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
		h1.aaa{
			color:red;
		}
		/* 1.标签选择器和ID选择器合起来使用----复合选择器 */
		p#bbb{
			color:blue;
		}
		/* 2.组合选择器 */
		h1,p,div,span,.ccc{
			font-size:30px;
		}
		div{
			background:violet;
		}
		.ccc{
			font-weight:bold;
		}
		/* 3.嵌套选择器 */
		/* div p{
			color:green;
			text-decoration:underline;
		} */
		div>p{
			color:green;
			text-decoration:underline;
		}
		div h3.ddd{
			color:red;
		}
	</style>
</head>
<body>
	<!-- 需求：只想修饰class属性为aaa的h1标签 -->
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 我要修饰ID属性为bbb的p标签 -->
	<p id="bbb">world</p >
	<p>html</p>
	<h1 id="bbb">主讲：叽叽</h1>
	<hr>
	<!-- 给h1、p、div、span标签中的内容设置字号为30px -->
	<h1>hello</h1>
	<p>CSS</p>
	<div>WEB开发</div>
	<span class="ccc">JAVA开发</span>
	<hr>
	<!-- 需求：修饰div内部的p标签 -->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>
	<div>
		<h3>
			<p>div内部的h3内部的p标签</p>
		</h3>
	</div>
	<hr>
	<!-- 需求：修饰div内部的class为ddd的标签 -->
	<div>
		<p>div内部的p</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">PPPP</p>
	</div>
	<h3 class="ddd">h3h3h3</h3>
</body>
</html>

三，css属性 

四，hover

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        border: 2px solid paleturquoise;
    }
    /* 控制自身样式 */
    #box:hover {
        background-color: palegoldenrod;
    }
    #box div{
        width: 50px;
        height: 40px;
        border: 1px solid palevioletred;
    }
    /* 控制后代样式 */
    #box:hover>div{
        background-color: blue;
    }
    /* 控制兄弟样式 */
    #box:hover+div{
        background-color: red;
    }
</style>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div id="box2">
        box的兄弟
    </div>
</body>

五 transform

旋转 

逆时针旋转：

当把鼠标放到#box上，会对#item1进行处理
#box:hover #item1{
    transform:rotate(-60deg);
  }

 顺时针旋转：

#box:hover #item12{
    transform:rotate(60deg);
  }

 移动

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

其语法格式为：

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

缩放 

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

其语法格式为：

transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

举个例子～ 😉

新建一个 index18.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿着 X 和 Y 轴进行缩放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿着 X 轴进行缩放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿着 Y 轴进行缩放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>

 六 transition过渡是元素从一种样式逐渐过渡到另一种样式。

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

举个例子～ 😉

新建一个 index19.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin-top: 40px;
        margin-left: 40px;
        width: 50px;
        height: 50px;
        background-color: #51adcf;
        /*ease-in-out 慢速开始慢速结束*/
        transition: transform 1s ease-in-out;
      }
      div:nth-child(2) {
        transform: rotate(-60deg);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

代码说明如下：

  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

接下来给大家介绍一下 transition-timing-function 属性的取值吧！

transition-timing-function 属性

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。

属性值说明
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
steps(int,start 或者 end)steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start相当于 steps(1, start)。
step-end相当于 steps(1, end)。
cubic-bezier(n,n,n,n)规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial规定使用默认值。
inherit规定从父元素继承该属性值。

transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～ 🤪

新建一个 index20.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。

七 

其语法如下所示：

transition: 指定属性 持续时间 速度曲线 开始时间;

它是一个复合属性，我们也可以如下分开使用这几个属性。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

举个例子～ 😉

新建一个 index19.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin-top: 40px;
        margin-left: 40px;
        width: 50px;
        height: 50px;
        background-color: #51adcf;
        /*ease-in-out 慢速开始慢速结束*/
        transition: transform 1s ease-in-out;
      }
      div:nth-child(2) {
        transform: rotate(-60deg);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

代码说明如下：

  • 在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。
  • 在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。

接下来给大家介绍一下 transition-timing-function 属性的取值吧！

transition-timing-function 属性

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。

属性值说明
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
steps(int,start 或者 end)steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start相当于 steps(1, start)。
step-end相当于 steps(1, end)。
cubic-bezier(n,n,n,n)规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial规定使用默认值。
inherit规定从父元素继承该属性值。

transition-timing-function 属性有这么多的属性值，我们用 steps 来练习一下吧～ 🤪

新建一个 index20.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。

七 @keyframes 动画

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：

@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}

这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。

将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：

animation: 动画名 完成动画的周期 是否重复;

animation 属性是一个复合属性，它的子属性如下所示。

属性描述
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 "ease"。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。

举个例子～ 😉

新建一个 index21.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #ffd8a6;
        animation-name: action;
        animation-duration: 9s;
        animation-iteration-count: 10;
      }
      @keyframes action {
        0% {
          margin-left: 400px;
        }
        25% {
          background-color: #dd7631;
        }
        50% {
          border-radius: 10%;
        }
        100% {
          margin: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>

点击预览页面，实验效果如下：

图片描述

COMEGy
关注
简单CSS 总结
孙叫兽的博客
07-23 908
目录 CSS 总结 你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。 你已经学习了CSS,下一步学习什么呢? 下一步应该学习 JavaScript 。 JavaScript Java.
CSS总结二
一条游向寒江的鱼
06-30 1748
display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。 块级元素的一些例子： - 内联元素不从新行开始，仅占用所需的宽度。 行内元素...
CSS 总结
weixin_56732056的博客
06-23 1272
一条CSS样式由选择器和两部分构成，在中包含了一条或多条声明。 内联样式 级联的优先级 CSS 基础知识总结 颜色，尺寸，对齐 颜色 尺寸 对齐 盒子模型 边框和边距 边框 边距 定位 static 静态 relative 相对 fixed 固定 absolute 绝对 溢出 浮动 不透明度 组合选择器 后代选择器 子选择器 伪类和伪元素 语法： 常用的伪类/伪元素的简单使用：...
CSS总结
You can do more than just get by.
06-24 1494
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：CSS 规则集（rule-set）由选择器和声明块组成：整个结构称为 规则集（通常简称“规则”），各部分释义如下：选择器（Selector）HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 元素）。要给不同元素添加样式只
CSS基础知识总结
Lotus_fragrance的博客
04-29 4043
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2807
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS知识总结
m0_63600776的博客
01-23 2403
CSS基础知识总结CSS引入方式选择器 CSS引入方式 一、内嵌式：CSS写在style标签中 作用范围：当前页面 使用场景：小案例 二、外联式：CSS写在单独的CSS文件中,通过link标签引入 作用范围：多个页面 使用场景：项目中 三、行内式：CSS写在标签的style属性中 作用范围：当前标签 使用场景：配合js使用 选择器 一、标签选择器 结构：标签名(css属性名：属性值) 作用：通过标签名，找到页面中所有这类标签，设置样式 注意点： 1、标签选择器选择的是一类标签，而不是单独的某一个 2、标签选
CSS知识点总结
weixin_48494427的博客
03-16 2205
CSS知识点总结
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css-common:常用的css总结
03-22
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
关于图片显示问题的CSS总结
04-08
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
【CSS in Depth 2 精译_036】5.6 Grid 网格布局中与对齐相关的属性 + 5.7本章小结
最新发布
PeacefulWinter的博客
09-21 1168
本篇为《CSS in Depth》全新第2版5.6与5.7小节内容，主要介绍了网格布局在设置元素对齐时与上一章 Flexbox 布局的一些关联，同时介绍了网格布局特有的对齐属性。为加深理解，我还特地结合Word中对齐文本的相关操作进行了截图对比。建议收藏。
响应式CSS 媒体查询——WEB开发系列39
一条晒干的咸鱼的博客
09-15 1887
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
CSS的offset属性
读心悦
09-15 612
如果你确实需要在CSS中根据元素的偏移量来应用样式，并且这个偏移量是动态的（比如，基于JavaScript计算得出的），你可能需要使用JavaScript来动态地修改元素的类名或内联样式，以反映这些变化。: 虽然这些属性不是直接用于定位元素的，但它们可以影响元素与其他元素之间的空间，从而间接影响布局和元素的“偏移”效果。属性本身不是直接用于“偏移”的，但它可以用来移动元素，包括旋转、缩放、倾斜等。可以实现元素的水平或垂直移动，而不需要改变文档流中的实际位置。，这些属性用于获取元素的位置和尺寸信息。
若依VUE项目安全kind-of postcss vite漏洞扫描和修复
qq_33225414的博客
09-18 367
升级vite、unplugin-auto-import。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值