css外观属性（自学笔记）

color：文本颜色

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

1. 预定义的颜色值，如：red 、green、blue等
2. 十六进制¹如：#ff0000(#f00)、#29d794等；连续的两位上的字符相同可以缩写，只写一个如：#ff00dd可以缩写成#f0d
3. RGB代码：如红色可以表示成rgb(255,0,0)或rgb(100%,0%,0%)

如果使用rgb代码的百分比颜色值，取值为0时，也不能省略%号，必须写成0%。

line-height:行间距

line-height用于设置行与行之间的距离，即字符的垂直间距，简称行高；
其取值单位有三种分别为像素px、相对值em、和百分比。
具体如下：

取值

值	描述
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距。
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。

继承

设置方式	line-height	计算后的line-height	子元素继承的line-height
length	20px	不用计算	20px
%	120%	自身font-size (16px) * 120% = 19.2px	继承父元素计算后的line-height值 19.2px，而不是120%
normal	1.2	自身font-size (16px) * 1.2 = 19.2px	继承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px
纯数字	1.5	自身font-size (16px) * 1.2 = 19.2px	继承1.5，line-height = 自身font-size(32px) * 1.5 = 48px

那么，哪一种是最好的方式呢？ 一般来数，设置行高的值为 纯数字 是最推荐的方式，因为其会随着对应的 font-size 而缩放。
图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

半行距 = （line-height - font-size）/2
同理能知道行距

真正理解行高

text-align:水平对齐方式

其属性值：

• left:左对齐（默认）
• right：右对齐
• center：居中对齐

text-align运用在块级元素中

text-align运用在块级元素中text-align会使其包含行内元素对齐

css的样式
        .test{
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: pink;
        }
        img{
            width: 50px;
            height: 50px;

        }
        .test div{
            /* width: 50px;
            height: 50px; */
            border: 1px solid black;
        }
        .test p{
            /* display: inline-block; */
            width: 150px;
            height: 50px;
            background-color: red;
        }
        span{
            border: 1px solid black;
        }
        h1{
            border: 1px solid black;
        }

结构
    <div class="test">
        <div>我是div</div>
        <p>我是块级元素p</p>
        <span>我是行级元素span</span>
        <h1>我是h2，块级</h1>
        <img src="./1.jpg" alt="">
    </div>

最终样式

如上图所示：

• 我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。
• 而对块级元素div以及h2看似也有居中效果？这是为什么呢？
• 观察可以发现我们并没有给div和h2设置宽高，当没有设置宽高的时候，其宽度继承了父级的，高度是由文本撑开，当然也继承了父级的text-align:center;
• 但是我们观察块级元素p标签，p元素我们给你设置了宽高，此时它本身不是水平居中，而其文本是居中的，也就是说，给父级设置text-align这个属性，只会对其子元素是行级以及行级块元素起作用，且子元素会继承text-align这个属性对其文本起作用。
• 当我们把p元素转换为行级块元素的时候，你会发现，不仅p元素中的文本居中了，其自身也居中了。

text-indent(首行缩进）

html首行缩进2字符，可以使用CSS属性中的【text-indent】进行设置。

p{ 
	text-indent:2em;
}

说明： text-indent表示段落首行缩进，2em表示缩进2字符；
text-indent无法作用于行内元素。

text-decoration

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

属性值	描述
none	无装饰
underline	下划线
line-through	贯穿文本中间的删除线
overline	上划线

---

1. 十六进制（简写为hex或下标16）在数学中是一种逢16进1的进位制。一般用数字0到9和字母A到F（或a-f）表示，其中:A-f表示10~15，这些称作十六进制数字。 ↩︎