前端学习笔记 - HTML+CSS

最新推荐文章于 2024-07-31 16:30:44 发布

茗0309

最新推荐文章于 2024-07-31 16:30:44 发布

阅读量4.8k

点赞数 2

分类专栏：前端学习笔记文章标签： css html html5 前端 css3

本文链接：https://blog.csdn.net/fengxm0309/article/details/120643509

版权

本文是关于前端开发的入门学习笔记，主要介绍了HTML和CSS的基础概念和重要知识点。HTML用于描述网页结构，包括网页的组成部分、HTML标签的使用、语义化标签的优劣以及网页的基本结构。CSS则是用于网页样式设计，涵盖了选择器、属性、盒模型、布局技巧等。文章还提到了常用的浏览器和内核，以及Web标准的重要性，强调了遵循Web标准的益处。此外，还讨论了VS Code作为开发工具的优势和基本使用方法，以及HTML5的新特性如音频和视频标签的使用。

摘要由CSDN通过智能技术生成

基础认知

网页

什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

什么是 HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。

所谓超文本，有 2 层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。

浏览器内核

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

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分；负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。浏览器内核

Web 标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要 Web 标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点： 1.让 Web 的发展前景更广阔。 2.内容能被更广泛的设备访问。 3.更容易被搜寻引擎搜索。 4.降低网站流量费用。 5.使网站更易于维护。 6.提高页面浏览速度。

Web 标准的构成

主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

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

HTML语法规范

基本语法概述

HTML 标签是由尖括号包围的关键词，例如 <html>。由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签，两部分之间包裹内容。
有些特殊的标签必须是单个标签（极少情况），例如 <hr/>，我们称为单标签，无法包裹内容。

标签的关系

双标签关系可以分为两类：包含关系和并列关系。

标签的属性

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，被称为根标签
<head></head>	文档的头部	主义在head标签中必须设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档所有的内容，页面内容基本都是放在body里的

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
    </body>
</html>

网页开发工具 - VS code

开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
VS Code → 速度快、体积小、插件多

插件安装和其他配置

文件 - 自动保存

补充配置文件

使用

双击打开软件。
新建文件（Ctrl + N ）。
保存（Ctrl + S ）, 注意移动要保存为 .html 文件
Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
生成页面骨架结构。输入! 按下 Tab 键。
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。快捷键：alt + b
注释：ctrl + /

HTML标签

标签语义化

实际项目开发中选择标签的原则：标签语义化；根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。即：根据语义选择对应正确的标签如：需要写标题，就使用h系列标签；或需要写段落，就使用p标签

好处： • 对人：好理解，好记忆 • 对机器：有利于机器解析，对搜索引擎（SEO）有帮助

标题标签

场景：用来突出显示文章主题
语义：1~6级，作为标题使用，重要程度依次递减
特点： • 文字都有加粗 • 文字都有变大，并且从h1 → h6文字逐渐减小 • 独占一行
注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

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

段落标签

场景：在新闻和文章的页面中，用于分段显示
语义：段落
特点： • 段落之间存在间隙

• 独占一行

• 段落标签属于文字类标签，里面不可以再放h1标题、p标题、div等

• 文本在一个段落中会根据浏览器窗口的大小自动换行。
```
<p>我是一个段落</p>
```

换行标签

场景：让文字强制换行显示
语义：强制换行
特点： • 单标签 • 让文字强制换行（只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距）

我今天中午吃了<br>饭

水平标签

场景：分割不同主题内容的水平线
语义：主题的分割转换
特点： • 单标签 • 在页面中显示一条水平线

    我是标题
    <hr>
    我是段落

文本格式化标签

语义：突出重要性, 比普通文字更重要

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐使用<strong></strong>，语义更强烈
下划线	<ins></ins>或 <u></u>	更推荐使用<ins></ins>，语义更强烈
倾斜	<em></em>或 <i></i>	更推荐使用<em></em>，语义更强烈
删除线	<del></del>或<s></s>	更推荐使用<del></del>，语义更强烈

图片标签

场景：在网页中显示图片
特点： • 单标签 • img标签需要展示对应的效果，需要借助标签的属性进行设置

<img src="" alt="">

属性

属性	属性值	说明
src	图片路径	必须属性，指定图像文件的路径和文件名
alt	文本	替换文本：图像加载失败时才显示的文字
title	文本	提示文本：鼠标悬停在图像上时显示的文字
width	像素px	设置图像的宽度，如果只设置了width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
height	像素px	设置图像的高度，如果同时设置了width和height两个，若设置不当此时图片可能会变形
border	像素	设置图像的边框粗细

图像标签属性注意点： ①图像标签可以拥有多个属性，必须写在标签名的后面。 ②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 ③属性采取键值对的格式，即 key = “value" 的格式，属性 = “属性值”

路径

绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如： • 盘符开头：D:\day01\images\1.jpg • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径

相对路径是从代码所在的这个文件出发，去寻找目标文件的，这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

相对路径分类	符号	说明
同一级路径	./	<img src="目标图片.gif">或<img src="./目标图片.gif">
下一级路径	/	<img src="images/目标图片.gif">
上一级路径	../	<img src="../目标图片.gif">

音频标签 audio (HTML5)

场景：在页面中插入音频
音频标签目前支持三种格式：MP3（五大浏览器均可使用，推荐）、Wav、Ogg

<audio src="./music.mp3" controls></audio>

属性

属性名	功能
src	音频的路径
controls	显示播放的控件，<audio controls="controls">或<audio controls>
autoplay	自动播放，<audio autoplay="autoplay">或<audio autoplay>，谷歌浏览器把音频和视频自动播放禁止了
loop	循环播放，<audio loop="loop">或<audio loop>

    <audio controls="controls">
        <source src="happy.mp3" type="audio/mpeg">
        <source src="happy.ogg" type="audio/ogg"> 
        您的浏览器暂不支持audio标签。
    </audio>

视频标签 video (HTML5)

场景：在页面中插入视频
视频标签目前支持三种格式：MP4（五大浏览器均可使用，推荐）、WebM 、Ogg

<video src="./video.mp4"></video>

属性

属性名	功能
src	视频的路径
controls	显示播放的控件，<video controls="controls">或<video controls>
autoplay	自动播放（谷歌中可以配合muted实现静音播放），<video autoplay="autoplay">或<video autoplay>
loop	循环播放，<video loop="loop">或<video loop>
muted	静音播放，<video muted>或<video muted="muted">

    <video controls="controls" width="300"> 
        <source src="move.ogg" type="video/ogg" > 
        <source src="move.mp4" type="video/mp4" > 
        您的浏览器暂不支持video标签播放视频 
    </video >

链接标签

场景：点击之后，从一个页面跳转到另一个页面
称呼： a标签、超链接、锚链接
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
- 链接的默认外观：有下划线；未被访问的链接是蓝色的；已被访问的链接是紫色的（清除浏览器可变回蓝色）；活动链接是红色的

属性

属性	作用
href	用于指定链接目标的url地址（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中的打开的方式

列表标签

无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
显示特点：
- 列表的每一项前默认显示圆点标识

    <ul>
        <li>任意内容</li>
        <li>任意内容</li>
        <li>任意内容</li>
    </ul>

注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- 无序列表会带有自己的样式属性

有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。
显示特点：
- 列表的每一项前默认显示序号标识

    <ol>
        <li>任意内容</li>
        <li>任意内容</li>
        <li>任意内容</li>
    </ol>

注意点：
- ol标签中只允许包含li标签
- li标签可以包含任意内容
- 列表排序以数字来显示
- 有序列表会带有自己样式属性

自定义列表

场景：常用于对术语或名词进行解释和描述，在网页的底部导航中通常会使用自定义列表实现。
显示特点：
- dd前会默认显示缩进效果
- 列表项前没有任何项目符号

    <dl>
        <dt>自定义列表的主题</dt>
        <dd>自定义列表针对主题的每一项内容</dd>
        <dd>自定义列表针对主题的每一项内容</dd>
        <dd>自定义列表针对主题的每一项内容</dd>
    </dl>

注意点：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
- <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>

表格标签

场景：在网页中以行+列的单元格的方式显示、展示数据，如：学生成绩表
基本标签：
- <table> </table> 是用于定义表格的标签
- <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table></table>标签中
- <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
- <th> 标签表示 HTML 表格的表头部分(table head 的缩写)，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，th标签书写在tr标签内部（用于替换td标签）
- <caption></caption>在表格中表示整体大标题，书写在table标签内部；可以包裹h标题，反之不行
注意点：
- 标签的嵌套关系：table > tr > td(th)

属性

属性名	属性值	描述
border	数字px（边框宽度）	规定表格单元是否有边框，默认为""表示没有没有边框
width	数字px或百分比	表格宽度
height	数字px或百分比	表格宽度
align	left、center、right	规定表格相对周围元素的对齐方式（也可以给某一行或某一个单元格设置）
cellspacing	数字px	规定单元格之间的空白，默认2像素（去掉边框里的间隙：cellspacing='0' ，但更推荐用css里的border-collapse: collapse;）
cellpadding	数字px	规定单元边沿与其内容之间的空白，默认1像素

结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
- <thead>表格的头部区域
- <tbody>表格的主体区域
- <tfoot>表格的底部区域
注意点：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略

    <table border="1px" cellspacing='0' width="400" height="400">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>学生1</td>
                <td>分数</td>
                <td>评语1</td>
            </tr>
            <tr>
                <td>学生1</td>
                <td>分数</td>
                <td>评语1</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>总结</td>
                <td>总结</td>
            </tr>
        </tfoot>
    </table>

合并单元格

合并单元格步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan="合并单元格的个数（包括自己）"）或者跨列合并（colspan="合并单元格的个数"）

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

    <table border="1px" cellspacing='0' width="400" height="300">
        <thead>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td rowspan="2" colspan="2">1</td>
                <!-- <td rowspan="2">1</td> -->
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <!-- <td>1</td> -->
                <!-- <td>1</td> -->
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
    </table>

表单标签

目的：收集用户信息

组成：在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

属性

属性	属性值	作用
action	url地址	指定接受并处理表单数据的服务器程序的url地址
method	get/post	设置表单数据的提交方式
name	名称	指定表单名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

<input>

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
- input标签可以通过type属性值的不同，展示不同效果
- input标签为单标签
Inuput标签的轮廓(处于选中状态时出现的边边)
- 默认值：outline: invert none medium;
- 连写：颜色样式宽度(可省略任意) outline: #999 solid 2px;
- 去除轮廓：outline:none;

type属性

标签名	type属性值	说明
input	text	文本框，用于输入单行文本，默认宽度为20个字符
	password	密码框，用于输入密码，该字段中的字符被掩码
	radio	单选框，用于多选一
	checkbox	多选框，用于多选多
	file	文件选择，定义输入字段和“浏览”按钮供文件上传
	submit	提交按钮，会把表单数据发送到服务器
	reset	重置按钮，会重置表单中所有数据
	button	普通按钮，默认无功能，可以配合js
	image	图像形式的提交按钮
	hidden	隐藏输入的字段

新增的 input 类型 (HTML5)

属性值	说明
type="email"	限制用户输入必须为Email类型
type="url"	限制用户输入必须为URL类型
type="date"	限制用户输入必须为日期类型
type="time"	限制用户输入必须为时间类型
type="month"	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

新增的表单属性 (HTML5)

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete ="on", 关闭autocomplete ="off"需要放在表单内，同时加上name 属性，同时成功提交
multiple	multiple	可以多选文件提交

        /* 修改placeholder里面的字体颜色 */
        input::placeholder {
            color: pink;
        }

文本框<input type='text'>

属性
- placeholder='提示文字'：占位符，提示用户输入内容的文本
- maxlength：用户可以在表单元素输入的最大字符数, 一般较少使用
- value属性：用户输入的内容，提交之后会发送给后端服务器；也可以实现有些表单元素想刚打开页面就默认显示几个文字
- name属性：
  - 当前控件的含义，即表单元素的名字提交之后可以告诉后端发送过去的数据是什么含义
  - 如果页面中的表单元素很多，可以区别不同的表单元素
- 后端接收到数据的格式是：name的属性值 = value的属性值，如name=fxm；

    <input type="text" placeholder="请输入用户名" value="用户输入的内容" name='userName'>

单选框<input type='radio'>

属性
- name：对于单选框有分组功能，给不同的单选或复选框设置相同的name=“名称”来分组可以实现多选一功能
- checked：默认选中，一打开页面,就要可以默认选中某个表单元素；或写成checked='checked'

    <input type="radio" name='fruit' checked>苹果
    <input type="radio" name='fruit'>橘子
    <input type="radio" name='fruit'>香蕉

复选框<input type='checkbox'>

属性（同单选框）
- name：设置同样的name以分为一组
- checked：默认选中，一打开页面,就要可以默认选中某个表单元素；或写成checked='checked'

文件选择<input type='file'>

属性
- multiple：多文件选择

按钮<input type='button'>

属性
- value='按钮的名字'
如果要实现按钮功能，需要配合form标签使用

<button>按钮

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

标签名	type属性值	说明
button	submit	提交按钮，会把表单数据发送到服务器
	reset	重置按钮，会重置表单中所有数据
	button	普通按钮，默认无功能，可以配合js

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

<select>下拉菜单

有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中，或写成selected='selected'
注意点：
- <select> 中至少包含一对<option> 。

<select>
<option selected>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<textarea>文本域

场景：在网页中提供可输入多行文本的表单控件，常见于留言板，评论
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置

<textarea rows="3" cols="20">
文本内容
</textarea>

<label> 标签

场景：常用于绑定内容与表单标签的关系，为 input 元素定义标注（标签）；用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
使用方法①：

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

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

使用方法②：

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

<label>
	<input type="radio">男
</label>

语义化标签

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

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

特点：

<div> 标签用来布局，但是现在一行只能放一个<div>。大盒子
<span> 标签用来布局，一行上可以多个 <span>。小盒子

语义化标签 (HTML5)

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用；显示特点和div一致，但是比div多了不同的语义
注意：
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在 IE9 中，需要把这些元素转换为块级元素

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

字符实体

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时就可以使用下面的字符来替代。

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	' (IE不支持)
￠	分（cent）	¢
£	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权（copyright）	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷

CSS 基础认知

CSS 介绍

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

CSS 语法规则

CSS写在style标签中，style标签一般写在head标签里面，title标签下面
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
- 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分

CSS 引入方式

内嵌式：CSS 写在style标签中
- style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
```
<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>
```
外联式：CSS 写在一个单独的.css文件中
- 需要通过link标签在网页中引入，可以控制多个页面，实现结构和样式的完全分类
- 写在head里
- 在css文件中，不要写style标签，直接写css样式
```
<link rel="stylesheet" href="./index.css">
```
行内式：CSS 写在标签的style属性中
- 配合js使用
- 权重高
```
<div style="color: red; font-size: 12px;">你好</div>
```

CSS 基础选择器

选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

作用：标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签

标签名{
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

类选择器

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

注意点：
- 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 命名要有意义，尽量使别人一眼就知道这个类名的目的
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
<