自学前端第八天 :CSS字体样式

一.CSS字体样式基础属性

1.font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

相对长度单位	说明
px	像素单位 以像素点个数为基础 最常用的单位
em	相对于当前对象内文本的字体尺寸

2.font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

PS:

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

3.font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

PS:

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

4.font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

总结font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

5.color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

6.line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7 8像素左右就可以了。

7.text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

8.text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

9.text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线 也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

二.CSS3字体样式属性

css2

属性	描述	属性值
color	设置文本颜色	rgb HEX rgba
direction	设置文本方向。	ltr(左->右) rtl(右->左)
letter-spacing	设置字符间距	px em单位最常用因为1em就等于字号大小,因此零点几em就合适一点
line-height	设置行高	px
text-align	对齐元素中的文本	left center right justify (两端对齐,字体会很规整)
text-decoration	**向文本添加修饰 !!!新增波浪线写法:text-decoration: underline wavy red; **	none (默认 无效果) underline (下划线) overline(上划线) line-through ( 删除线)
text-indent	缩进元素中文本的首行	em px
text-transform	控制元素中的字母在中国用的很少.	capitalize 每个单词首字母大写 uppercase 全部大写 lowercase 全部小写
vertical-align	设置元素的垂直对齐	baseline 基线 默认 middle 中线 super 文本上标 sub 文本下标 top 顶端对齐最高元素顶端 text-top 元素顶端与父元素字体顶端 bottom 底端与最低元素底端 text-bottom 底端与父元素字体底端
white-space	设置元素中空白的处理方式(主要控制换行的)	①normal 默认 忽略空白和换行 ②pre 保留空白 ③nowrap 文本不换行,强制一行全部显示 ④pre-wrap 也是保留空白即vscode的全部空格都生效,但正常换行,即换行是失效的. ⑤pre-line 合并空白即vscode的空格只算一个, 但保留换行符,即在vscode里面换行是生效的
word-spacing	设置字间距 中国汉字也不用的,用letter-spacing	px em

css3

属性	描述	属性值
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	left right justify center
text-overflow	规定当文本溢出包含元素时发生的事情。	clip 剪裁 ellipsis 省略号
text-shadow	向文本添加阴影。text-shadow: h-shadow v-shadow blur color; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eqib4EfP-1620067180811)(C:\Users\tuyue\AppData\Local\Temp\1613150971005.png)]	h-shadow 水平偏移 v-shadow 垂直偏移 blur 阴影模糊值 color 颜色
word-break	规定非中日韩文本的换行规则。	break-all 单词内换行 keep-all 只能在半角空格或连字符处换行
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	normal 单词内不换行 break-word 单词内可换行

单行文本展示省略号

.text {
    width: 200px;
    text-overflow: ellipsis; /*超出部分省略号*/
    overflow: hidden; /*内容超出宽度隐藏*/
    white-space: nowrap; /*文本不换行显示*/
}

三.块级元素VS行内元素VS行内块元素

一.简述元素分类:

1.一般来说 ，在页面中需要进行水平居中的元素，大致分为两种:一种是块级元素，即display:block，一种是行内元素display:inline-block;

2.块级和行内具体分类举例:
块级元素包括:div，ul，p,以及所有的h类标签。
行内元素又叫内联元素，a，img，input是最常见的。(img和input又称行内块元素)
这些行内元素，都可以可以通过display:block转换成块级元素或者display:inline-block行内块元素。

3.块级和行内和行内块的区别???
行内元素自身没有宽度,随文本自适应宽度,可以在一行显示，
而块级元素自身默认独占整行宽度,高度随内容自适应,
而行内块元素综合大赢家即可以多个一行显示,也可以设置宽高.

**4.①行内元素文字居中:**让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

②块级元素水平居中: 为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。(注意:text-aglin是对内的,margin:0 auto;是对外的)

③行内块元素居中:是inline-block就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto(行内块使用margin:0 auto不能居中)

④总结: inline行内元素想要变为盒子居中有两种:一种变为块元素对其本身添加margin:0 auto,一种是变为行内块对其父级元素添加text-align:center.(看哪个方便并且不会冲突到别的样式.)

二.块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

DIV 是最常用的块元素 规规矩矩 方方正正 很好管理 被人们称为 “可靠的同志” 但是体格庞大 独占一行

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

三.行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素是通常集体出没 能够排成行伍 训练有素 整齐划一

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

PS:

1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。

块级元素和行内元素区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

四.行内块元素（inline-block居中一样是在父级给text-aglin即可）

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

注意: 在行内元素中有几个特殊的标签——、、 这些标签虽然可以设置宽度高度 但是在现代浏览器内特性默认展示模式为 行内(inline) 元素

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;