• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(2):CSS 文本样式

    CSS3常规使用(2):CSS 文本样式

    作者: 分类:HTML5与CSS3.0 点击: 63 次
    wordpress CMS主题:ssmay主题

      网页文本样式的常规属性有如下这些:

      text-decoration 装饰文本出现各种划线。 css1
      text-shadow 给文本添加阴影 css3
      text-align 设置文本对齐方式 css123
      white-space 排版中的空白处理方式 css1
      letter-spacing 设置字母之间的间距 css1
      word-spacing 设置单词之间的间距 css1
      line-height 设置行高 css1
      word-wrap 控制段词 css3
      text-indent 设置文本首行的缩进 css1
      text-transform 将英文文本转换大小写。 css1

      ======================================================

      1、text-decoration

      none 让本身有划线装饰的文本取消掉
      underline 让文本的底部出现一条下划线
      overline 让文本的头部出现一条上划线
      line-through 让文本的中部出现一条删除划线

      如:a链接使用下划线:

      a{ text-decoration:underline; }

      2、text-shadow

      p { text-shadow : 5px 5px 3px black; }

      第一个值:水平偏移;
      第二个值:垂直偏移;
      第三个值:阴影模糊度(可选);
      第四个值:阴影颜色(可选)。

      3、white-space 解释:处理空白排版方式。值 说明

      p {white-space: nowrap;}
      normal 默认值,空白符被压缩,文本自动换行
      nowrap 空白符被压缩,文本不换行
      pre 空白符被保留,遇到换行符则换行
      pre-line 空白符被压缩,文本会在排满或遇换行符换行
      pre-wrap 空白符被保留,文本会在排满或遇换行符换行

      4、letter-spacing

      p {letter-spacing: 4px;} 解释:设置文本之间的间距。

      5、word-spacing

      p {word-spacing: 14px;} 解释:设置英文单子之间的间距。

      6、text-indent

      p {text-indent: 20px;} 解释:设置文本首行的缩进。

      7、字体大小

      em 相对于父元素字体大小而定
      rem 相对于根元素字体大小而定 css3

      8、文本阴影 text-shadow: 1px 1px 1px red; ie10+ css3

      如:
      //正值阴影
      text-shadow: 1px 1px 1px red;

      //负值阴影
      text-shadow: -1px -1px 1px red;

      //多重阴影叠加
      text-shadow:0px 0px 0 rgb(188,178,188),
      1px 0px 0 rgb(173,163,173),
      2px 0px 0 rgb(157,147,157),

      9、文本裁剪 text-overflow css3

      clip 默认值,裁剪文本时不添加“...”省略号
      ellipsis 裁剪文本时添加“...”省略号

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807236140.html
    本文时间:2018-07-23 11:12:10
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.