JavaWeb：HTML&CSS
一、HTML入门
1.1HTML&CSS&JavaScript的作用
- HTML主要用于网页主体结构的搭建
- CSS主要用于页面元素的美化
- JavaScript主要用于页面元素的动态处理
1.2什么是HTML
-
HTML是Hyper Text Markup Language的缩写，意思是超文本（最终效果超越文本）标记语言。它的作用是搭建网页结构，在网上展示内容
1.3什么是超文本
- HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式
1.4什么是标记语言
- HTML不是像Java这样的编程语言，它是由一系列的标签组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果
- 标签：标签是通过一对尖括号+标签名的方式来定义的
- 双标签：<p>标签体</p>。<p>是开始标签，</p>是结束标签，开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分称为文本标签体，也简称标签体
- 单标签：<input type="text" name="username" />
- 属性：<a href="http://www.xxx.com">show detail</a>。href="网址"就是属性，href是属性名，"网址"是属性值
1.5HTML基础结构
（1）文档声明
- 画图理解html文件：
- 注意：
- html文件是浏览器负责解析和展示的
- html文件是纯文本文件，普通编辑工具都可以编辑
- Windows会根据文件的扩展名自动匹配默认的打开工具
- HTML5版本的文档类型声明是：<!DOCTYPE html>
（2）根标签
- html文件的根标签是<html></html>，所有的其他标签都要在这个标签中间
- html根标签下有两个一级子标签：<head></head>和<body></body>
（3）头部元素
- <head></head>是头标签，定义那些不直接展示在页面主体上，但是又很重要的内容（字符集、css引入、js引入......）
- <titile></title>标签：
- <meta />标签（如下图，它的作用是告诉浏览器，用什么字符集对文件解码）：因为该文件我们使用utf-8编码的，所以浏览器用utf-8解码不会出错
- 头部元素还包括script标签，style标签，link标签等等......
（4）主体元素
- <body></body>是体标签，在浏览器窗口内显示的内容都定义到body标签内
（5）注释
- HTML注释的写法是<!--注释内容-->
1.6HTML概念词汇解释
-
标签：代码中的一对尖括号<>就叫作一个标签，有些标签成对出现，称之为双标签，有些标签单独出现，称之为单标签
-
属性：写在开始标签中，用于定义标签的一些特征
-
例如，<input type="text" />
-
例如，<input type="password"/>
-
-
文本：开始标签和结束标签中间的文字，包含换行空格等结构。单标签里是没有文本的，只有双标签才可以有文本
-
元素：经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称之为一个元素。例如，<title>aaa</title>是一个元素，<meta charset="utf-8">也是一个元素
1.7HTML更多的语法细节
-
根标签有且只能有一个<html></html>
-
无论是双标签还是单标签都需要正确关闭
-
标签可以嵌套但是不能交叉嵌套。例如：<i><big>张三</big></i>。big的作用是让字体变大，i的作用是让字变成斜体
-
注释语法为<!--注释内容-->，注释不能嵌套
-
属性必须有值，值必须加引号，HTML5中，属性名和值相同时可以省略属性值
-
HTML5中不严格区分字符串使用单双引号。如果想在字符串中嵌套字符串，那么我们只能这样写，让单双引号交替使用："asdf'q"we"r'asdf"
-
HTML5中标签不严格区分大小写，但是不能大小写混用。例如，<html>也可以写成<HTML>，但是不能写成<HTml>
-
HTML中不允许自定义标签名，强行自定义则无效
1.8Vscode相关插件
-
Auto Rename Tag 自动修改标签对插件
-
Chinese Language Pack 汉化包
-
HTML CSS Support HTML CSS支持
-
Intellij IDEA Keybindings IDEA快捷键支持
-
Live Server 实时加载功能的小型服务器
-
open in Browser 通过浏览器打开当前文件的插件
-
Prettier-Code formatter 代码美化格式化插件
-
Vetur VSCode中的Vue工具插件
-
vscode-icons 文件显示图标插件
-
Vue 3 snipptes 生成VUE模板插件
-
Vue language Features Vue3语言特征插件
1.9Vscode的使用
- 文件→新建文件...→ 打开文件夹，该步骤就可以指定我们接下来要写的文件放在哪个文件夹中。我的电脑有个Project目录，它的路径是D:\vscode\Project
- 如果需要在Project父目录里创建子目录，就点击
- 如果需要在子目录里创建文件
1.10LiveServer和Vscode其它常见设置
- 如果我们想在已经创建好的html文件中，快速生成html基础结构，就输入一个！号，并回车
- 怎么使用Live Server这个小插件，点击Go Live
- 可以看到Live Server自动帮我们在本机的5500端口启动了这个虚拟的服务
- 当我们在html文件中更新代码后，我们无需做任何操作，Live Server也会实时更新浏览器页面上的显示。如果没有实时刷新，解决方案如下图：
- 直接关闭浏览器，并不能关闭Live Server的小型服务器。如果想关闭这个小型服务器，点击Port：5500
- 建议每次测试完html文件后，都点击Port：5500
- 除了点击Go Live，我们还可以通过：右键页面→Open with Live Server来开启Live Server提供的小型服务器。Stop Live Server的效果和Port：5500一样
- 如果我们想修改Live Server这个小插件的默认打开浏览器，步骤如下图
- Vscode其它常见设置：
- 设置字体：齿轮>search>搜索 "字体大小"
- 设置字体大小可以用滚轮控制：齿轮>search>搜索 "Mouse Wheel Zoom"
- 设置左侧树缩进：齿轮>search>搜索 "树缩进"
- 设置文件夹折叠：齿轮>search>搜索 "compact"，取消第一个勾选（取消勾选就能把第一张图变成第二张图的形式）
- 设置编码自动保存：齿轮>search>搜索 "Auto Save"，选择为"afterDelay"
1.11在线帮助文档
http://www.w3school.com.cn
二、HTML常见标签
2.1标题标签
- 标题标签：一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等，有h1到h6六级标题
- 代码：
<body> <h1>标题内容</h1> <h2>标题内容</h2> <h3>标题内容</h3> <h4>标题内容</h4> <h5>标题内容</h5> <h6>标题内容</h6> </body> - 在浏览器上的展示效果：
2.2段落标签
- 以该段文字为例，我们自己在html文件里换行是没有作用的
- 为了实现在浏览器中的文字换行，我们在需要换行的地方加<br/>
- 如果我们将两段文字放到html文件中，在浏览器里它们会连在一起显示
- 为了在浏览器中分段显示，我们将自然段用<p></p>包裹
2.3换行标签
- 除了在2.2中提到的<br/>（也可以写成br）换行标签，我们还有<hr/>（也可以写成hr）换行标签。<br/>的作用是：换行，而<hr/>的作用是：换行并输出一条分割线
2.4列表标签
- 有序列表：列表的每一项前面都有序号
- 有序列表：（1）列表标签ol（2）列表项标签li
- 有序列表代码：
<body> <ol> <li>数据类型</li> <li>变量</li> <li>流程控制</li> <li>函数</li> <li>面向对象</li> </ol> </body> - 有序列表实现效果：
- 无序列表：列表的每一项前面是一个小圆点
- 无序列表：（1）列表标签ul（2）列表项标签li
- 无序列表代码：
<body> <ul> <li>Java</li> <li>C</li> <li>C++</li> <li>php</li> <li>go</li> <li>python</li> </ul> </body> - 无序列表实现效果：
- 可以互相嵌套使用列表标签，举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>Java <ol> <li>数据类型</li> <li>变量</li> <li>流程控制</li> <li>函数</li> <li>面向对象</li> </ol> </li> <li>C</li> <li>C++</li> <li>php</li> <li>go</li> <li>python</li> </ul> </body> </html>
2.5超链接标签
- 超链接标签：点击后带有链接跳转的标签，也叫做a标签
- href属性用于定义链接
- href中可以使用绝对路径，以/开头，始终以一个基准路径作为出发点
- href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点
- href中也可以定义完整的url
- target属性用于定义打开的方式
- _blank在新窗口中打开目标资源
- _self在当前窗口中打开目标资源
- _blank在新窗口中打开目标资源
- 相对路径：
- 绝对路径：
2.6多媒体标签
- img（重点）图片标签（单标签），用于在页面上引入图片
- src属性：用于定义图片的路径（绝对路径，相对路径，完整的url）
- title属性：用于定义鼠标悬停在图片上的文字
- alt属性：用于定义图片加载失败时显示的文字（我们故意写错路径，让它们加载失败试试）
- 代码：
- 需要注意：当时我是按上图这么写的代码，一开始两张图片在浏览器上都是加载成功的。因为05图片.html所在的路径是http://本地环回地址:5500/demo1-html/。所以按上图这么写相对路径和绝对路径丢失成功的！！！但是第二天我在Vscode里重新打开了文件夹，05图片.html的所在路径已经变成了http://本地环回地址:5500/。所以只能按下图方式来写，才可以成功加载图片：
2.7表格标签（重点）
- table标签：代表表格
- thead标签：代表表头，可以省略不写
- tbody标签：代表表体，可以省略不写
- tfoot标签：代表表尾，可以省略不写
- tr标签：代表一行
- td标签：代表行中的一个单元格
- th标签：自带加粗和居中效果（把单元格中的文字加粗居中）的td
- 如果想在tr里面放td，输入tr>td按回车；如果想在tr里面放三个td，输入tr>td*3
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- style="text-align:center;" 是css样式 border="1px" style="margin:0px auto;width:300px;" 是css样式 --> <body> <h3 style="text-align:center;">员工技能竞赛评分表</h3> <table border="1px" style="margin:0px auto;width:300px;"> <thead> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张小明</td> <td>100</td> </tr> <tr> <td>2</td> <td>李小黑</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小东</td> <td>98</td> </tr> </tbody> <tfoot> <tr> <td>平均分</td> <td>99</td> </tr> </tfoot> </table> </body> </html> - 如果我们在表尾tfoot只写了两个单元格，那么呈现形式如下（表头表体表尾只用于自己写代码时进行区分，在页面上展示时，它们没有任何区别）：
- 如果我们不写thead、tbody、tfoot，那么浏览器在解析时，会自动帮我们给table标签里这个整体，补上tbody标签。如图，当我们把这三个标签删掉，然后在浏览器F12→元素
- 单元格跨行：如果我们希望实现如下效果，那么代码（让某个单元格再向下多占用两行，也就是它一共要占用三行rowspan="3"）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3 style="text-align:center;">员工技能竞赛评分表</h3> <table border="1px" style="margin:0px auto;width:300px;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="3">前三名升职加薪</td> </tr> <tr> <td>2</td> <td>李小黑</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小东</td> <td>98</td> </tr> </table> </body> </html> - 单元格跨列：如果我们希望实现如下效果，那么代码（让某个单元格再横向多占一列，也就是该单元格一共要占用两列colspan="2"）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3 style="text-align:center;">员工技能竞赛评分表</h3> <table border="1px" style="margin:0px auto;width:300px;"> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> <tr> <td>1</td> <td>张小明</td> <td>100</td> <td rowspan="6">前三名升职加薪</td> </tr> <tr> <td>2</td> <td>李小黑</td> <td>99</td> </tr> <tr> <td>3</td> <td>王小东</td> <td>98</td> </tr> <tr> <td>总人数</td> <td colspan="2">2000</td> </tr> <tr> <td>平均分</td> <td colspan="2">90</td> </tr> <tr> <td>及格率</td> <td colspan="2">80%</td> </tr> </table> </body> </html>
2.8表单标签（重点）
- 表单标签：可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据的主要方式之一
- form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签
- action，form标签的属性之一，用于定义信息提交的服务器的地址（绝对路径，相对路径，完整的url）
- method（默认值是get），form标签的属性之一，用于定义信息的提交方式（1）get方式，数据会缀到url后，以？作为参数开始的标识，多个参数用&隔开（2）post方式，数据会通过请求体发送，不会缀到url后
- input标签，主要的表单项标签，用户输入信息的标签
- name（针对于text、password），input标签的属性之一，用于定义提交的参数名（一定要定义该属性）
- value（针对于text、password），input标签的属性之一，该属性用于明确提交时的实参（不定义该属性也行，如果定义了，就可以给输入框设置默认值）
- type，input标签的属性之一，用于定义表单项类型（1）text文本框（2）password密码框（3）submit提交按钮，如果想把该按钮上显示的“提交”改成别的，还有一个value属性（4）reset重置按钮，如果想把该按钮上显示的“重置”改成别的，还有一个value属性
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="08welcome.html" method="get"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="userPwd"><br> <input type="submit" value="登录"> <input type="reset" value="清空"> </form> </body> </html> - 展示效果：
- get方式：
- 参数会以键值对形式放在url后提交 url?key=value&key=value&key=value
- 数据直接暴露在地址栏上，相对不安全
- 地址栏长度有限制，所以提交的数据量不大
- 地址栏上，只能是字符，如果我们想提交文件就不行
- 总结：get方式提交的数据是放在url后发送的，因为地址栏提交的数据量比较小，而且只能提交字符，所以get方式不能用来提交文件
- 相比于post，效率更高一些些
- 参数会以键值对形式放在url后提交 url?key=value&key=value&key=value
- Live Server不支持我们用post方式：
- 负载就是我们当前请求中提交的数据：
- post方式：
- 参数默认不放到url后
- 数据不会直接暴露在地址栏上，相对安全
- post方式提交的数据是单独打包通过请求体发送的，请求体可以提交的数据量比较大
- 请求体中可以是字符，也可以是字节，因此可以提交文件
- 总结：post方式提交的数据是放在请求体里发送的，因为请求体可以装的数据量比较大，而且还支持字节，因此post方式可以用来提交文件
- 相比于get，效率更低一些些
2.9常见表单项标签
- 单选框：（1）将input标签的type属性设置为radio（2）要实现互斥效果，即多个选项只能选一个，我们还要让这多个选项使用相同的name值（3）为了让后端区分不同选项，还要给这多个选项设置不同的value值（4）如果希望某个选项被默认勾选，就给它设置checked属性，并将checked属性的值置为true。或者直接只写一个checked
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="08welcome.html" method="get"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="userPwd"><br> 性别： <input type="radio" name="gender" value="1" checked="true">男 <input type="radio" name="gender" value="2">女 <br> <input type="submit" value="登录"> <input type="reset" value="清空"> </form> </body> </html>
- 多选框：（1）将input标签的type属性设置为checkbox（2）给多个选项设置相同的name属性值（3）给多个选项设置不同的value属性值（4）如果我们希望某些选项默认被选中，就给它设置checked属性，规则和单选框一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="08welcome.html" method="get"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="userPwd"><br> 性别： <input type="radio" name="gender" value="1" checked="true">男 <input type="radio" name="gender" value="2">女 <br> 爱好： <input type="checkbox" name="hobby" value="1" checked>篮球 <input type="checkbox" name="hobby" value="2" checked>足球 <input type="checkbox" name="hobby" value="3">羽毛球 <input type="checkbox" name="hobby" value="4">乒乓球 <br> <input type="submit" value="登录"> <input type="reset" value="清空"> </form> </body> </html>
- 隐藏域：不显示在页面上，提交时会携带。（1）将input标签的type属性设置为hidden（2）当我们希望用户提交一些特定的信息，但是考虑安全问题，或者是用户的操作问题，不希望该数据发生改变，我们就可以把这个数据弄成隐藏域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="08welcome.html" method="get"> <input type="hidden" name="id" value="123"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="userPwd"><br> 性别： <input type="radio" name="gender" value="1" checked="true">男 <input type="radio" name="gender" value="2">女 <br> 爱好： <input type="checkbox" name="hobby" value="1" checked>篮球 <input type="checkbox" name="hobby" value="2" checked>足球 <input type="checkbox" name="hobby" value="3">羽毛球 <input type="checkbox" name="hobby" value="4">乒乓球 <br> <input type="submit" value="登录"> <input type="reset" value="清空"> </form> </body> </html>
- 如果我们希望达到和隐藏域一样的效果，但是又不使用隐藏域。我们可以把<input type="hidden" name="id" value="123">写成<input type="text" name="id" value="123" readonly="readonly">。注意：属性名和属性值一样，readonly="readonly"就可以简写成readonly
- 但是，如果我们又希望它不被提交。那么
- 多行文本框（用户输入大段文字），就要用textarea标签。textarea没有value属性，它要提交的内容就是<textarea></textarea>这两个标签中间的内容
- 下拉框，就要用select标签。它还有一个子标签option，是用于定义选项的。这两个都是双标签。（1）一般情况下，name属性写在select标签，value属性写在option标签。如果我们没有写value属性，那么提交的就是<option></option>中间的内容（2）如果希望某个option被默认选择，那么我们就在该option标签里写selected属性，规则和checked、readonly、disabled一样
- 文件上传框，还是使用input标签，并把input标签里的type属性值设置为file（目前，单标签里的/写不写都可以）
2.10布局相关标签
- div标签：俗称“块”，它是块元素。块元素是自己独占一行的元素。主要用于划分页面结构，做页面布局
- span标签：俗称“层”，它是行内元素。行内元素是自己不会独占一行的元素，常与块元素配合使用。主要作用是：让CSS样式专门作用到某些范围
- 块元素的CSS样式的宽、高等等，往往都是生效的。行内元素的CSS样式的宽、高，往往都是不生效的
- 如果在<div></div>中间输入大段文字，那么这段文字会根据块的宽度自动换行
- 测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body style="background-color: cadetblue;"> <!-- css 设置样式的 通过元素的style属性进行设置 style="样式名:样式值;样式名:样式值;样式名:样式值;" --> <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: antiquewhite;">123</div> <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: bisque;">456</div> <div style="border:1px solid red;width: 500px;height: 200px;margin:10px auto;background-color: chocolate;"> <span style="font-size: 30px;color: greenyellow;font-weight: bold;">NBA新赛季</span>常规赛继续进行，克利夫兰骑士队（19胜3负）继续连胜。 </div> <span style="border:1px solid greenyellow;width: 500px;height: 100px;">555</span> </body> </html>
2.11特殊字符
- 对于有特殊含义的字符，如果我们希望将它展示在浏览器页面上，那么我们在代码中就只能写它对应的转义字符
- 演示：
- 查询转义字符的地址：HTML 字符实体 (w3school.com.cn)
三、CSS的使用
3.1CSS引入方式
- CSS层叠样式表（Cascading Style Sheets）能够对网页中元素的位置和排版进行像素级别的精确控制，几乎支持所有的字体字号样式。简单来说，它能够美化页面
- CSS第一种引入方式：行内式，即通过元素的style属性引入样式。语法：style="样式名:样式值;样式名:样式值;样式名:样式值;......"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" value="按钮" style=" width: 60px; height: 40px; background-color: rgb(166, 232, 66); color:white; font-size:20px; font-family:'微软雅黑'; border: 2px solid green; border-radius: 5px; " > </body> </html>
- CSS第一种引入方式的缺点：（1）代码复用度低，影响文件大小和性能，还不利于维护（2）css样式代码和html结构代码交织在一起，影响阅读
- CSS第二种引入方式：内嵌式，即通过head标签中的style标签定义本页面的公共样式，还要通过选择器来确定样式的作用元素
<!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> /*元素选择器，通过标签名确定样式的作用元素*/ /*该元素选择器，会让当前页面上所有标签名为input的元素，都会受到这个样式的修饰*/ input{ width: 60px; height: 40px; background-color: rgb(166, 232, 66); color:white; font-size:20px; font-family:'微软雅黑'; border: 2px solid green; border-radius: 5px; } </style> </head> <body> <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > </body> </html>
- CSS第三种引入方式：外部样式表，即将css代码，单独放入一个.css文件中，哪个html需要这些代码，就在html文件的head中通过link标签（link标签的href属性，是用来指定要引入的文件的路径；link标签的rel属性，是用来指定要引入的文件的类型，如果是.css文件，类型填stylesheet）引入。（只要把选择器写进.css文件就行，不需要带style标签）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/demo1-css/btn.css"> </head> <body> <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > </body> </html>input{ width: 60px; height: 40px; background-color: rgb(166, 232, 66); color:white; font-size:20px; font-family:'微软雅黑'; border: 2px solid green; border-radius: 5px; } - 注意，此时绝对路径是这么写的 ，因为：
3.2CSS选择器
- 元素选择器：
<!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> /* 1.元素选择器 根据标签的名字确定样式作用的元素 语法：标签名{} 缺点：某些同名的元素，不希望使用该样式；某些不同名的元素，想用该样式 */ input{ width: 80px; height: 40px; background-color: chartreuse; color: white; border: 3px solid green; font-size: 22px; font-family: '隶书'; line-height: 30px; border-radius: 5px; } </style> </head> <body> <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > <input type="button" value="按钮" > </body> </html> - id选择器：
<!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> /* 1.id选择器 根据标签的id值，确定样式的作用元素 语法：#id值{} 缺点：一个id选择器只能作用到一个元素上。因为id值具有唯一性 */ #btn4{ width: 80px; height: 40px; background-color: chartreuse; color: white; border: 3px solid green; font-size: 22px; font-family: '隶书'; line-height: 30px; border-radius: 5px; } </style> </head> <body> <input id="btn1" type="button" value="按钮" > <input id="btn2" type="button" value="按钮" > <input id="btn3" type="button" value="按钮" > <input id="btn4" type="button" value="按钮" > </body> </html>
- class选择器：
<!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> /* 1.class选择器 根据元素的class属性值确定样式作用的元素 元素的class属性值可以重复，而且一个元素的class属性可以有多个值 语法：.class属性值{} */ .shapeClass{ width: 80px; height: 40px; border-radius: 5px; } .colorClass{ background-color: rgb(179,241,85); color:white; border: 3px solid green; } .fontClass{ font-size: 24px; font-family: '隶书'; line-height: 30px; } </style> </head> <body> <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮" > <input id="btn2" type="button" value="按钮" > <input id="btn3" type="button" value="按钮" > <input id="btn4" type="button" value="按钮" > </body> </html>
3.3CSS浮动
-
div是块元素，它独占一行。我们如果把设置display的值为inline，就可以将块元素转为行内元素显示，而css样式的宽和高对行内元素往往是不起作用的
<!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> .outerDiv{ width: 500px; height: 300px; border: 1px solid green; background-color: beige; } .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; display: inline;/*块元素 inline 行内显示*/ } .d1{ background-color: greenyellow; } .d2{ background-color: rgb(210,119,119); } .d3{ background-color: rgb(142,236,229); } </style> </head> <body> <div class="outerDiv"> <div class="innerDiv d1">diva</div> <div class="innerDiv d2">divb</div> <div class="innerDiv d3">divc</div> </div> </body> </html>
-
如果我们设置，让diva向右浮动。图一是浮动前，图二是浮动后，图三是设置代码
-
在此基础上，如果我们设置，再让divb也向右浮动
-
如果我们还让divc也向右浮动
-
把所有浮动操作清除，如果我们先把diva向左浮动（diva浮走，divb和divc顶上来。然后diva又把divb盖住了，divb上的文字“divb”就会被挤出来，和“divc”形成重叠）
-
如果三个都向左浮动：
3.4CSS定位
- position：（1）static 默认（2）absolute 绝对（3）relative 相对，相对于元素原本的位置（4）fixed 相对，相对于元素原本的位置
- left用于设置：距离左边多少个像素。right用于设置：距离右边多少个像素（一般二者选其一）
- top用于设置：距离顶端多少个像素。bottom用于设置：距离底端多少个像素（一般二者选其一）
- 当我们进行如下代码设置，可以看到从图一变成了图二
<!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> .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; } .d1{ background-color: greenyellow; position: absolute; top: 100px; right: 100px; } .d2{ background-color: rgb(210,119,119); } .d3{ background-color: rgb(142,236,229); } </style> </head> <body> <div class="innerDiv d1">diva</div> <div class="innerDiv d2">divb</div> <div class="innerDiv d3">divc</div> </body> </html> - 当我们把position的值改为relative。注意：（1）用relative，不会出现脱离文档流的情况（脱离文档流：下面的元素占用了它原来的位置）（2）当可以上下滑动浏览器页面时，它不会跟着移动
- 当我们把position的值改为fixed。注意：（1）用fixed，会出现脱离文档流的情况（2）当可以上下滑动浏览器页面时，它会跟着移动
3.5CSS盒子模型
- 所有HTML元素可以看作盒子
- CSS盒子模型：
- 测试代码：
<!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> .outerDiv{ width: 500px; height: 300px; border: 1px solid green; background-color: beige; margin:0px auto; } .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; float: left; } .d1{ background-color: greenyellow; margin-top: 10px; margin-right: 10px; margin-left: 10px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .d2{ background-color: rgb(210,119,119); } .d3{ background-color: rgb(142,236,229); } </style> </head> <body> <div class="outerDiv"> <div class="innerDiv d1">diva</div> <div class="innerDiv d2">divb</div> <div class="innerDiv d3">divc</div> </div> </body> </html> - 测试效果：
- 怎么看某个元素的盒子模型：
- 把鼠标放到代码上还可以看到元素的反色：
- 当给margin放两个值时：前面的是上下外边距，后面的是左右外边距。当给margin放四个值时：分别对应上右下左四个边距（顺时针）。当给margin放一个值时：这个值将会成为上下左右四个边距的值。padding的规则和margin一样
原文地址：https://blog.csdn.net/weixin_74019079/article/details/144247332
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！