美文网首页
使用CSS缩写

使用CSS缩写

作者: 如雨随行2020 | 来源:发表于2021-12-21 02:19 被阅读0次

CSS缩写
零、background缩写
1、background属性的值的书写顺序官方没有强制标准。
2、为了可读性,一下顺序是符合CSS书写规范的

background:background-color | background-image | background-repeat | background-attachment | background-position

#content {
    background: #EDEDED url(img/bg.gif) no-repeat 30% 20px;
}

一、font字体缩写

font:font-style | font-variant | font-weight | font-size | line-height | font-famliy
//只要使用font作为属性名称,后接各个属性的值即可,各个属性值之间使用空格分开,不需要的参数可以之间去掉
例如:
p{ font: italic normal bold 12px/18px 宋体}

此代码将使p对象字体成为:斜体 大小写默认、加粗、12px大小、18px行高、宋体。
因为CSS各个属性的值写法并不相同,因此直接去掉某个参数不会影响顺序;与值得关系。
但是也有意外,比如比例中的12px/18px指的是font-size和line-height。用反斜线分隔,因为
font-size与line-height的值使用的是同一套数值。
<font color=bllue size = 5>
font的简写注意事项
</font>

  1. 简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。
  2. 顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值
    <font color=red; size=5>总结:也就是说当使用font简写时,font-size和font-family是必填项,且顺序不能改变</font>

二、margin与padding边距缩写
仅以margin为例,padding与margin缩写相同
四个参数是
margin:margin-top | margin-right | margin-bottom | margin-left
一个参数和两个参数的好理解
margin: 20px;(上、下、左、右各20px。)
margin: 20px 40px;(上、下20px;左、右40px。)
p{margin: 20px 10px 100px;}
三个参数则表示margin-top = 20px, margin-left = margin-right = 10px, margin-bottom = 100px

三、border缩写
border对象是个非常复杂的对象,它包含四条边的不同宽度、颜色,yiji以及不同样式。我们对border
的缩写有三种

1.对整个对象进行border缩写
p{border:1px solid blue;}
p对象将被设置4个边均为1px宽度、实线、蓝色边框的样式。

2.对border的4个边应用单独的样式,
border-top:border-width | border-style | border-color
right bottom left都一样 例如:

p{
    border-top:1px solid blue;
    border-right:1px dashed red;
}

上边框我们设置为1px蓝色实线,右边框则是1px红色虚线。

3.对border-style,border-width以及border-color。

border-width:top | right | bottom | left
border-style:top | right | bottom | left
border-color:top | right | bottom | left

同margin和padding缩写一样,并且支持1~4个参数不同的缩写方式。

四、list列表缩写
list缩写是针对list-style-type,list-style-position等用与ul的list属性,语法如下:

list-style:list-style-type | list-style-position | list-style-image
代码示例

ul{list-style:disc outside none}

ul 对象将被设置为圆点、出现在对象外、不带图像的list-style样式。

五、颜色缩写
相同的两个16进制数可以缩写 比如:

FFFFFF缩写为#FFF #2255BB缩写为#25B

相关文章

  • 使用CSS缩写

    CSS缩写零、background缩写1、background属性的值的书写顺序官方没有强制标准。2、为了可读性,...

  • 好程序员web前端培训分享css常用属性缩写

    好程序员web前端培训分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主...

  • Emmet快速生成HTML

    缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。 使用方式 写好缩写...

  • vue2.x(指令v-bind)

    v-bind 缩写 使用v-bind来绑定css样式: 在绑定CSS样式是,绑定的值必须在vue中的data属性中...

  • Emmet快捷键

    Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。Emmet在webstorm...

  • XSS

    缩写 Cross-site scripting 的缩写是CSS,但是和我们知道的网页的CSS相同就改为了XSS。 ...

  • CSS规范 - 优化方案

    CSS规范 - 优化方案 值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性。 但并非所有的值都必须缩写...

  • 前端学习之CSS——emmet语法

    1、简介 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode...

  • H5零基础-Emment语法

    Emment语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,vscode内部已经集...

  • css代码缩写,占用更少的带宽

    css代码缩写,占用更少的带宽 在写css代码的时候,有时候会忘记css代码的缩写,故整理成文章,方便查阅 盒模型...

网友评论

      本文标题:使用CSS缩写

      本文链接:https://www.haomeiwen.com/subject/ovyraltx.html