HTML+CSS学习笔记 (八)

CSS代码缩写

盒模型代码简写：
定义三个值：1（上）2（左右）3（下）
定义两个值：1（上下） 2（左右）
注意：padding、border的缩写方法和margin是一致的。

颜色缩写：
当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

CSS中的颜色表示可以分为两种：

文字表示：
color:red

RGB表示（red,green,blue）：
a color:rgb(100%,50%,50%) [范围是0-100%]

b color:rgb(255,1,15) [范围是0-255]

c color:#ccc [这个是16进制表示法，可以缩写]

字体缩写：

例如：
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
缩写为：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

长度值

1、像素：指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用的与显示器的实际像素值有关。

2、em：就是本元素给定字体的 font-size 值。

如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

注意：**但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础**。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比：

例如：p{font-size:12px;line-height:130%}

**设置行高（行间距）为字体的130%**（12 * 1.3 = 15.6px）。