Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容
前言
持续总结输出中，今天讲的是Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容
1. 字体样式
1.1 字体大小:font-size
属性名: font-size
取值: 数字 + px
注意点:
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
代码:
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>Documenttitle>
<style>
p {
font-size: 30px;
}
style>
head>
<body>
<p>段落文字p>
body>
html>
1.2 字体粗细:font-weight
属性名: font-weight
取值:
• 关键字:
| 正常 | normal |
|---|---|
| 加粗 | bold |
• 纯数字:100~900的整百数:
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意点:
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以:正常、加粗两种取值使用最多。
代码:
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>Documenttitle>
<style>
div {
/* 加粗 */
font-weight: 700;
}
h1 {
/* 不加粗 */
font-weight: 400;
}
style>
head>
<body>
<div>这是divdiv>
<h1>一级标题h1>
body>
html>
1.3 字体样式:font-style (是否倾斜)
属性名: font-style
取值:
• 正常(默认值):normal
• 倾斜:italic
代码:
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>Documenttitle>
<style>
div {
/* 倾斜 */
font-style: italic;
}
em {
/* 正常的, 不倾斜 */
font-style: normal;
}
style>
head>
<body>
<div>div文字倾斜文字div>
<em>emem>
body>
html>
1.4 常见字体系列(了解)
无衬线字体(sans-serif)
- 特点:文字笔画粗细均匀，并且首尾无装饰
- 场景:网页中大多采用无衬线字体
- 常见该系列字体:黑体、Arial
衬线字体(serif)
- 特点:文字笔画粗细不均，并且首尾有笔锋装饰
- 场景:报刊书籍中应用广泛
- 常见该系列字体:宋体、Times New Roman
等宽字体(monospace)
- 特点:每个字母或文字的宽度相等
- 场景:一般用于程序代码编写，有利于代码的阅读和编写
- 常见该系列字体:Consolas、fira code
1.5 字体系列 font-family
属性名:font-family
常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
• 字体系列:sans-serif、serif、monospace等…
渲染规则:
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点:
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
| 系统 | 默认字体 |
|---|---|
| Windows | 微软雅黑 |
| MacOS | 苹方 |
1.6 样式的层叠问题
问题:
• 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?
结果:
• 如果给同一个标签设置了相同的属性，此时样式会层叠(覆盖)，写在最下面的会生效
TIP:
• CSS (Cascading style sheets) 层叠样式表
• 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
1.7 字体font相关属性的连写
属性名: font (复合属性)
取值:
• font : style weight size family;
省略要求:
• 只能省略前两个，如果省略了相当于设置了默认值
注意点: 如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
2. 文本样式
2.1 文本缩进
属性名: text-indent
取值:
• 数字+px
• 数字+em(推荐:1em = 当前标签的font-size的大小)
代码:
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>Documenttitle>
<style>
p {
/* text-indent: 50px; */
/* 首行缩进2个字的大小 */
/* 默认字号: 16px ; 32 */
/* text-indent: 40px;
font-size: 20px; */
/* em: 一个字的大小 */
text-indent: 2em;
font-size: 40px;
}
style>
head>
<body>
<p>Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容。Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容。Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容。Web前端，CSS字体和文本相关样式修改元素外观样式，字体大小、粗细、样式、类型、文本缩进、行高、居中、字体系列等等内容。p>
body>
html>
2.2 文本水平对齐方式
属性名: text-align
取值:
| 属性名 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点:
• 如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置
代码:
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>Documenttitle>
<style>
h1 {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
body {
text-align: right;
}
style>
head>
<body>
<h1>新闻标题h1>
<img src="./images/1.jpg" alt="">
body>
html>
2.3 文本修饰
属性名: text-decoration
取值:
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
注意点:
• 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
代码:
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>Documenttitle>
<style>
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
h2 {
text-decoration: overline;
}
a {
text-decoration: none;
}
style>
head>
<body>
<div>divdiv>
<p>pppp>
<h2>h2h2>
<a href="#">我是超链接, 点呀a>
body>
html>
3. line-height行高
作用: 控制一行的上下行间距
属性名: line-height
取值:
• 数字+px
• 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点:
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
总结
字体大小: font-size
• 数字+px
字体粗细:font-weight
• 正常:normal 或 400
• 加粗:bold 或 700
字体样式:font-style
• 正常:normal
• 倾斜:italic
字体系列:font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
字体连写:font
• font : style weight size family;
text-align : center 能让哪些元素水平居中?
- 文本
- span标签、a标签
- input标签、img标签
注意点:
- 如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素 设置
文本样式
| 样式 | 属性名 | 常见属性值 |
|---|---|---|
| 文本缩进 | text-indent | 数字+px/数字+em |
| 文本水平对齐方式 | text-align | left/center/right |
| 文本修饰 | text-decoration | underline/none |
本次的分享就到这里了！！！感谢大家支持，大家的支持是我努力的动力