美文网首页
字体样式和行距

字体样式和行距

作者: Forever_f59e | 来源:发表于2018-11-20 19:09 被阅读0次

    颜色使用

    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多高,行就要设置多高。

    相关文章

      网友评论

          本文标题:字体样式和行距

          本文链接:https://www.haomeiwen.com/subject/jogxqqtx.html