首页 / 知识

Css入门课程 Css文本样式

2023-04-11 14:06:00

　　文字是网页的非常基础的内容，文本的样式设置也是非常重要的

　　font-size:绝对大小单位和相对大小单位，绝对大小单位有cm，mm in（厘米，毫米，英寸）等，这是大小不随屏幕分辨率大小而变化，相对大小单位：px，em %他们的实际显示大小随分辨率变化

　　因此大小设置一般使用相对大小单位进行。

　　字体大小可继承，在使用em %百分比的时候其计算参考基础是父容器继承的实际计算后的字体大小为基准进行em和%的计算

　　字体颜色即页面的前景色，使用rgb rgba或者关键字，或者16进制颜色值，其中rgb或者rgba中可是是百分比也可以是实际值如rgb（255,20%,30）;这个当然很好理解，如果有超出有效范围的按照范围最接近的有效值截取。

　　字体颜色代表了元素的前景色，那么自然的如边框，文本下划线，中画线，上划线等等使用前景色的地方默认也就使用字体的颜色作为默认值

　　text-align:left center right justfy 分别为左对齐，剧中对齐，右对齐，两端对齐，这是水平方向的对齐设置。该css属性只针对块级元素有效，对行内元素无效，相应的块级元素要想水平剧中对齐可是有margin:0px auto方式实现

　　分别理解为基线对齐，行内文本底线对齐，文本顶线对齐，行底部对齐，行顶部对齐，行居中对齐

　　垂直对齐只对行内和单元格显示类型有效，对块级元素无效，如果要想块级元素垂直居中对齐，可将父容器display:table 自己display:table-cell显示为单元格，一般地可是有line-height为容器实际高度设置行高方式让行内容垂直对齐，垂直对齐有一些不是很好理解，这个需要在实际使用中对总结

　　line-height:浏览器默认的行高为文本大小的1.2em即1.2倍，line-height可以继承，但是继承的是父级元素实际计算后的值。行高也可以进行设置用来定义行间距的作用，行高的计算方式以行文本大小为基准进行

　　计算。需要的注意的是一般我们都是有em或者%方式设置行高以达到行间距随字体大小分辨率变化而相应变化

　　word-spacing：单词之间的间距，这里的单词是指的英文单词，而英文单词又是以空格作为分隔判定依据，此属性可以设置相邻2个单词间的间隔

　　letter-spacing：字符之间的间距，这里的字符指任意字符，相应的该属性可以进行字符显示间隔进行设置

　　text-decoration: underline|none|overline 文本下划线，上划线，中画线等

　　text-indent: 首行缩进，这里一般使用2em，即2倍文字大小缩进，也就是缩进2个字符

　　text-transform:lowercase|capitalize|uppercase；文本是否转换为大小写，这里只针对英文字符有效

　　vertical-align，text-align,line-height主要是因为他们有效性和计算方式，以及继承性方面都有自己的特色，比较细致需要多记忆

文本单位文字网页设置屏幕分辨率