做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界。
今天,来了解文字在网页在中,是如何去设置的。
中间来一个小插曲,我想大家应该都用过办公软件,那么办公软件的文档工具,能操作文本的一些什么属性呢?首先,应该是字体的种类,然后就是设置,字体的大小,粗体,斜体,颜色,装饰(下划线,删除线)字母大小写等等。针对文字的一些属性设置,很显然,在网页的文本中当然也需要去设置这些属性。那么如何去设置呢?
字体类型 font-famliy: cursive serif;它可以设置各种字体。并且可以给一个字体组,排在前面的优先级较高,如果用户没有列表中的字体,则会引用系统默认的字体。(个人感觉,这并不适合网页风格的统一性,应该有种方式,能够让字体统一起来,如果用户系统里不存在该字体,给它安装一个字体即可。很显然这是有代价的,看如何取舍)
字体大小 font-size: 20px [2em] [200%][large] 。简单来说,就是两种取值,一种是相对大小,一种是固定大小(常用的就两种 百分比以及固定像素的用法。)相对值是相对于父元素的字体大小。如果父元素同样设置了相对值 2em,子元素依然取用相对值 2em ,那么子元素的字体将是顶级元素的4倍大小,从而造成字体混乱,因此要避免相对值的嵌套写法。
粗体:font-weight: 400 [normal] || 900 [bold] 900或者bold取值都是最大值,400 或则normal表示正常值,其他值也就是其中的过渡值。
斜体:font-style:italic ||normal||oblique 其中,italic和oblique都有倾斜的效果,后者更倾向于倾斜的字体类型,前者,更倾向于强制倾斜。
颜色:color:blue 。(插曲,由于习惯用 font- xx 这种模式,然后突然前面的font都没有了,都有点不适应。)其实设置颜色,除了基本的颜色的英文名称之外还有一些其他取色标准。rgb调色,十六进制等等。(一般都是使用取色器去调整这些颜色的。所以取值都无关紧要的感觉。)(扩展:css3为了更方便的设置颜色,还提供了更规范的HSL表示方法,以及HSLA RGBA等来控制透明度的写法)
装饰:text-decoration:none||overline||underline||blink||linethrough 。其实就是下划线,上划线,删除线等。(PS:blink这种闪烁效果 好像支持效果不大好,IE 谷歌浏览器都不支持)
字母大小写:font-variant:normal || capitalize || uppercase || lowercase 正常的,首字母大写的,全大写,全小写。(PS 各个浏览器对于首字母大写的实现方式有些许不同,有些认为必须要以空格分开才看做是一个单词,有些认为,只要是一个单词,那么就应该大写,比如Text-Transform )
最后其实发现,除了text-decoration 以及color 都是 font- xx 开头的,还有一些值的设置,比如蓝色,可以用blue表示,可以理解为,这是老外们的一种简单的语义化设置操作。
css还给整个字体家族提供了一种综合的简便写法。能够依次的设置字体属性font-style font-variant font-weight font-size/line-height font-family 。其中的某个值是可以为空的,如果为空,则选择默认的值。这种写法适合设定一些统一设定值。
小结:css的值设定基本可以理解为是英文的语义化设置,只要能够记住这些单词,那么久能够很好的理解css正在做的事情。
属性的取值也部分采取了语义化设置。如颜色 blue 首字母大小写,font-variant
font-style : 字体-样式 (斜体)
font-variant: 字体-词的变体 (理解为对字母大小写的变更)
font-weight:字体-重量 (粗体)
font-size/line-height 字体-大小 /行高 (绝对值:13px ,相对值:200%)
font-family :字体:家族 (通用字体:serif fantasy 等等)