HTML（四）文本样式

一、文本属性

1. 文本属性-概览：
   color 为字体指定颜色
   font-style 用于打开和关闭斜体文本
   font-weight 为字体设置粗细程度
   font-size 为文字指定大小
   font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
   webFont 网络字体
   字体图标
   text-decoration 设置或者取消文本修饰
   text-align 文字排列方式
   text-indent 文本缩进属性
   text-transform 设置或者取消字体改变
   text-shadow 设置或者取消文本阴影

2. css中通过color属性来修改文字颜色
   格式：

color:值；
 

取值：

3. font-style ：用于打开和关闭斜体文本

font-style: italic;
 

取值：

normal ： 正常的， 默认就是正常的 ​
italic : 倾斜的 ​

快捷键： ​

fs font-style: italic; ​
fsn font-style: normal;

4. font-weight ： 为字体设置粗细程度

font-weight: bold;
 

取值:

bold 加粗 ​
bolder 比加粗还要粗 ​
lighter 细线， 默认就是细线

数字取值：

100-900之间整百的数字 ​
400 等同于 normal ​
700 等同于bold

快捷键：

fw font-weight:; ​
fwb font-weight: bold; ​
fwbr font-weight: bolder;

5. font-size ： 为文字指定大小

font-size: 30px;
 

单位：px（像素 pixel）
注意点：

通过font-size设置大小一定要带单位， 也就是一定要写px

快捷键：

fz font-size:;
fz30 font-size: 30px;

6. font-family ：为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

font-family:"楷体";
 

通用字体 (直接使用，不需要加引号)

注意点：

如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

设置的字体必须是用户电脑里面已经安装的字体

如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
​ 可以给字体设置备选方案
​ 格式:font-family:“字体1”, “备选方案1”, …;

如果想给中文和英文分别单独设置字体, 怎么办?
​ 但凡是中文字体, 里面都包含了英文
​ 但凡是英文字体, 里面都没有包含中文
​ 也就是说中文字体可以处理英文, 而英文字体不能处理中文

注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

补充在企业开发中最常见的字体有以下几个
​ 中文: 宋体/黑体/微软雅黑
​ 英文: “Times New Roman”/Arial

还需要知道一点, 就是并不是名称是英文就一定是英文字体。
因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

宋体 SimSun ​
黑体 SimHei ​
微软雅黑 Microsoft YaHei

快捷键

ff font-family:;

7. 缩写格式

缩写格式:

font:style weight size family;
 

例如:
​ font:italic bold 10px "楷体";

注意点:

8. 文本装饰的属性

格式：

text-decoration: underline;
 

取值:
​

underline 下划线 ​
line-through 删除线 ​
overline 上划线 ​
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

快捷键:

​td text-decoration: none; ​
tdu text-decoration: underline;
tdl text-decoration: line-through; ​
tdo text-decoration:overline;

9. 文本水平对齐的属性

格式:

text-align: right;
 

取值:

left 左 ​ right 右 ​ center 中

快捷键：

ta text-align: left;
tar text-align: right;
tac text-align: center;

10. 文本缩进的属性

格式:

text-indent: 2em;
 

取值:

2em, 其中是em单位, 一个em代表缩进一个文字的宽度

快捷键:

ti text-indent:;
ti2e text-indent: 2em;

11. 设置或者取消字体改变

用于使文本显示为全大写或全小写

12. 字体阴影

格式:

 text-shadow: h-shadow v-shadow blur color;    
 

取值:

none:取消所有阴影
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。

二、列表样式

1. 默认样式

[][][]
 

我们最常用的就是list-style:none;设置没有任何样式，通过CSS去自定义样式

三、其他样式

​ 设置文本的行高 取值为绝对单位或者相对单位

​ 显示方式的切换

​ inline 行内显示，宽高无效

​ block 块级显示，宽高有效

​ inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素， 行内显示同时宽高有效

​ none 不显示，不占据屏幕空间

​ flex 伸缩盒布局

​ 显示与隐藏

​ hidden 隐藏，占据屏幕空间

​ visible 显示

透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间

​ hidden 超出内容隐藏

​ auto 超出产生滚动条

​ scroll 滚动条

指定光标的样式