CSS 规范定义缩写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。

缩写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性。使用缩写属性,Web 开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力。

css有哪些缩写属性?

1、background

background:在一个声明中设置所有的背景属性。

以下属性可采用任何顺序,且都是可选属性:background-color

background-position

background-size

background-repeat

background-origincontent-box(默认)

border-box(设置width和height时包含内边距和边框)

background-clip

background-attachment

background-image

(顺便说一句,background-size设置百分数时,第一个数相对于父元素的width,第二个相对于父元素的height,如果只设置一个,第二个为auto)

2、border

border:在一个声明中设置所有的边框属性。

可设置的边框属性:border-width:指定边框宽度

border-style:指定边框样式

border-color:指定边框颜色

顺序任意,除了border-style必须设置外,其余值可以省略为默认值。只能设置全局边框,可以用border-top、border-left等简写属性来覆盖修改局部

3、border-bottom

border-bottom:在一个声明中设置所有的下边框属性。

可设置的下边框属性:border-bottom-width:指定底部边框宽度

border-bottom-style:指定底部边框样式

border-bottom-color:指定底部边框颜色

4、border-left

border-left:在一个声明中设置所有的左边框属性。

可设置的左边框属性:border-left-width规定左边框的宽度。

border-left-style规定左边框的样式。

border-left-color规定左边框的颜色。

5、border-right

border-right:在一个声明中设置所有的右边框属性。

可设置的右边框属性:border-right-width规定右边框的宽度。

border-right-style规定右边框的样式。

border-right-color规定右边框的颜色。

6、border-top

border-top:在一个声明中设置所有的上边框属性。

可设置的上边框属性:border-top-width规定上边框的宽度。

border-top-style规定上边框的样式。

border-top-color规定上边框的颜色。

7、outline

outline:在一个声明中设置所有的轮廓属性。

可设置的轮廓属性:outline-color规定边框的颜色。

outline-style规定边框的样式。

outline-width规定边框的宽度。

8、font

font:在一个声明中设置所有字体属性。

字体属性主要包括下面几个font-style(字体样式):normal(正常)、italic(斜体)、oblique(倾斜);

font-variant (字体变化): normal(正常)、small-caps(小体大写字母);

font-weight (字体粗细):normal(正常)、bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);

font-size(字体大小):可通过多种不同单位(比如像素或百分比等)来设置, 如:12px,12pt,120%,1em;

font-family(字体类型):“Arial”、“Times New Roman”等;

如果用 font 属性的话,就可以把几个样式进行简化,减少书写的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):font:font-style | font-variant | font-weight | font-size/line-height | font-family

9、margin

margin:在一个声明中设置所有外边距属性。该属性可以有1到4个值。

示例:margin:10px 5px 15px 20px;上边距是 10px

右边距是 5px

下边距是 15px

左边距是 20pxmargin:10px 5px 15px;上边距是 10px

右边距和左边距是 5px

下边距是 15pxmargin:10px 5px;上边距和下边距是 10px

右边距和左边距是 5pxmargin:10px;所有四个边距都是 10px

10、padding

padding:在一个声明中设置所有内边距属性。该属性可以有1到4个值。

示例:padding:10px 5px 15px 20px;上填充是 10px

右填充是 5px

下填充是 15px

左填充是 20pxpadding:10px 5px 15px;上填充是 10px

右填充和左填充是 5px

下填充是 15pxpadding:10px 5px;上填充和下填充是 10px

右填充和左填充是 5pxpadding:10px;所有四个填充都是 10px

11、list-style

list-style:在一个声明中设置所有的列表属性。

可以设置的属性(按顺序):list-style-type设置列表项标记的类型。

list-style-position设置在何处放置列表项标记。

list-style-image使用图像来替换列表项的标记。

initial将这个属性设置为默认值。

注:可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

更多web开发知识,请查阅 HTML中文网 !!

html可以简写的属性,css有哪些缩写属性?相关推荐

  1. css text top,text-align属性(css中文本对齐属性)

    text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...

  2. html text align属性,CSS中的text-align属性怎么用

    CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码 在此处显示文字 效果 ...

  3. html scale属性,CSS中的zoom属性和scale属性的用法及区别

    CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性 语法: zoom:normal ...

  4. html页面透明度属性,css透明度是什么属性?

    css透明度属性指的是opacity属性:opacity属性可以设置一个元素了透明度级别.下面本篇文章就来给大家介绍一下CSS opacity属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大 ...

  5. html中fixed属性,css fixed固定定位属性

    [实例介绍] css fixed固定定位属性 当容器的position属性值为fixed时,这个容器即被固定定位了.固定定位和绝对定位非常 相似,不过被定位的容器不会随着滚动条的拖动而变化位置.在视野 ...

  6. html输入框颜色属性,css 修改input输入框属性

    1.修改输入框颜色背景色等 input[type=text] { width: 340px; padding: 0 25px; height: 48px; border: 1px solid #f2f ...

  7. CSS 清理浮动 clear属性

    虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用.浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置. 首先,看看父元素的高度塌陷.假设有一个容器,其中两个子元素,一个子元 ...

  8. css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  9. css中文本指什么,CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  10. 可阅读性html css,css有继承性的属性有哪些?

    继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性. 继承性的作用:给父元素设置一 ...

最新文章

  1. python compiler库_Python之compiler:compiler库的简介、安装、使用方法之详细攻略
  2. 有趣分享:国内产业图谱
  3. Java中List和Map接口之间的区别
  4. padavan安装php,求助!帮忙解决newifi3路由器安装hiboy老毛子系统后开启onmp后打开phpmyadin出错!...
  5. DevexPress checkedit 多选解决方案(原创)
  6. 【综合类型第 16 篇】W3School 离线手册最新版下载
  7. Vscode ssh远程连接失败解决办法
  8. Android FileOutputStream FileInputStream 读写问题记录
  9. react native 面试题
  10. 软件测试职位概要,系统测试工程师职位描述
  11. 怎么把PDF拆分开成一张一张的
  12. PageHelper处理分页问题,total总数不对
  13. 删除浏览器的cookie
  14. linux 鼠标中键多余字符,取消Linux下的鼠标中键粘贴功能
  15. Blazor 从入门到放弃
  16. 微信公众号支付--3--接收微信支付异步通知
  17. 获取安卓设备信息:机型、系统版本号、分辨率、运营商、联网方式、IMEI、MEID、MAC地址
  18. 融资租赁行业2020年上半年发展状况
  19. python用while打印菱形_python 使用while循环输出*组成的菱形实例
  20. OKR——Objectives and Key Results

热门文章

  1. JQuery淡出淡入动画
  2. centos6 yum源失效解决方法
  3. 推送V3 - Vue + Layim + Websocket 实践笔记
  4. 简单谈谈阿里云和腾讯云的差别
  5. Pytorch聊天机器人
  6. 电商后台系统:管理后台之账号管理(一)
  7. python实现微信自动投票_Python——开发一个自动化微信投票器【附代码实例方法】...
  8. 一些有趣但少有人知的 Python 特性
  9. 淘宝买家秀后台操作与各场景展示逻辑
  10. 织梦搜索页是那个php,修改织梦DEDECMS搜索页支持dede标签调用的方法