美文网首页
颜色单位和字体样式、行间距

颜色单位和字体样式、行间距

作者: 优秀的人A | 来源:发表于2018-11-20 11:58 被阅读14次

    颜色单位

    RGB用法

    .box{
        width:200px;
        height:200px;
        background-color:rgb(255,0,255)
    }
    
    255是最大,0最小

    .box{
        width:200px;
        height:200px;
        background-color:rgb(100%,0%,100%)
    }
    
    100%百分百最大,跟255方式一样

    .box{
        width:200px;
        height:200px;
        /*background-color:#ff0000;*/
        background-color:#f00;
    }
    
    十六进制写法,数字越小颜色越深,如果两位都是一样的可以简写,不一样的必须写完整

    字体样式

    .p1{
        color:red;
        font-size:30px;
    }
    如果设置字体像素为30,那就是30px,如果没有设置就默认16px。
    

    .p1{
        color:red;
        font-size:30px;
        font-family:arial;
    }
    英文字体是不包含中文字体的,浏览器就会默认一个字体
    

    .p1{
        color:red;
        font-size:30px;
        font-family:华文彩云,arial,微软雅黑;
    }
    设置多个样式要用逗号分隔
    先使用华文彩云字体,如果没用到,就用arial,如果没用到,就用微软雅黑,如果还没用到,浏览器会默认一个字体
    

    .p1{
        color:red;
        font-size:30px;
        font-family:"Segoe Script";
    }
    因为字体名称中间有空格,必须要用引号引起来
    

    字体其它样式

    style

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

    weight

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

    variant

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

    字体样式简写

    .p1{
        font:italic bold small-caps 30px '微软雅黑';
    }
    不同的样式要用空格隔开 
    

    行间距

    line-height

    .p1{
        width:200px;
        height:200px;
        line-height:200px;
    }
    要想设置垂直居中,height多高,行高就设置多高

    相关文章

      网友评论

          本文标题:颜色单位和字体样式、行间距

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