HTML5+CSS3学习笔记（六）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
一、字体样式
可以直接用 f o n t \color{red}{font} font 来指定font-style、font-variant、font-weight、font-size/line-weight和font-family【其中font-family和font-size必须指定，其它省略则使用默认值】
1. 字体族（font-family）
可以同时指定多个字体，用逗号隔开，依次从第一个开始判断是否生效，直到有一个生效，则使用生效字体
五种通用字体族：设置font-family属性
- 1.衬线字体（Serif）： 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 2.无衬线字体（Sans-serif）： 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 3.等宽字体（Monospace）： 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 4.草书字体（Cursive）： 模仿了人类的笔迹。
- 5.幻想字体（Fantasy）： 是装饰性/俏皮的字体。
<style>
/* 通过这种方式指定字体，需要注意版权问题 */
@font-face {
font-family: 'myfont';
src: url('./font/arial.TTF');
}
p {
/* 如果指定字体名称中有空格或是中文，最好加上双引号 */
font-family: "PingFang SC", HarmonyOS_Regular, "Helvetica Neue", "Microsoft YaHei", sans-serif;
}
</style>
2. 字体大小（font-size）
使用font-size设置字体大小
| 单位 | 定义 | 特点 |
|---|---|---|
| px | 像素相对于显示器屏幕分辨率而言的，1px即屏幕分辨率最小分割 | 若适应大屏幕，可能就在小屏幕上不适配 |
| % | 相对于父元素的单位 | 可在width、height、font-size等属性中使用 |
| em | 相对于父元素的单位 | 1em=100%，可在font-size，但不可以在width、height属性中使用 |
| rem | 相对于根元素的单位 | 一般来说，16px=1rem |
| vm | 响应式字体，通过视口宽度设置字体大小，1vw = 视口宽度的 1％ | 如果视口宽度为100px，则1vm=1px |
| vm | 响应式字体，通过视口宽度设置字体大小，1vw = 视口宽度的 1％ | 如果视口宽度为100px，则1vm=1px |
3. 行高（line-height）
font-size设置字体框的高度
使用line-height设置行高，即文字占有的实际高度，行高会在字体框的上下平均分配`
- 1.直接指定一个大小时， 例如xx px或xx em等
- 2.直接指定一个整数时， 则行高为字体框（font-size）的指定倍数
可通过设置行高 l i n e − h e i g h t 和元素高度 h e i g h t 一致，使文字垂直居中 \color{red}{可通过设置行高line-height和元素高度height一致，使文字垂直居中} 可通过设置行高line−height和元素高度height一致，使文字垂直居中
4. 其它字体样式
| 属性 | 作用 | 可选值 |
|---|---|---|
| font-style | 设置字体样式，指定斜体文本 | normal：正常显示 |
| italic：斜体显示 | ||
| oblique：文本倾斜 | ||
| font-weight | 设置字体粗细 | normal：正常显示 |
| oblique：文本加粗 | ||
| font-variant | 设置字体变体 | normal：正常显示 |
| small-caps：所有小写字母都转换为大写字母，但是转换后的大写字母比原始大写字母小 |
5. 图标字体
- 1.可以通过为
i标签添加类的方式，来引入图标字体- 2.可以通过
font-face的方式，引入图标字体
二、文本样式
1. 文本属性
| 属性 | 作用 | 可选值 |
|---|---|---|
| color | 设置元素的前景色，可以用来设置文本颜色 | RGB值、RGBA值、HSL值、HSLA值、十六进制等 |
| text-align | 设置文本水平对齐方式 | left：左对齐 |
| center：居中对齐 | ||
| right：右对齐 | ||
| justify：两端对齐（拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的） | ||
| vertical-align | 设置文本垂直对齐方式 | baseline：基线对齐（默认值） |
| top：上对齐 | ||
| middle：居中对齐 | ||
| bottom：下对齐 | ||
| text-decoration | 装饰文本 | none：无装饰样式 |
| overline：上划线 | ||
| line-through：删除线 | ||
| underline：下划线 |
2. 处理元素中的空白（white-space）
此部分内容参考white-space CSS层叠样式表
通过以下方式，可将长内容以省略号形式显示
.after {
/* 设置区域宽度 */
width: 100px;
/* 连续的空白符会合并，但是文本内的换行符无效 */
white-space: nowrap;
/* 设置超出区域的内容被隐藏 */
overflow: hidden;
/* 设置文本超出区域隐藏后显示为省略号 */
text-overflow: ellipsis;
}
展示效果如下图所示：
三、背景（background）
以下设置可用background属性简写设置
1. 设置背景图片
| 属性 | 作用 | 可选值 |
|---|---|---|
| background-color | 设置元素的背景色 | RGB值、RGBA值、HSL值、HSLA值、十六进制等 |
| background-image | 设置图片作为元素背景 | url(‘图片路径’)，可以设置多个url |
| background-repeat | 设置背景重复方式 | repeat：默认值，x和y方向均重复 |
| repeat-x：沿x方向重复 | ||
| repeat-y：沿y方向重复 | ||
| no-repeat：背景图片不重复 | ||
| space：背景图片充满元素，无法完整充满使用空白填充 | ||
| round：背景图片自动缩放充满元素 | ||
| background-position | 设置背景图片的位置 | 指定水平偏移量 垂直偏移量(xx px xxpx)；或者指定方位，例如left top，如果只指定一个方位，默认第二个方向为center |
可以通过将多个状态图合并成一张图片，通过设置偏移量来控制展示的区域。一次性加载多张图片，降低请求服务的次数。
2. 渐变
- 1.线性渐变（linear-gradient）
- 颜色： 可以设置2种及以上颜色
- 语法：
- 支持方向： 向左/向右/向上/向下/对角线
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);- 支持方向： 自定义角度
background-image: linear-gradient(angle, color-stop1, color-stop2);
- 2.径向渐变（radial-gradient）
- 语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
四、表格（table）
1. thead、tbody、tfoot标签
可以不使用以下标签，但是如果使用了就需要三者同时使用，代码实际顺序不影响表格表头、主体和页脚的位置
- 1.thead： 对表格表头内容进行分组
- 2.tbody： 表格主体，默认不是用这三者标签只是用th、tr、td时，浏览器默认为其创建tbody标签
- 3.tfoot： 对表格页脚内容进行分组
2. th、tr、td标签
- 1.th： 定义表格表头单元格，会对文字进行加粗显示
- 2.tr： 定义表格的行
- 3.td： 定义表格标准单元格
3. 表格其它样式
可以使用border为表格table设置边框，也可以为标准单元格td、表头单元格th设置边框， 不可以为 t r 设置边框 ! ! \color{red}{不可以为tr设置边框!!} 不可以为tr设置边框!!
（1）合并单元格边框（border-collapse）
- separate： 默认值，边框分离
- collapse： 设置单元格边框合并
未合并表格边框，效果如下图所示：
合并表格边框后，效果如下图所示：
（2） td标签的垂直方向位置（vertical-align）
可以将元素设置为display:table-cell; 随后设置vertical-align控制内部元素的垂直方向位置。
- middle： 默认值，td标签默认处于垂直居中位置
- top： 上对齐
- bottom： 下对齐
（3） 合并单元格（仅对td标签设置）
- rowspan： 设置跨行单元格，用于合并垂直方向的行
- colspan： 设置跨列单元格，用于合并水平方向的列
合并行表格，效果如下图所示：
合并列表格，效果如下图所示：
表格练习代码，如下所示：
<!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>表格</title>
<style>
table {
/* 设置水平居中 */
margin: 20px auto;
/* 合并单元格边框 */
border-collapse: collapse;
}
.simple {
/* 设置表格边框 */
border: 2px tomato solid;
}
.simple th {
/* 设置表头单元格边框 */
border: 2px yellowgreen solid;
}
.simple td {
/* 设置标准单元格边框 */
border: 2px blue solid;
}
.box1 {
width: 150px;
height: 150px;
background-color: #bfa;
/* 设置table布局，可以直接利用vetical-align设置元素垂直方向布局 */
display: table-cell;
vertical-align: middle;
}
.box2 {
width: 50px;
height: 50px;
background-color: tomato;
}
/* 设置复杂单元格样式 */
.special,
.special th,
.special td {
border: 3px cornflowerblue solid;
}
</style>
</head>
<body>
<!-- 简单table表格 -->
<table class="simple">
<!-- thead、tbody、tfoot标签的顺序不影响实际表格的顺序 -->
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</tbody>
<tfoot>
<tr>
<td>总人数</td>
<td></td>
<td>2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
</tbody>
</table>
<hr>
<!-- 利用table-cell设置垂直方向布局 -->
<div class="box1">
<div class="box2"></div>
</div>
<hr>
<!-- 复杂表格1：合并行 -->
<table class="special">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<!-- 可以在没有合并列时，为每一行设置3个列的单元格 -->
<td rowspan="2">列1行1、列1行2</td>
<td>列2行1</td>
<td>列3行1</td>
</tr>
<tr>
<!-- 设置第二行单元格时，由于合并的单元格已经上上一行设置了，此时只用设置后两列本行的单元格 -->
<td>列2行2</td>
<td>列3行2</td>
</tr>
</table>
<hr>
<!-- 复杂表格2：合并列 -->
<table class="special">
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<!-- 由于合并了2列，总共有3列，因此本行只需要2个td -->
<td colspan="2">列1行1、列2行1</td>
<td>列3行1</td>
</tr>
<tr>
<!-- 此时未设置列3行2，单元格为空白 -->
<td>列1行2</td>
<td>列2行2</td>
</tr>
<tr>
<!-- 跳过缺失的单元格设置新的一行 -->
<td>列1行3</td>
</tr>
</table>
</body>
</html>
五、表单元素
1. 表单（form）属性
用于收集用户输入的信息，发送请求
- action 属性值，设置表单的处理动作
- method 属性值，设置表单提交方式
- post： 表单提交的信息不会在地址栏显示，更安全
- get： 默认值，表单提交的信息会在地址栏中显示
- autocomplete 属性值，设置表单自动补全（会显示历史输入信息）
- novalidate 属性值，设置表单是否验证数据
2. 表单元素
- input 输入框（type属性值不限于以下值）
- text： 普通文本输入框
- password： 密码输入框
- submit： 提交按钮
- reset： 重置按钮
- radio： 单选框
- checkbox： 多选框
- button 按钮
- areatext 跨行文本框
- select 下拉列表
……
六、练习代码
1. 顶部导航条
<!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>京东顶部导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../css/reset.css">
<!-- 引入awesome字体 -->
<link rel="stylesheet" href="../css/font-awesome.css">
<style>
/* 解决高度缺陷 */
.clearfix::before,
.clearfix::after {
display: table;
content: '';
clear: both;
}
/* 设置网页字体 */
body {
font-size: 12px;
color: #ddd;
}
/* 设置顶部导航栏外部容器 */
.top-bar-wrapper {
width: 100%;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* 设置行高，保证文字垂直居中 */
line-height: 29px;
/* 设置下边框 */
border-bottom: 1px #ddd solid;
}
/* 设置顶部导航栏内部容器 */
.top-bar {
/* 设置内内部容器固定宽度 */
width: 1190px;
/* 设置水平宽度 */
margin: 0 auto;
/* 设置高度 */
height: 29px;
}
/* 设置左侧菜单location */
.location {
float: left;
margin-right: 10px;
/* 设计层级 */
}
/* 设置定位的小图标 */
.location .fa {
/* 设置图标颜色 */
color: #F10215;
/* 设置图标大小 */
font-size: 16px;
}
/* 设置左侧菜单location悬停效果 */
.location:hover {
background-color: white;
}
/* 设置当前城市 */
.current-city {
padding: 0 10px;
background-color: white;
border: 1px solid #CCC;
border-bottom: none;
position: relative;
/* 设计最高层级 */
z-index: 9999;
}
/* 设置定位悬停听样式 */
.current-city:hover {
/* 设置边框 */
border: 1px solid #CCC;
/* 覆盖重叠边框 */
border-bottom: none;
}
/* 设置左侧菜单超链接样式 */
.current-city:hover a {
/* 设置字体颜色 */
color: #F10215;
}
/* 设置左侧菜单location的悬停样式 */
.location:hover .city-list {
/* 悬停时展开下拉框 */
display: block;
/* 设置背景颜色 */
background-color: white;
/* 设置上边距 */
margin-top: 1px solid #CCC;
}
/* 设置定位的下拉框 */
.city-list {
/* 设置初始隐藏 */
display: none;
/* 使下拉框设置绝对定位，防止顶部导航条高度增加 */
position: absolute;
/* 设置下拉框的宽度和背景颜色 */
width: 320px;
height: 436px;
background-color: white;
/* 设置下拉框边框 */
border: 1px solid #CCC;
/* 设置下拉框阴影 */
box-shadow: 2px 2px rgba(204, 204, 204, 0.3);
/* 设置内边距 */
padding: 0 10px;
/* 设计层级 */
z-index: 999;
/* 设置上外边距 */
margin-top: -1px;
}
/* 设置右侧菜单shortcut */
.shortcut {
float: right;
}
/* 设置右侧菜单中的列表项 */
.shortcut li {
float: left;
/* 设置外边距 */
margin: 0 12px;
}
/* 设置右边菜单中的分隔线 */
.shortcut .line {
width: 1px;
height: 10px;
background-color: #CCC;
margin: 10px 0;
}
/* 设置右侧菜单中的链接 */
.top-bar a,
.shortcut span,
.shortcut i {
/* 去除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #999;
}
/* 设置超链接悬停样式、高亮样式 */
.shortcut a:hover,
.shortcut .highlight {
color: #F10215;
}
</style>
</head>
<body>
<!-- 顶部导航栏容器 -->
<div class="top-bar-wrapper">
<!-- 顶部导航栏 -->
<div class="top-bar clearfix">
<!-- 顶部导航栏左侧定位 -->
<div class="location">
<div class="current-city">
<i class="fa fa-map-marker highlight"></i>
<a href="javascript:;">北京</a>
</div>
<div class="city-list">
</div>
</div>
<!-- 顶部导航栏右侧菜单 -->
<ul class="shortcut">
<li>
<a href="javascript:;">你好，请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<a href="javascript:;">我的京东</a>
<i class="fa fa-angle-down"></i>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li><a href="javascript:;">京东会员</a></li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<a class="highlight" href="javascript:;">企业采购</a>
<i class="fa fa-angle-down"></i>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<span>客户服务</span>
<i class="fa fa-angle-down"></i>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<span>网站导航</span>
<i class="fa fa-angle-down"></i>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
<!-- 设置分隔线 -->
<li class="line"></li>
<li>
<a href="javascript:;">网站无障碍</a>
</li>
</ul>
</div>
</div>
</body>
</html>
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[w3school在线教程链接](https://www.w3school.com.cn/)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
