Web 前端—HTML+CSS系列

HTML、CSS

  • 一、HTML+CSS
    • 1.1什么是HTML、CSS
    • 1.2宇宙第一编辑器VS Code
    • 1.3Chrome浏览器
    • 1.4、深入了解网站开发
  • 一、HTML基本操作
    • 1.web前端三大核心技术
    • 2.HTML初始代码
    • 3.HTML注释
    • 4.HTML语义化
    • 5.标题与段落
    • 6.文本修饰标签
    • 7.图片标签与图片属性
    • 8.引入文件的地址路径
    • 9.跳转链接
    • 10.跳转锚点
    • 11.特殊符号
    • 12.无序列表
    • 13.有序列表
    • 14.定义列表
    • 15.嵌套列表
    • 16.表格标签
    • 17.表格属性
    • 18.表单标签
    • 19.表格表单组合
    • 20.div与span
  • 二、CSS基本语法
    • 1.内联样式与内部样式(css样式的引入方式)
    • 2.外部样式
    • 3.css中的颜色表示法
    • 4.背景样式
    • 5.背景实现视觉差
    • 6.边框样式
    • 7.文字样式
    • 8.css段落样式——文本修饰
    • 9.css段落样式——文本大小写
    • 10. css段落样式——文本缩进
    • 11.css段落样式——定义行高
    • 12.css段落样式——字间距与词间距
    • 13.css复合样式
    • 14.css选择器——id
    • 15.css选择器——class

一、HTML+CSS

1.1什么是HTML、CSS

(1)知识点:是制作网页的编程语言
浏览器把代码解析后的样子就是我们看到的网站
一个网站是由很多个网页组成的
查看网页代码源
(2).html网页制作
新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容——拖拽网页图标到浏览器里

1.2宇宙第一编辑器VS Code

(1)定义
VSCode,全称visual studio code,来自微软,是一个开源的、基于electron的轻量代码编译器。

(2)基本操作
自动换行:设置:文件->首选项->设置(大小、是否换行Word wrap)
学习编辑器基本使用:
创建文件:点击右键
重命名
删除
VScode快捷操作:
Ctrl+S:保存
Ctrl+a:全选
Ctrl+x、Ctrl+c、Ctrl+v:剪切、复制、粘贴
Ctrl+z、Ctrl+y:撤销、前进
shift+end:从头选中一行
shift+home:从尾部向前选中这一行
shift+alt+↓:快速复制一行
shift+↑或↓:快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标模式:alt+鼠标左键
Ctrl+D:选择相同元素的下一个

1.3Chrome浏览器

Chrome下载地址:google下载地址

1.4、深入了解网站开发

  • UI设计师:设计稿

  • web前端开发工程师(HS开发)

    设计稿->代码
    数据库里的数据->显示到页面
    HTML:负责结构
    CSS:负责样式

  • web后端开发工程师

一、HTML基本操作

1.web前端三大核心技术

HTML:结构
CSS:样式
JavaScript:与用户的交互行为

示例:

<style>div{color:red;font-style:italic;}
</style><div>缓缓飘落的枫叶像思念,你烛火惺忪点燃岁末的秋天</div><script>let div=document.qierySelector('div');
let time=null;
let flag=ture;
div.onmouseover=function(){timer=setInterval(()=>{if(flag){div.style.color='blue';                div.style.fontstyle='normal';}else{div.style.color='red';div.style.fontstyle='italic';}flag=!flag;},500);};
div.onmouseout=function(){clearInterval(timer);};</script>

2.HTML初始代码

(1)定义
每一个HTML文件都学要添加初始代码,初始代码就是无论你写什么样的网页,这些代码都是要有的
(2)内容

<!DOCTYPE html>     //文档声明:告诉浏览器这是一个html文件
<html lang="en">        //html最外层标签,包裹着所有html标签代码  lang= “en”是用英文网站 lang=“zh-CN"表示中文的网站
<head><meta charset="UTF-8">    //元信息:编写网页中的一些赋值信息 charset="UTF-8”国际编码,让网页不出现乱码的情况<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>   // 网页的标题
</head>
<body>//显示网络内容的区域
</body>
</html>

3.HTML注释

(1)写法: 在浏览器中看不到,只能在代码中看见
快捷方式添加与删除注释:Ctrl+/ (不用选中) shift+alt+a(先选中)
示例:

<body><!-- 注释的内容-->
</body>

(2)意义
a.暂时不用的代码注释起来,方便以后使用
b.对开发人员进行提示

4.HTML语义化

(1)定义:所谓HTML语义化指的是,根据网页中内容的结构,选择合适的HTML标签进行编写(什么样结构采用什么样的标签)
(2)标签的好处:

  • 代码结构得到了优化,即使没有css,也能呈现出完整、清晰的结构,更加
  • 方便阅读和理解,同时提高了团队合作的效率
  • 有利于搜索引擎的优化
  • 爬虫依赖标签确定关键字的权重,可以帮助爬虫爬出更多有效信息
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页
    (3)常用标签
    < h1>~< h6>标签:标题标签,h1等级最高,h6等级最低
    header元素:用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框
    nav元素:定义页面的导航链接部分区域
    main元素:定义页面的主要内容,一个页面只能使用一次。
    article元素:定义页面独立的内容,它可以有自己的header、footer、sections等
    section元素:元素用于标记文档的各个部分,例如长表单文章的章节或主要部分
    aside元素:一般用于侧边栏
    footer元素:文档的底部信息
    small元素:呈现小号字体效果
    strong元素:用于强调文本
    (4)标签元素周期表
    在这里插入图片描述

5.标题与段落

(1)h标签:标题
在一个网页中,h1标题最重要,并且一个.html文件只能出现一次h1文件,但是可以有很多h2、h3

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题 </h5>         
<h6>标题</h6>

图片:在这里插入图片描述

(2)p标签:段落

段落标题

<p>english</p>

6.文本修饰标签

(1)strong标签:表示强调,会对文本进行加粗
写法:

<strong>这是一首简单的小情歌</strong>

结果:
在这里插入图片描述

(2)em标签:表示强调,会对文本进行加粗
写法:

<em>故事的小黄花</em>

结果:
在这里插入图片描述

(3)sub:下标文本 、 sup:上标文本
写法:

a<sub>2</sub>+b<sup>2</sup>=c<sub>3</sub>

(4)del:删除文本、 ins:插入文本(一般配合文本使用的)
写法:

<ins>插入文本</ins>

结果:
在这里插入图片描述
在这里插入图片描述

7.图片标签与图片属性

(1)采用标签img<单标签>:图片
scr:引入图片的地址
alt:当图片出现问题的时候,可以显示一段友好的提示文字
title:提示信息
width,height:调节文件大小

方式:

<img src="" alt="">

示例:

<img src="https://ttpcstatic.dftoutiao.com/ecms/image/20220727/600x447_62e0e760d0bcb.jpeg_.webp" alt="" title="这还是一个图片的信息  " width="xxx" height="xxx">

8.引入文件的地址路径

相对路径:./n
在路径中表示当前路径: …/n

<img src="./5648.png" alt="">   //图片名字

…在路径中表示上一级路径(文件+文件)

<img src="./32323/5648.png" alt="">

图片示例:在这里插入图片描述
绝对路径
看真真正正图片所在的位置

9.跳转链接

链接标签:
标签:双标签 、
href属性:链接的地址
示例:

<a href="http://www.baidu.com">访问百度</a>

target属性:可以改变链接打开的方式,默认情况下:在当前页面打开新窗口

示例:

<a href="http://www.baidu.com" target="_blank">访问百度</a>

base标签:(单标签)改变标签的默认行为,写一个打开许多个窗口
<不写在body里,写在head里>
示例:

访问百度 访问百度 访问百度 访问百度 访问百度

在这里插入图片描述

10.跳转锚点

实现一:#号、id属性
示例


<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>                         </p>
<h2 id="css">CSS层叠样式表</h2>
<p>      </p>
<h2 id="javascript">Javascript脚本</h2>
<p>    </p>

file:///D:/22210305/10.html#html
实现二:#号、name属性
示例

<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>                         </p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>      </p>
<a name="javascript"></a>
<h2>Javascript脚本</h2>
<p>    </p>

11.特殊符号

在编写一些文本时,经常会遇到无法输入的字符,还有往一段文字中加多个空格时,页面并不会解析出多个空格 。这些特殊字符有专门的代码解决冲突
在这里插入图片描述

<body><p>&lt;dahaoren&gt;</p>
</body>

图片展示(翻译后):
在这里插入图片描述

示例2:

<p>hello&nbsp;&nbsp;&nbsp;&nbsp;world</p>   

图片展示:
在这里插入图片描述

12.无序列表

ul、li:列表的最外层容器、列表项(ul和li必须是组合出现的,他们之间是不能有其他标签的)。符合嵌套的规范
示例:

<ul><li>第一项</li><li>第二项</li></ul>

结果:
在这里插入图片描述
type属性:改变前面标记的样式(一般都是用css去控制)
改变形式
在这里插入图片描述
练习:
在这里插入图片描述

13.有序列表

ol、li:列表的最外层容器、列表项主要用于排行榜
示例:

<ol><li>第一项</li><li>第二项</li></ol></body>

结果:
在这里插入图片描述

14.定义列表

列表项需要添加标题和对标题进行描述的内容
dl:定义列表
dt:定义专业术语或名词
dd:对名次进行解释和描述

示例:

<dl><dt></dt><dd></dd></dl>

结果:
在这里插入图片描述

15.嵌套列表

列表之间可以互相嵌套,形成多层级列表

<ul><li>江苏省<ul><li>南京市</li><li>无锡市</li><li>徐州市</li></ul></li><li>山东省<ul><li>济南</li><li>青岛</li></ul>   </li>
</ul>

成果展示:
在这里插入图片描述

16.表格标签

table:表格的最外层容器
tr:定义表格行
th:定义表头
td:定义表格单元
caption:定义表格标题

以上之间是有嵌套关系的,要符合嵌套规范

<body><table><tr><th>日期</th><th>天气情况</th>    <th>出行情况</th></tr> <tr><td>202211</td><td><img src="./img/tianqi_1.png" alt=""></td><td>天气晴朗,适合出行</td></tr>   <tr><td>202212</td><td><img src="./img/tianqi_2.png "alt=""></td><td>有小雨,记得带伞</td></tr></table>
</body>

语义化标签:tHead、tBody、tFood
注:在一个table中,tBody是可以多次出现的,但是tHead、tFood只能出现一次

17.表格属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

18.表单标签

不需要太多规范。
from;表单最外层容器
input:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等(有一个type属性,决定是什么控件)

还有一些常见的属性:
checked、disabled、name、for…
在这里插入图片描述

<body><form><h2>输入框:</h2><input type="text"><h2>密码框:</h2><input type="password"></form>
</body>

成果展示:在这里插入图片描述

 <form action="http://www.baidu.com"> <!--提交到什么地方--><h2>输入框:</h2><input type="text" placeholder="请输入用户名"><h2>密码框:</h2>

成果展示:
在这里插入图片描述

复选框

<body><form><h2>输入框:</h2><input type="text"><h2>密码框:</h2><input type="password"><h2>复选框</h2><input type="checkbox">苹果<input type="checkbox">香蕉<input type="checkbox">葡萄</form>
</body>

成果展示:
在这里插入图片描述
单选框:

<body><form><h2>单选框</h2><input type="radio" name="任意值"><input type="radio" name="任意值"></form>
</body>

成果展示:
在这里插入图片描述
上传文件:

<body><form><h2>上传文件</h2><input type="file"></form>
</body>

成果展示:
在这里插入图片描述
提交按钮和重置按钮:

<body><form><h2>提交按钮和重置按钮</h2><input type="submit"><input type="reset"></form>
</body>

成果展示:
在这里插入图片描述

textarea:多行文本框

<h2>多行文本框</h2><textarea cols="30" rows="10"></textarea>

成果展示:
在这里插入图片描述

<h2>下拉菜单</h2><select size="3"><!--自动出现几个选项--><!--把size换成multpie就是第二个下拉菜单(另起一个select)--><option selected disabled>请选择</option><!--disabled的意思是这个选项不能选--><option>北京</option><option>上海</option><option >徐州</option><!--selected是指将它设为默认选项--></select> <input type="radio" name="任意值" id="man"><label for="mam"></label><input type="radio" name="任意值" id="woman"><label for="woman"></label><!--id与for后面是相应的,在这里是sex-->

成果展示:
在这里插入图片描述

19.表格表单组合

表格表单之间可以互相组合形成数据展示效果

<body><form action=""><table border="1" cellpadding="30 "><tbody><tr align="center"><td rowspan="4">总体信息</td><td colspan="2">用户注册</td></tr><tr align="right"><td>用户名:</td><td><input type="text" placehodler="请输入用户名"></td></tr><tr align="right"><td>密码:</td><td><input type="password" placeholder="请输入密码"></td></tr><tr align="center"><td colspan="2"><input type="submit"><input type="reset"></td></tbody>        </table></form>
</body>

成果展示:
在这里插入图片描述

20.div与span

div(块):
div全称division,“分割、分区”的意思,div标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中,div中还可以嵌套多层div,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局
span(内联):用来修饰文字的,div与span都是没有任何默认样式的。需要配合css才行

<body><div><h2><a href="#"><span style="color:red">知乎</span> - 有问题,就会有答案 </a></h2><a href="#"><img src="" alt></a><p>知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 20111 月正式上线,以「让人们更好的分享知识、经验和见解,找到自己的解答」为品牌使命。知乎凭借认真、专业 </p><a href="#">https://www.zhihu.com</a></div>
</body>

成果展示:
在这里插入图片描述

二、CSS基本语法

格式:
选择器{属性1:值1;属性二:值2}
单位:
px->像素(pixel)、%->百分比
基本样式:
width、height、background-color
CSS注释:
/css注释内容/

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width:100px;height:100px; background-color:red}</style></head><body><div>这是一首简单的小情歌</div></body>   
</html>

成果展示:在这里插入图片描述

1.内联样式与内部样式(css样式的引入方式)

内联(行内、行间)样式:
在html标签上添加style属性来实现的

<style>div{width:50%;height:50px; background-color:red}</style></head><body><div>这是一首简单的小情歌</div></body>   

内部样式

<div style="width:100px;height:100px;background-color:blueviolet">妹妹说紫色很有韵味</div>
<div style="width:50px;height:50px;background-color:blue"></div>
<div style="width:50px;height:50px;background-color:red"></div>
<div style="width:50px;height:50px;background-color:green"></div>
<!--另起一个板-->

区别:内部样式的代码可以复用、复合w3c的规范标准,进行让结构和样式分开处理

2.外部样式

引入一个单独的css文件,name,css
link标签:引入外部资源
rel属性:指定资源跟页面的关系(当前文档与被链接的关系)
href属性:资源的地址
@import:通过这种方式引入外部样式(不建议,问题很多)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,inital-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--<link rel="stylesheet" href="./common.css">--><title>Document</title><style>@import url('./common.css');</style></head>
<body><div>董双玉头顶的颜色就是这块的背景色</div>
</body>
</html>
<!--制作链接:将文件模式改为。css模式-->

成果展示
在这里插入图片描述

3.css中的颜色表示法

1.单词表示法:red、green等
颜色的英文代码:
在这里插入图片描述

2.十六进制表示法:
0 1 2 3 4 5 6 7 8 9 a b c d e f

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ background-color:#000000}</style></head><body><div>这是一首简单的小情歌</div></body>   
</html>

成果展示:
在这里插入图片描述

3.rgb三原色表示法:rgb(255,255,255)
取值范围:0~255
提取颜色的下载地址:https://www.daidufe.com/fehelper
photoshop

4.背景样式

1.background-color:背景颜色
2.background-image:背景图片
【url背景地址】
默认:会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x:x轴平铺
repeat-y:y轴平铺
repeat(x,y都进行平铺,默认值)
no-repeat:都不平铺
4.background-position:背景图片的位置
x y:number (px、%)单词
x:left、center、right
y:top、center、bottom
5.background-attachment:背景图片随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed:(背景位置是按照浏览器进行偏移的)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:3000px;height:3000px; background-color:red; background-image:url(./img/256.jpg);/*图片位置*/background-repeat:no-repeat ;background-position:right center;  background-attachment: scroll   /*fixed*/}</style></head><body><div></div></body>   
</html>

5.背景实现视觉差

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}</style></head><body><div id="div2"></div><div id="div3"></div><div id="div1"></div>
</body>   
</html>

6.边框样式

border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
在这里插入图片描述

border-width:边框的大小(px…)
border-color:边框的颜色(red,#…)
注:针对某一条边进行单独设置
(圆角边框)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width:300px;height:300px;border-/*right- 上下左右针对某一条边进行设置,放在中间*/style:dashed;border-color:red;border-width:10px;}</style></head><body><div></div>
</body>   
</html>

成果展示:在这里插入图片描述
练习.利用边框实线三角形
边框加颜色:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width:300px;height:300px;border-top-style:solid;border-top-color:green;border-top-width:100px;border-bottom-style:solid;border-bottom-color:red;border-bottom-width:100px;border-left-style:solid;border-left-color:blueviolet;border-left-width:100px;border-right-style:solid;border-right-color:yellow;border-right-width:100px;}</style></head><body><div></div>
</body>   
</html>

成果展示:
在这里插入图片描述
三角形:
方法一:(将width与height设置为0,在讲其他方块颜色设置为背景色/不是白色,是与背景图相同的颜色/)
方法二:将每个方块颜色设置为透明色(transparent)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width:0px;height:0px;border-top-style:solid;border-top-color:transparent;border-top-width:100px;border-bottom-style:solid;border-bottom-color:transparent;border-bottom-width:100px;border-left-style:solid;border-left-color:transparent;border-left-width:100px;border-right-style:solid;border-right-color:black;border-right-width:100px;}</style></head><body><div></div>
</body>   
</html>

成果展示:
在这里插入图片描述

7.文字样式

1.字体类型:font-family
英文、中文
衬线体与非衬线体:
区别:带衬线有棱角,非衬线体比较圆滑
注:设置多字体的方式
如果设置的字体中有空格要带上单引号
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{font-family:Microsoft Yahei;}</style></head><body><div>心中有党,成绩理想</div>
</body>   
</html>

成果展示:
在这里插入图片描述

2.字体大小:font-size(16px默认像素)
第一种:输入像素数字大小(00px)
第二种:有英文形式:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{font-size: 50px;}</style></head><body><div>我怀念的是无话不说</div></body>   
</html>

成果展示:
在这里插入图片描述
3.字体粗细:font-weight
模式:正常(normal)、加粗(bold)
写法:单词(normal、bold)/number(100 200…500都是正常的,600…900都是加粗的)/
4.字体样式:font-style
模式:正常(默认)、斜体(italic)
/*oblique也是表示斜体,用的比较少,一般了解即可,没什么差别 */
区别:(1.)italic:带有属性倾斜字体的才可以设置倾斜操作。
(2.)oblique:没有倾斜属性的字体也可以设置倾斜操作

8.css段落样式——文本修饰

text-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p{width:300px;text-decoration: line-through;/*添加多个修饰中间直接用空格隔开*/}  </style></head><body><p>每个优秀的人的心中都有一段沉默的时光,那段时光是付出了很多努力,却得不到结果的日子,我们把它叫做扎根</p></body>   
</html>

成果展示
在这里插入图片描述

9.css段落样式——文本大小写

text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母:capitalize

10. css段落样式——文本缩进

text-indent:文本缩进(一个文字16px——对齐)
首行缩进的效果
em相对单位:相对单位,1em永远与字体大小相同
对齐方式:left、right、center、justify(两端点对齐)

 p{ text-align:left: ;}/*调节左右对齐*/

11.css段落样式——定义行高

line-height:
定义:一行文字的高度
默认:不是固定值,而是变化的。根据当前字体大小在不断的变化。
取值:1.number(px)|scale(比例值,跟文字大小成比例的)

p{ line-height:30px ;}

12.css段落样式——字间距与词间距

1.letter-spacing:定义字间距
2.Word-spacing:词之间的间距(针对英文段落)
3.强制折行:(针对英文、数字不自动折行)
(1.)word-break:break-all;(非常强烈的折行)
(2.)word-wrap:break-word;(不是那么强烈的折行,会产生空白区域)

13.css复合样式

一个css属性只控制一种样式,叫做单一样式
一个css属性控制多种样式,叫做复合样式(background、border、font)
复合的写法:是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font
在这里插入图片描述

14.css选择器——id

1.ID选择器:
在这里插入图片描述

15.css选择器——class

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode—75.颜色分类【中等】

2023每日刷题&#xff08;六十五&#xff09; Leetcode—75.颜色分类 实现代码 class Solution { public:void sortColors(vector<int>& nums) {int red 0, white 0, blue 0;for(auto num: nums) {if(num 0) {red;} else if(num 1) {white;} else {blue;}}for…

在 Docker 上部署 Nacos 并连接到 MySQL

前言 本文旨在指导如何使用 Docker Compose 在 Docker 上部署 Nacos&#xff0c;并配置它连接到一个 MySQL 数据库。 前提条件 安装了 Docker 和 Docker Compose。 步骤 步骤 1: 创建 docker-compose.yml 文件 创建一个名为 docker-compose.yml 的文件&#xff0c;并将以…

机械、电气、自动化与人工智能融合:发展历程、问题与前景

导言 机械、电气、自动化行业与人工智能的结合&#xff0c;推动了工业革命的新浪潮。本文将深入研究这一融合的发展历程、遇到的问题、解决过程&#xff0c;以及未来的可用范围&#xff0c;着重分析在各国的应用现状和未来的研究趋势。同时&#xff0c;探讨在哪些方面能够取得胜…

环境搭建及源码运行_java环境搭建_idea版本下载及安装

1、介绍 Idea是一款被广泛使用的Java集成开发环境&#xff0c;它提供了丰富的功能和工具来帮助开发人员更高效地编写和调试代码。作为一款开源软件&#xff0c;Idea不仅提供了基本的代码编辑、自动完成和调试功能&#xff0c;还支持大量的插件和扩展&#xff0c;可为开发人员提…

MySQL基本操作 DDL DML DQL三大操作介绍

DDL 数据(结构)定义 创建表DML 数据操作 增删改DQL 查询语句 DDL 数据(结构)定义 创建表 创建 删除数据 注释 --空格内容 创建数据库 CREATE DATABASE [if not exists] 数据库名 [ CHARSET utf8]eg:CREATE DATABASE IF NOT EXISTS school CHARSET utf8如果对应school不存在,…

【NextJS】API请求执行两次的原因及解决方法

实验环境 next&#xff1a; 14.0.4react&#xff1a; ^18 实验代码 // file: app\page.tsx use client;export default function Home() {console.log(test)return (<></>) }原因 测试发现创建默认工程上面代码会输出两次test&#xff0c;其原因是为了模拟立即卸…

【WeLink群消息机器人webhook介绍】

WeLink群消息机器人webhook介绍 一、背景:如何理解bot和webhook? 机器人(bot)是一种新型的应用形态,新的协同方式对话即服务,在应用中典型形态即为bot,用户在聊天界面跟一个机器人的虚拟账号,通过对话的方式,实现跟后端系统的交互,如主动发送消息给机器人,机器人返…

智慧安防视频监控EasyCVR如何通过回调接口向第三方平台推送RTSP视频通道离线通知

安防视频监控系统EasyCVR能在局域网、公网、专网等复杂的网络环境中部署&#xff0c;可支持4G、5G、WiFi、有线等方式进行视频的接入与传输、处理和分发。平台能将接入的视频流进行汇聚、转码、多格式输出和分发&#xff0c;具体包括&#xff1a;RTMP、RTSP、HTTP-FLV、WebSock…

文件传输软件SecureFX mac支持多种协议

SecureFX mac是一款文件传输客户端&#xff0c;可在 Mac 操作系统上使用。它由 VanDyke Software 公司开发&#xff0c;旨在为用户提供安全、可靠、高效的文件传输服务。 SecureFX 支持多种协议&#xff0c;包括 SFTP、SCP、FTP、FTP over SSL/TLS 和 HTTP/S。它使用强大的加密…

GEM5 Garent CPU cache消息传递路径:1. NI部分

简介 我们仔细分析下图怎么连的&#xff0c;以及消息传递路径。 图来自https://www.gem5.org/documentation/general_docs/ruby/ 代码的连接 fs.py->ruby.py-> gem5/configs/ruby/MESI_Two_Level.py 中的 create_system( options, full_system, system, dma_ports, b…

uniapp运行到手机模拟器

第一步&#xff0c;下载MUMU模拟器 下载地址&#xff1a;MuMu模拟器官网_安卓12模拟器_网易手游模拟器 (163.com) 第二步&#xff0c;运行mumu模拟器 第三步&#xff0c;运行mumu多开器 第三步&#xff0c;查看abs 端口 第四步&#xff0c;打开HBuilder,如下图&#xff0c;将…

使用TikTok云手机轻松拓展全球市场

TikTok作为一款风靡全球的短视频应用&#xff0c;全球影响力不断扩大。越来越多的商家开始借助TikTok分享作品、在海外市场上获取商业机会。要想更好地借助TikTok扩大海外市场&#xff0c;使用TikTok云手机是一个好选择。本文将介绍TikTok云手机的几大作用&#xff0c;以助您更…

AI创作系统ChatGPT商业运营网站系统源码,支持AI绘画,GPT语音对话+DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

Zookeeper-快速入门、服务搭建、集群搭建教程

官网&#xff1a;https://zookeeper.apache.org/ zookeeper常用用途&#xff1a; 集群管理&#xff0c;zookeeper作为注册中心&#xff0c;管理服务提供方的ip地址端口号url信息&#xff0c;并在服务消费方请求需要时发送给服务消费方。配置中心&#xff08;不过一般用阿波罗…

【重点】【DP】1143.最长公共子序列|516.最长回文子序列

两个求解代码类似的题目&#xff0c;对比记忆&#xff01;&#xff01;&#xff01; 1143.最长公共子序列 题目 法1&#xff1a;DP&#xff0c;考虑空串 class Solution {public int longestCommonSubsequence(String text1, String text2) {int m text1.length() 1, n …

AUTOSAR从入门到精通-诊断事件管理模块(DEM)(一)

目录 前言 几个高频面试题目 DEM和DET模块的区别 原理 Dem模块功能

Keil编译STM32工程,提示__align(4)处语法错误

好久没有用Keil编程&#xff0c;因为别人的代码是用Keil写的&#xff0c;所以又得安装起来&#xff0c;编译时遇到__align(4)的错误提示。 这个问题主要是编译器版本的问题&#xff0c;默认使用的是v6.19版本的编译器&#xff0c;而工程原来使用的是v5版本的&#xff0c;两个编…

探索 Vuex 的世界:状态管理的新视角(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

简易版chalk

简易版chalk 参考文档 chalk/chalk: &#x1f58d; Terminal string styling done right (github.com) 【MINI 系列】五颜六色的控制台) ANSI转义序列 - 维基百科&#xff0c;自由的百科全书 (wikipedia.org) “ANSI 转义序列&#xff08;ANSI escape sequences&#xff09;…

华为OD机试 - 小朋友来自多少小区(Java JS Python C)

题目描述 幼儿园组织活动,老师布置了一个任务: 每个小朋友去了解与自己同一个小区的小朋友还有几个。 我们将这些数量汇总到数组 garden 中。 请根据这些小朋友给出的信息,计算班级小朋友至少来自几个小区? 输入描述 输入:garden[] = {2, 2, 3} 输出描述 输出:7 备…