浅谈CSS中的缩写

约定不等于承诺〃 2022-06-12 01:19 228阅读 0赞

## 盒模型代码简写 ##

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

## 颜色值缩写 ##

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

## 字体缩写 ##

网页中的字体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中间要加入“/”斜扛。  
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

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

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

## 颜色值 ##

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

1、英文命令颜色

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

## 长度值 ##

长度单位总结一下，目前比较常用到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（也就是两个字体大小的距离）。

下面注意一个特殊情况：

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

p{font-size:14px}
    span{font-size:0.8em;}
    <p>以这个<span>例子</span>为例。</p>

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

3、百分比

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中CSS引用浅谈

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 一、元素[选择器][Link 2] 1、书写格式：标记名\

布满荆棘的人生/ 2024年03月30日 13:38/ 0 赞/ 67 阅读

相关浅谈CSS中的Position(定位)

文章目录一、position的属性值二、static 定位三、fixed 定位四、relative 定位

落日映苍穹つ/ 2022年12月19日 08:50/ 0 赞/ 146 阅读

相关浅谈CSS中的缩写

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应

约定不等于承诺〃/ 2022年06月12日 01:19/ 0 赞/ 229 阅读

相关浅谈CSS布局

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float)

r囧r小猫/ 2022年06月12日 01:18/ 0 赞/ 270 阅读

相关浅谈CSS样式

CSS全称为“层叠样式表 (CascadingStyle Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：

向右看齐/ 2022年06月11日 22:55/ 0 赞/ 201 阅读

相关【CSS】浅谈CSS中的包含块

今天同大家浅谈一下css中的包含块。鄙人才疏学浅，文中误笔，还请不吝指出。包含块是什么一般情况下，在css中，一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被

矫情吗；*/ 2022年06月05日 10:20/ 0 赞/ 303 阅读

相关【CSS】浅谈CSS中的calc函数

在css中，我们常常需要计算功能。以前我们常常使用js来进行计算，然后布局，但是为了更符合MVC结构的概念，css中calc函数已经开始被广泛使用。 calc函数允许进行任何

分手后的思念是犯贱/ 2022年06月05日 10:13/ 0 赞/ 242 阅读

相关 html+css浅谈

自从来到兄弟连还没上过战地日记呢，心里有点不甘，就把自己昨天写的日记拿来和大家分享一下，是关于html和css的方面的，写的不好，大家不好口水。这 2天完成了2个网站的首

灰太狼/ 2022年05月15日 09:17/ 0 赞/ 205 阅读

相关浅谈Normalize.css

综述 Normalize.css vs Reset.css 安装、下载综述 Normalize.css是一种CSS r

小鱼儿/ 2022年03月18日 10:40/ 0 赞/ 291 阅读

相关浅谈Normalize.css

转载自简书：https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提

Dear 丶/ 2021年09月29日 13:38/ 0 赞/ 427 阅读