• CSS复合样式


    关于font

    OK,我们先从font来谈起。

    如下一段代码:

    div{

    font-size: 14px;

    font-family: '5FAE8F6F96C59ED1';

    font-weight: bold;

    font-style:italic;

    line-height: 28px;

    }

    OK,我们看到,这一系列的操作都是针对font的。这些样式,其实我们是可以缩写的。

    div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';}

     

    5行的代码用一个font搞定,

    那么这样写是什么意思呢?

    首先,font系列,也是可以缩写的

    我们来分析一下上面的例子。

    div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';}

    font-style:italic

    font- weight:bold

    font-size:14px;

    line-height:28px;

    font-family: '5FAE8F6F96C59ED1'; (微软雅黑的字符编码)

     

    当然了,这个font还有一些更简单的写法。

    如果你只有 字体大小 行高 和 字体的话

    那么你就可以这样写了 font:14px/28px ‘5FAE8F6F96C59ED1’;

    当然 如果你的文字还要加粗的话,可以这样写

    font:bold 14px/28px ‘5FAE8F6F96C59ED1’;

    这几个属性理论上没有顺序之分的

    规定的顺序为:font-style,font-variant,font-weight,font-size,font-family 

    关于margin

    margin-top: 10px;

    margin-right: 10px;

    margin-bottom: 10px;

    margin-left: 10px;

     

    OK,这么四个方向的margin都一样,那么就可以简单的写成margin:10px;了

    margin中一些有意思的参数:

    margin:0;

    当它有一个值的时:它是4个方向都一样

    Margin:0 auto;

    当它有两个值时,第一个参数代表上下  第二个参数代表左右

    Margin:0 auto 10px;

    当它有三个值时,第一个是上  第二个是左右,第三个是下

    Margin:10px 16px 11px 9px;

    当他有四个值时,他就是四个方向,顺序是一个顺时针的顺序,故上 右 下 左 的一个顺序

     

    Padding

    同margin

     

    关于background

    如下一段背景代码:

    background-color: red;

    background-image: url(1.jpg);

    background-position: left top;

    background-repeat: no-repeat;

    我们可以把他用复合写法写成

    background:red url(1.jpg) left top no-repeat;

     

  • 相关阅读:
    Play Framework + ReactiveMongo 环境搭建
    阿里前端二面(笔试/机试)总结
    ES 6 新特性整理
    Javascript Dom 相关知识整理
    Ajax、CORS、Comet和WebSocket
    XHTML 1.0 标签语义
    Javascript知识整理
    Javascript性能优化(一)
    CSS知识整理
    绘制标准的d3图表
  • 原文地址:https://www.cnblogs.com/leejersey/p/3311364.html
Copyright © 2020-2023  润新知