CSS字体和文本的属性学习

CSS Fonts(字体)属性用于定义于字体系列、大小、粗细和文字样式

P { font-family: "微软雅黑"; }

div { font-family: "Microsoft yahei", "微软雅黑"；}

字体大小

p{

font-size: 20px;

}

px(像素)大小是我们网页的最常用的单位

字体粗细

CSS使用font-weight属性设置文本的粗细

p{

font-weight: bold;

}

normal 默认值(不加粗)

bold 定义粗体(不加粗)      通常情况选择数字设定文字粗细

CSS文字样式

CSS使用font-style属性设置文本的风格

p {

font-style: normal;

}

normal 默认值浏览器会显示标准的字体样式font-style;normal

italic 浏览器会显示斜体的字体样式

字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

body {

font: font-style font-weight font-size/line-height font-family;

}

• 使用font不能颠倒顺序 并且各个属性以空格隔开

• 不需要设置的属性可以省略(取默认值)但必须保留font-size和font-family，否则font属性不起作用

CSS文本属性

文本的颜色

div {

color: red;

}

预定义的颜色值 red,green,还有我们的御用色pink

十六进制 #FF0000,#FF6600, #29D794 开发中最常用

RGB代码 rgb(225,0,0)或rgb(100％,0％,0％)

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式 right右对齐 left左对齐 center居中对齐

div{

text-ailgn: center;

     }

装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等

none 默认，没有装饰线

underline 下划线 链接a自带下划线(常用)

overline 上划线(几乎不用)

line-through 删除线(不常用)

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div{

text-indent: 10px;

}

文本第一行首行缩进 多少距离text-indent: 20px;

em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小

行间距

line-height属性用于设置行间的距离（行高）可以控制文字行与行之间的距离

P {

line-height: 26px;

}

行间距：由上间距、文本高度、下间距组成

还得在学校做三次核酸，这下又碰上南昌下雨天也没有个准确离开隔离的日子，但现在学习形式主义的隔离和在原寝室没差别，明天我一定能早点出门然后跑步运动不想再这么晚学习了感觉越来越累，累计的知识点也越来越冗杂要挨个练习才能吃透，明天暂停一天学习新知识把，晚安啦一周的疫情江西会好起来的！