样式缩写——css技巧(一)

一、margin和padding缩写

例:

.sample-margin1{

margin-top:15px;

margin-right:20px;

margin-bottom:12px;

margin-left:24px; 

}

缩写后:

.sample-margin1{

margin:15px 20px 12px 24px; 

}

padding与margin缩写形式一样

缩写规则:按顺时针方向来写(按上、右、下、左的顺序),属性之间由空白隔开。如果相关属性相同,可以按以下的写法:

.sample-margin2{

margin:上 右 下 左;

margin:上 左右 下;

margin:上下 左右;

margin:全部(等于上右下左);

//padding同理

}

二、border缩写:

例:

.sample-border1{

border-top-width:1px;

border-top-style:solid;

border-top-color:#cccccc;

}

.sample-border2{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

缩写后:

.sample-border1{

border-top:1px solid #ccc;

}

.sample-border2{

border:1px solid #ccc;

}

如果是3条边有颜色,为了简化代码你可以这样写:

.sample-border3{

border:1px solid #ccc;

border-top:none;

//左、右、下边框有颜色,上边框为空

}

缩写规则:如果四条边的颜色和宽度相同可以简写成以上形式,16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#0044DD可以缩写为#04D;其他颜色值同理。字体宽度normal用400代替,bold用700代替。

三、background缩写

例:

.sample-background{

background-color:#ccc;

background-image:url(sample.gif);

background-repeat:repeat-x;

background-attachment:scroll;

//scroll是背景图像随对象内容滚动为默认值,可以不写

background-position:top right;

}

缩写后:

.sample-background{

background:#ccc url(sample.gif) repeat-x top right;

//属性依次为:颜色-背景图-X轴平铺-背景图像位置(背景图片路径不需要加引号)

}

四、font缩写:

例:

.sample-font{

font-style:italic //设置或检索对象中的字体样式

font-variant:normal //设置或检索对象中的文本是否为小型的大写字母

//前2项如果没有特殊设置,可以不写,用默认值即可

font-weight:bold;

font-size:12px;

line-height:20px;

font-family:"宋体";

}

缩写后:

.sample-font{

font:bold 12px/20px "宋体";

//属性依次为:字体的粗细 - 字体大小/行高 - 文本的字体

}

五、list-style缩写:

例:

.sample-list{

list-style-image:url(sample.gif);

list-style-position:outside;

list-style-type:circle;

}

缩写后:

.sample-list{

list-style:circle inside url(sample.gif);

}

属性依次为:预设标记 - 标记位置 - 标记图片(标记图片路径不需要加引号),预设标记和标记图片可二选一,如果二者都定义,则标记图片覆盖预设标记,不过在项目中基本没有都不用,都是用背景图片进行定义

六 其他缩写:

1、样式明确定义单位,除非值为0

.sample-uint{

width:100px;

height:50px;

font-size:9pt;

//值为0可不填单位

margin:0;

padding:0;

}

2、可以给标签定义通用属性,减少重复定义

p{...}

h1{...}

img{...}

3、给所有能重复使用的元素定义类

.red{...}

.nav{...}

.tfoot{...}

4、为网站缩写初始化样式,避开浏览器的不兼容问题,使用组选择器减少重复定义

body, dl, dt, dd, ul, ol, li,

div, pre, code, p, blockquote,

form, fieldset, legend, input,

button, textarea, label{

margin:0;padding:0;

}

body{

font:12px/1.5 Tahoma,Helvetica,Arial,‘宋体‘,sans-serif;

}

html{

color:#404040;

background:#fff;

overflow-y:scroll;

}

5、取消class和id前的元素限定

.sample-cancel-limit{

div#content {...}

fieldset.details {...}

//改为

#content {...}

.details {...}

}

在给一个元素定义class或者id,你可以省略前面的元素限定,因为id在一个页面里是唯一的,页class可以在页面中多次使用,你限定某个元素意义不大,还会增加文件的尺寸。

如果你只是想把相关模块的样式放在一起,也为了看起来清晰,也可以这么做,自己把握,不建议这样写。

6、不需要重复定义可继承的值

CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。具体哪些属性可以继承,哪些不能继承可以百度一下。

7、多重class定义

.one{...}

.two{....}

...

如果样式表中有相关的样式,可以给标签另写样式,实现定义多个class来减少代码冗余和重用效率,多个样式间用空隔隔开。

8、使用子选择器

.son{...}

.son li{...}

.son li a{...}

合理的使用子选择器可以帮助你节约大量的class和id定义,更有效的控制页面元素。

9、删除空格和注释

在发布网站的时候,你可以删除CSS文件里的空格和注释并压缩CSS文件,这样可以减小文件的大小

10、其他

网站也有很多相关的缩写文章,高手们都会有总结自己的缩写技巧,具体缩写规则可以根据实际项目里的情况而定。规则是人的,规则也是灵活的。

时间: 2024-10-06 02:08:37

样式缩写——css技巧(一)的相关文章

css学习の第六弹—样式设置小技巧

一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class="txtCenter">我想要在父容器中水平居中显示.</div></body> css代码:<style> .txtCenter{ text-align:center; }</style>>>2.块状元素(定宽)通过设置&quo

你应该知道的25个非常有用的CSS技巧

在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助,经验丰富的CSS程序员通常都知道这一点,但初学者不要错过了! 这里有25个非常有用的CSS技巧,将帮助你解决让你棘手的CSS代码问题.你可以直接使用到你现在的项目当中 1.更改文本突出显示颜色(Change Text Highlight Color) 您可能不知道!使用

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值

CSS技巧二

元素缩写 font中属性的放置顺序是严格遵守的,否则不会生效. Font:font-style font-weight font-size font-familiy;(注:font-size和font-family是font的必须属性,并且font-size一定要放在font-family的前面) Margin:margin-top margin-right margin-bottom margin-bottom ; Padding:padding-top padding-right paddi

CSS技巧-rgba函数的妙用

先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属性(opacity)的区别:使用 opacity,所有子元素都会受到影响: 在实际开发中,有些地方用rgba()函数也更加方便:为网站 header 定制主题.文章标题.按钮.渐变.子元素.调色盘中的深/浅效果.图像效果. 最后也指出使用rgba()需要注意的地方:比如兼容性.颜色对比检查等等. 原

css技巧一

隐藏元素 display:none,隐藏元素,并删除其所在的位置. visiblity:hidden 隐藏元素,还占用其位置. 边框问题 img放入a元素里,img会出现边框问题.通过reset img的border样式即可解决. 影藏部分内容 可以通过设置height高度和overflow来实现.也可以通过display;:none来实现. 置换元素和非置换元素 置换元素(replaced element)主要是指 img, input, textarea, select, object 等这

20个很有用的CSS技巧

导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%

网页设计师必备的10个CSS技巧

CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好.当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得好好注意了.这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Ca

你很熟悉CSS,却没掌握这些CSS技巧

转载来自 http://www.html5cn.org/article-9294-1.html 做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开发中起到功不可没的作用,在我们频繁使用CSS过程中掌握一些技巧是必须的,本文分享了22个方便且很重要的CSS技巧,值得收藏! 混合模式 目前,Firefox 和 Safari 开始支持混合模式,就像 Photoshop 一样.Chrome 和 Opera 也支持,只是有些差异. 你可以创建不同的样式