10个CSS简写/提升技能梳理

日期:2021-03-18 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

CSS简写便是指将多行的CSS特性简写成1行,又称为CSS编码提升或CSS缩写。CSS

简写的最大益处便是可以明显降低CSS文档的尺寸,提升网站总体特性,更为非常容易阅读文章。 下面详细介绍普遍的CSS简写标准:

1、盒子尺寸

这里关键用于两个特性:margin和padding,大家以margin为例,padding与之同样。

盒子有左右上下4个方位,每一个方位都有个外边距:

margin-top:1px; 
margin-right:2px; 
margin-bottom:3px; 
margin-left:4px; 

你能够简写成:

margin:1px 2px 3px 4px; 

英语的语法 margin: top right bottom left

//4个方位的边距同样,等同于于margin:1px 1px 1px 1px; 
margin:1px; 
//左右边距都为1px,上下边距均为2px,等同于于margin:1px 2px 1px 2px 
margin:1px 2px; 
//右侧距和左侧距同样,等同于于margin:1px 2px 3px 2px; 
margin:1px 2px 3px; 
//留意,这里尽管左右边距都为1px,可是这里不可以缩写。 
margin:1px 2px 1px 3px; 

2、边框(border)

边框的特性以下:

border-width:1px; 
border-style:solid; 
border-color:#000; 

能够缩写为1句:

border:1px solid #000; 


英语的语法 border:width style color;

3、情况(Backgrounds)

情况的特性以下: 

background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 

能够缩写为1句:

background:#f00 url(background.gif) no-repeat fixed 0 0; 

英语的语法是background:color image repeat attachment position;

你能够省略在其中1个或好几个特性值,假如省略,该特性值将用访问器默认设置值,默认设置值

为:

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 

4、字体样式(fonts)

字体样式的特性以下:

font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:"Lucida Grande",sans-serif; 

能够缩写为1句:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 

留意,假如你缩写字体样式界定,最少要界定font-size和font-family两个值。

5、目录(lists)

撤销默认设置的圆点和编号能够这样写list-style:none;,
list的特性以下:

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif); 

能够缩写为1句:

list-style:square inside url(image.gif); 


6、色调(Color)

16进制的颜色值,假如每两位的值同样,能够缩写1半。比如:

Aqua: #00ffff ——#0ff 
Black: #000000 ——#000 
Blue: #0000ff ——#00f 
Dark Grey: #666666 ——#666 
Fuchsia:#ff00ff ——#f0f 
Light Grey: #cccccc ——#ccc 
Lime: #00ff00 ——#0f0 
Orange: #ff6600 ——#f60 
Red: #ff0000 ——#f00 
White: #ffffff ——#fff 
Yellow: #ffff00 ——#ff0 

7、特性值为0

撰写标准是假如CSS特性值为0,那末你无须为其加上企业(如:px/em),你将会会这样

写:

padding: 10px 5px 0px 0px; 


试试这样吧:

padding: 10px 5px 0 0; 

8、最终1个分号

最终1个特性值后边分号能够不写,如:

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal; 
} 

能够简写成:

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal 
}

9、字体样式粗细(font-weight)

你将会会这样写:

h1{ 
font-weight:bold; 
} 
p{ 
font-weight:normal; 
} 


能够简写成: 

h1{ 
font-weight:700; 
} 
p{ 
font-weight:400; 
} 

10、圆角半径(border-radius)

border-radius是css3中新添加的特性,用来完成圆角边框。

-moz-border-radius-bottomleft:6px; 
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px; 
-webkit-border-bottom-left-radius:6px; 
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px; 
border-bottom-left-radius:6px; 
border-top-left-radius:6px; 
border-top-right-radius:6px; 

能够简写成:

-moz-border-radius:0 6px 6px; 
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px; 

英语的语法 border-radius:topleft topright bottomright bottomleft