• 外边距(margin)

简写顺序为顺时针方向(上、右、下、左),如:margin: 1px 2px 3px 4px;

其中四边都相等时可简写为一个,如:margin: 1px;

当上下、左右分别相等时,也可简写,如:margin: 1px 2px; 代表上下1px,左右2px

只有左右相等时,可简写为:margin: 1px 2px 3px;

但只有上下相等时不可简写。

  • 内边距(padding)

例:

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

规则与外边距相同,在此就不细说了。

  • 边框(border)

border:2px solid #cdcdcd;

p
{
border:5px solid red;
}

分别为border-width、border-style、border-color

除border-style必须提供之外,其它都可省略而使用默认参数,其中border-width默认为3px,border-color默认为黑色。

  • 字体(font)

  • 背景(background)

可设置属性(可选)

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image
  • 列表(list-style)

list-style:disc outside url(list.png)

分别为list-style-type、list-style-position、list-style-image

CSS常见简写规则整理的更多相关文章

  1. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  2. css font简写规则

    是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...

  3. css的简写规范

    css简写有这么几个好处,第一个也是最大的好处就是减少了代码的数量.第二个就是方便自己的编写吧. 下面来介绍几个常见的css属性简写规则. 一.字体(font) font-style:设置字体的样式. ...

  4. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  5. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  6. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  7. css常见属性

    css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...

  8. CSS基础【2】:CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

  9. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

随机推荐

  1. MatConvNet+Matlab2017a+CUDA8.0安装

    安装过程参照MatConvNet官网给出的步骤: http://www.vlfeat.org/matconvnet/install/ 1.安装CUDA8.0+cudnn6.0 参见之前的博客 2.安装 ...

  2. 详细BP神经网络预测算法及实现过程实例

    1.具体应用实例.根据表2,预测序号15的跳高成绩. 表2 国内男子跳高运动员各项素质指标 序号 跳高成绩() 30行进跑(s) 立定三级跳远() 助跑摸高() 助跑4—6步跳高() 负重深蹲杠铃() ...

  3. BP神经网络人口预测程序(matlab实现)

    自己测试人口预测的matlab实现: x=[54167    55196    56300    57482    58796    60266    61465    62828    64653  ...

  4. IAR ------- 在线调试技巧

    调试模式下,右击某一行选“Set Next Statement”,可以不执行中间程序,执行点直接到此行,用于不执行某些代码.

  5. 实验四:终极改造之使用EF

    回顾一下我们前面经过改造后的程序代码: (1)Listing.aspx:负责将Product对象集合(产品集合)按要求显示出来 (2)Repository.cs:负责读将数据库中读到的数据转换成Pro ...

  6. 「Vue」实用组件

    一.时间格式 1.安装Moment模块 npm i moment -S2.main.js中设置全局过滤器 import moment from 'moment' Vue.filter('ctime', ...

  7. linux服务器上修改oracle数据库的字符集

    linux服务器上以dba身份进入:sqlplus / as sysdba; 依次执行以下命令:shutdown immediate; startup mount; alter system enab ...

  8. js截取字符串substr和substring的区别

    定义substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符.substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法substr()        str ...

  9. soj1767.传纸条

    这道题目想了一会儿觉得不知道如何下手,上网看了下资料,原来这道是一道非常经典的题目. 设 f [ k ][ i ][ j ] 表示第 k 步,第 1 条路径走到第 i 行,第 2 条路径走到第 j 行 ...

  10. HDU 1422 重温世界杯 DP题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1422 解题报告:DP题,要使旅行的城市最多,关键是要选出一个城市作为开始,以这个城市作为开始的城市时, ...