下载文档原格式
文章标题：深度解析formatter中的CSS写法一、引言在当今的网页设计和开发中，CSS作为前端开发的重要组成部分，其写法一直备受关注和讨论。
特别是在formatter中的CSS写法，更是需要我们深入了解和研究。
在本篇文章中，我们将从简到繁，由浅入深地探讨formatter中的CSS写法，以便读者能更深入地理解这一主题。
二、什么是formatter中的CSS写法？在介绍formatter中的CSS写法之前，首先我们需要了解什么是formatter。
formatter是一种用于美化、格式化代码的工具，可以使代码整齐、易读，并且符合特定的代码风格规范。
而在这些代码风格规范中，CSS写法作为前端开发的重要组成部分，需要我们深入了解和掌握。
三、为什么重视formatter中的CSS写法？1. 代码可读性在团队协作开发过程中，良好的CSS写法可以增强代码的可读性，让团队成员更容易理解和维护代码，提高工作效率。
2. 代码规范性良好的CSS写法可以保证代码的规范性，减少代码错误和bug的产生，提高代码的质量和稳定性。
3. 前端性能优化精简、高效的CSS写法可以减少页面加载时间，提高网页性能，从而提升用户体验。
四、如何在formatter中编写优质的CSS？1. 命名规范在formatter中编写CSS时，应该遵循良好的命名规范，采用有意义且简洁的类名和ID名，以便于代码的维护和扩展。
2. 嵌套规范在编写嵌套的CSS样式时，应尽量避免过深的嵌套结构，保持代码的清晰和简洁。
3. 属性顺序在书写CSS属性时，应该遵循统一的属性顺序，将相似属性进行分组，以便于代码的管理和阅读。
4. 代码缩进良好的代码缩进可以提高代码的可读性，减少代码出错的可能性，应该在formatter中注重代码缩进的规范。
五、总结回顾通过对formatter中的CSS写法的全面评估和深度探讨，我们不仅加深了对这一主题的理解，更学习到了如何编写高质量、深度和广度兼具的CSS样式。
Xingtai Polytechnic College《网页设计与制作》—相关规范网站设计规范（通用）一、设计风格1、依照网站的定位确定整体的设计风格。
2、主体框架页面、内容页尽量采用方型结构。
禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。
封面页、专题页可不受此限制。
3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。
拐角块最大不得超过18像素。
同一页面弧度尽量保持一致。
4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。
可跟首页有变化。
5、首页及各级页面都必须带有网站的LOGO(建议小于150×54)，并链接到网站首页。
6、统一按兼容分辨率800*600设计。
为了使显示更友好，建议使用778或者760 px设计。
7、网站页面长度建议1屏半到2屏。
原则上长度不超过3屏，宽度不超过1屏。
根据用户习惯和网站需要，国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。
二、图形设计规范1、图片标准尺寸全尺寸banner为468×60px，半尺寸banner为234×60px，小logo为88×31px 另外150×68、120×90，120×60也是标准尺寸，网站logo一般控制在150×54以内，客户要求或特殊广告图片可另定尺寸。
建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后尺寸不得超过70K。
2、图片的分类及命名规则(1) 名称分为头尾两两部分，用下划线隔开。
(2) 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
(3) 一般来说:⏹放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner⏹标志性的图片我们取名为：logo⏹在页面上位置不固定并且带有链接的小图片我们取名为buttonXingtai Polytechnic College《网页设计与制作》—相关规范⏹在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu⏹装饰用的照片我们取名：pic⏹不带链接表示标题的图片我们取名：title⏹依照此原则类推。
css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。
下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。
其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight产品管理1.2. CSS的Id命名规范外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示) 容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。
css常用字体样式
CSS中常用的字体样式包括以下几种：
1.字体类型：使用font-family属性来指定字体类型，例如"微软雅黑"、"宋体"、"Times New Roman"等。
2.字体大小：使用font-size属性来指定字体大小，可以使用像素值、百分比、em等单位来指定。
3.字体颜色：使用color属性来指定字体颜色，可以直接输入颜色值或使用预定义的颜色名称。
4.字体粗细：使用font-weight属性来指定字体的粗细程度，可以使用正常、粗体、更粗等关键字或数字值（100-900）来指定。
5.字体斜体：使用font-style属性来指定字体的斜体样式，可以使用normal、italic、oblique等关键字来指定。
此外，还可以使用一些其他字体样式属性，例如行高（line-he ight）、字母间距（letter-spacing）、文字装饰（text-decorati on）等。
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
写css hack，一般地是为了让页面模块在不同的浏览器下达到兼容显示的效果。
如果你经常写Hack，说明你的html布局或者div书写有出现不合理的地方。
与其一堆hack，你有必要看看你的html结构是否合理了哦。
关于这三角恋的关系，如下图：有时候也在所难免，类似于美莱氏其中的一个布局：我们看这种瀑布流式的布局，模块之间存在边距，模块内也存在边距，div的布局设置，要从细微的地方考虑，就像搭棚架一样，好的基础，才能搭得高。
这个页面小弟还无优化它，之前开源系统的前端写得一般。
要知道搜索引起对页面的抓取，也是讲究div层布局是否合理的，好的层次结构有利于seo。
我们以margin-left为例，其他css属性是一样道理的。
.melace{margin-left:10px; //让火狐，opera，chrome等firefox家族执行margin-left:8px\9; //让ie6，ie7，ie8，ie9 执行，其他非ie家族不执行*margin-left:5px; // 让ie6，ie7 执行；ie8, ie9不执行_margin-left:3px; // 让ie6执行}1. 来分析一下，margin-left:10px; 本来ie家族也会执行，但是后边的声明会将其覆盖，就是说，像java一样，如果后边没有声明覆盖，那么ie家族会执行这个参数，现在后边的声明，就覆盖了这个参数，导致的结果是只有火狐家族执行margin-left:10px; 区分了两个阵型的浏览器识别。
2. margin-left:8px\9; 这个声明ie家族能识别，火狐家族不识别。
就是用来覆盖“ margin-left:10px; ”的。
3. *margin-left:5px; 用” * “ 星号声明，ie6和ie7执行这个参数，ie8和ie9不执行，导致的结果是：ie8和ie9 执行了margin-left:8px 。
这样便将ie6、ie7 和ie8、ie9区分了。
一．文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局，版面layout.css专栏columns.css文字font.css打印样式print.css主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header登录条：loginbar标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink页脚：footer版权：copyright外套：wrap主导航：mainnav子导航：subnav页脚：footer整个页面：content页眉：header页脚：footer商标：label标题：title主导航：mainbav（globalnav）顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar旗志：logo标语：banner菜单内容1：menu1content菜单容量：menucontainer子菜单：submenu边导航图标：sidebarIcon注释：note面包屑：breadcrumb(即页面所处位置导航提示）容器：container内容：content搜索：search登陆：Login功能区：shop(如购物车，收银台)当前的current[/quote][b]网站常用中英文对照表[/b][quote]网站导航Site Map公司简介Profile or Company Profile or Company公司设备Equipment Equipment公司荣誉Glories Glories企业文化Culture Culture产品展示Product Product资质认证Quality Certification企业规模Scale Scale营销网络Sales Network组织机构organization organization合作加盟Join In Cooperation技术力量Technology Technology经理致辞Manager`s oration发展历程Development History工程案例Engineering Projects业务范围Business Scope分支机构Branches供求信息Supply & Demand经营理念Operation Principle产品销售Sales Sales联系我们Contact Us Contact Us信息发布Information Information返回首页Homepage Homepage产品定购order order分类浏览Browse By Category电子商务E-business公司实力Strength Strength版权所有Copy Right友情连结Hot Link应用领域Application Fields人力资源Human Resource Hr领导致辞Leader`s oration企业资质Enterprise Qualification行业新闻Trade News行业动态Trends客户留言Customer Message客户服务Customer Service新闻动态News & Trends公司名称Company Name销售热线Sales Hot-Line联系人Contact Person您的要求Your Requirements建设中In Construction证书Certificate Certificate地址ADD Add邮编Postal Code Zipcode电话TEL Tel传真FAX Fax产品名称Product Name产品说明Description Description价格Price品牌Brand规格Specification尺寸Size生产厂家Manufacuturer Manufacturer 型号Model产品标号Item No.技术指标Technique Data产品描述Description产地Production Place销售信息Sales Information用途Application论坛Forum在线订购On-line order招商Enterprise-establishing招标Bid Inviting综述General业绩Achievements招聘Join Us求贤纳士Join Us大事Great Event动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持Powered By 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training游乐园Amusement Park在线交流Online Communication专题报道Special Report[/quote]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。
后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。
下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。
HTML、CSS编码规范1.基本原则* 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁2.HTML部分2.1.添加必须的utf-8的字符集，并且使用HTML5的简洁方式：<meta charset="utf-8" />2.2.遵循xhtml 1.0规则：1)所有标签必须小写2)标签属性必须使用成对引号（单引号或双引号）3)标签属性必须有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />4)特殊符号必须转义（&、<、>、©、»…）2.3.标签属性命名规范id：_连接符命名法“hello_world”class: -连接符命名法“hello-world”name：骆驼式命名法“helloWorld”1)表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid2)应使用统一的结构布局的元素id命名3)name命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt_id_card”，那么name=”idCard”。
2.4.要合理使用标签，语义化结构1)标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p2)避免多余的div、span、table标签，正确使用标签表现DOM结构，在文档去除css的情况下，仍然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css 处理，不使用img元素；3)合理化表单结构a)使用fieldset元素包裹相同类别的字段；b)使用legend元素表示字段类别名称；c)使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；d)文本框不使用size属性定义宽度，而使用css的width属性；e)要添加maxlength属性限制输入字符的长度。
CSS书写规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“/TR/xhtml1/DTD/xhtml1-strict.dtd“>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“/TR/xhtml1/DTD/xhtml1-frameset.dtd“>理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。
因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：为文档指定语言：<html xmlns=”/1999/xhtml” lang=”en”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />标准的XML文档语言定义：<?xml version=”1.0″ encoding=” utf-8″?>针对老版本的浏览器的语言定义：<meta http-equiv=”Content-Language” content=” utf-8″ />为提高字符集，建议采用“utf-8”。
3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head区。
如：<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。
如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。
例如，使用P 元素来包含文字段落，而不是为了换行。
如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。
少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。
将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;} 7、结构与样式分离：在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写：页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。
如：<div id=”mainMenu”><ul><li><a href=”#” >首页</a></li><li><a href=”#” >介绍</a></li><li><a href=”#” >服务</a></li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、鼠标手势：在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”二．注释书写规范1、行间注释：直接写于属性值后面，如：.search{border:1px solid #fff;/*定义搜索输入框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地方加入注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/三．样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。
如：#mainMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;}#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;overflow:hidden;}#mainMenu {height:30px;}#subMenu {height:20px;}2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search {background-color:#333;background-image:url(../images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;}.search {background:#333 url(../images/icon.gif) no-repeat 50% 50%;}3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn {margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}则可缩写为：.btn {Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;}而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn {margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn {margin:10px 5px;}而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：.btn {margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}缩写为：.btn{margin:10px;}4、颜色值的缩写：当RGB三个颜色值数值相同时，可缩写颜色值代码。
