资讯专栏INFORMATION COLUMN

CSS格式化排版--排版

QiShare / 1470人阅读

摘要:文字排版字体利用设置字体,注意设置的字体必须是本地电脑中存在的字体。例子字体原价甩卖价段落排版缩进用,表示缩进个字,也就是个字符。例子字体段落排版对齐让段落的内容进行对齐,用。把文本排列到左边。

1、文字排版--字体:利用font-family设置字体,注意设置的字体必须是本地电脑中存在的字体。

    例子:class="MicrosoftYahei"的h1标签的字体设置为 宋体 ,效果如下





CSS字体



  

默认字体


  

默认字体


  

微软雅黑



    

2、文字排版--字号、颜色:设置字号用font-size,设置颜色用color。

    例子:





CSS字体



  

默认字体


  

默认字体



3、文字排版--粗体、斜体:粗体用font-weight: bold,斜体用font-style: italic。

    例子:





CSS字体



  我们来看看粗体是怎么样的
  

  我们来看看斜体是怎么样的

    

4、文字排版--下划线、删除线:下划线用text-decoration: underline,删除线用text-decoration: line-through。

    例子:

 





CSS字体


  

原价:200


  

甩卖价:20



    

 5、段落排版--缩进:用text-indent: 2em,表示缩进2个字,也就是4个字符。

    例子:





CSS字体



  

小兔子乖乖


  

把门开开



6、段落排版--行间距:用line-height: 1.5em,设置为1.5倍行间距,也可以设置为具体的px值。

    例子:





CSS字体



  

小兔子乖乖


  

把门开开


  

小兔子乖乖


  

把门开开



7、段落排版--文字间距,字母间距:文字间距用word-spacing: 20px,字母间距用letter-spacing: 20px。

    例子:





CSS字体



  I love you!
  

happy birthday


  

happy birthday



8、段落排版--对齐:让段落的内容进行对齐,用text-align: center。

left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

    例子:





CSS字体



  

一山还有一山高



 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1453.html

相关文章

  • 前端入门5-CSS弹性布局flex

    摘要:总之有了基础,理解弹性布局蛮容易的。语法格式当容器的设置了溢出换行属性,且当前在交叉轴方向上存在多行的情况下,该属性才会生效。 本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟...

    王晗 评论0 收藏0
  • 重学前端学习笔记(二十五)--CSS的正常流

    摘要:一正常流的行为正常流的排版行为依次排列,排不下了换行。在正常流基础上,有相关规则,使得一些盒占据了正常流需要的空间,可以把理解为文字环绕。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联...

    dcr309duan 评论0 收藏0
  • 重学前端学习笔记(二十五)--CSS的正常流

    摘要:一正常流的行为正常流的排版行为依次排列,排不下了换行。在正常流基础上,有相关规则,使得一些盒占据了正常流需要的空间,可以把理解为文字环绕。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联...

    leap_frog 评论0 收藏0
  • 重学前端学习笔记(二十五)--CSS的正常流

    摘要:一正常流的行为正常流的排版行为依次排列,排不下了换行。在正常流基础上,有相关规则,使得一些盒占据了正常流需要的空间,可以把理解为文字环绕。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联...

    toddmark 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<