css常用属性

• 字体相关属性

  • font-size 字号大小

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

相对长度单位	说明
em	相对于当前对象文本内的字体的尺寸
px	像素，最常用，推荐用
in	英寸
cm	厘米
mm	毫米
pt	点
绝对长度	--------

关于长度单位em 请参考https://www.w3cplus.com/css/px-to-em

• font-family 字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体

.fontsize{
            font-size: 14px
        }
        .fontfamily{
            font-family:"隶书","微软雅黑"
        }

        century 世纪
    
    

    
        dramatic 戏剧性的 激动人心的
    

文本效果：

image.png

(1)现在网页中普遍使用14px+。
(2)尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
(3)各种字体之间必须使用英文状态下的逗号隔开。
(4)中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
(5)如果字体名中包含空格、#、$等符号，则该字体必须加英文状 态下的单引号或双引号，例如font-family: "Times New Roman";。
(6)尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
(7)在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。解决类似问题可以使用
方案1：使用英文来替代。 比如 font-family:“Microsoft Yahei”。
方案2:在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
（7）可以使用escape()方法来测试字体。
（8）各种字体对照表

字体名字	英文名称	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

• 字体粗细

由font-weight决定 可以使用的范围是100-900 其中 400等价于normal ；700 等价于bold ，也可以直接使用 normal bold bolder lighter 等属性 一般使用数字表示

    .textweight{
            font-weight: bold;
        }

    .textweight{
            font-weight: 700;
        }

效果：

image.png

• 字体风格

由font-style 设置字体风格，可用的字体风格

属性值	描述
normal	默认值
italic	斜体字样
oblique	倾斜字样

1.平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

        peak 山尖 憔悴
    

效果：

image.png

• 字体综合设置

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

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

.textsynthesis{
           font: italic 700 40px "隶书"
       }



       figure 人物 描绘
   

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

以上效果代码效果如下

image.png

• 文本颜色

  color 属性用于定义文本颜色

    
        firm 牢固的
    


.textcolor{
            color: rgb(255,0,0);
        }

效果

image.png

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

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

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

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

• 行间距

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

• 水平对齐方式

left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐

• 首行缩进

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