能猫生活记录

首页|seo优化|网络技巧|网络营销|微信营销|营销管理|学习记录|心情随笔

CSS简写方法-CSS学习笔记1

每位编写CSS的页面的用户,都喜欢简洁明了的感觉。简洁的好处不言而喻,CSS文件小了更加容易阅读。现在把CSS简写方法的八个规则总结出来,希望大家可以学习到。

1、颜色的缩写

CSS中对于颜色的表现形式有以下4种

0~255之间的整数,如果(RGB(125,0,255)),具体表现形式是:P{color:RBG(125,0,255,);}

0%~100%之间的数字,但是数字一定是整数,如果:RGB(25%,0%100%),具体的表现形式如下:P{color:RBG(25%,0%100%);}

注意:用户系统的色盘值会根据用户系统所设定的颜色值而改变,具体的颜色值可以查阅CSS手册的附录中的颜色表。

了解了怎么对颜色进行声明之后,需要进一步了解怎样去缩写颜色值。颜色的缩写方式很简单,只能对十六进制的颜色进行简单的缩写。十六进制的表现形式为#RRGGBB,如果RR/GG/BB这三种颜色是由三种两个相同的值组成的颜色值,那就可以缩写成为#RGB,如#FF00EE,就可以缩写成:#F0E的形式、

简写的前提必须是成对出现的值才可以,例如:#EE003F这样的颜色是不可以进行缩写的,必须是RR/GG/BB这3组的颜色都是成对的才可以缩写。

 

2、单位值的缩写

对于CSS单位值的省略主要体现在数值为0的时候,无论是什么形式的单位都可以省略,如:width:0px;,可以简写为width:0;.

 

3、内外补丁的简写

内补丁padding以及外补丁margin是使用率非常高的属性,对其缩写的掌握可在代码量及效率上有所提高。内外补丁属性有四个属性,分别是:上右下左,即:padding-top、padding-right、padding-bottom、padding-left,以及margin-top、margin-left、margin-bottom、margin-left,将其简写的话就是将四个属性合并成为一个padding和margin即可。

内外补丁按照上右下左的顺时针方式可以罗列为四种简写方式:

 

4、 边框的简写

边框属性是个复合属性,相对而言比较特殊,分别由border-width、border-style、border-color 3个属性构成,如:

div{

border-width:1px;定义边框的大小为1px;

border-style:solid:定义边框的样式为实线边框;

border-color:#ff0000;定义边框的颜色为红色

}

边框的简写方式为:div{ border:1px solid #f00; } 只需要记住border属性的基本与法式:border:border-width、border-style、border-color 即可。

div{

border-width:1px;定义边框4个方向大小都是1;

border-style:solid dashed、double;定义上框为实线、左右框为虚线、下框为双实线;

border-color:#f00 #000;定义上下框为红色,左右框为黑色。

}

是否觉得这三个属性的定义方式有点眼熟呢?在内外补丁的简写方式和他一样都是按照上右下左顺时针方式排列定义的。

 

5、背景的简写

背景background是在页面表现中出现频率很高的属性,页面中的很多图片都是存在背景中的,并不全部是用img标签来实线的例如:

body{

background-color:#f00,定义背景颜色为红色;

background-image:url(1.gif) 自定义背景图片。

background-repeat:no-repeat;背景图片无平铺效果

background-attachment:fixed;背景图片固定,不随页面滚动而滚动。

background-posittion:0 0;定义背景图片的位置,必须先定义背景图片之后才会生效。

}

如此繁琐的属性写法不仅让代码量变多,而且不易于阅读,简写方法:

div{ background:#f00 url(1.gif) no-repeat fixed 0 0;} 就可以了。

提高代码的可读性并不难,background是一个䄦属性,可以将背景中所有可能用到背景属性定义到一个属性当中。

定义背景不需要将所有的属性都要写上,浏览器会根据未定义的默认属性来表现具体如下:

background-color:transparent  背景颜色默认为透明的;

background-images:none;背景图片默认不存在。

background-repeat:repeatl 背景图片默认是平铺的;

background-attachment:scroll 背景图像是岁对象默认滚动的;

background-posittion:0% 0%

 

6、字体的简写

字体是一个页面中最重要的属性之一,如何最简单的写出来也是一种学问

body{

font-style:iatlic:定义字体为斜体;

font-variant:small-caps:定义字体为小型的大写字母,针对于英文;

font-weight:bold:将文字加粗

font-size:12px;字体的大小为12px;

line-heigt:140% 字体的行高为140%

font-famile:“微软雅黑”字体的名称为微软雅黑;

}

字体的简写方法body{font:italic small-caps bold 12px/140% "微软雅黑" }

注意:文字大小和行高之间不能用空格分开,必须要以斜杠进行

 

6、表的简写

有序列表ol和无序列表ul是页面中经常用到的元素,在CSS中对其设置的必不可少的是list-style属性。list-style属性是符合属性,该属性是由list-style-image(列表前的图片) 、list-style-position(作为对象列表项标记的定位)及list-style-type(对象列表项所使用的预设标记)三个属性构成。

li{list-style:url(image.gif) inside square} 

 

 

 

 

Tags:css,css学习笔记,CSS简写 | 2017/8/26 | 发表评论

相关文章:

Powered By Z-Blog