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

男娘i 2021-09-28 02:38 272阅读 0赞

# 一、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教程代码下载][CSS]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[CSS]: https://github.com/longjiahao666/Web/tree/master/Code1/css
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/76806cf5b64043c98329f3d846a467ff.png