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
CSS常见简写规则整理的更多相关文章
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
- css font简写规则
是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...
- css的简写规范
css简写有这么几个好处,第一个也是最大的好处就是减少了代码的数量.第二个就是方便自己的编写吧. 下面来介绍几个常见的css属性简写规则. 一.字体(font) font-style:设置字体的样式. ...
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- div+css通用兼容性代码整理
一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...
- 改变CSS世界纵横规则的writing-mode属性
改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...
- css常见属性
css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...
- CSS基础【2】:CSS常见属性
CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...
- css的命名规则
本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...
随机推荐
- MySQL数据库语法-多表查询练习一
MySQL数据库语法-多表查询练习一 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要介绍的多表查询的外键约束,以及如何使用外链接和内连接查询数据信息. 一.数据表和测试 ...
- java基础-引用数据类型之一维数组(Array)
java基础-引用数据类型之一维数组(Array) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数组的定义 1>.为什么需要数组 保存一个数据可以定义一个变量,如果要保 ...
- Showbo.js弹窗实现(jquery)
一.搭建环境 下载showBo.js和showBo.css 下载链接:https://pan.baidu.com/s/1iUUlKXFNXCBEvBnds4ECIA 密码:its4 显示效果图: 二 ...
- UIScrollView增加回弹效果
项目中经常要增加上下滑动回弹的效果: self.scrollView.alwaysBounceVertical = YES;
- const引用与非const引用
void print1(int a) { cout<<a<<endl; } void print2(const int& a) { cout<<a<& ...
- NO.11天作业
打印uid在30~40范围内的用户名.awk -F: '$3>=30 && $3<=40{print $1,$3}' /etc/passwd 打印第5-10行的行号和用户名 ...
- Matlab debug
输入彩色,imwrite保存黑白图片,imwrite的维度错误. 程序如下,正常图像,少了一个维度imwrite,把图片展开,是一个二维的灰色图像(R=G=B),.如果限定了第二维,也是一个灰色图像. ...
- MongoDB - MongoDB CRUD Operations, Delete Documents
Delete Methods MongoDB provides the following methods to delete documents of a collection: Method De ...
- python 9*9 乘法表
row = 1 while row <= 9: col = 1 while col <= row: print('%d*%d=%d'%(col, row, row*col), end='\ ...
- 基本控件文档-UIKit结构图
CHENYILONG Blog 基本控件文档-UIKit结构图 Fullscreen UIKit结构图 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博htt ...