下面是“常用CSS缩写语法总结”的完整攻略:
常用CSS缩写语法总结
在编写 CSS 样式时,经常会使用到缩写语法,简化书写,并且提高了代码的可读性。本文总结了常用的 CSS 缩写语法,帮助大家更快速地编写 CSS 样式。
缩写语法说明
基本缩写语法
基本缩写语法用于设置一个样式的属性。基本语法的形式为:
属性名称:属性值;
简写缩写语法
简写缩写语法用于同时设置多个样式属性。简写语法的形式为:
属性1:属性值1;
属性2:属性值2;
...
值的简写语法
值的简写语法允许在一个属性中设置多个值。值的简写语法的形式为:
属性名称:值1 值2 值3;
常用的CSS缩写语法
基本缩写语法
- 字体样式缩写
font: font-style font-variant font-weight font-size/line-height font-family;
示例:
font: italic small-caps bold 16px/1.5 sans-serif;
- 边框缩写
border: border-width border-style border-color;
示例:
border: 1px dotted #ccc;
- 内外边距缩写
margin: 上 右 下 左;
padding: 上 右 下 左;
示例:
margin: 5px 10px 15px 20px;
padding: 5px 10px;
简写缩写语法
- 同时设置上下左右内外边距
margin: 上下 左右;
padding: 上下 左右;
示例:
margin: 5px 10px;
padding: 5px 10px;
- 边框缩写
border: border-width border-style border-color;
示例:
border: 1px dotted #ccc;
- 背景缩写
background: 背景颜色 背景图片地址 背景图片重复方式 水平偏移量 垂直偏移量;
示例:
background: #f1f1f1 url(bg.gif) repeat-x 0 0;
值的简写语法
- 边框半径
border-radius: 上左 下右;
示例:
border-radius: 5px 10px;
- 盒阴影
box-shadow: 水平偏移量 垂直偏移量 模糊程度 阴影大小 阴影颜色;
示例:
box-shadow: 2px 2px 5px 2px #666;
以上就是常用 CSS 缩写语法的总结了。使用这些缩写语法可以方便地编写 CSS 样式,提高工作效率。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:常用CSS缩写语法总结 - Python技术站