当前位置： 首页 > news >正文

CSS基础---新手入门级详解

news 文章来源：https://blog.csdn.net/weixin_51341142/article/details/136077428 2024/9/21 2:36:22

CSS:层叠样式表

CSS（Cascading Style Sheets,层叠样式表），是一种用来为结构化文档添加样式（字体、间距和颜色）的计算机语言，css扩展名为.css。

实例:

 <!DOCTYPE html><html>
<head><meta charset="utf-8"><title>CSS实例</title><style>body{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:"Times New Roman";font-size: 25px;}</style>
</head>
<body>
<h1> CSS实例 </h1>
<p>这是一个段落</p>
</body>
</html>

CSS简介

  • CSS指层叠样式表
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 把样式添加到HTML4.0中是为了解决内容与表现分离的问题
  • 外部样式可以极大提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一个

样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样，样式通常保存在外部.css文件中，我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和改观。

CSS语法

css规则由两个主要部分组成：选择器以及一条或多条声明。

h1 {color:bule;font-size:12px;}

上述h1为选择器；color和font-size为属性，对应的blue和12px为值。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每一个属性都有一个值。属性和值被冒号分开。

CSS实例

CSS声明总是以分号；结束，声明总是以大括号{}括起来；

p{color:red;text-align:center;}

为了让CSS可读性更强，每行只描述一个属性；

 <!DOCTYPE html><html>
<head><meta charset="utf-8"><title>CSS实例</title><style>body{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:"Times New Roman";font-size: 25px;}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}</style>
</head>
<body>
<h1> CSS实例 </h1>
<p>这是一个段落</p>
<p>这两段话用来描述CSS属性</p>
<a>开始</a>
</body>
</html>

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

  <style>body{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:"Times New Roman";font-size: 25px;}/* a{color: rgb(4, 255, 0);text-align: start;background-color: black;}*/</style>

CSS id和class

id和class选择器

如果要在HTML元素中设置CSS样式，则需在元素中设置“id”和“class”选择器。

Id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

以下的样式规则应用于元素属性id="p"

#p
{text-align:center;color:red;
}

ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox中不起作用。

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class选择器可以在多个元素中使用。class选择器在HTML中以class属性表述，在caa中，类选择器以一个点.号表示。在下面的例子中，所有拥有center类的HTML元素均为居中。

.center{text-align:center;}

也可以指定特定的HTML元素使用class.在以下实例中，所有p元素使用的class="center"让该元素的文本居中。

p.center{text-align:center;}

多个class选择器可以使用空格分开：

.center{text-align:center;}
.color{color:#ff0000;}

实例

 <!DOCTYPE html><html>
<head><meta charset="utf-8"><title>CSS实例</title><style>body{background-color: aquamarine;}#hha {color: yellow;text-align: center;}p.center {font-family:"Times New Roman";font-size: 25px;background-color: rgb(255, 227, 127);}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}</style>
</head>
<body><!-- id选择器 -->
<h1 id="hha"> CSS实例 </h1>
<!-- class选择器 -->
<p class="center">这是一个段落</p>
<p class="center">这两段话用来描述CSS属性</p>
<a>开始</a>
</body>
</html>

以上为id选择器和class选择器实例，请仔细观察其不同之处。

CSS创建

当读到一个样表时，浏览器会根据它来格式化HTML文档。

如何插入样式表

插入样式表的方法有三种：

  • 外部样式表
  • 内部样式表
  • 内联样式表

外部样式表

当样式需要应用到很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

外部样式表可以用在任何文本编辑器中进行编辑。文件不能包含任何html标签。样式表应该以.css扩展名进行保存。

实例  

CSS

#hr {color:sienna;}p {margin-left:20px;font-size: 25px;background-color: rgb(255, 227, 127);}body {background-image:url("/img/2.webp");}h1{color: yellow;text-align: center;}

HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS实例</title><link rel="stylesheet" type="text/CSS" href="css/mystyle.css">
</head>
<body><h1> CSS实例 </h1><h2>CSS创建</h2>
<p>这是一个段落</p>
<p>这两段话用来描述CSS属性</p>
</body>
</html>

运行结果：

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样：

<head><meta charset="utf-8"><title>CSS实例</title><style>body{background-color: aquamarine;}hr {color: yellow;text-align: center;}p{font-family:"Times New Roman";font-size: 25px;background-color: rgb(255, 227, 127);}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}</style> </head>

内联样式

由于需要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。要使用内联样式，需要在相关的标签内使用样式属性。style属性可以包含任何css属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。实例：外部样式表拥有针对h3选择器的三个属性：

h3
{
color:red;
text-align:left;
font-size:8pt;
}

而内部样式表拥有针对h3选择器的两个属性：

h3
{
text-align:right;
font-size:20pt;
}

假如拥有内部样式表的这个页面同时拥有与外部样式表链接，那么h3得到的样式是;

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列和字体尺寸会被内部样式表中的规则取代。

多重样式优先级

样式表允许多中方式规定样式信息。样式可以规定在单个的HTML中，在HTML页的头元素中，或在一个外部的CSS 文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式>内部样式>外部样式>浏览器默认样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS实例</title><!-- 外部样式 --><link rel="stylesheet" type="text/CSS" href="CSS/color.css"><style type="text/css">h3{color: aquamarine;text-align: center;}</style>
</head>
<body><h3> CSS实例 </h3>
</body>
</html>

CSS外部样式：

h3{color: blue;text-align: left;
}

注意：如果外部样式放在内部样式后面，则外部样式将覆盖内部样式，实例如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS实例</title><!-- 内部样式 --><style type="text/css">h3{color: aquamarine;text-align: center;}
</style><!-- 外部样式 --> <link rel="stylesheet" type="text/CSS" href="CSS/color.css">
</head>
<body><h3> CSS实例 </h3>
</body>
</html>

CSS背景

CSS背景属性用于定义HTML元素的背景。

CSS属性定义背景效果：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

background-color属性定义了元素的背景颜色。

页面的背景颜色使用在body的选择器中：

body{background-color:#b0c4de;}

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style>body{background-color: orange;}
</style>
</head>
<body><h1>牵丝戏安</h1><p>你好，牵丝戏安</p>
</body>
</html>

CSS中，颜色通常以以下方式定义：

  • 十六进制 - 如："#ff0000"
  • RGB - 如："rgb(255,0,0)"
  • 颜色名称 - 如："red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS back实例</title><style>h1{ background-color:blue}p {background-color:#e0ffff;}div{background-color: yellow;}</style></head><body><h1>这是CSS背景颜色实例</h1><div><p>这段有自己的背景颜色</p>与上述同一个div</div></body>
</html>

背景图像

background-image属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS back实例</title><style>body{background-color: aquamarine;background-image: url('img/2.webp');}</style></head><body><h1>这是CSS背景颜色实例</h1><div><p>这段有自己的背景颜色</p>与上述同一个div</div></body>
</html>

背景图像-水平或垂直

默认情况下backgroung-image属性会在页面的水平或者垂直方向平铺，一些图像如果在水平方向与垂直方向平铺，会显得很不协调。正如上图所示，如果图像只在水平方向平铺，页面背景会好看一些：

  body
{ background-image: url('img/2.webp');background-repeat: repeat-x;
}

背景图像-设置定位与不平铺

让背景图像不影响文本的排版。如果你不想让图像平铺，可以使用background-repeat属性：

   body{background-image: url('img/2.webp');background-repeat: no-repeat;}

以上实例中，背景图像与文本显示在同一个位置，为了让排版更加合理，不影响文本的阅读，可以改变图像的位置。利用background-position属性改变图像的位置：

   body{background-image: url('img/2.webp');background-repeat: no-repeat;background-position: right top;}

背景-简写属性

在以上代码中我们可以看到页面的背景颜色通过了很多属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在一个属性中，背景颜色的简写为“background”

 body {background: url('img/2.webp') no-repeat right top;}

CSS文本格式

文本颜色

颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

实例;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS back实例</title><style>h1{color: aquamarine;text-align: center;}p.date{text-align: right;color: blue;}p.main{text-align: justify;color: red</style></head><body><h1>春晓</h1><p class="date">唐（孟浩然）</p><p class="main"> 春眠不觉晓，处处闻啼鸟。</p><p class="main">夜来风雨声，花落知多少。</p><p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p></body>
</html>

文本修饰

text-decoration属性用来设置或删除文本的装饰。从设计的角度来看text-decoretion属性主要是用来删除链接的下划线。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母或每个单词的首字母大写。

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS back实例</title><style>h1{color: aquamarine;text-align: center;text-decoration: underline;}p.date{text-align: right;color: blue;text-decoration: overline;}p.main{text-align: justify;color: red;text-decoration: line-through;text-indent: 50px;}a.start{text-decoration:none;}p.uppercase{texttransform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}}</style></head><body><h1>春晓</h1><p class="date">唐（孟浩然）</p><p class="main"> 春眠不觉晓，处处闻啼鸟。</p><p class="main">夜来风雨声，花落知多少。</p><a class="start" href="http://www.baidu.com">百度网站</a><br><a  href="http://www.baidu.com">百度网站</a><p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p></body>
</html>

CSS字体

CSS字体属性定义字体，加粗，大小，文字样式。

CSS字型

在CSS中，有两种类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
  • 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS 字体</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>
</body>
</html>

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小
设置字体大小像素

设置文字的大小与像素，可以完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

CSS链接

不同的链接可以有不同的样式。

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS链接</title>
<style>a:link{color:aqua;} a:visited{color:aquamarine;}a:hover{color: blue;}a:active{color:cadetblue}
</style>
</head>
<body>
<a slass="" href="http://www.baidu.com">访问百度</a><br>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

<style>a:link{color:aqua;text-decoration: none;} a:visited{color:aquamarine;text-decoration: none;}a:hover{color: blue;text-decoration: underline;}a:active{color:cadetbluel;text-decoration: underline;}
</style>

背景颜色

背景颜色属性指定链接背景色：

<style>a:link{color:aqua;text-decoration: none;background-color: blue;} a:visited{color:aquamarine;text-decoration: none;background-color: aqua;}a:hover{color: blue;text-decoration: underline;background-color: black;}a:active{color:cadetbluel;text-decoration: underline;background-color: blueviolet;}
</style>

CSS列表

CSS列表属性作用如下：

  • 设置不同的列表标记为有序列表
  • 设置不同的列表标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中，有两种类型的列表：

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

无序列表如下所示:

  • Coffee
  • Tea
  • Coca Cola

有序列表如下所示:

  1. Coffee
  2. Tea
  3. Coca Cola

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS链接</title>
<style>ul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}</style>
</head>
<body><p>无序列表实例:</p><ul class="a"><li>苹果</li><li>香蕉</li><li>香蕉梨</li></ul><ul class="b"><li>苹果</li><li>香蕉</li><li>香蕉梨</li></ul><p>有序列表实例:</p><ol class="c"><li>苹果</li><li>香蕉</li><li>香蕉梨</li></ol><ol class="d"><li>苹果</li><li>香蕉</li><li>香蕉梨</li></ol>
</body>
</html>

作为列表项标记的图像

ul
{list-style-image: url('sqpurple.gif');
}

注意：url中为标记前的图片地址。

  • ul:
    • 设置列表类型为没有列表项标记
    • 设置填充和边距 0px（浏览器兼容性）
  • ul 中所有 li:
    • 设置图像的 URL，并设置它只显示一次（无重复）
    • 您需要的定位图像位置（左 0px 和上下 5px）
    • 用 padding-left 属性把文本置于列表中

列表-简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul
{list-style: square url("sqpurple.gif");
}

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

上面的图片说明了盒子模型。

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子链接</title>
<style>div{background-color: antiquewhite;width: 300px;border: 25px solid darkcyan;padding:30px;margin: 50px;}</style>
</head>
<body><h2>盒子模型</h2> <p>盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p><div>这里是盒子内的实际内容。有25内间距，30外间距，50绿色边框</div>
</body>
</html>

CSS边框

边框样式：border-style 属性用来定义边框的样式。

border-style值： 

none默认无边框
dotted定义一个点线边框
dashed定义一个虚线边框
solid定义一个实线边框
double定义两个边框。两个边框的宽度和border-width的值相同
groove定义3D沟槽边框。效果取决于边框的颜色值
ridge定义3D脊边框。效果取决于边框的颜色值
inset定义一个3D的嵌入边框。效果取决于边框的颜色值
outset定义一个3D突出边框。效果取决于边框的颜色值

实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>border</title><style>p.none{border-style: none;}p.dotted{border-style:dotted;}p.dashed{border-style:dashed;}p.solid{border-style:solid;}p.double{border-style: double;}p.groove{border-style:groove;}p.ridge{border-style:ridge;}p.inset{border-style:inset;}p.outset{border-style:outset;}</style></head><body><p class="none">无边框</p><p class="dotted">点线边框</p><p class="dashed">虚线边框</p><p class="solid">实现边框</p><p class="double">两个边框</p><p class="groove">3D沟槽边框</p><p class="ridge">3D脊边框</p><p class="inset">3D嵌入边框</p><p p class="outset">3D突出边框</p></body>
</html>

边框宽度

可以通过border-width属性为边框指定宽度。指定宽度有两种方法：可以指定长度值，比如2px或0.1em或者使用3个关键字之一，他们分别为thick、medium和thin。

注意：CSS没有定义3个关键字的具体宽度，所以一个用户可能把thick、medium和thin分别设置为等于5px、3px和2px，而另一个用户则分别设置为3px、2px、和1px.

实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>border</title><style>p.one{border-style: solid;border-width: 5px;}p.two{border-style:solid;border-width: medium;}p.three{border-style: solid;border-width: 1px;}</style></head><body><p class="one">牵丝戏安</p><p class="two">牵丝戏安</p><p class="three">牵丝戏安</p></body>
</html>

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

  • name - 指定颜色的名称，如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"

您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

边框-单独设置各边

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;
    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;
    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;
    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;
    • 四面边框是 dotted
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>border</title><style>p.one{border-top-style: solid;border-right-style: groove;border-bottom-style: dotted;border-left-style: ridge;border-width: 5px;border-color: aqua;}p.two{border:solid medium blue;}p.three{border-style: solid;border-width: 1px;}</style></head><body><p class="one">牵丝戏安</p><p class="two">牵丝戏安</p><p class="three">牵丝戏安</p></body>
</html>

CSS外边距

CSS外边距属性定义元素周围的空间。

margin

margin清楚周围的（外边框）元素区域。margin没有背景颜色，是完全透明的。

margin可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

可能的值

值说明
auto设置浏览器边距。
这样做的结果会依赖于浏览器
length定义一个固定的margin（使用像素，pt，em等）
%定义一个使用百分比的边距

margin可以使用负值，重叠的内容。

Margin-单边外边距属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边距(runoob.com)</title> 
<style>
p
{background-color:yellow;
}
p.margin
{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
}
</style>
</head><body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body></html>

CSSpadding（填充）

CSSpadding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

可能的值

值说明
length定义一个固定的填充(像素, pt, em,等)
%使用百分比值定义一个填充
填充-单边内边距属性
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

  • 上内边距是 25px
  • 右内边距是 50px
  • 下内边距是 25px
  • 左内边距是 50px

CSS分组和嵌套选择器

分组选择器

h1
{color:green;
}
h2
{color:green;
}
p
{color:green;
}

为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。

<style>
h1,h2,p
{color:green;
}</style>

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
<style>
p/* 第一个样式 */
{color:blue;text-align:center;
}
.marked/*  第二个样式    */
{background-color:red;
}
.marked p/*  为class="marked"元素内的P元素指定一个样式   */
{color:rgb(15, 222, 84);
}
p.marked/* 为所有class="marked"的P元素指定一个样式    */
{text-decoration:underline;
}
</style>

CSS定位

position属性制定了元素的定位类型。

position属性的五个值：

  • station
  • relative
  • fixed
  • absolut
  • sticky

元素可以使用的顶部、底部、左侧和右侧属性定位。然而这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位的方法。

station定位

HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top,bittom,left,right影响。

    <style>h1{color: aquamarine;text-align: center;}p.date{text-align: right;color: bluen;}p.main{color: red;left:20px;position:relative}a.start{text-decoration:none;position: relative;left: -20px;}</style>

absolute定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS back实例</title><style>h1{color: aquamarine;text-align: center;}p.date{text-align: right;color: bluen;}p.main{color: red;left:20px;position:relative}a.start{text-decoration:none;position:absolute;left: 100px;top:150px;}</style></head><body><h1>春晓</h1><p class="date">唐（孟浩然）</p><p class="main"> 春眠不觉晓，处处闻啼鸟。</p><a class="start">夜来风雨声，花落知多少。</a></body>
</html>

Sticky定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

  h1{position:-webkit-sticky;position:sticky;top:0;padding: 5px;background-color: blue;border:2px solid #4CAF50;color: aquamarine;text-align: center;}

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

   img{position: absolute;left: 0px;top:0px;z-index: -1;}

CSS总结

CSS基础教程就到这里，更多复杂样式，只需将前面所学习的简单样式相互组合，核心内容为盒子模型，根据盒子模型的布局，可以设置十分美观的网站。

相关文章：

CSS基础---新手入门级详解

CSS:层叠样式表 CSS&#xff08;Cascading Style Sheets,层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档添加样式&#xff08;字体、间距和颜色&#xff09;的计算机语言&#xff0c;css扩展名为.css。 实例: <!DOCTYPE html><html> <head><…...

编程日记 2024/2/14 1:33:31

Python中Pymysql库的常见用法和代码示例

关注B站可以观看更多实战教学视频&#xff1a;肆十二-的个人空间-肆十二-个人主页-哔哩哔哩视频 (bilibili.com) pymysql是一个用于连接MySQL数据库的Python库&#xff0c;它允许你执行SQL查询并处理返回的结果。以下是pymysql库的一些常见用法和代码示例&#xff1a; 1. 安装…...

编程日记 2024/2/14 1:26:20

使用 WPF + Chrome 内核实现高稳定性的在线客服系统复合应用程序

对于在线客服与营销系统&#xff0c;客服端指的是后台提供服务的客服或营销人员&#xff0c;他们使用客服程序在后台观察网站的被访情况&#xff0c;开展营销活动或提供客户服务。在本篇文章中&#xff0c;我将详细介绍如何通过 WPF Chrome 内核的方式实现复合客服端应用程序。…...

编程日记 2024/2/14 1:24:18

fastapi mysql 开发restful 3

pip install mysql-connector-python pymysql 数据库链接 创建src目录&#xff0c;里面创建db.py 代码如下&#xff1a; # 导入mysql.connector模块&#xff0c;该模块提供了与MySQL数据库进行连接和交互的功能。 import mysql.connector # 定义一个函数get_db_connectio…...

编程日记 2024/2/14 1:22:15

【Uniapp uni-app学习与快速上手——详细讲解】

Uniapp uni-app学习与快速上手——详细讲解 1. 介绍2. Uni-app 学习资源3. 快速上手4. 开始第一个项目5. 调试和发布 1. 介绍 Uni-app 是一个使用 Vue.js 编写多端应用的前端框架。开发者可以编写一份代码&#xff0c;然后发布到iOS、Android、网页&#xff08;响应式&#xf…...

编程日记 2024/2/14 1:21:13

剑指offer——旋转数组的最小数字

目录 1. 题目描述2. 分析思路2.1 示例分析 3. 更完美的做法 1. 题目描述 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。输入一个递增排序的数组的一个旋转&#xff0c;输出旋转数组的最小元素。例如数组{3.4,5,1.2}为{1.2,3,4,5}的一个旋转&a…...

编程日记 2024/2/14 1:19:10

盘点数据可视化大屏焦点图十种样式

所谓焦点图就是大屏中居于中心位置的图&#xff0c;是视觉的中心&#xff0c;本位列举了十种焦点图样式供大家参考。 地球作为焦点图 图片来自网络 地图作为焦点图 图片来自网络 城市作为焦点图 图片来自网络 园区做焦点图 图片来自网络 建筑做焦点图 图片来自网络 生产线…...

编程日记 2024/2/14 1:17:07

问题 G: 老鼠和猫的交易

题目描述 小老鼠准备了M磅的猫粮&#xff0c;准备去和看守仓库的猫做交易&#xff0c;因为仓库里有小老鼠喜欢吃的五香豆。 仓库有N个房间&#xff1b; 第i个房间有J[i] 磅的五香豆&#xff0c;并且需要用F[i]磅的猫粮去交换&#xff1b; 老鼠不必交换该房间所有的五香豆&…...

编程日记 2024/2/14 1:15:49

HiveSQL——借助聚合函数与case when行转列

一、条件函数 if 条件函数 if函数是最常用到的条件函数&#xff0c;其写法是if(xn,a,b), xn代表判断条件&#xff0c;如果xn时&#xff0c;那么结果返回a ,否则返回b。 selectif(age < 25 or age is null, 25岁以下, 25岁以上) as age_cnt,count(1) as number from table…...

编程日记 2024/2/14 1:13:47

冒泡排序，判断回文，以及12-24小时制

6-7 定义函数&#xff0c;完成冒泡排序算法。 本题定义一个冒泡排序算法的函数&#xff0c;调用函数后实现数组的升序排序&#xff0c;其数组长度为任意长度。 函数接口定义&#xff1a; 在这里描述函数接口。例如&#xff1a; void sort(int arr[],int n); 在这里解释接口…...

编程日记 2024/2/14 1:10:45

【Vue】computed与watch

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue⛺️稳重求进&#xff0c;晒太阳 计算属性 概念&#xff1a;基于现有的数据&#xff0c;计算出来新的属性&#xff0c;依赖的数据变化&#xff0c;自动重新计算 语法&#xff1a; 声明…...

编程日记 2024/2/14 1:06:42

探索设计模式的魅力：捕捉变化的风-用观察者模式提升用户体验

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 一、引言 核心概念 应用场景 可以解决的问题 二、场景案例 2.1 不用设计模式实现 2.2 存在问题 2.3 使用设计模式实现 2.4 成功克服 三、工作原理 3.1 结构图和说明 3.2 工作原理详解 3.3 实现步骤 四、 优…...

编程日记 2024/2/14 1:03:38

SpringCloud-高级篇（十九）

我们已经学过使用 SpringAMQP去收和发消息&#xff0c;但是发和收消息是只是MQ最基本的功能了&#xff0c;在收发消息的过程中&#xff0c;会有很多的问题需要去解决&#xff0c;下面需要学习rabbitMQ的高级特性去解决 死信交换机&#xff1a;这个可以帮助我们实现消息的延迟的…...

编程日记 2024/2/14 1:01:36

Junit常用断言

0.断言简介 断言:assert Q:断言的作用 更方便的对结果进行判定 "有针对性"的if判断 针对两个变量值是否相同 使用assertEquals针对两个对象是否相同 使用assertSame针对返回值是否为True 使用assertTrue 1.断言的参数 assertXXX(”断言失败时提升的信息“&#x…...

编程日记 2024/2/14 0:59:34

docker 实现 mysql:8.3.0 主从复制（2024年2月13日最新版本）

环境为 CentOS 7.6&#xff0c; 具体操作请看MySQL主从复制01-主从复制概述及原理_哔哩哔哩_bilibili 1、配置主服务器 # 启动主服务器 docker run -p 3306:3306 --name mysql_master -e MYSQL_ROOT_PASSWORDnmnmnm67890890 -v /docker/mysql_master/conf:/etc/mysql/conf.d…...

编程日记 2024/2/14 0:55:30

STM32 + ESP8266，连接阿里云 上报/订阅数据

&#xff08;文章正在编辑中&#xff0c;一点点地截图操作过程&#xff0c;估计要拖拉两三天&#xff09; 一、烧录MQTT固件 ESP8266出厂时&#xff0c;默认是AT固件。连接阿里云&#xff0c;需要使用MQTT固件。 1、独立EPS8266模块的烧录方法 2、魔女开发板&#xff0c;板载…...

编程日记 2024/2/14 0:54:29

如何利用chatgpt提升工作效率？

在数字化和信息化的时代&#xff0c;人工智能技术已经深入到了我们生活的方方面面。其中&#xff0c;ChatGPT作为当前热门的人工智能技术&#xff0c;以其强大的自然语言处理能力和广泛的应用场景&#xff0c;正逐渐改变着我们的工作方式&#xff0c;为我们提高工作效率提供了全…...

编程日记 2024/2/14 0:52:27

MongoDB聚合：$geoNear

$geoNear根据指定的点按照距离以由近到远的顺序输出文档。 从4.2版本开始&#xff0c;MongoDB移除了limit和num选项以及100个文档的限制&#xff0c;如果要限制结果文档的数量可以使用$limit阶段。 语法 { $geoNear: { <geoNear options> } }$geoNear操作接受一个包含…...

编程日记 2024/2/14 0:43:20

Docker-CE 国内源国内镜像

Docker-CE 就是 Docker Community Edition 的意思 docker-ce由docker官方维护 , docker.io由Debian维护 Docker官文 – Install Docker Engine on CentOS Docker官文 – Install Docker Engine on Fedora Docker官文 – Install Docker Engine on Debian Docker官文 – In…...

编程日记 2024/2/14 0:40:17

【Tauri】（3）：使用Tauri1.5版本，进行桌面应用开发，在windows上搭建环境，安装node，rust环境，可以打包成功，使用vite创建应用

1&#xff0c;视频地址&#xff1a; https://www.bilibili.com/video/BV1Ny421a7nA/ 【Tauri】&#xff08;3&#xff09;&#xff1a;使用Tauri1.5版本&#xff0c;进行桌面应用开发&#xff0c;在windows上搭建环境&#xff0c;安装node&#xff0c;rust环境&#xff0c;可以…...

编程日记 2024/2/14 0:37:14

C++ 堆排序

C 堆排序 堆排序是一种基于二叉堆数据结构的排序算法&#xff0c;其原理如下&#xff1a; 构建最大堆&#xff1a;将待排序的数组看作一个完全二叉树&#xff0c;并通过调整节点的位置构建一个最大堆。最大堆满足每个父节点的值都大于或等于其子节点的值。构建最大堆的过程可以…...

编程日记 2024/2/14 0:35:13

U3D记录之FBX纹理丢失问题

今天费老大劲从blender建了个模型&#xff0c;然后导出进去unity 发现贴图丢失 上网查了一下 首先blender导出要改设置 这个path mode要copy 然后unity加载纹理也要改设置 这里这个模型的纹理load要改成external那个模式 然后就有了&#xff0c;另外这个导出还有好多选项可…...

编程日记 2024/2/14 0:33:11

监测Nginx访问日志502情况后并做相应动作

今天带大家写一个比较实用的脚本哈 原理&#xff1a; 假设服务器环境为lnmp&#xff0c;近期访问经常出现502现象&#xff0c;且502错误在重启php-fpm服务后消失&#xff0c;因此需要编写监控脚本&#xff0c;一旦出现502&#xff0c;则自动重启php-fpm服务 场景&#xff1a; 1…...

编程日记 2024/2/14 0:30:08

【数据分享】1929-2023年全球站点的逐年平均风速（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…...

编程日记 2024/2/14 0:28:06

Android性能调优 - 应用安全问题

Android应用安全 1.组件暴露&#xff1a; 像比如ContentProvider,BroadcastReceiver&#xff0c;Activity等组件有android:exported属性&#xff1b; 如果是私有组件 android:exported “false”&#xff1b; 如果是公有组件 android:exported “true” 且进行权限控制&…...

编程日记 2024/2/14 0:25:01

C#的Char 结构的像IsLetterOrDigit(Char)等常见的方法

目录 一、Char 结构的方法 二、Char.IsLetterOrDigit 方法 1.Char.IsLetterOrDigit(Char)用法 2.IsLetterOrDigit(String, Int32)方法 三、Char.IsLetter 方法 1.IsLetter(Char) 2.IsLetter(String, Int32) 四、Char.IsDigit 方法 1. IsDigit(String, Int32) 2.IsDig…...

编程日记 2024/2/14 0:22:59

部分意图分类【LLM+RAG】

在生成人工智能领域工作最有价值的事情之一就是发现新兴技术如何融入新的解决方案。 举个例子&#xff1a;在为北美顶级金融服务公司之一设计对话式人工智能助手时&#xff0c;WillowTree 的数据和人工智能研究团队 (DART) 发现&#xff0c;将意图分类与大型语言模型 (LLM) 结合…...

编程日记 2024/2/14 0:21:57

1277. 统计全为 1 的正方形子矩阵

1277. 统计全为 1 的正方形子矩阵 题目链接&#xff1a;1277. 统计全为 1 的正方形子矩阵 代码如下&#xff1a; class Solution { public:int countSquares(vector<vector<int>>& matrix) {if(matrix.size()0||matrix[0].size()0) return 0;//dp[i][j]代表…...

编程日记 2024/2/14 0:17:53

Python 3 时间序列可视化指南

简介 时间序列分析属于统计学的一个分支&#xff0c;涉及对有序的、通常是时间性的数据进行研究。当适当应用时&#xff0c;时间序列分析可以揭示意想不到的趋势&#xff0c;提取有用的统计数据&#xff0c;甚至预测未来的趋势。因此&#xff0c;它被应用于许多领域&#xff0…...

编程日记 2024/2/14 0:16:50

[算法前沿]--059-大语言模型Fine-tuning踩坑经验之谈

前言 由于 ChatGPT 和 GPT4 兴起，如何让人人都用上这种大模型，是目前 AI 领域最活跃的事情。当下开源的 LLM（Large language model）非常多，可谓是百模大战。面对诸多开源本地模型，根据自己的需求，选择适合自己的基座模型和参数量很重要。选择完后需要对训练数据进行预处…...

编程日记 2024/2/14 0:15:49

【Docker】01 Docker安装与配置

文章目录 一、Docker二、离线安装Docker三、联网安装Docker3.1 下载YUM软件库文件3.2 安装epel-release3.3 安装yum-utils3.4 设置镜像仓库3.5 查看docker-ce所有版本3.6 安装Docker3.7 启动Docker3.8 查看Docker信息3.9 启动第一个容器 四、一些配置4.1 登录DockerHub4.2 镜像…...

编程日记 2024/2/14 0:06:40

Unity3d Shader篇（六）— BlinnPhong高光反射着色器

文章目录 前言一、BlinnPhong高光反射着色器是什么&#xff1f;1. BlinnPhong高光反射着色器的工作原理2. BlinnPhong高光反射着色器的优缺点优点缺点 3. 公式 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三…...

编程日记 2024/2/14 0:01:35

Go-zero微服务个人探究之路（十二）定时任务的选择调研

前言 很多时候后台需要做定时任务的需求&#xff0c;笔者的项目采用go-zero框架微服务框架&#xff0c;需要做定时任务&#xff0c;于是做了如下方法调研&#xff0c;共有大概三种主要选择 方案 难度总体由容易到复杂 go的timer库 通过Go的标准库time中的Ticker和Tick功能…...

编程日记 2024/2/13 23:59:32

Java中，List、Map和Set的区别是什么？

在Java中&#xff0c;List、Map和Set是三种常用的集合类型&#xff0c;它们之间的主要区别如下&#xff1a; 1、List List是有序集合&#xff0c;它可以包含重复元素。 List中的元素是按照插入顺序排列的&#xff0c;可以通过索引访问每个元素。 Java中常见的List实现类有A…...

编程日记 2024/2/13 23:58:31

Google刚刚推出了图神经网络Tensorflow-GNN

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/2/13 23:57:30

链表基础知识汇总

链表 链表是一种基本的数据结构&#xff0c;是由一系列节点组成的集合。每个节点包含两个部分&#xff1a;值和指向下一个节点的指针。链表中的节点可以动态地添加、删除&#xff0c;其大小可以根据需要进行扩展或缩小。 链表通常用于处理不固定长度的数据结构&#xff0c;具有…...

编程日记 2024/2/13 23:55:28

Educational Codeforces Round 2(远古edu计划）

A. 恶心模拟。。 模拟一下分类即可 数字类&#xff0c;数字0&#xff0c;或者都是数字 字母类&#xff0c;字母空的也是字母&#xff0c;有字母就是字母 #include<bits/stdc.h> #define INF 1e9 using namespace std; typedef long long ll; const int N2e59; strin…...

编程日记 2024/2/13 23:53:26

【Tauri】（1）：使用Tauri1.5版本，进行桌面应用开发，在windows，linux进行桌面GUI应用程序开发，可以打包成功，使用 vite 最方便

1&#xff0c;视频地址&#xff1a; https://www.bilibili.com/video/BV1Pz421d7s4/ 【Tauri】&#xff08;1&#xff09;&#xff1a;使用Tauri1.5版本&#xff0c;进行桌面应用开发&#xff0c;在windows&#xff0c;linux进行桌面GUI应用程序开发&#xff0c;可以打包成功&…...

编程日记 2024/2/13 23:49:21

「Linux」软件安装

MySQL5.7在CentOS安装 安装 配置yum仓库 更新密钥&#xff1a;rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022安装MySQL yum库&#xff1a;rpm -Uvh http://repo.mysql.com//mysql57-community-release-el7-7.noarch.rpm使用yum安装MySQL&#xff1a;yum -y in…...

编程日记 2024/2/13 23:44:17

Ubuntu Desktop - Terminal 输出全部选中 + 复制

Ubuntu Desktop - Terminal 输出全部选中 复制 1. Terminal2. Terminal 最大化3. Edit -> Select All4. Copy & PasteReferences 1. Terminal 2. Terminal 最大化 3. Edit -> Select All 4. Copy & Paste Edit -> Copy or Shift Ctrl C Edit -> Paste…...

编程日记 2024/2/13 23:38:11

Java 三大并大特性-可见性介绍（结合代码、分析源码）

目录 ​编辑 一、可见性概念 1.1 概念 二、可见性问题由来 2.1 由来分析 三、可见性代码例子 3.1 代码 3.2 执行结果 四、Java 中保证可见性的手段 4.1 volatile 4.1.1 优化代码 4.1.2 测试结果 4.1.3 volatile原理分析 4.1.3.1 查看字节码 4.1.3.2 hotspot 层面…...

编程日记 2024/2/13 23:36:08

【漏洞复现】狮子鱼CMS某SQL注入漏洞01

Nx01 产品简介 狮子鱼CMS&#xff08;Content Management System&#xff09;是一种网站管理系统&#xff0c;它旨在帮助用户更轻松地创建和管理网站。该系统拥有用户友好的界面和丰富的功能&#xff0c;包括页面管理、博客、新闻、产品展示等。通过简单直观的管理界面&#xf…...

编程日记 2024/2/13 23:35:06

《Java 简易速速上手小册》第6章：Java 并发编程（2024 最新版）

文章目录 6.1 线程的创建和管理 - 召唤你的士兵6.1.1 基础知识6.1.2 重点案例&#xff1a;实现一个简单的计数器6.1.3 拓展案例 1&#xff1a;定时器线程6.1.4 拓展案例 2&#xff1a;使用 Executor 框架管理线程 6.2 同步机制 - 维持军队的秩序6.2.1 基础知识6.2.2 重点案例&a…...

编程日记 2024/2/13 23:34:05

C++初阶：容器（Containers）list常用接口详解

介绍完了vector类的相关内容后&#xff0c;接下来进入新的篇章&#xff0c;容器list介绍&#xff1a; 文章目录 1.list的初步介绍2.list的定义&#xff08;constructor&#xff09;3.list迭代器&#xff08; iterator &#xff09;4.string的三种遍历4.1迭代器4.2范围for循环 5…...

编程日记 2024/2/13 23:31:02

HARRYPOTTER: FAWKES

攻击机 192.168.223.128 目标机192.168.223.143 主机发现 nmap -sP 192.168.223.0/24 端口扫描 nmap -sV -p- -A 192.168.223.143 开启了21 22 80 2222 9898 五个端口&#xff0c;其中21端口可以匿名FTP登录&#xff0c;好像有点说法,百度搜索一下发现可以用anonymous登录…...

编程日记 2024/2/13 23:30:01

嵌入式Qt 第一个Qt项目

一.创建Qt项目 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框&#xff0c;选择Qt Widgets Application 选择【Choose】按钮&#xff0c;弹出如下对话框 设置项目名称和路径&#xff0c;按照向导进行下一步 选…...

编程日记 2024/2/13 23:22:53

【OpenHarmony硬件操作】风扇与温湿度模块

文章目录 前言一、串行通信是什么二、IC2.1 IC是什么2.2 IC涉及到的线2.3 IC的时序三、风扇的操作3.1 关于 pcf85743.2 风扇的接口函数IO拓展芯片的定义初始化PCF8574初始化 IO拓展版的引脚属性开启和关闭风扇读状态四、温湿度传感器的使用4.1 初始化温湿度传感器</...

编程日记 2024/2/13 23:20:50

Vue3.4+element-plus2.5 + Vite 搭建教程整理

一、 Vue3Vite 项目搭建 说明&#xff1a; Vue3 最新版本已经基于Vite构建&#xff0c;关于Vite简介&#xff1a;Vite 下一代的前端工具链&#xff0c;前端开发与构建工具-CSDN博客 1.安装 并 创建Vue3 应用 npm create vuelatest 创建过程可以一路 NO 目前推荐使用 Vue R…...

编程日记 2024/2/13 23:15:44

STM32Cubmax stm32f103zet6 SPI通讯

一、基本概念 SPI 是英语 Serial Peripheral interface 的缩写&#xff0c;顾名思义就是串行外围设备接口。是 Motorola 首先在其 MC68HCXX 系列处理器上定义的。 SPI 接口主要应用在 EEPROM&#xff0c; FLASH&#xff0c;实时时 钟&#xff0c; AD 转换器&#xff0c;还有数…...

编程日记 2024/2/13 23:06:36

每日OJ题_位运算⑤_力扣371. 两整数之和

目录 力扣371. 两整数之和 解析代码 力扣371. 两整数之和 371. 两整数之和 难度 简单 给你两个整数 a 和 b &#xff0c;不使用 运算符 和 - &#xff0c;计算并返回两整数之和。 示例 1&#xff1a; 输入&#xff1a;a 1, b 2 输出&#xff1a;3示例 2&#xff1a; …...

编程日记 2024/2/13 23:01:29