css 简写技巧

一些css  简写技巧

1.font 的简写  font 有可选选项和必选选项 如 font-style , font -weight , font-variant ,可写可不写, 但如果写的话必须前置 放到 font-size 和 font-family 前面。 而必选的  font-family   必须放到最后面

p{
 font-style:italic;
 font-weight:bold;
 font-variant:small-caps;
 font-size :12px;
 font-family:Arial;
}
可以简写成
p{
font:italic bold small-caps 12px Arial;
}

 2 background 的简写

.div{
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top right;
}
简写成
.div{
background: #000 url(images/bg.gif) no-repeat fixed top right;
}

 

3.border

.div{
border-width: 1px;
border-style: solid;
border-color: #000;
}
简写成
.div{
border:1px solid #000
}

4.list-style

li{
list-style-type:disc;
list-style-position:inside;
list-style-image:url(‘a.png‘);
}
简写成
li{
list-style:disc inside url(‘a.png);
}

5.margin padding

.div{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
简写成
.div{
margin:1px , 2px ,3px ,4px;//从top 开始的顺时针
}//margin:5px 10px; 上下5px 左右10px//margin:1px 2px 3px ;上边距1px  左右2px 下边距3px//padding 以此类推

  

 

时间: 2024-10-13 11:18:53

css 简写技巧的相关文章

10个CSS简写技巧让你永远受用

转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处.臃肿而杂乱的CSS样式表会使你遇到问题是难以调试.尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降. 今天,暴风彬彬整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Drea

10个CSS简写/优化技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写. CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同. 盒子有上下左右四个方向,每个方向都有个外边距: margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4p

CSS简写及如何优化技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同.盒子有上下左右四个方向,每个方向都有个外边距: margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

2天驾驭DIV+CSS (技巧篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

CSS hack技巧大全

CSS hack技巧大全[转]:http://www.duitang.com/static/csshack.html 常用CSS书写技巧和CSS HACK技巧[转]:http://www.cnblogs.com/pittzh/archive/2009/07/23/1529769.html

css使用技巧

1) 网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行,把版式破坏,这样我们就要参考以下样式:word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值. 2) 文字过长要出现省略号样式如下: white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 3) 一个完整的表单应该包括: <fieldset><legend></legend><lab

CSS简写总结

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同. 盒子有上下左右四个方向,每个方向都有个外边距: 复制代码 代码如下: margin-top:1px; margin-right:2px; margin-bottom:3px; mar