CSS常见简写规则整理

  • 外边距(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

时间: 2024-12-29 11:46:01

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

CSS常见布局问题整理

实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高)) 使用flex属性 使用tranfrom做相对位移的调节 1) 只适用: 宽高已定 设置position: absolute(父元素记得设置: relative), 然后t

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

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体

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

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

CSS属性简写汇总

CSS代码编写的过程中,代码数量非常庞大,许多属性会被反复使用,这样来来回回地敲打同样的属性名称会占用不少的时间.作为一名优秀的web前端人员,应当了解记忆各种属性的简写方式,用以提高自身的工作效率,缩减代码数量,增强可读性.作为一名刚接触不久的初学者,在网上搜集资料,整理了常用属性的简写模式,供大家参考. 1.颜色color简写 在颜色值采用16进制,且每两位的值相同,可以简写一半. 1 color : #113366 ; 简写为 1 color : #136 ; 2.边距margin和pad

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

CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weight 作用:规定文字粗细 格式:font-weight: bold; 单词取值: bold 加粗 bolder 比加粗还要粗 lighter 细线, 默认就是细线 数字取值: 100 - 900之间整百的数字 font-size 作用:规定文字大小 格式:font-size: 30px; 取值:px

java常见命名规则

常见命名规则: 包:类似文件夹,用于把相同的类名进行区分(小写) 单级:例如:student 多级:例如:cn.student 类或者接口: 一个单词:单词首字母大写,例如:Student 多个单词:每个单词首字母大写,例如:HelloWorld 方法或变量: 一个单词:单词首字母小写,例如:main 多个单词:从第二个单词开始,每个单词首字母大写,例如:studentAge 常量: 一个单词:全部大写,例如:PI 多个单词:每个字母都大写,用  _   隔开,例如:STUDENT_MAX_AG

java小提示:标示符常见命名规则、常用ASCII

标示符常见命名规则: A:包:全部小写B:类或者接口:首字母大写:StudentC:方法或者接口:首字母小写,第二个单词开始开始,每个单词首字母大写:studentAgeD:常量:全部大写,多个单词之间用下划线 STUDENT_NAME 常用ASCII:'a' 97                'A' 65                '0' 48

FindBugs规则整理

FindBugs规则整理 FindBugs是基于Bug Patterns概念,查找javabytecode(.class文件)中的潜在bug,主要检查bytecode中的bug patterns,如NullPoint空指针检查.没有合理关闭资源.字符串相同判断错(==,而不是equals)等 一.Security 关于代码安全性防护 1.Dm: Hardcoded constant database password (DMI_CONSTANT_DB_PASSWORD) 代码中创建DB的密码时采

CSS的“层叠”规则的总结

当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下CSS的层叠规则. 概念:CSS中的层叠就是让多个来源的样式叠加在一起,然后结合样式的特殊性(后面详细介绍).继承性,确定最终应用的样式. 样式的来源分五种: 1.浏览器默认的样式: 2.用户自定义样式.一些页面中会提供一些让用户自定义字体大小颜色等的快捷键: 3.外部样式,即<link>引用的CS