HTML CSS学习第二周

pe11223

已于 2022-11-02 00:10:30 修改

阅读量567

点赞数

文章标签： html css 学习

于 2022-10-28 18:45:37 首次发布

本文链接：https://blog.csdn.net/pe11223/article/details/127533491

版权

2.15：嵌套列表

列表之间相互嵌套，形成多层级列表

一、<ul><li>型

以中国及其省为嵌套和美国及其州的嵌套

<ul>
	<li>
        中国
		<ul>
        	<li>山东省</li>
            <li>江苏省</li>
            <li>河南省</li>
        </ul>
 	</li>
    <li>
        美国
        <ul>
            <li>德克萨斯州</li>
            <li>佛罗里达州</li>
            <li>宾夕法尼亚州</li>
            </ul>
        </li>
</ul>

上段结构如下

<ul>
    <li>
        一级1
        <ul>
            <li>二级1</li>
            <li>二级2</li>
            <li>二级3</li>
        </ul>
    </li>
    <li>
        一级2
        <ul>
            <li>二级1</li>
            <li>二级2</li>
            <li>二级3</li>
        </ul>
    </li>
</ul>

其运行结果为
上段代码运行结果

二、<dd><dl><dt>型

再次以一举例

<dl>
    <dt>中国</dt>
    <dd>
        <dl>
            <dt>山东省</dt>
            <dd>济南市</dd>
            <dd>青岛市</dd>
        </dl>
        <dl>
            <dt>江苏省</dt>
            <dd>扬州市</dd>
            <dd>宿迁市</dd>
        </dl>
    </dd>
    <dt>美国</dt>
    <dd>
        <dl>
            <dt>德克萨斯州</dt>
            <dd>休斯顿</dd>
            <dd>沃斯堡</dd>
        </dl>
        <dl>
            <dt>佛罗里达州</dt>
            <dd>圣卢西亚</dd>
            <dd>沃尔顿</dd>
        </dl>
    </dd>
</dl>

其结构如下

<dl>
    <dt>一级1</dt>
    <dd>
        <dl>
            <dt>二级1</dt>
            <dd>三级1</dd>
            <dd>三级2</dd>
        </dl>
        <dl>
            <dt>二级1</dt>
            <dd>三级1</dd>
            <dd>三级2</dd>
        </dl>
    </dd>
    <dt>一级2</dt>
    <dd>
        <dl>
            <dt>二级1</dt>
            <dd>三级1</dd>
            <dd>三级2</dd>
        </dl>
        <dl>
            <dt>二级2</dt>
            <dd>三级1</dd>
            <dd>三级2</dd>
        </dl>
    </dd>
</dl>

其运行结果如下图
上段运行结果

2.16：表格标签

<table></table>               #表格最外层容器
<tr></tr>                     #定义表格行
<th></th>                     #定义表格头
<td></td>                     #定义表格单元
<caption></caption>           #定义表格标题
<thead></thead>               #头
<tbody></tbody>               #身体
<tfoot></tfoot>               #尾

它们之间存在嵌套关系，不可颠倒顺序。
举例:天气预报

<table>
    <caption>扬州天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>平均温度</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>2020年10月23日</td>
                <td><img src="C:\Users\hukun\Pictures\Screenshots\weather sunny 1.png" alt=""></td>
                <td>15℃</td>
            </tr>
            <tr>
                <td>2020年10月25日</td>
                <td><img src="C:\Users\hukun\Pictures\Screenshots\weather cloudy.png" alt=""></td>
                <td>16.5℃</td>
            </tr>
        </tbody>
</table>

运行结果如下
天气预报运行结果
thead这些记得要加上，这不仅方便自己更方便团队

2.17：表格属性

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

以2.16中的天气预报为模板进行修改
一、border属性修改

<table border="1">                    ###此处变化
    <caption>扬州天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>平均温度</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2020年10月23日</td>
                <td><img src="C:\Users\hukun\Pictures\Screenshots\weather sunny 1.png" alt=""></td>
                <td>15℃</td>
            </tr>
            <tr>
                <td>2020年10月25日</td>
                <td><img src="C:\Users\hukun\Pictures\Screenshots\weather cloudy.png" alt=""></td>
                <td>16.5℃</td>
            </tr>
        </tbody>
</table>

运行结果如下
border修改后运行结果
二、cellpadding属性
此处只展示变化部分，其余没有变动的就不放代码上去了

<table border="1" cellpadding="30">

效果及对比如下（上图为修改过的）

三、cellspacing属性
同样，这里只放变动部分，下面就不再赘述了下·

<table border="1" cellpadding="30" cellspacing="30">

运行结果及对比如下(上图为修改过的)
cellspacing修改后运行结果及对比
四、colspan属性
添加新列（白天/夜晚）
运行结果如下
添加新列结果
我们知道白天/夜晚是应该归纳于日期之下，我们对其进行修改

<th colspan="2">日期</th>  #2表示两个单元格

修改后运行结果如下

五、rowsapn属性
在四基础上我们添加夜晚这一行
运行结果如下
添加夜晚行
我们知道夜晚应该是跟在日期后面，所以我们使用rowspan属性修改

<td rowspan="2">2020年10月23日</td>  #2同样为两个单元格
<td rowspan="2">2020年10月25日</td>

修改后运行结果如下
rowspan修改后运行结果
后面的同理，这里就不赘述了。

2.18：表单input标签

表单标签使用到的有：

<form>:表单最外层容器
<input>:标签用于搜集用户信息，根据不同type属性值，展示不同控件，如密码框，输入框，复选框等等。

形式如下：

<form>
<input type="">
</form>

input（单标签）标签中有type属性，它决定了是什么控件
如下为一些type属性值及其对应控件

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

一、text、password属性
代码如下

<form>
    <h2>Text</h2>
    <input type="text">
    <h2>Password</h2>
    <input type="password">
</form>

运行结果如下
text属性和password属性运行结果
我们向其中填入文本，效果如下

不难发现password属性下文本框输入的文字被隐藏了，右边的小眼睛可以让其显示出来，这里就不放图了。
那么如何让初始的文本框内有提示性的文字呢，下面我们对其进行一些改动

<form>
    <h2>Account</h2>
    <input type="text" placeholder="请输入账号">    ###改动
    <h2>Password</h2>
    <input type="password" placeholder="请输入密码">   ###改动
</form>

我们在input标签内又添加了一个属性：placeholder
运行效果如下

我们输入文字后，提示性文字便会消失，这里就不放图了。
二、checkbox属性和radio属性
checkbox结构如下

<form>
    <h2>复选框</h2>
    <input type="checkbox">苹果
    <input type="checkbox">李子
    <input type="checkbox">榴莲
</form>

运行结果如下
checkbox属性
可点按勾选
那么如何让它默认状态是勾选呢？
下面我们对其进行改动

<input type="checkbox" checked>苹果   #在其后添加checked即可

那么如何让用户无法勾选呢？
和上面类似

<input type="checkbox" disabled>榴莲   #在其后添加disable即可

radio结构如下

<h2>单选框</h2>
<input type="radio">选项一
<input type="radio">选项二

运行结果如下

我们点击后发现选项一和二可以被同时选中，这显然不符合我们的初衷。
错误结果
下面对其改写

<input type="radio" name="1">选项一
<input type="radio" name="1">选项二
<input type="radio" name="2">选项三    ###对比

我们在后面添加name属性并且命名，只有在相同名称下才可单选，如下。
修改后运行结果
三、file属性
结构如下

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

效果如下

这里不多赘述file属性了。
四、submit属性和rest属性
结构如下

<input type="submit">
<input type="reset">

提交和重置
通常这两个按钮和其他相搭配
这里放在radio的那里演示：开始选中后点击重置，则清除点击状态

提交相对复杂写，提交是将页面中填写的信息发送到指定位置，所以我们之前要指定位置，所以在开始的form中添加对应属性，如下

<form action="XXX">        ###改动
    <h2>单选框</h2>
    <input type="radio" name="1">选项一
    <input type="radio" name="1">选项二
    <input type="radio" name="2">选项三
    <input type="submit">
    <input type="reset">
</form>

点击提交后即可发送到指定位置。

2.19其他表单标签

除了input标签外其他一些常用标签有

标签	解释
textarea	多行文本框
select、option	下拉菜单
label	辅助表单

一、textarea标签

<form>
    <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>    #cols控制列数，rows控制行数
</form>

运行结果如下
textarea标签
二、select、option标签
结构如下

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

结果如下
下拉菜单1
点开后有
选项选择
那么如何让默认的初始值为选项二呢？
下面我们对其改动

<option selected>选项二</option> #添加selected属性

添加selected属性后结果
那么如何让默认值为请选择且该选择不会被选中呢，与上面类似，在添加上2.18节中的disable属性即可实现

<option selected disabled>请选择</option>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>

添加请选择选项并不可选
那么如何让它显示的更多呢？
我们只需要做如下修改

<select size="2">    ###改动
    <option selected disabled>请选择</option>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

其中在select标签内添加size属性，其值为显示个数。运行结果如下
多项显示
那么我们又如何实现多选呢？
我们做如下改动

<select size="2" multiple>  ###改动
    <option selected disabled>请选择</option>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

其中multiple表示多选
添加multiple属性后多选
由图可见我们这里可以实现多选
multiple属性同样可以用在2.18节的上传文件中，实现多文件上传

三、label标签
2.18中的单选框存在一个问题，只可以点字前面的图形而不能点击字来实现选择，所以我们对其改动，改动如下

<input type="radio" name="1" id="1"><label for="1">选项一</label>
<input type="radio" name="1" id="2"><label for="2">选项二</label>

我们在input属性中添加了id属性并赋值，在后添加label标签并在for属性内填入对应id
以此实现了点击文字也能选中的效果

2.20：表格、表单的嵌套使用

表格有嵌套规范而表单没有
所以一般先写表单
下面我们用实例来编写，我们要完成的效果如下

我们对其分析，它有四行，则应该有4个tr标签，其中第一项总体信息占了四格则在第一个中应有rowspan值为4，用户注册占了两列则应该有colspan值为2。第二行用户名为一列，输入框一列，第三行同理。
第四行为提交与重置按钮。则我们初步编写的代码如下

<form>
    <table>
        <tbody>

            <tr>
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </tbody>
    </table>
</form>

运行效果如下
整体编写结果
和图片上有点差距，但是大体上是正确的，下面我们将表格边框和填充，字体对齐调整，框内提示词都补上
边框调整

<table border="1" cellpadding="30"> #添加border、cellpadding属性

提示词

<input type="text" placeholder="请输入账号">  #添加placeholder属性
<input type="password" placeholder="请输入密码"> #同上

对齐方式

<tr align="right">   #align属性right为右对齐
<tr align="center">  #center为居中对齐

下面为效果图
修改效果图
我们发现提交和重置按钮挨在一起，我们应在提交按钮后添加几个空格，
下面为修改过的代码

<form>
    <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" placeholder="请输入账号"></td>
            </tr>
            <tr align="right">
                <td>密码：</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                </td>
            </tr>
        </tbody>
    </table>
</form>

效果如下
修改过效果

三、CSS

3.1:div、span标签

div标签：标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
div: 解释
span标签：用于对文档中的行内元素进行组合。
span: 解释
下面我们就用如下实例来使用两个标签

我们对其分块

黄色部分的红色字体就可以使用span标签实现
字体颜色格式如下

<span style="color:red">内容</span>   #其中red为红色使用其他颜色即可使用其他英文单词

<div>
    <h2><a href="https://www.csdn.net/"><span style="color:red">CSDN</span> - 专业开发者社区</a>
    </h2>
    <a href="https://www.csdn.net/"><img src="https://t9.baidu.com/it/u=4141042543,4269107682&fm=85&app=131&size=f242,150&n=0&f=PNG?s=EDD18A46CFA5BF721C5995060300A0C1&sec=1666890000&t=bc327c85e7436d02e907bb715f481ee3" alt="CSDN"></a>
    <p>CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.</p>
    <a href="https://www.csdn.net/">CSDN技术社区</a>

<div>
    <h2><a href="https://baike.baidu.com/item/CSDN/172150?fr=aladdin"><span style="color:red">CSDN</span> - 百度百科</a></h2>
    <a href=""><img src="https://t7.baidu.com/it/u=1584893914,471853342&fm=74&app=80&size=f256,256&n=0&f=PNG?sec=1666890000&t=d3e3fa8929b286298ebbad16f298a486" alt="csdn"></a>
    <p>
        中国专业IT社区<span style="color:red">CSDN</span> (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： <span style="color:red">CSDN</span>.NET；移动端开发者专属APP： <span style="color:red">CSDN</span> APP、<span style="color:red">CSDN</span>学院APP；新媒体矩阵...
    </p>
    <p><span style="color:blue">知识赋能 工具赋能 职业赋能 公司大事记 积分规则 更多 ></span></p>
    <a href="https://baike.baidu.com/item/CSDN/172150?fr=aladdin">百度百科</a>
</div>

我们看看运行效果

3.2：CSS基础语法

CSS语法格式为

选择器{属性1：值1 ；属性2：值2 ；属性3：值3}

其中属性举如下例子

属性	解释
width	宽
height	高
background-color	背景颜色

其中长度单位为px（像素）也可用%（所占百分比）来实现
如

<!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: 100%;height:100px;background-color: aqua;}     ###
    </style>                                                       ###
</head>
<body>
    <div>This is one piece</div>                                   ###
</body>
</html>

我们在head标签下加入了style标签，并在style标签下添加了

div{width: 100%;height:1000px;background-color: aqua;}

这里面使得所有div标签统一格式，省去3.1中单独添加span标签的步骤
效果如下

两个div标签显示效果都是一样的
两个div'标签

如下为使用span标签效果
span
我们同样在head内的style标签内添加了span并给定值
CSS注释，在VScode中我们依然使用html中的方式添加注释
这边涉及了内联样式和内部样式，我们3.2内使用的内联样式，而3.1中用了内部样式，
内联样式使用在head内并有style标签，而内部样式中为标签内添加style属性

3.3：外部样式及两种写法

引入外部CSS文件，name.css
使用link标签引入

<link rel="" href="">

其中rel属性指定资源与页面的关系
href属性资源的地址
rel属性: 属性值及意义
我们新建一个css文件，其中代码如下

div{ height:100px ;width: 100px;background-color: red;}

我们新的html文件代码如下

<!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">
    <link rel="stylesheet" href="./3.3.css">     ####
    <title>Document</title>
</head>
<body>
    <div>一块</div>               ###
</body>
</html>

我们在head标签下加入了link标签，我们通常将link标签放于meta标签和title标签之间。
下面body内我们的div标签并没有加入任何属性，运行结果如下

虽然没有给定div标签内的属性，但是由于我们在head内用link标签引入了之前编写的css文件，使得div标签显示依然是有样式的。
方式二
我们在head标签内加入如下代码

<style>
    @import url("3.3.css");
</style>

效果如下
方式二效果
我们发现效果是一样的，只是我们导入的方法略有不同
虽然效果一样但是不推荐使用@import方式引入（问题多）

3.4：CSS中颜色表示方法

颜色表示方法有三种
①单词表示法
②十六进制表示法
③RGB三原色表示法
我们之前使用的都是单词表示法
①单词表示法：使用英语单词表示颜色如blue、red、black等等
②十六进制表示法：使用十六进制数表示颜色如#000000为黑色
③RGB三原色表示法：使用RGB值来表示颜色如：rgb(0,0,0)为黑色
CSS 颜色: HEX和RGB值
HTML 颜色名: 颜色名和HEX值
我们如和获取网页内特定部分的颜色呢？
我们可以在Edge的拓展插件内安装一个取色器，如下图为一个取色器使用效果，我们的鼠标停留在搜索按钮，右下角显示了对应部分的颜色，显示的是RGB和十六进制数。这种取色器可以自行安装。
同样我们可以利用PS内的取色器来识别对应部分的颜色值

3.5：背景样式

背景样式可参照下面链接
CSS 背景: 背景参数及解释

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

其中background-color参数之前都在使用这里不再赘述
background-image属性

<!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: 300px;height: 300px;background-image:url(./weather\ cloudy.png);}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下

其中显示的部分全被图片填满，使用background-image属性默认是填满区域。

background-repeat属性
其值有如下

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat background-image	不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

我们使用上面的background-image属性举例
我们在background-image属性后添加了background-repeat:repeat-x
如下为运行结果
修改后结果
background-position属性

我们依然使用background-image为例

<!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: 300px;height: 300px;background-color: black;background-image:url(./weather\ cloudy.png);background-repeat:no-repeat;background-position: right bottom;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

为了方便对比在上面使用background-color并把background-repeat调整为只出现一次
运效果如下

background-attachment 属性
属性值

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。阅读关于 initial 内容
inherit	指定 background-attachment 的设置应该从父元素继承。阅读关于 inherit 内容

我们依然由background-image那里改编

<!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>
        body{height: 2000px;}
        div{width: 300px;height: 300px;background-color: blue;background-image:url(./weather\ cloudy.png);background-repeat:no-repeat;background-attachment: fixed;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其中我们在style标签内添加了body使得页面可被拖动
这里background-attachment选择了fix属性
fix效果
下面我们使用local属性这里就不放代码直接放图

3.6：背景实现视觉差效果

由于上传大小限制，没办法使用大图。这里实现代码如下

<!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>
        #div1{height: 180px;width: 100%;background-repeat:no-repeat;background-image: url(./4.jpg);}
        #div2{height: 180px;width: 100%;background-repeat:no-repeat;background-image: url(./5.jpg);}
        #div3{height: 180px;width: 100%;background-repeat:no-repeat;background-image: url(./6.jpg);}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

这里我们使用了分块设置，在head标签下的style中设置了三个不同种类，同样在body中使用三个div标签并分别命名。

3.7：边框样式

border 属性及值有

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

border-style

<!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: 500px;height: 300px;border-style: solid;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下
border-style
其中style属性的值如下

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

下面，我们在border-sytle属性后再添加border-color属性使边框颜色改变。
如下图

那么我们如何实现边框的单边控制呢

div{width: 500px;height: 300px;border-right-style: dotted;border-color: blue;}   ##使用border-right-style:其中right可换为left

border
其中border-color属性有transparent其颜色为透明

3.8:CSS文字样式

基本格式如下

<style>
    div{font-family: 字体名称;}
</style>

例子

<!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">
    <style>
        div{font-family: 宋体;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>div标签内文字</div>
    <p>p标签内文字</p>
</body>
</html>

我们单独对div标签设置，使其与p标签形成对比
效果如下
宋体效果

<style>
    div{font-family: 字体1，字体2，字体3;}
</style>

如上使用多个字体，如果用户没有对应字体1则搜寻是否有字体2如果有则显示如果无则向下使用字体3，这些都是备用方案，其中如果使用的字体名称为英文时如果单词间有空格，那么必须对字体添加引号，否则出错。

3.9：字体大小粗细样式

font-size:控制字体大小
如下在3.8中改动

<!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">
    <style>
        div{font-size: 100px;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>div标签内文字</div>
    <p>p标签内文字</p>
</body>
</html>

运行效果如下
size属性100px
其中font-size属性值可为下面这些

font-size值及描述
font-weight字体粗细
由size为例子

div{font-weight:值;}

<!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">
    <style>
        div{font-weight: 100;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>div标签内文字</div>
    <p>p标签内文字</p>
</body>
</html>

在这里插入图片描述
上面使用的是数字，这里值也可以是单词weight值及描述
font-style字体样式

<style>
    div{font-style:值;}
</style>

其中style属性值有

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

整体代码就不发了和上面的大同小异

color属性
在font-size等这些之后
这里我们接在style属性之后，这里也不放代码了

color

3.10文本修饰与文本大小写

text-decoration 属性：文本装饰
其属性值为

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

下面举一个例子（在3.9中修改）

<!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">
    <style>
        div{text-decoration: underline;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>div标签内文字</div>
    <p>p标签内文字</p>
</body>
</html>

效果如下

其中装饰属性是可以叠加的，只需在后面加空格接着写就可以了。
text-transform：文本大小写（对英文）
其属性值如下

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

text-transform解释

以转小写为例子，代码如下

<!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">
    <style>
        p{text-transform: lowercase;}
    </style>
    <title>Document</title>
</head>
<body>
    <p>ARE YOU OK?</p>
    <div>ARE YOU OK?</div>
</body>
</html>

结果如下
在这里插入图片描述

3.11：文本缩进与对齐

text-indent：文本缩进

p{text-indent: 32px;}

仍然放于head内的style标签中，其中属性值上面写的是像素，汉字默认每个字是16px，所以后面有使用字体像素大小的话就要再次调整。
为了简便我们使用em，em不受后面字体大小影响，一个em为一个字，所以一般使用em。
text-align:文本对齐方式
属性值

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

3.11：文本行高

行高是一行文字的高度，上边距和下边距是等价关系
其中默认值不是固定的由字体大小变化而变化
line-height属性
这里直接放图就不给代码了
这里使用30px
30px

下面使用60px
在这里插入图片描述
其中属性值如下

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

3.12：文本间距与英文折行

letter–spacing属性
这里在3.11的样例上修改
同样这里直接放图不给代码了

属性值为10px 10px
属性值为20px
20px
word-spacing属性（对英文）
下面使用10px
10px
下面使用20px
20px

折行：
如下为中文的折行效果，可以在方框内

如果换为英文呢？

如图，虽然前面正常但是如果一个单词过长时便会”跑出“框外，阿拉伯数字也是一样的效果。
那么如何解决这个问题呢？

一、word-break: break-all;（强烈）
二、word-wrap: break-word;（不强烈，会产生空白）

一、word-break: break-all;

<!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">
    <style>
        p{width: 200px;height: 600px;border-color: blue;border-width: 20px;border: solid;word-break: break-all;}   ###改动
    </style>
    <title>Document</title>
</head>
<body>
    <p> Are you ok? Are you ok? Are you ok?Are you ok? Are you ok? Are you ok?Are you ok? Are you ok? Are you ok?Are you ok? Are you ok? Arerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr you ok?Are you ok? Are you ok? Are you ok?</p>
</body>
</html>

word-break: break-all;放在head中
二、word-wrap: break-word;
warp

3.13：CSS复合样式

单一样式：一个CSS属性只控制一种样式
复合样式：一个CSS属性只控制多种样式
复合样式为属性之间有空格隔开，其中属性之间有的可以无序，有的有先后顺序
如下为无序的

background：color url() repeat 0 0;
border: px color solid;

如下为有序

font weight style size family;

其中weight和style属性不关心先后顺序，而size和family必为前后关系，且font中必要有size family属性
Tips：我们写样式的时候最好不要混写，如果非要混写那一定要先写复合后写单一样式，否则样式会被覆盖

3.14：CSS选择器

一、ID选择器
在CSS中我们使用#elem{}形式
在HTML中我们使用id=”elem“
我们在3.7中用过id选择器，为了方便分块控制，我们对div标签命名
如下

为了使这两个div标签呈现不同效果，我们对其修改
修改后效果
这样使得我们分块控制
==Tips：①一个页面内，ID值是唯一的。②命名规范：字母_-数字（第一位不能使用数字）③命名方式：驼峰式、下划线式、短线式。

3.15：CLASS选择器

格式
CSS：.elem{}
HTML:class=“elem”
CLASS选择器可以复用而ID选择器不可以复用
举例

<!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">
    <style>
        .first{background-color: greenyellow;}
    </style>
    <title>Document</title>
</head>
<body>
    <div class="first">一块</div>
    <div class="first">另外一块</div>
</body>
</html>

效果如下

那么我们如何实现对标签控制多个属性呢，如控制字体之类的？
这里直接贴代码了

<!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">
    <style>
        .first{background-color: greenyellow;}
        .second{font-family: 楷体;}           #####改动
    </style>
    <title>Document</title>
</head>
<body>
    <div class="first second">一块</div>    ####改动
    <div class="first">另外一块</div>
</body>
</html>

下面放图
修改过效果
我们直接添加另外一个CLASS选择器即可，且需要在对应的标签内添空格再写另外一个名字。
如果有多个样式时是根据CSS决定的而不是CLASS属性，这里就不过多赘述了。
那么如何针对某一种标签内相同名字控制呢？
我们只需要在CSS中的.elem{}前面添加对应标签
如p.elem{}
举个例子

<!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">
    <style>
        .first{background-color: greenyellow;}
        p.second{font-family: 楷体;}
    </style>
    <title>Document</title>
</head>
<body>
    <div class="first second">一块</div>
    <div class="first">另外一块</div>
    <p class="second">第一个p标签</p>
    <p class="first">第二个p标签</p>
</body>
</html>