HTML & CSS

H2024年6月20日大约 23 分钟

1、B/S 软件的结构

B/S：Browser / Server

浅谈 C/S 和 B/S 架构：https://blog.csdn.net/tennysonsky/article/details/45062079

2、前端的开发流程

3、网页的组成部分

（1）页面由三部分组成：内容(结构) -> HTML、表现 -> CSS、行为 ->JavaScript

（2）内容(结构)，是我们在页面中可以看到的数据，我们称之为内容。一般内容我们使用 HTML 技术来展示

（3）表现，指的是内容在页面上的展示形式，比如说，布局，颜色，大小等等。一般使用 CSS 技术实现

（4）行为，指的是页面中元素与输入设备交互的响应。一般使用 JavaScript 技术实现

4、HTML 简介

（1）Hyper Text Markup Language（超文本标记语言），简写：HTML

（2）HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

5、创建 HTML 文件

（1）创建工程

（2）在工程下创建一个 html 页面

（3）第一个 html 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

选择一个浏览器运行这个 html 页面

运行效果：

注：Java 文件是需要经过编译，再由 Java 虚拟机跑起来，但是 HTML 文件不需要编译，直接由浏览器解析运行

6、HTML 文件的书写与规范

<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en"> <!-- html标签表示html的开始 lang="en"表示英文 lang="zh-CN"表示中文 html标签中一般分为两部分，分别是:head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容:title标签、css样式、js代码 -->
    <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个html页面显示的主体内容 -->
    hello <!-- 主体内容 -->
</body>
</html> <!-- /html标签表示html的结束 -->

HMTL 的代码注释

<!-- 这是 html 注释，可以在页面右键查看源代码中看到 -->

7、HTML 标签介绍

（1）标签的格式

<标签名>封装的数据</标签名>

（2）标签名大小写不敏感

（3）标签拥有自己的属性

①基本属性：bgcolor="red" ---> 可以修改简单的样式效果(bgcolor是背景颜色属性)
②事件属性：onClick="alert('你好!')"  ---> 可以直接设置事件响应后的代码(onClick表示点击事件)

（4）标签又分为单标签和双标签

①单标签格式：<标签名/>
②双标签格式：<标签名>封装的数据</标签名>

<br/>  表示换行
<hr/>  表示分割线

<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en"> <!-- html标签表示html的开始 lang="en"表示英文 lang="zh-CN"表示中文 html标签中一般分为两部分，分别是:head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容:title标签、css样式、js代码 -->
    <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个html页面显示的主体内容 -->
hello <!-- 主体内容 -->
<br/> <!-- br表示换行 -->
<button onClick="alert('你好!')">按钮</button> <!-- alert()是javascript语言提供的一个警告框函数,它可以接收任意函数，参数就是警告框的函数信息 -->
<hr/> <!-- hr表示分割线 -->
</body>
</html> <!-- /html标签表示html的结束 -->

运行效果：

（5）标签的语法

注意事项：html 代码不是很严谨。有时候标签不闭合，也不会报错。（浏览器帮我们修复了）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0-标签语法.html</title>
</head>
<body>

    <!-- ①标签不能交叉嵌套 -->
    正确：<div><span>你好，hkw</span></div>
    错误：<div><span>你好，hkw</div></span>
    <hr />

    <!-- ②标签必须正确关闭(闭合) -->
    <!-- i.有文本内容的标签： -->
    正确：<div>你好，hkw</div>
    错误：<div>你好，hkw
    <hr />
    
    <!-- ii.没有文本内容的标签： -->
    正确：<br />1
    错误：<br >2
    <hr />
    
    <!-- ③属性必须有值，属性值必须加引号 -->
    正确：<font color="blue">你好，hkw</font>
    错误：<font color=blue>你好，hkw</font>
    错误：<font color>你好，hkw</font>
    <hr />
        
    <!-- ④注释不能嵌套 -->
    正确：<!-- 注释内容 --> <br/>
    错误：<!-- 注释内容 <!-- 注释内容 -->-->
    <hr />
</body>
</html>

8、常用标签介绍

参考文档：w3cshool.CHM

w3cshool.CHM

链接：https://pan.baidu.com/s/16AXU4KvpMS3oKMaloYcNFg 提取码：adhk

注：打开w3cshool.CHM可能显示空白
解决方法：
①右键文件，选择属性
②点击(勾选)解除锁定 > 应用 > 确定

8.1 font 字体标签

需求：在网页上显示 我是字体标签 ，并设置字体为宋体，颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签练习</title>
</head>
<body>
    <!-- 字体标签
    需求:在网页上显示 我是字体标签 ，并设置字体为 宋体，颜色为 红色

    font 标签是字体标签，它可以用来修改文本的字体，颜色，大小(尺寸)
        color属性:修改颜色
        face属性:修改字体
        size属性:修改文本大小
    -->
    <font color="red" face="宋体">我是字体标签</font>
</body>
</html>

运行效果：

8.2 特殊字符

需求：把换行 <br/> 标签变成文本转换成字符显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符练习</title>
</head>
<body>
    <!-- 特殊字符
    需求：把<br/> 换行标签 变成文本 转换成字符显示在页面上

    常用的特殊字符:
    <     &lt;
    >     &gt;
    空格   &nbsp;
    -->
    我是&lt;br&gt;标签<br/>
    我好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅
</body>
</html>

运行效果：

8.3 标题标签

标题标签是：h1 -> h6

需求：演示标题1 到标题6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签练习</title>
</head>
<body>
    <!-- 标题标签
    需求：演示 标题1 到 标题6

        h1 - h6 都是标题标签
        h1最大
        h6最小

        align属性 是对齐方式
            left 左对齐(默认)
            center 居中对齐
            right 右对齐
    -->
    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

运行效果：

8.4 超链接(★★★重点★★★)

在网页中所有点击之后可以跳转的内容都是超链接

需求：普通的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接练习</title>
</head>
<body>
    <!-- a标签 是 超链接
        href属性 设置链接的地址
        target属性 设置哪个目标进行跳转
            _self 表示当前页面
            _blank 表示打开新的页面进行跳转
    -->
    <a href="http://www.baidu.com">百度一下</a><br/>
    <a href="http://www.baidu.com" target="_self">百度一下_self</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度一下_blank</a><br/>
</body>
</html>

运行效果：

8.5 列表标签

有序列表、无序列表

需求：使用无序列表方式，把四大天王，刘德华，郭富城，黎明，张学友，展示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签练习</title>
</head>
<body>
    <!-- 列表标签
    需求:使用无序列表方式，把四大天王，刘德华，郭富城，黎明，张学友，展示出来
        ul 是无序列表(常用)  ol是有序列表
            type 属性可以修改列表项前面的符号
    
        li 是列表项
    -->
    <ul>
        <li>刘德华</li>
        <li>郭富城</li>
        <li>黎明</li>
        <li>张学友</li>
    </ul>

    <ol>
        <li>刘德华</li>
        <li>郭富城</li>
        <li>黎明</li>
        <li>张学友</li>
    </ol>

    <ul type="none">
        <li>刘德华</li>
        <li>郭富城</li>
        <li>黎明</li>
        <li>张学友</li>
    </ul>
</body>
</html>

运行效果：

8.6 img 标签

img 标签可以在 html 页面上显示图片

需求：使用 img 标签显示图片(如下图中的五张图片)，并修改宽高和边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签练习</title>
</head>
<body>
    <!-- img标签
    需求:使用img标签显示图片，并修改宽高和边框属性

    img标签是图片标签，用来显示图片
        src属性 可以设置图片的路径
        width属性 设置图片的宽度
        height属性 设置图片的高度
        border属性 设置图片的边框大小
        alt属性 设置当指定路径找不到图片时，用来代替显示的文本内容

    在JavaSE中路径分为相对路径和绝对路径
        相对路径:从工程开始

        绝对路径:盘符:/目录/文件名

    在web中路径也分为相对路径和绝对路径两种
        相对路径
            .          表示当前文件所在的目录
            ..         表示当前文件所在的目录的上一级目录
            文件名      表示当前文件所在的目录的文件，相当于./文件名(只是./可以省略)

        绝对路径
            正确格式:http://ip:port/工程名/资源路径

            错误格式:盘符:/目录/文件名
    -->
    <img src="../imgs/1.jpg" width="280" height="200" border="1"/>
    <img src="../imgs/2.jpg" width="280" height="200" border="1"/>
    <img src="../imgs/3.jpg" width="280" height="200" border="1"/>
    <img src="../imgs/4.jpg" width="280" height="200" border="1"/>
    <img src="../imgs/5.jpg" width="280" height="200" border="1"/>
    <img src="../imgs/6.jpg" width="280" height="200" border="1" alt="猫咪不见了"/>
</body>
</html>

运行效果：

8.7 表格标签(★★★重点★★★)

需求1：做一个带表头的，三行，三列的表格，并显示边框

需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签练习</title>
</head>
<body>
    <!-- 表格标签
    需求1：做一个带表头的，三行，三列的表格，并显示边框
    需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

        table 是表格标签
            border属性 设置表格边框大小
            width属性 设置表格宽度
            height属性 设置表格高度
            align属性 设置表格相对于页面的对齐方式
            cellspacing属性 设置单元格间距

        tr 是行标签
        th 是表头标签
        td 是单元格标签
            align属性 设置单元格文本对齐方式

        b 是加粗标签
    -->
    <table align="center" border="1" width="200" height="200" cellspacing="0">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td align="center">2.1</td>
            <td align="center">2.2</td>
            <td align="center">2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
</body>
</html>

运行效果：

8.8 跨行跨列表格（★★★次重点★★★）

需求：新建一个五行，五列的表格，第一行第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列表格练习</title>
</head>
<body>
    <!-- 跨行跨列表格
    需求：新建一个五行，五列的表格
    第一行第一列的单元格要跨两列
    第二行第一列的单元格跨两行
    第四行第四列的单元格跨两行两列

        colspan属性 设置跨列
        rowspan属性 设置跨行
    -->
    <table align="center" border="1" width="300" height="300" cellspacing="0">
        <tr>
            <th colspan="2">1.1</th>
            <th>1.3</th>
            <th>1.4</th>
            <th>1.5</th>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
</body>
</html>

运行效果：

8.9 了解 iframe 框架标签(内嵌窗口)

iframe 标签可以在一个 html 页面上，打开一个小窗口，去加载一个单独的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签练习</title>
</head>
<body>
    <!-- iframe标签
    iframe标签可以在页面上开辟一个小区域显示一个单独的页面
        iframe和a标签结合使用:
            1.在iframe标签中使用name属性定义一个名称
            2.在a标签中使用target属性设置iframe中name的属性值
    -->
    <ul>
        <li><a href="img标签.html" target="iframe">img标签</a></li>
        <li><a href="列表标签.html" target="iframe">列表标签</a></li>
        <li><a href="超链接.html" target="iframe">超链接</a></li>
        <li><a href="表格标签.html" target="iframe">表格标签</a></li>
    </ul>
    <iframe src="hello.html" width="800" height="400" name="iframe"></iframe>
</body>
</html>

运行效果：

8.10 表单标签（★★★重点★★★）

什么是表单？表单就是 html 页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

需求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签练习</title>
</head>
<body>
    <!-- 表单标签
    需求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），兴趣爱好（多选），国籍（下 拉列表），隐藏域，自我评价（多行文本域），重置，提交

        form 是表单标签
            input
                type="text" 是文本输入框 value属性设置默认值
                type="password" 是密码输入框 value属性设置默认值
                type="radio" 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
                type="checkbox" 是复选框 checked="checked"表示默认选中
                type="reset" 是重置按钮 value属性设置按钮上的文本
                type="submit" 是提交按钮 value属性设置按钮上的文本
                type="button" 是按钮 value属性设置按钮上的文本
                type="file" 是文件上传
                type="hidden" 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域(提交的时候也会同时发送给服务器)

            select 是下拉列表框
                option 标签是下拉列表中的选项
                    selected="selected"表示默认选中

            textarea 是多行文本输入框(起始标签和结束标签中的内容是默认值)
                rows属性 设置可以显示几行的高度
                cols属性 设置每行可以显示几个字符宽度
    -->
    <form>
        用户名：<input type="text" value="hkw"/><br/>
        密码：<input type="password" value="123456"/><br/>
        确认密码：<input type="password"/><br/>
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex"/>女<br/>
        兴趣爱好：<input type="checkbox" checked="checked">Java<input type="checkbox">C++<input type="checkbox"/>JavaScript<br/>
        国籍：<select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
                <option>英国</option>
                <option>德国</option>
                <option>印度</option>
             </select><br/>
        自我介绍：<textarea rows="10" cols="30">默认值</textarea><br/>
        <input type="reset" value="重置123"/>
        <input type="submit" value="提交123">
        <input type="button" value="按钮">
        <input type="file">
        <input type="hidden">
    </form>
</body>
</html>

运行效果：

按上面的做法，表单呈现的效果不是很好看，所以我们如何做才能让表单变得整齐？

表单格式化：将单内容嵌入表格中进行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化练习</title>
</head>
<body>
    <!-- 表单格式化
    做法很简单:就是将我们的表单内容嵌入表格中进行显示
    -->
    <form>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" placeholder="请输入用户名"/>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" placeholder="请输入密码"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" placeholder="再次输入密码"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" checked="checked">Java<input type="checkbox">C++<input type="checkbox"/>JavaScript
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>--请选择国籍--</option>
                        <option selected="selected">中国</option>
                        <option>美国</option>
                        <option>日本</option>
                        <option>英国</option>
                        <option>德国</option>
                        <option>印度</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我介绍：</td>
                <td>
                    <textarea rows="10" cols="30">默认值</textarea>
                </td>
            </tr>
            <tr align="center">
                <td>
                    <input type="reset"/>
                </td>
                <td>
                    <input type="submit" value="注册">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

运行效果：

表单提交的细节（★★★★★）

①form 标签是表单标签
- action属性设置提交的服务器地址
- method属性设置提交的方式GET(默认值)或者POST
②表单提交的时候，数据没有发送给服务器的三种情况
1. 表单项没有 name 属性值
2. 单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3. 表单项不在提交的 form 标签中
③GET 请求的特点
1. 浏览器地址栏中的地址是：action属性值 + ？+ 请求参数
2. 请求参数的格式是：name=value&name=value
3. 不安全
4. 有数据长度的限制

w3cschool 文档中有提及：

④POST 请求的特点
1. 浏览器地址栏中只有 action 属性值
2. 相对于 GET 请求更安全
3. 理论上没有数据长度的限制

8.11 其他标签

div、span、p标签演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签练习</title>
</head>
<body>
    <!-- 其他标签
    需求:div、span、p标签演示

        div标签 默认独占一行
        span标签 它的长度是封装数据的长度
        p 段落标签 默认会在段落的上方和下方各空出一行来(如果已有就不再空)
    -->
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p标签1</p>
    <p>p标签2</p>123
</body>
</html>

运行效果：

9、CSS 简介

CSS2.0.chm

链接：https://pan.baidu.com/share/init?surl=YshYnj14AesecnpAeTYPFw 提取码：dstt

CSS 是【层叠样式表单】，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记型语言。

10、CSS 语法规则

（1）选择器

浏览器根据 "选择器" 决定受 CSS 样式影响的 HTML 元素(标签)

（2）属性

是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明

例如：

p {
    color: blue;
}

（3）多个声明

如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如：

p {
    color: red;
    font-size: 30px;
}

注：一般每行只描述一个属性

（4）CSS 注释

/*注释内容*/

11、CSS 和 HTML 的结合方式

11.1 第一种方式

在标签的 style 属性上设置 "key:value value"，修改标签样式

需求：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML的结合方式一</title>
</head>
<body>
    <!-- CSS和HTML的结合方式一
    在标签的style属性上设置"key:value value"，修改标签样式

    需求:分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
        1 个像素   1px
        solid     表示实线
        red       表示实线颜色为 红色
    -->
    <div style="border: 1px solid red">div 标签 1</div>
    <div style="border: 1px solid red">div 标签 2</div>
    <span style="border: 1px solid red">span 标签 1</span>
    <span style="border: 1px solid red">span 标签 2</span>
</body>
</html>

运行效果：

问题：这种方式的缺点？

①如果标签多了，样式多了，代码量非常庞大
②可读性非常差
③CSS 代码没什么复用性可言

11.2 第二种方式

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下：

xxx {
    key: value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML的结合方式二</title>
    <style type="text/css">
        div {
           border: 1px solid red;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- CSS和HTML的结合方式二
    在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
        格式如下:
            xxx {
                key : value value;
            }

    需求:分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
    -->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

问题：这种方式的缺点？

①只能在一个页面中复用，不能在多个页面中复用 css 代码
②维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面去修改，工作量太大

11.3 第三种方式

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用(在 head 标签中引入)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML的结合方式三</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <!-- CSS和HTML的结合方式三
    把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用(在head标签中引入)

    需求:分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
    -->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

12、CSS 选择器

12.1 标签名选择器

标签名选择器的格式是：

标签名 {
    属性: 值;
}

标签名选择器，可以决定哪些标签被动的使用这个样式

需求：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线，并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS标签名选择器</title>
    <style type="text/css">
        div {
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span {
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- CSS标签名选择器
    标签名选择器的格式是:
        标签名{
            属性:值;
        }
    标签名选择器，可以决定哪些标签被动的使用这个样式

    需求:在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线
        并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线
    -->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

运行效果：

12.2 id 选择器

id 选择器的格式是：

#id 属性值{
    属性: 值;
}

id 选择器，可以让我们通过 id 属性选择性地去使用指定的样式

需求：分别定义两个 div 标签

第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，字体大小 30 个像素，边框为 1 像素黄色实线

第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式修改的字体颜色为红色，字体大小 20 个像素，边框为 5 像素蓝色点线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001 {
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        #id002 {
            border: 5px dashed blue;
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- id选择器
    id选择器的格式是:
        #id 属性值{
            属性:值;
        }

    需求:分别定义两个 div 标签
    第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色， 字体大小 30 个像素，边框为 1 像素黄色实线
    第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像 素，边框为 5 像素蓝色点线
    -->
    <div id="id001">div 标签 1</div>
    <div id="id002">div 标签 2</div>
</body>
</html>

运行效果：

12.3 class 选择器(类选择器)

class 类选择器的格式是：

.class 属性值{
    属性: 值;
}

class 类选择器，可以通过 class 属性有效地选择性去使用指定的样式

需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素，为 1 像素黄色实线

需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素，边框为 1 像素红色实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类选择器</title>
    <style type="text/css">
        .class01 {
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        .class02 {
            border: 1px solid red;
            color: grey;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <!-- class类选择器
    class 类选择器的格式是:
        .class 属性值{
            属性：值;
        }
    class 类选择器，可以通过class属性有效地选择性去使用指定的样式

    需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线
    需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线
    -->
    <div class="class01">div 标签 class01</div>
    <div class="class02">div 标签 class02</div>
    <span class="class01">span 标签 class01</span>
</body>
</html>

运行效果：

12.4 组合选择器

组合选择器的格式：

选择器1,选择器2,...选择器n {
    属性:值;
}

组合选择器，可以让多个选择器公用同一个 css 样式代码

需求：修改 class="class01" 的 div 标签和 id="id01" 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素，边框为 1 像素黄色实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS组合选择器</title>
    <style type="text/css">
        .class01,#id01 {
            border: 1px solid yellow;
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- CSS组合选择器
    组合选择器的格式：
    选择器1,选择器2,...选择器n {
    属性:值;
    }
    组合选择器，可以让多个选择器公用同一个css样式代码

    需求:修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素，边框为 1 像素黄色实线
    -->
    <div id="id01">div 标签 id01</div><br/>
    <span class="class01">span 标签 class01</span><br/>
</body>
</html>

运行效果：

13、常用样式

13.1 字体颜色

color: red;

颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

13.2 宽度

width: 19px;

宽度可以写像素值：19px;
也可以写百分比值：20%;

13.3 高度

height: 20px;

高度可以写像素值：19px;
也可以写百分比值：20%;

13.4 背景颜色

background-color: #0F2D4C;

13.5 字体样式

color: #FF0000; 字体颜色红色
font-size: 20px; 字体大小

13.6 红色1像素实线边框

border：1px solid red;

13.7 div 居中

margin-left: auto;
margin-right: auto;

13.8 文本居中

text-align: center;

13.9 超链接去下划线

text-decoration: none;