HTML5+CSS3从入门到精通:网页文本美化
沉沙 2018-05-11 来源 : 阅读 698 评论 0

摘要:针对文字的一些属性设置,很显然,在网页的文本中需要去设置这些属性。本篇文章讲述了网页文本美化需要的知识,助您HTML5+CSS3从入门到精通。

     大家应该都用过办公软件,那么办公软件的文档工具,能操作文本的一些什么属性呢?首先,应该是字体的种类,然后就是设置,字体的大小,粗体,斜体,颜色,装饰(下划线,删除线)字母大小写等等。针对文字的一些属性设置,很显然,在网页的文本中当然也需要去设置这些属性。那么如何去设置呢?

    字体类型 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 等等)

 

以上就是关于网页文本美化的知识,希望可以帮到大家,更多HTML5/CSS3知识的可以关注职坐标HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved