文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Css文本样式有哪些

2024-04-02 19:55

关注

这篇文章主要介绍Css文本样式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

  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方式实现

  vertical-align:baseline|text-bottom |text-top|bottom|top|middle

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

  垂直对齐只对行内和单元格显示类型有效,对块级元素无效,如果要想块级元素垂直居中对齐,可将父容器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主要是因为他们有效性和计算方式,以及继承性方面都有自己的特色,比较细致需要多记忆

以上是“Css文本样式有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯