颜色的表示
表示方式一：颜色名
编写方式：直接使用颜色对应英文单词，编写比较简单；
color: red;
1、颜色名这种方式，表达的颜色比较单一，所以用的并不多；
2、具体颜色名参考MDN官方文档。
表示方式二：rgb或rgba
编写方式：使用红、绿、蓝，这三种光的三原色进行组合。
r表示红色,g表示绿色，b表示蓝色，a表示透明度。
color: rgb(20, 80, 0);
color: rgba(240, 30, 40, 0.5);
小规律：
1、若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
2、rgb(0,0,0)是黑色，rgb(255,255,255)是白色.
3、对于rgba来说，前三位的rgb形式要保持一致，要么都是0-255的数字，要么都是百分比。
表示方式三：hex与hexa
hex的原理同与rgb一样，依然是通过：红、绿、蓝进行组合，只不过要用6个数字，分成3组来表达。格式为：#rrggbb
每一位数字的取值范围是：0~f。
所以每一种光的是最小值是：00，最大值是：ff。
color: #fabaca;
注意点：IE浏览器不支持hexa，但支持hex。
表示方式四：hsl与hsla
hsl是通过：色相、饱和度、亮度，来表示一个颜色，格式为：hsl(色相，饱和度，亮度)
色相：取值范围是0-360度（deg），具体度数对应的颜色如下图：
饱和度：取值范围是
0%-100%（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）。亮度：取值范围是
0%-100%（0%没有亮度，所有就是黑色，100%亮度最大，所有就是白色了）。
hsla就是在hsl的基础上，添加了透明度。
字体属性
字体大小
属性名：font-size
font-size: 12px;
注意：
1、Chrome浏览器默认字体大小为16px，而且0px会自动消失。
2、不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
3、通常以body设置font-size属性，这样body中的其他元素就可以继承了。
Ctrl + 0重置浏览器放大倍数
字体族
属性名：font-family
font-family:"微软雅黑",sans-serif;
注意：
1、使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
2、如果字体名包含空格，必须使用引号包裹起来。
3、可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）。
4、Windows系统中，默认字体就是微软雅黑。
字体风格
属性名：font-style
常用值：
1、normal:正常（默认值）
2、italic：斜体（使用字体自带的斜体效果）
3、oblique：斜体（强制倾斜产生的斜体效果）
实现斜体时，更推荐使用
italic。
font-style: italic;
字体粗细
属性名：font-weight
关键词：
1、
lighter：细
2、normal：正常
3、bold：粗
4、bolder：很粗（多数字体不支持）
数值:
1、
100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计的精确程度）。
2、100-300等同于lighter，400-500等同于normal，500及以上等同于bold。
font-weight: bold;
字体复合属性
属性名：font，可以把上述字体样式合并成一个属性。
编写规则：
1、字体大小、字体族必须都写上。
2、字体族必须是最后一位，字体大小必须是倒数第二位。
3、各个属性间用空格隔开。
实际开发中，更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接使用
font-size属性。
font: bold italic 29px "微软雅黑";
文本颜色
属性名：color
可选值：1、颜色名 2、rgb或rgba 3、hex或hexa 4、hsl或hsla
开发中最常用的是：
rgb/rgba或hex/hexa。
文本间距
字母/汉字 间距：letter-spacing
letter-spacing: 20px;
单词间距：word-spacing(通过空格识别词)
word-spacing: 20px;
属性值为像素（px），正值让间距增大，负值让间距缩小。
文本修饰
属性：text-decoration
可选值：
1、
none：无装饰线（常用），比如a标签去掉下划线；
2、underline：下划线（常用）；
3、overline：上划线；
4、line-through：删除线。
可搭配以下值使用：
1、
dotted：虚线；
2、wavy：波浪线；
3、也可以指定颜色。
text-decoration: underline dotted red;
文本缩进
属性名：text-indent
属性值：px。
text-indent: 40px;
文本对齐-水平
属性名：text-align
属性值：left左对齐（默认值），right右对齐，center居中对齐
text-align: left;
行高
1、由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小，例如：font-size设为40px，最终呈现的文字，可能比40px大，也可能比40px小。
2、通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。
属性名：line-height
可选值：
1、
normal:有浏览器根据文字大小决定的一个默认值。
2、像素（px）。
3、数字：参考自身font-size的倍数（很常用）。
4、百分比：参考自身font-size的百分比。
备注：由于字体设计的原因：文字在一行中，并不是绝对的垂直居中，若一行中都是文字，不会太影响观感。
div {
line-height: 60px;
line-height: 1.5;
line-height: 150%;
}
注意事项：
1、
line-height过小，文字会产生重叠，且最小值为0，不能为负数。
2、line-height是可以继承的，且为了能更好的呈现文字，最好写成数值（font-size的倍数）。
3、line-height与height是什么关系？
设置了height，那么高度就是height的值。
不设置height的时候，会根据line-height计算高度。
应用场景：
1、对于多行文字，控制行与行直接的距离。
2、对于单行文字，让height等于line-height，可以实现文字垂直居中。
文本对齐-垂直
1、顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
2、居中：对于单行文字，让height = line-height即可。
问题：多行文字垂直居中，后面我们用定位去做。
3、底部：对于单行文字，目前一个临时的方式：
让line-height = ( height × 2) - font-size - x.
备注：x是根据字体族，动态决定的一个值。
垂直方向上的底部对齐，更好的解决办法，后面我们用定位去做。
vertical-align
属性名：vertical-align。
作用：用于指定同一行元素之间，或者表格单元格 内文字的垂直对齐方式。
常用值：
1、
baseline（默认值）：使元素的基线与父元素的基线对齐。
2、top：使元素的顶部与其所在行的顶部对齐。
3、middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
4、bottom：使元素的底部与其所在行的底部对齐。
特别注意：vertical-align不能控制块元素。
网友评论