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/)