`
Virgo_S
  • 浏览: 1137612 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

10、CSS的属性缩写

    博客分类:
  • CSS
阅读更多
  一些CSS属性允许使用一串值代替许多属性,值使用空格分开。

  margin,pdding和border-width允许合并 margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
  所以下面的:
p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

  可以写成:
p {
    border-width: 1px 5px 10px 20px;
}

  border-width,border-color,border-style同样可以合并到一起,例如:
p {
    border: 1px red solid;
}

  (同样可以运用到border-top,border-right等等)
  如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。

  字体属性同样可以使用font属性合并。
p {
    font: italic bold 1em/1.5 courier;
}

  (上面"/1.5"是 line-height的值)
  把它们总结在一起,试下下面的代码:
p {
    font: 1em/1.5 "Times New Roman", times, serif;
    padding: 3em 1em;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 1em 5em;
}

  推荐大家使用缩写形式,促进CSS代码的精简、优化!
分享到:
评论

相关推荐

    css3属性选择器,背景缩写

    css3属性选择器,背景缩写 css3属性选择器,背景缩写 css3属性选择器,背景缩写

    css属性详解说明,css属性详解说明

    background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...

    CSS属性简写整理

    在书写css过程中尽量简写css属性,有助于写出高效整洁的css,本文将常用的一一列出,需要的朋友可以参考下

    前端教程:29 CSS属性的简写

    千锋Web前端教程_29_CSS属性的简写

    CSS属性简写和选择器的优先级问题

    主要介绍了CSS属性简写和选择器的优先级问题,是CSS入门学习中的基础知识,需要的朋友可以参考下

    CSS3 calc()会计算属性详解

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加(+)、...

    css通用缩写语法总结(font字体篇)

    font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下: font:font-style font-variant font-weight font-size line-height font-family

    CSS3样式表- 列表与表格属性.pptx

    简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 1 指定列表符号的...

    Web前端与移动开发之css字体属性.txt

    5.字体的复合属性(简写方式 节约代码) body { font: font-style font-weight font-size/line-height font-family; } 不能更换顺序 属性间以空格隔开 不需设置的属性可以省略(取默认值) font-size font-...

    CSS常用属性缩写实例

    相关CSS缩写文章:CSS代码缩写实例以及CSS缩写原因总结 CSS缩写6个图例总结margin margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; 代码简化为:margin:1px margin-top:1px; margin...

    10个CSS简写/优化技巧整理

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介绍常见的CSS简写规则: 一、盒子大小 这里...

    CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)

    简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性,可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。 font: italic bold 18px/1.2 ...

    div+css有实例,易学易懂

    5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容显示的visibility 属性 5.7.5 使用...

    CSS常见属性缩写与全写对比

    布局过程中总是离不开css的属性,在书写过程中高手与新手的区别是很大的,本文整理了一些常见css属性的缩写及全写对比,喜欢的朋友可以收藏下

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...

    《CSS设计彻底研究》光盘源码

     3.2.3 实验2——属性的缩写形式   3.2.4 实验3——边框与背景   3.3 内边距(padding)   3.4 外边距(margin)   3.5 盒子之间的关系   3.5.1 HTML与DOM   3.5.2 标准文档流   3.5.3 div ...

    CSS3样式表-CSS3动画.pptx

    规定至少以下两项CSS动画属性,可以实现动画效果: 动画名称 animation-name 动画时长 animation-duration 可以使用简写属性animation同时设置动画名称和动画时长 2 第一步:设置动画规则 第二步:选择器绑定动画...

Global site tag (gtag.js) - Google Analytics