HTML+CSS

陈十一.381

已于 2024-06-16 21:23:00 修改

阅读量597

点赞数 23

文章标签： html css 前端

于 2024-06-16 20:54:02 首次发布

本文链接：https://blog.csdn.net/weixin_62299277/article/details/139726126

版权

HTML+CSS

vscode快捷键：

代码往后缩进tab / 往前缩进shift+tab
alt+shift+↓ 复制到下一行
缩放代码字号：放大 ctrl+加号，缩小 Ctrl+减号

网页三要素

title：网页的标题（30 字以内）
- 文字会显示在浏览器的标题栏上
- title 也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理的标题设置有利于 SEO 优化
keywords：网页的关键词（关键词之间用英文状态下的逗号 “,” 分隔）
description：网页的描述（150 字以内）

一、基础认知

目标：认识 网页组成和五大浏览器 ，明确 Web标准的构成 ，使用 HTML骨架 搭建出一个网页。

1、基础概念铺垫（了解）

1.1.1认识网页（了解）

问题1：网页有哪些部分组成？

文字，图片，音频，视频，超链接

问题2：我们看到的网页背后本质是什么？

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器转化（解析和渲染）成用户看到的网页

1.1.2总结

网页有哪些部分组成？

文字，图片，音频，视频，超链接

前端的代码是通过什么软件转换成用户眼中的页面的？

浏览器

1.2.1五大浏览器（了解）

浏览器：是 网页显示、运行的平台，是前端开发必备利器

常见的五大浏览器：

IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome）、Safari浏览器、欧朋浏览器（Opera）

1.2.2渲染引擎

渲染引擎（浏览器内核）：浏览器中专门 对代码进行解析渲染的部分

浏览器出品的公司不同，内在渲染引擎也是不同的：

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器
Chrome/Opera	Bink	Bink其实是Webkit的分支

注意点：

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

1.2.3总结

五大浏览器有哪些？

IE浏览器
火狐浏览器(Firefox)
谷歌浏览器(Chrome）
Safari浏览器
欧朋浏览器（Opera）

相同的网页在不同浏览器中显示效果会完全一致吗？

因为不同浏览器渲染引擎不同，解析的效果会存在差异

前端工程师日常推荐使用哪一个浏览器？

Chrome

1.3.1为什么需要Web标准？（了解）

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

1.3.2Web标准的构成

Web标准中分成是三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

1.3.3Web标准的记忆方法

Web标准要求页面实现：结构、表现、行为三层分离

结构：HTML（决定了身体）
表现：CSS（决定了样式美观）
行为：JavaScript（决定了交互的动态效果）

1.3.4小结

Web标准的构成有哪些？分别通过什么语言表示？

结构：HTML —> 页面元素
表现：CSS —>页面样式
行为：JavaScript —> 页面交互的动态效果

2、HTML初体验

2.1.1HTML的概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过 HTML标签对网页中的文本、图片、音频、视频等内容进行描述

2.2.1HTML页面固定结构

网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款…

网页中也是存在固定的结构的，如：整体、头部、标题、主体

网页中的固定结构是要通过特点的 HTML标签 进行描述的

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.2.2小结

HTML骨架结构由哪些标签组成？

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

二、HTML标签学习

目标：学习HTML排版、媒体、链接等基础标签，完成 基础页面的开发

HTML5特性—空白折叠现象：文字和文字之间的多个空格、换行会被折叠成一个空格

1.1标签组成和关系

父子关系（嵌套关系）

兄弟关系（并列关系）

标签有：双标签、单标签

1.2排版标签

标题标签

语义：1-6级标题，重要程度依次递减

特点：

文字都有加粗
文字都有变大，并且从h1 -->h6文字逐渐减小
独占一行

段落标签

<p></p>

换行标签

<br>

语义：换行

特点：单标签、让文字强制换行

水平线标签

<hr>
场景：分割不同主题内容的水平线

语义：主题分割

特点：单标签、在页面中显示一条水平线

1.3文本格式化标签

场景：需要让文字加粗，下划线，倾斜，删除线等效果

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：右边的可以突出重要性的强调语境

1.4媒体标签

图片标签

场景：在网页中显示图片

代码：<img src=“图片路径” alt=“我是替换文本” title="我是title”>

特点：单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

属性名：title

属性值：提示文本

当鼠标悬停时，才显示的文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

属性名：width和height

属性值：宽度和高度（数字）

注意点：

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形

路径

绝对路径：从盘符开始

相对路径：下级目录：./xxx （一个点）

上级目录: . ./xxx (两个点)

音频标签

场景：在页面中插入音频

代码：<audio src=“” control></audio>

常见属性：

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

视频标签

场景：在页面中插入视频

代码：<video src=“” controls></video>

常见属性：

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

注意点：

视频标签目前支持三种格式：MP4、WebM、Ogg

1.5链接标签

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：<a href=“”>超链接</a href=“”>

特点：

双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

属性名：target

属性值：目标网页的打开方式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新的窗口中跳转（保留原网页）

1.6列表标签

无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。

标签组成：

标签名	说明
ul	表示无序列表的整体，用于包裹标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示圆点标识

注意点：

ul标签中只允许包含li标签
li标签可以包含任意内容

有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。

标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示序号标识

注意点：

ol标签中只允许包含li标签
li标签可以包含任意内容

自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现。

标签组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容

1.7表格标签

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。

基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可以用于包裹内容

注意点：

标签的嵌套关系：table>tr>td

表格的相关属性

场景：设置表格基本展示效果

常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：

实际开发时针对样式效果推荐用CSS设置

表格的标题

场景：在表格中表示整体大标题和一列小标题

其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点:

caption标签书写在table标签内部
th标签书写在tr内部（用于替换td标签）

表格的结构（结构）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：

表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

合并单元格-思路

场景：将水平或垂直多个单元格合并成一个单元格

合并单元格的步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
- 上下合并–>只保留最上的，删除其他的
- 左右合并–>只保留最左边的，删除其他的

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意点：

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfood）

1.8表单标签

input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单，如：登录页、注册页

标签名：input

input标签可以通过type属性值得不同，展示不同的效果

type属性：

标签名	type属性
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一，如：性别：男，女
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

input系列标签-文本框

场景：在网页中显示 输入单行文本 的表单控件

type属性值：text

常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

在这里插入图片描述

input系列标签-单选框

场景：在网页中显示多选一的单选表达单控件

type属性值：radio

常用属性：

属性名
name	分组。有相同name属性值得单选框为一组，一组中同时只能有一个被选中
checked	默认选中

注意点：

name属性对于单选框有分组功能
有相同name属性值得单选框为一组，一组中只能同时有一个被选中

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

注意点：

如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

<form action = "">
    用户名：<input type = "text">
    密码：<input type = "text">
    <input type = "submit" value="免费注册">
    <input type= "reset">
    <input type= "button" value = "普通按钮">
</form>

button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值：（同input的按钮系列）

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮，默认无功能，之后配合js添加功能

注意点：

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

textare文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法①：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值（id和for一样）

使用方法②：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

1.9语义化标签

1.9.1没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到 div 和 span 这两个没语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

1.9.2有语义的布局标签（了解）

一般用于移动端//手机端网页制作

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

在这里插入图片描述

2.0字符实体

常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;

常见字符实体：

空格： & nbsp;

显示结果描述实体名称
空格 & nbsp;
< 小于号 & lt;
> 大于号 & gt;
& 和号 & gt;
" 引号 & quot;
’ 撤号 & apos;(IE不支持)
￠分（cent） & cent;
£ 镑（pound） & pound;
￥元（yen） & yen;
€ 欧元（euro） & euro;
§ 小节 & sect;
© 版权（copyright） & copy;
® 已注册商标 & reg;

显示结果	描述	实体名称
	空格	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& gt;
"	引号	& quot;
’	撤号	& apos;(IE不支持)
￠	分（cent）	& cent;
£	镑（pound）	& pound;
￥	元（yen）	& yen;
€	欧元（euro）	& euro;
§	小节	& sect;
©	版权（copyright）	& copy;
®	已注册商标	& reg;

三、CSS样式（包括基本选择器）

1、CSS的介绍

CSS：层叠样式表（Cascading style sheets）

CSS作用：给HTML标签美化，添加样式

1.1CSS 语法规则

写在哪？

css写在style标签中，style标签一般写在head标签里面，title标签下面

怎么写？

在这里插入图片描述

1.2CSS引入方式

内嵌式： CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

外联式： CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

行内式： CSS写在标签的style属性中

提示：基础班不推荐使用，之后会配合js使用

1.3CSS引入方式-小结

CSS常见三种引入方式有哪些？

内嵌式
外联式
行内式

CSS常见三种引入方式的特点区别有哪些（书写位置、作业范围、使用场景）？

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	css写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签	配合js使用

2、基本选择器

2.1标签选择器

结构：标签名 {css属性 : 属性值 ;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2类选择器

结构： . 类名 { css属性 : 属性值 ;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为 类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者 中划线 开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

2.3id选择器

结构：#id属性值 { css属性 : 属性名 ;}

作用：通过id属性值，找到页面中带有这id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

2.4通配符选择器

结构：** { css属性 : 属性值 ; }**

作用：找到页面中所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding

3、文字样式

3.1字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌浏览器默认字体大小是16px
单位需要设置，否则无效

3.2字体粗细

属性名：font-weight

取值（有两种方式）：

关键字：

正常 normal
加粗 bold
纯数字：100~900的整百数：

正常 400
加粗 700

正常	normal
加粗	bold

正常	400
加粗	700

注意点：

不是所有字体都提供九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多。

3.3字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

有个标签也是倾斜：

3.4字体系列font-family

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4,…,字体系列

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
字体系列：sans-serif、serif、monospace等…

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

系统	默认字体
Windows	微软雅黑
macOS	苹方

3.5常见字体系列（了解）

无衬线字体（sans-serif）

特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体、Arial

衬线字体（serif）

特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见该系列字体：宋体、Times New Roman

等宽字体（monospace）

特点：每个字母或文字的宽度相等
场景：一般用于程序编写，有利于代码的阅读和编写
常见该系列字体：Consolas、fira code

3.6样式的层叠问题

问题：

给同一个标签设置了相同的样式，此时浏览器会如何渲染？

结果：

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

TIP：

CSS（Cascading style sheets） 层叠样式表
所谓的我层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

3.7字体font相关属性的连写

属性名：font（复合属性）

取值：

font：style weight size family;
- 是否倾斜，是否加粗，字体大小，字体系列

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置 单独和连写 形式

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

4、文本样式

4.1文本缩进

属性名： text-indent

取值:

数字+px
数字+em(推荐：1em = 当前标签的font-size的大小)

4.2文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

如果需要让文本水平居中，text-align属性给 **文本所在标签（文本的父元素） **设置

4.3水平居中方法总结text-align:center

text-align:center能让哪些元素水平居中？

文本
span标签
input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align：center需要给以上父元素设置

垂直居中技巧：

设置行高属性值=自身高度属性值

4.4文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线(常用)
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意点：

开发中会使用 text-decoration : none; 清楚a标签默认的下划线

4.5行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px
倍数（当前标签font-size的倍数）

应用：

让 单行文本 垂直居中可以设置 line-height：文字父元素高度
网页精准布局时，会设置 line-height：1可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family

4.6拓展颜色常见取值（了解）

属性名：

如：文字颜色：color
如：背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255、255、255)、rgb（255、0、0）…
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0-1	rgba（255、255、255、0.5）、rgba（255、0、0、0.3）…
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#e92322,简写：#000、#f00

4.7拓展标签水平居中方法总结 margin：0 auto

如果需要让div、p、h（大盒子）水平居中？

可以通过margin：0 auto; 实现

注意点：

如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
margin：0 auto; 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

四、选择器进阶

1.后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

选择器语法： 选择器1 选择器2{css}

结果：

在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

注意点：

后代包括：儿子、孙子、重孙子…
后代选择器中，选择器于选择器之前通过空格隔开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器 后代选择器 */
        div p {
            color: red;
        }
	</style>
</head>

<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
        <div>
        	<!-- 这个p标签也会被选中 -->
            <p>这是div的孙子p</p> 
        </div>
    </div>
</body>

</html>

2.子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素

选择器语法： 选择器1>选择器2{css}

结果：

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注意点：

子代只包括：儿子
子代选择器中，选择器与选择器之前通过 > 隔开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div的儿子a设置文字颜色是红色 */
        /* 子代选择器 */
        div>a {
            color: red;
        }
	</style>
</head>

<body>
    <a>这是一个a标签</a>
    <div>
    	<!-- 只有这个a标签会被选中 -->
        <a>这是div的儿子a</a>
        <p>
        	<!-- 这个a标签不会被选中 -->
            <a href="#">这是div的孙子a</a> 
        </p>
    </div>
</body>

</html>

3.并集选择器：

作用：同时选择多组标签，设置相同的样式

选择器语法： 选择器1 ，选择器2{css}

结果：

找到选择器1 和选择器2 选中的标签，设置样式

注意点：

并集选择器中的每组选择器之间通过 , （逗号）分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1，选择器2{} */
        div,
        span,
        p,
        h1 {
            color: red;
        }
	</style>
</head>

<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
	<!-- h2颜色不会变 -->
    <h2>h2</h2>
</body>

</html>

4.交集选择器：紧挨着

作用：选中页面中， 同时满足 多个选择器的标签

选择器语法： 选择器1选择器2{css}

结果：

（既有原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p {
            color: red;
        } */

        /* .box {
            color: red;
        } */
        /* 必须是p标签，而且添加了box类 */
        p.box {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 想找到第一个p，带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签</p>
    <p>pppp</p>
    <div class="box">这是div标签：box</div>
</body>

</html>

5.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover{css}

注意点：

伪类选择器选中的元素的 某种状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover {
            color: red;
            background-color: green;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
</body>

</html>

6.emmet语法

作用：通过简写语法，快速生成代码

语法：

类似于刚刚学习的选择器的写法

记忆	示例	效果
标签名	div	>
类选择器	.red	>
id选择器	#one	>
交集选择器	p.red#one
子代选择器	ul>li
内部文本	ul>li{我是li的内容}	我是li的内容
创建多个	ul>li*3

五、背景相关的属性

1.背景颜色

属性名：background-color(bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

注意点：

背景颜色默认值是透明：rgba（0,0,0,0）、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 红绿蓝三原色0-255，a是透明度0-1 */
            background-color: rgba(255, 255, 125, 0.5);
        }
    </style>
</head>

<body>
    <div>div</div>
</body>

</html>

2.背景图片

属性名：background-image（bgi）

属性值：background-image：url(‘图片的路径’);

注意点：

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.背景平铺

属性名：background-repeat（bgr)

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

| 内部文本 | ul>li{我是li的内容} |

我是li的内容

|
| 创建多个 | ul>li*3 |

五、背景相关的属性

1.背景颜色

属性名：background-color(bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

注意点：

背景颜色默认值是透明：rgba（0,0,0,0）、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 红绿蓝三原色0-255，a是透明度0-1 */
            background-color: rgba(255, 255, 125, 0.5);
        }
    </style>
</head>

<body>
    <div>div</div>
</body>

</html>

2.背景图片

属性名：background-image（bgi）

属性值：background-image：url(‘图片的路径’);

注意点：

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.背景平铺

属性名：background-repeat（bgr)

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺