字体样式
1.长度单位:
像素 px、
百分比 % 是一个相对单位,相对于其父元素高宽,多用于流体式布局、
em 相对于当前字体的大小设置的,是一个相对单位,字体默认大小16px,若没设置字体大小,则继承其祖先元素字体大小,直到根标签默认字体大小16px、
rem 只相对于根标签字体大小来设置,是一个相对单位
2.颜色单位
Rgb(red、green、blue)
Rgba(red、green、blue 、0—1) 0是透明,1是不透明
Hsla 表示亮度、色相、颜色、透明度
使用十六进制 0-9abcdef
3.字体样式
Color 文字颜色
Font-family 文字字体
Font-size 文字大小
@font-face 自定义字体
Font简写:大小、字体必须写,而且大小在倒二,字体在倒一
代码演示为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式</title>
<style>
div{
height: auto;
background-color: aqua;
}
/* rgb */
p:first-child{
background-color: rgb(0,0,0);
}
/* rgba(a是设置透明度的)
0是透明,1是不透明 */
p:nth-child(2){
background-color: rgba(0, 0, 0, 0.5);
}
/* color 设置文字颜色 */
p:nth-child(3){
color: blue;
}
/* font-family 设置文字字体 */
p:nth-child(4){
font-family: 'Times New Roman', Times, serif;
color: red;
}
/* font-size 设置文字大小 */
p:nth-child(5){
font-size: 12px;
}
/* @font-face 自定义字体
我没下字体,所以这里就不举个栗子了. */
p:nth-child(6){
background-color: blueviolet;
}
/* font 简写,但注意:大小字体必须要写,而且大小在倒二,字体在倒一 */
p:nth-child(7){
font: 20px 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<div>
<p>长歌行</p>
<p>汉乐府</p>
<p>青青园中葵,朝露待日晞。</p>
<p>阳春布德泽,万物生光辉。</p>
<p>常恐秋节至,焜黄华叶衰。</p>
<p>百川东到海,何时复西归?</p>
<p>少壮不努力,老大徒伤悲!</p>
</div>
</body>
</html>
效果图为:
行间距
行高(line height):文字占有的实际高度、上间距+下间距+字体大小
行间距=上间距+下间距
Line-heigh属性:1.直接放大小单位px、em、rem、%
2.直接放倍数(当前字体大小的倍数) 例如:1 2 3
3.放百分比(当前字体大小的百分比)
单行文本在父元素中垂直居中:单行文本高度设置和高度一致,就会垂直居中
font也可以指定大小