前端开发系列（十三）CSS教程（8）

一、CSS代码缩写，占用更少的带宽

1.1、颜色值缩写

关于颜色的css样式是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1： p{color:#000000;}
可以缩写为： p{color: #000;}
例子2： p{color: #336699;}
可以缩写为： p{color: #369;}

1.2、字体缩写

网页中的字体 css 样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

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 属性，其他的属性 (如 font-weight、font-style、font-variant、line-height) 如未指定将自动使用默认值。
2、 在缩写时 font-size 与 line-height 中间要加入**“/”斜扛**。
一般情况下因为对于中文网站。

二、单位和值

2.1、颜色值

在网页中的 颜色 设置是非常重要，有 字体颜色（color）、背景颜色（background-color）、边框颜色（border） 等，设置颜色的方法也有很多种：
1、英文命令颜色： p{color:red;}
2、RGB颜色： p{color:rgb(133,45,200);}
3、十六进制颜色： p{color:#00ffff;}

2.2、长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS 规范中假设 “90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用 像素（px） 作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px； 如果 font-size 为 18px，那么 1em = 18px。 如下代码：p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
3、百分比
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
p{font-size:12px;line-height:130%}

---

此篇博客代码下载地址：CSS教程代码下载
博主的所有博客目录如下：博客文章目录汇总
Java面试部分的博客目录如下：Java笔试面试目录

转载请标明出处，原文地址：https://blog.csdn.net/weixin_41835916 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。