文本、字体、段落、行 的属性

文本属性

color

设置文本内容的前景色

表示法

英语单词、十六进制、rgb（）、rgba（）等

英语单词

color: red;
缺点：不精确

十六进制

所有设计软件都通用的颜色表示法
每种颜色分量是0～255的数字：十六进制ff就是十进制的255
#aabbcc形式，可简写为#abc

常见颜色：
黑色是#000
白色是#fff
灰色有#CCC、#333、#2f2f2f等

rgb（）

 color: rgb(255，0，0);

rgba（）

从IE9开始兼容

color: rgba(255，0，0，.65);

最后一个参数：透明度；其范围0-1，0表示纯透明，1表示纯实心

font-size字号

单位通常为px。还有em、rem等单位

font-size：30px；

网页文字正文字号通常是16px，浏览器最小支持10px字号

font-weight加粗

示例 意义
font-weight: normal; 正常粗细，与400等值
font-weight: bold; 加粗，与700等值
font-weight: lighter; 更细，大多数中文字体不支持
font-weight: bolder; 更粗，大多数中文字体不支持

font-style倾斜

示例 意义
font-style: normal; 取消倾斜，比如可以把天生倾斜的i、em等标签设置为不倾斜
font-style: italic; 设置为倾斜字体（常用）
font-style: oblique; 设置为倾斜字体（用常规字体模拟，不常用）

text-decoration修饰线

于设置文本的修饰线外观的（下划线、删除线）
示例 意义
text-decoration: none; 没有修饰线
text-decoration: underline; 下划线
text-decoration: line-through; 删除线

字体属性

font-family字体

font-family: "微软雅黑";

字体可以是列表形式，英语字体放前面，后面的字体是“后备”字体

font-family: serif，"Times New Roman"，"微软雅黑";

字体必须已安装好
未安装，就需要定义字体

定义字体

需要有字体文件，加载网页的同时下载字体文件

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    /* IE 9 */
    src: url('eot字体文件地址') format('embedded-opentype')，
        /* IE6-IE8 */
        ur1('woff2字体文件地址') format('woff2')， ur1('woff字体文件地址') format('woff')，
 /* chrome\firefox */
 ur1('ttf字体文件地址') format('truetype')，
 /* chrome、 firefox、 opera、 Safari, Android, iOS 4.2+*/
        ur1('svg字体文件地址') format('svg');
    /*  iOS4.1- */
}

阿里巴巴普惠体

网址https://www.iconfont.cn/webfont
优点：不用下载字体

段落属性、行属性

text-indent首行缩进

text-indent: 2em;/* em表示字符宽度 */

line-height行高

单位：
1）px为单位的数值

 line-height: 30px;

2）没有单位的数值，表示字号的倍数

line-height: 1.5;

3）百分数，表示字号的倍数

line-height: 150%;

文本居中

谁要居中	水平	竖直
文本	text-align:center;	行高=盒子高
盒子	margin:0 auto;	（如下代码）

父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

font

合写font-style，font-weight，font-size/line-height、font-family

倾斜 加粗 字号/行高 字体

font: italic bold 20px/1.5 Arial，"微软雅黑";

继承性

因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了

就近原则

有继承，选择器权重失效

<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>我是文字</p>
        </div>
    </div>
</div>
  /* p标签继承该样式*/
  #box1 #box2 #box3 {
      color: red;
  }

直接选中的权重更大，继承权重看作0

p {
    color: green;
}
 #box1 #box2 {
     color: red;
 }
 #box1 #box3 {
     color: blue;
 }