css文本相关知识

153 阅读3分钟

一,字体样式

1,font-weight

作用:定义字体的粗细;具有继承性!

key:font-weight;

value:单词类型/数字类型;

value解析
bold/700粗体b,strong标签的默认值
bolder更粗字体
normal/400默认值,正常显示
lighter更细的字体

2,font-style

作用:斜体显示;具有继承性!

key:font-style

value解析
italic斜体文字,针对英文要求英文字体斜体样式显示(常用)
oblique斜体的文字,将文字倾斜显示,与字体无关
normal正常显示

3,line-height

作用:设置文字的实际占有高度,文字大小+文字间距=行高;具有继承性!

key:line-height;

value作用
px用像素设置行高
%本身字号像素值百分比

font综合 顺序不能乱

写法1 两个属性值: font: 14px "宋体";

写法2 三个属性: font: 14px/28px "宋体"; 字号/行高 "字体";

写法3 五个属性: font: bold italic 14px/28px "宋体"; 粗体 斜体 字号/行高 "宋体";

line-height 行高

value作用
px用像素设置行高
%本身字号像素值百分比

二,文本属性

1,text-align

作用:设置文本对齐;具有继承性!

value作用
centent居中
left左对齐(默认)
right右对齐

2,text-decoration

作用:修饰文本;

key:decoration;

value作用
overline上划线
line-through删除线/中划线;del标签默认属性
underline下划线;a默认属性
none无;清除a标签下划线

在我们知道了这样一些属性后,我们就解锁了一些新的玩法,那么既然del、a有这样的一些默认属性那如果我们不想要它们的默认属性我们就可以给del和a一个tetx-decoration:none;来去除掉它们的默认属性;

3,text-indent

作用:文本缩进效果;具有继承性!

value:text-indent;

value作用
px首行缩进多少个像素
em首行缩进多少个中文字符位置
%设置缩进文字所在标签的父级标签的 width 属性值的百分比

text-indent这一属性是用来写向右的文本缩进,他的属性值有px、em、百分比%表示的是缩进文字所在标签的父级标签的width属性值的百分比,如果给百分比负数的话它将会向左缩进。

其中最值得一提的是em他表示的是首行缩进几个中文字符的位置,有一个好处是无论字体变大或者变小它都会跟随变化增大缩小缩进字符。

三,继承性

继承性的表现他相当于一个继承规则,有继承性的元素例如font-weight当我们给他的父级设置一个font-weight:700;的加粗效果,那么他的子元素子后代就会受到其父亲继承的这一属性的影响,如果我们子元素不想要这一属性我们也可以给子元素单独设置其他属性,因为子元素的权重大所以会覆盖掉父元素的属性;

这样就可以来达到效果,在实际应用中我们可以利用好这一规用来给父元素设置一个公共属性利用他的继承性来达到减少代码量书写的效果