• 文本格式化


    文本格式化

       1、控制字体

          1、指定字体

             font-family:"microsoft yahei",arial,"宋体";

          2、字体大小

             font-size: px , pt 作为单位  30pt  16pt

       常用字体大小:12px - 14px

          3、字体加粗

             相当于 <b></b>

       font-weight : normal / bold ;

       建议:通过 该属性取代 b 标签

          4、字体样式

             斜体

       font-style:normal / italic;

       相当于<i></i>

     5、小型大写字母

             font-variant : normal / small-caps;

          6、字体属性 font

             将所有的属性设置在一个声明当中

       font:font-style font-varaint font-weight font-size font-family;

       eg:font:italic small-caps bold 12px "microsoft yahei",arial;

       常用写法:

      font :font-size  font-family;

      font:bold 12px "microsoft yahei";

       其他写法:

              font : font-size/line-height font-family;

      font:12px/24px "microsoft yahei";

          line-height : 行高

     2、文本属性

           1、颜色

              color : 颜色值 ;

                rgba(255,0,0,0.5);

           2、文本排列

              text-align:left/right/center; 元素中的内容水平对齐方式,大部分主流浏览器,只对行内元素起作用,对块不起作用

        vertical-align:top / bottom / middle / baseline; 文本内容垂直对齐方式

            baseline : 基线对齐

           3、文字修饰(线条)

              text-decoration:none / underline

           none : 去除文本上的线条

           underline : 下划线

           overline : 上划线

           linethrough : 删除线  <s></s>

    4、行高

              每行文本所占据的高度。如果行高的值高于文本的高度,那么这段文本会在行高范围内垂直居中显示。

        使用方式:

            1、将行高与容器高度设置为一致,从而使容器内的文本垂直居中显示。(只针对一行数据)

            2、如果想给文本增加上下的边距,也可以使用line-height

           5、首行文本缩进

              让元素内的首行文本,空出指定的像素值

        text-indent:value;

           6、文本阴影

              text-shadow:h-shadow v-shadow blur color;

              常用例子:text-shadow: 5px 5px 5px #FF0000;

  • 相关阅读:
    创建zull工程时pom文件报错failed to read artifact descriptor for org.springframework.cloud:spring-cloud
    利用eureka构建一个简单的springCloud分布式集群
    《信息安全专业导论》第十一周学习总结
    Nmap
    Excel数据统计与分析
    python模拟进程状态
    《信息安全专业导论》第9周学习总结
    俄罗斯方块
    《信息安全专业导论》第八周学习总结
    熟悉编程语言
  • 原文地址:https://www.cnblogs.com/cheerping/p/7499933.html
Copyright © 2020-2023  润新知