CSS字体和文本属性

一.CSS字体属性

• 字体  font-family  : '宋体' | '微软雅黑' | 'Microsoft YaHei' ……

<style>
    .one {
      font-family: '宋体';
    }

    .two {
      font-family: '微软雅黑';
    }

    .three {
      font-family: 'Times New Roman', Times, serif;
    }
</style>

<h1 class="one">宋体</h1>
<h1 class="two">微软雅黑</h1>
<h1 class="three">'Times New Roman', Times, serif</h1>

☆☆☆可以设置多种字体（用逗号隔开）---- 提升兼容性

• 大小  font-size  :  16px（谷歌默认）

<style>
    div:nth-child(2) {
      font-size: 20px;
    }

    div:last-child {
      font-size: 36px;
    }
</style>

 <div>默认大小16px</div>
 <div>20px</div>
 <div>36px</div>

 

• 粗细  font-weight  :  normal（正常） | bold（粗体）| bolder（特粗） | lighter （细体）|               number （100|200|、、、|900）

        ☆ ☆ ☆ num=400 相当于 normal (正常）

<style>
    div:first-child {
      font-weight: normal;
    }
    div:nth-child(2) {
      font-weight: bold;
    }
    div:nth-child(3) {
      font-weight: bolder;
    }
    div:nth-child(4) {
      font-weight: lighter;
    }
    div:nth-child(5) {
      font-weight: 100;
    }
    div:nth-child(6) {
      font-weight: 400;
    }
    div:last-child {
      font-weight: 900;
    }
</style>

<div>正常</div>
<div>粗体</div>
<div>特粗</div>
<div>细体</div>
<div>100</div>
<div>400</div>
<div>900</div>

 

• 样式  font-style : normal（正常）| italic （斜体）

<style>
    .one {
      font-style: normal;
    }

    .two {
      font-style: italic;
    }
</style>

<span class="one">正常</span>
<span class="two">斜体</span>

 

• 复合属性  font : font-style font-weight font-size/line-height font-family

（不需要的可以省略，但必须有size和family)

<style>
    div {
      font: italic bold 20px '宋体';
    }
</style>

 <div>字体属性复合写法，写的时候按照次序，中间用空格隔开</div>

二.CSS文本属性

• 颜色  color

<style>
    div {
      color: pink;
    }

    span {
      color: rgb(144, 243, 144);
    }
</style>

<div>这里是div中的文本</div>
<span>这里是span中的文本</span>

 

• 水平对齐  text-align        (left | center | right)

<style>
    div {
      width: 200px;
      height: 20px;
      background-color: pink;
      margin-bottom: 10px;
      /* 每个div之间的下间距是10 */
    }
    .one {
      text-align: left;
    }
    .two {
      text-align: center;
    }
    .three {
      text-align: right;
    }
</style>

<div class="one">左对齐</div>
<div class="two">居中对齐</div>
<div class="three">右对齐</div>

 

• 装饰文本  text-decoration  （none | underline | overline | line-through）

<style>
   h1:first-child{
     text-decoration: none;
   }
   h1:nth-child(2){
     text-decoration: underline;
   }
   h1:nth-child(3){
     text-decoration: overline;
   }
   h1:last-child{
     text-decoration: line-through;
   }
</style>

<h1>没有装饰</h1>
<h1>下划线</h1>
<h1>上划线</h1>
<h1>删除线</h1>

 

• 文本缩进  text-indent

<style>
   div:nth-child(2){
    text-indent: 2em;
    /* em是一个相对单位，就是当前元素的1个文字大小 */
   }
   div:last-child{
     text-indent: 10px;
   }
</style>

<div>文本正常位置</div>
<div>文本缩进2个字符</div>
<div>文本缩进10px</div>

 

• 行间距  line-height   ---- 由 上间距 + 文字高度 + 下间距 组成

<style>
    div {
      line-height: 36px;
    }
</style>

 <div>行间距<br>由上间距，字体高度，下间距组成</div>

感受：加油！冲冲冲！