常用css缩略语

rack的青年

rack的青年

2016-02-19 18:33

下面图老师小编跟大家分享常用css缩略语,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

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

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

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

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)

字体的属性如下:

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

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

可以缩写为一句:list-style:square inside url(image.gif);

展开更多 50%)
分享

猜你喜欢

常用css缩略语

Web开发
常用css缩略语

《灵魂能力4》指令规范(基本指令缩略语解析)

游戏动漫
《灵魂能力4》指令规范(基本指令缩略语解析)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

常用CSS

Web开发
常用CSS

CSS常用技巧介绍

Web开发
CSS常用技巧介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS常用样式效果

Web开发
CSS常用样式效果

常用的CSS知识

Web开发
常用的CSS知识

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Oracle查询 rownum和rowid的区别

Oracle查询 rownum和rowid的区别

解决方案:Oracl数据库中大数据的备份

解决方案:Oracl数据库中大数据的备份
下拉加载更多内容 ↓