CSS属性及属性值-----文本属性

1、文本属性：
（1）font-size字体大小：单位是px，浏览器默认为16px，设计图常用字号是12px;

<style>
            .p1{
                      /* 字体大小 */
                    font-size: 13px;
              }
</style>

<p class="p1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
         consequuntur aperiam, repellat, eos neque dignissimos facere excepturi 
    </p>

（2）font-family字体：当字体是中文字体或英文字体中有空格时，需要加双引号；
多个字体中间用逗号连接，先解析第一个字体，如果没有解析第2个字体，以此类推；

<style>
.p2{
            /* 字体 */
            font-family: 宋体;
        }
</style>

 <p class="p2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
         consequuntur aperiam, repellat, eos neque dignissimos facere excepturi 
    </p>

（3）color:颜色：color:red; color:#ff0; color:rgb(255,0,0); 0-255
color:#ff0是十六进制0-9 A-F(六位，前两位为红色，中间两位是绿色，后两位是蓝色)

 .p1{
            /* 颜色 */
            /*1、 color: red; */
            /* 2、color:rgb(111, 1, 80) */
            /* color:#00f; */
             color:#14c145; 
        }

<p class="p1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
         consequuntur aperiam, repellat, eos neque dignissimos facere excepturi 
    </p>

（4）font-weight加粗：(100-900)
100细
400正常
700加粗
900更粗
font-weight:bolder/bold/normal/ligter

.p3{
            /* 加粗 */
            /* font-weight: 100; */
            font-weight: bold;
        }

  <p class="p3">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
         Eius maxime nesciunt, quaerat voluptate ea accusantium? 
    </p>

（5）font-style倾斜：italic（斜体）/oblique（更倾斜）/normal

.p4{
            /* 倾斜 */
            /* font-style: italic; */
            font-style: oblique;
        }

 <p class="p4">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
         Eius maxime nesciunt, quaerat voluptate ea accusantium? 
    </p>

（6）text-align文本水平对齐：left/right/center/justify(水平2端对齐，但是只对多行起作用)

.p5{
            /* 文本水平对齐 */
            text-align: center;           
        }

  <p class="p5">
        大家好！
    </p>

（7）line-height行高：line-height=height的数据，可以实现单行文本垂直居中;

 .p6{
            /* 行高 */
            line-height: 100px;
        }

<div class="p6">哈哈哈哈哈</div>

（8）text-indent首行缩进：text-indent可以取负值；text-indent属性只对第一行起作用;

  .p10{
            text-indent: 32px;

            /* 当前字体的两倍：2em */
            text-indent: 2em;
        }

<p class="p10">
        谁念西风独自凉， 萧萧黄叶闭疏窗，沉思往事立残阳。
        被酒莫惊春睡重，赌书消得泼茶香，当时只道是寻常。
    </p>

（9）Letter-spacing字间距
word-spacing词间距

 /* 文本间距：词间距、字符间距 */
        .p8{
            /* 字间距 */
            letter-spacing: 10px;
        }
        .p9{
            /* 词间距 */
            word-spacing: 10px; 
            /* word-spacing: -10px; */         
        }

    <p class="p8">
        谁念西风独自凉， 萧萧黄叶闭疏窗，沉思往事立残阳。
        被酒莫惊春睡重，赌书消得泼茶香，当时只道是寻常。
    </p>
    <p class="p9">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Magnam optio nihil obcaecati molestias. Harum iste iusto 
        ducimus quae consectetur aspernatur, odit illo est! 
        Quibusdam dolore error nobis ex distinctio. Nesciunt.
    </p>

（10）text-decoration文本修饰：text-decoration:none没有/underline下划线/overline上划线/line-through删除线
none:用在超链接上，超链接默认有下划线

 .p11{
            /* text-decoration: underline; */
            text-decoration: line-through; 
            /*同时加上上中下划线 
            text-decoration: overline line-through underline; */
        }

<p class="p11">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Magnam optio nihil obcaecati molestias. Harum iste iusto 
        ducimus quae consectetur aspernatur, odit illo est! 
        Quibusdam dolore error nobis ex distinctio. Nesciunt.
    </p> 

（11）font文字简写：
font是font-style、font-weight、font-size/line-height 、font-family的简写，顺序不能改变，必须同时指定font-size和font-family属性才能起作用。例：font:italic 800 30px/80px “宋体”；
(12) text-transform大小写：

.p12{
            /* 字体大小写 */
            /* 首字母大写 */
            /* text-transform: capitalize; */
            /* 全部转小写 */
            /* text-transform: lowercase; */
            /* 全部转大写 */
            text-transform: uppercase;
        }

<p class="p12">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Magnam optio nihil obcaecati molestias. Harum iste iusto 
        ducimus quae consectetur aspernatur, odit illo est!
    </p>