字体样式和行距

2018-11-20  本文已影响0人  Forever_f59e

颜色使用

1.RGB用法

    .box{
            width:200px;
            height:200px;
            background-color:rgb(255,255,255)
    ##最大值为白色,最小为黑色
    }

2.%号表达

    .box{
            width:200px;
            height:200px;
            background-color:rgb(100%,100%,100%);
    }

3.相同的两位课以简写,不一样的必须简写!

    .box{
            width:200px;
            height:200px;
            background-color:#f00;
    }

字体样式

    .p{
            color:red;
            font-size:30px;
    }
    如果不设置像素的话默认像素为16px;

    .p{
            color:red;
            font-size:30px;
            font-family:arial;
    }
    如果不定义字体的话,浏览器会默认一个字体。

    .p{
            color:red;
            font-size:30px;
            font-family:(字体);
    }
    字体样式可以设置多个浏览器会按顺序去用,如果没有会使用下一个。

    .p{
            color:red;
            font-size:30px;
            font-family:"Segoe Script";
    }  
    让字体之间有空隙,引号要引起来  

字体其它样式

style

    .p{
              color:red;
              font-size:30px;
              font-family:微软雅黑;
               font-style:italic;
    }
    italic 斜体的字体样式
    oblique 跟italic字体样式差不多,只不过这个是倾斜的字体样式
    默认normal浏览器的一个标准样式
    inherit 规定从父元素继承字体样式

weight

    .p{
              color:red;
              font-size:30px;
              font-family:微软雅黑;
              font-style:italic;
              font-weight:bold;
    }
    bold 定义粗字符
    bolder 定义更粗的字符
    lighter 定义更细的字符
    默认normal浏览器标准的字符
    也可以用数值定义(100-900)

variant

   .p{
    color:red;
    font-size:30px;
    font-family:arial;
    font-style:italic;
    font-variant:small-caps;
}
小型大写字母

字体样式简写

    .p{
    font:italic bold small-caps 30px '微软雅黑';
    }
    不同的样式要使用空格隔开
    后两个样式一定要存在否则代码没用!

行间距

line-height

    .p{
            width:200px;
            height:200px
            line-height:200px;
       }
        要想设置垂直居中,height多高,行就要设置多高。
上一篇下一篇

猜你喜欢

热点阅读