高效整洁CSS代码原则
web规范

web规范网页开发是一项极富挑战性的工作,为了保证开发出符合用户期望、可用性高、易于维护的网页,制定一套完善的Web规范非常重要。
本文将探讨一些常见的Web规范,帮助网页开发者更好地开发优质的网页。
1. 响应式设计:现如今,用户使用各种不同的设备访问网页,包括桌面电脑、平板电脑和智能手机等。
为了确保网页在不同设备上都能良好展示,响应式设计是必不可少的。
网页需要根据屏幕尺寸自动适配布局和样式,以提供更好的用户体验。
2. 浏览器兼容性:不同的浏览器对网页的解析和渲染方式可能不同,因此开发人员需要确保网页在主流浏览器中都能正常运行。
测试网页在不同浏览器中的兼容性,并及时修复发现的问题是非常重要的。
3. HTML和CSS代码规范:编写整洁、易于理解和维护的代码是一个好习惯。
开发人员应该遵循命名规范,使用合适的标签和语义化的HTML结构,同时使用层叠样式表(CSS)编写样式,并且遵循一致的选择器命名和样式规则。
4. 图片和多媒体内容优化:网页中的图片和多媒体内容可能会占用大量的带宽和加载时间。
为了提高网页的加载速度和用户体验,开发人员应该优化图片和多媒体内容的大小和格式,使用合适的压缩和编码技术。
5. 表单设计:表单是网页中常见的交互组件,用户可以通过表单提交信息。
为了提高用户体验和数据的准确性,表单需要设计得易于填写和提交。
同时,表单需要进行前端和后端的验证,以确保输入的数据的合法性和安全性。
6. 导航和链接结构:良好的导航和链接结构可以帮助用户更轻松地浏览网页内容。
开发人员应该设计易于理解和操作的导航和链接,保持页面的层次结构清晰和一致。
7. 页面加载速度:用户对网页的加载速度非常敏感,长时间的加载会导致用户流失和不良的用户体验。
开发人员应该采取措施来优化网页的加载速度,如压缩和合并CSS和JavaScript文件,使用缓存技术和异步加载等。
8. SEO优化:搜索引擎优化(SEO)是提高网页在搜索引擎结果中排名的一系列技术和策略。
高效整洁CSS代码原则(出色CSS代码的13个合理建议)

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:1. 使用Reset但并非全局Reset不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。
但需要注意的是,请不要使用全局Reset:*{ margin:0; padding:0; }这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。
在此建议参考YUI Reset和Eric Meyer的做法。
我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。
我使用的Reset如下:/*清除内外边距*/body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, /*结构元素*/dl, dt, dd, ul, ol, li, /*列表元素*/pre, /* 文本格式元素*/form, fieldset, legend, button, input, textarea, /*表单元素*/th, td, /*表格元素*/img/*图片元素*/{border:medium none;margin: 0;padding: 0;}/*设置默认字体*/body,button, input, select, textarea {font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;}h1, h2, h3, h4, h5, h6 {font-size: 100%;}em{font-style:normal;}/*重置列表元素*/ul, ol { list-style: none; }/* 重置超链接元素*/a { text-decoration: none; color:#333;}a:hover { text-decoration: underline; color:#F40; }/*重置图片元素*/img{ border:0px;}/*重置表格元素*/table { border-collapse: collapse; border-spacing: 0; }2. 良好的命名习惯无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。
formatter中css写法

文章标题:深度解析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样式。
css命名规范

css命名规范CSS(CascadingStyleSheets,层叠样式表)是一种用于定义网页外观的Web标准规范,广泛应用于万维网上的各种HTML文档。
在CSS的编写中应遵循良好的命名规范,这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅,也有助于后期维护和修改。
CSS命名规范涉及到以下几个方面:一、标签命名标签命名(className idName)应采用简洁的、有意义的词汇,尽可能避免缩写,只使用小写字母和下划线,将空格替换为下划线。
标签名称也可以使用中划线,但无建议,仍建议使用下划线。
例如:class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词,变量名称以字母或下划线开头,变量名可以是大写字母、小写字母,但尽量不要使用缩写,可以使用中划线。
例如:$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中,要求各文件夹名称明确清楚,其中新建CSS文件命名要尽量使用有意义的名称,可以采用中划线,也可以使用单词缩写。
例如:style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母,有些关键词会使用中划线。
常用的颜色可以使用英文(例如:red、blue、green),也可以使用十六进制的颜色代码(例如:#333333)。
例如:font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词,有些属性可以直接使用英文单词,有些属性可以使用中划线表示,要尽量避免使用缩写。
例如:#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义,值越高的优先级别越高,优先级越低的越容易被覆盖。
WEB前端开发代码使用要求规范

WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。
-使用缩进和空格来提高代码的可读性。
-使用注释来解释代码的目的和功能。
2.文件和目录结构规范-使用有意义的文件和目录命名,方便其他开发人员寻找代码。
-在项目中使用统一的目录结构,例如将HTML文件存放在一个文件夹中,将样式文件存放在另一个文件夹中,以此类推。
3.HTML规范- 避免在HTML中直接写入样式和脚本代码,应将样式和脚本代码分离到对应的CSS和JavaScript文件中。
4.CSS规范-使用适当的选择器,避免过多的嵌套。
-避免使用内联样式,应将样式写在CSS文件中,以提高可维护性。
- 使用合适的样式命名规则,例如使用BEM(Block-Element-Modifier)命名规则,或其他约定俗成的命名规则。
5. JavaScript规范-使用合适的变量和函数命名,提高代码的可读性。
-避免使用全局变量,应将变量和函数封装在模块中。
- 使用严格模式(`use strict`),避免不规范的语法和行为。
- 避免使用`eval`和`with`等不安全的代码。
-在循环中使用合适的终止条件,避免死循环。
6.代码结构规范-代码应具有良好的组织结构,例如使用模块化的方式来组织代码。
-尽量遵循单一职责原则,每个函数和类应该只负责一件事情。
-提取重复的代码块,封装成函数或类,以提高代码的复用性。
-不要写过长的函数或类,应该根据需要进行拆分和重构。
7.注释规范-使用注释来解释代码的目的和功能,特别是代码的复杂部分。
-注释应该清晰、简洁,方便其他开发人员理解代码。
-避免使用无用的注释,注释应该随着代码的变化而更新。
总之,遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率,减少错误和维护成本。
同时,还能提高团队合作的效率,方便其他开发人员理解和修改代码。
因此,在进行WEB前端开发时应该积极遵守和推崇相关规范。
代码整洁之道

关于函数——单一抽象层次原则
单一抽象层次原则SLAP(Single Level of Abstraction Principle):让一个方法中的所有操作处于相同的抽象层。
public void performTask(HttpServletRequest request, HttpServletResponse response){ RightCheck rc = new RightCheck(); RequestAnalysis ra =new RequestAnalysis(); ResponseVO rvo=null; try { ServicrVO svo = ra.requestAnalysis(request); rvo = rc.rightCheck(svo); } catch (Exception e) { //异常处理 } PrintWriter out = null; try { out=response.getWriter(); out.write(rvo.getResponseResult()); } catch (IOException e) { //异常处理 }finally{ if(out!=null)out.close(); }
高质量的代码编写原则: 每个变量只用于单一用途 每一行代码只表达一件事 一个循环只做一件事 单一抽象层次原则 函数应该遵守单一职责 函数圈复杂度应该小于10 函数第一原则是必须要短小 编写函数时必须一心一意、专注、怀有谦虚的心态
八大原则
代码可读性——目录结构
web工程:
src:
测试目录编译后的class文件存放目录
代码健壮性——空指针问题
这段代码有什么问题没有?
public String test(String para){ …… if(para.equals(“”)){ para=“default”; …… } ……
CSS规范-根据W3C标准制定

由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTM l和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范:一、CSS文件及样式命名1、CSS文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;2、CSS样式命名规范本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。
为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:头部样式用h eader,头部左边,可以用hea der_l eft或h eader_l,还有如果是列结构的可以这样——box _1of3(三列中的第一列),box_2o f3 (三列中的第二列)、box _3of3(三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了。
)容器:contai ner/box头部:header主导航:m ainNa v子导航:subNav顶导航:topNav网站标志:logo大广告:banner页面中部:m ainBo dy底部:footer菜单:menu菜单内容:m enuCo ntent子菜单:subMen u子菜单内容:subMen uCont ent搜索:search搜索关键字:keywor d搜索范围:range标签文字:tagTit le标签内容:tagCon tent当前标签:tagCur rent/curren tTag标题:title内容:conten t列表:list当前位置:curren tPath侧边栏:sideba r图标:icon注释:note登录:login注册:regist er列定义:column_1of3(三列中的第一列)column_2of3(三列中的第二列)column_3of3(三列中的第三列)二、id和cla ss的使用及区别我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:ID方法:#test{color:#333333},在页面中调用<div id="test">内容<div>CLASS方法:.test{color:#333333},在页面中调用<div class="test">内容<div>id一个页面只可以使用一次,class可以多次引用。
CSS中如何实现元素的代码规范和最佳实践

CSS中如何实现元素的代码规范和最佳实践在网页开发中,CSS(层叠样式表)是用于定义网页元素样式的重要语言。
为了确保代码的可维护性、可读性和性能,遵循一定的代码规范和最佳实践是至关重要的。
接下来,让我们深入探讨一下在 CSS中如何实现元素的代码规范和最佳实践。
首先,合理的文件结构和组织是基础。
将 CSS 文件按照功能或页面进行划分,比如可以有通用样式(commoncss)、特定页面样式(page1css、page2css)等。
这样在项目规模较大时,能够更方便地查找和修改相应的样式。
在编写 CSS 代码时,选择器的准确性和特异性要把握好。
避免过度使用通用选择器(如“”),因为它会影响性能,并且可能导致不必要的样式应用。
优先使用具有明确目标的类选择器和 ID 选择器。
例如,对于一个特定的按钮,使用“button”或“submitButton”这样的选择器,而不是“div >button”这种过于宽泛且复杂的选择器。
样式的声明顺序也有讲究。
通常按照以下顺序:布局属性(如display、position、float 等)、盒模型属性(如width、height、padding、margin 等)、外观属性(如 background、color、border 等)、文本属性(如 fontsize、fontfamily、textalign 等)。
这样的顺序有助于提高代码的可读性和可维护性。
代码的缩进和空格使用也不能忽视。
适当的缩进可以清晰地展示代码的层次结构,让代码更易读。
例如,在嵌套的选择器中,子选择器应该相对于父选择器进行缩进。
注释是提高代码可理解性的重要手段。
在关键的部分添加注释,解释样式的用途或者特殊的考虑因素。
比如:```css/这是一个用于导航栏的样式/nav {backgroundcolor: 333;color: fff;}```对于颜色值的使用,尽量使用十六进制或者预定义的颜色名称,而避免使用难以理解的 RGB 或 HSL 值,除非有特殊的需求。
页面优化原则

页面优化原则随着互联网的快速发展,网页成为了人们获取信息和进行交流的重要工具。
在设计和开发网页时,页面优化是至关重要的一环。
页面优化旨在提高用户体验,提升网页的加载速度和性能,增加网页的可访问性和可用性。
下面将介绍一些常见的页面优化原则。
1. 压缩和合并文件:优化页面加载速度是提高用户体验的关键。
通过对CSS和JavaScript文件进行压缩和合并,可以减少文件的大小,从而加快页面加载速度。
此外,还可以通过将多个CSS或JavaScript文件合并成一个文件,减少页面的HTTP请求次数,进一步优化加载速度。
2. 图片优化:图片是网页中常见的元素,但过大的图片文件会导致页面加载缓慢。
优化图片包括压缩图片文件大小、选择合适的图片格式(如JPEG、PNG等),以及使用CSS技术来实现一些简单的图像效果,而不是使用大量的图片来实现。
3. 缓存机制:通过设置适当的缓存机制,可以减少页面的重复加载和服务器的负载,提高页面的响应速度。
合理设置缓存机制,可以使页面在用户再次访问时从本地缓存中加载,而不是重新从服务器获取。
4. 响应式设计:随着移动设备的普及,响应式设计已成为一种必要的页面优化方式。
通过响应式设计,可以使网页在不同的设备上自动适应屏幕大小和分辨率,提供更好的用户体验。
5. 合理使用字体:选择合适的字体可以增强页面的可读性和美观性。
然而,使用过多的字体和字体文件会增加页面的加载时间。
因此,应该合理选择字体,并尽量减少字体文件的数量和大小。
6. 减少重定向:过多的重定向会增加页面的加载时间,降低用户体验。
因此,在设计页面时要尽量减少重定向的次数,使用户能够直接访问到所需的内容。
7. 清理无用代码:在开发过程中,可能会有一些无用的代码存在于网页中。
这些无用的代码会增加网页的文件大小,影响页面的加载速度。
因此,要定期清理无用的代码,保持页面的简洁和高效。
8. 合理使用CSS和JavaScript:CSS和JavaScript是网页设计和交互的重要工具。
规范的CSS代码的五个原则

规范的CSS代码的五个原则快速写出较好CSS的5种方法首先要使用合理使用Reset。
真的,要一直使用一个reset,网上有很多写的不错的reset,比如yahoo 的,腾讯的写的都不错。
无论是谁的,或者你自己的定制的reset,一定要使用。
这可以简单到仅仅将所有元素中的margin和padding属性去掉:html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,pre, form, fieldset, table, th, td { margin: 0; padding: 0; }Eric Meyer和YUI的Resets样式是很棒的,但对我们来说,它们走的太远了。
Eric Meyer推荐你清除所有东西,然后再重新定义元素的许多属性。
最好的办法是,不要盲目使用别人的reset样式,要懂得节俭,提炼成自己的使用。
也许我们都习惯用* { margin: 0; padding: 0; },但是它被使用的地方太多了,如果把一个单选框的padding去掉,你觉得会发生什么事情?表单元素有的时候会有些比较时髦的表现,所以最好还是让它们保持原状吧。
其次是按字母排序。
先做一个一个小测试,下面的两个例子,你认为哪个能较快找到margin-right属性的位置?例1div#header h1 {z-index: 101;color: #000;position: relative;line-height: 24px;margin-right: 48px;border-bottom: 1px solid #dedede;font-size: 18px;}例2div#header h1 {border-bottom: 1px solid #dedede;color: #000;font-size: 18px;line-height: 24px;margin-right: 48px;position: relative;z-index: 101;}不要告诉我例2没有例1快!通过将这些样式的属性按照字母排序,你所创建的连贯性将帮你减少花费在寻找某个属性的时间。
HTML,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代码优化的常见技巧与方法

CSS代码优化的常见技巧与方法CSS(层叠样式表)是构建网页样式和布局的重要工具,它对页面性能和用户体验有着重要的影响。
然而,随着网页规模的增大和功能的复杂化,CSS代码也变得越来越冗长和复杂。
本文将介绍一些常见的CSS代码优化技巧与方法,以提高网页性能和用户体验。
一、选择器优化1. 避免使用通配符选择器通配符选择器(*)会匹配页面中的所有元素,它的效率较低。
在编写CSS时,尽量避免使用通配符选择器,而是使用更具体的选择器来定位目标元素,以减少匹配的范围,提高渲染效率。
2. 避免使用ID选择器虽然ID选择器在CSS中具有很高的优先级,但是过多地使用ID选择器会导致CSS代码的冗余和臃肿。
尽量使用class选择器来代替ID 选择器,以减少代码量和维护成本。
3. 使用子选择器而非后代选择器子选择器(>)只匹配直接子元素,而后代选择器(空格)会匹配所有的后代元素。
通常情况下,使用子选择器可以减少选择器的嵌套层级,提高渲染效率。
二、样式合并和简化1. 合并相同样式当多个元素具有相同的样式时,可以将这些样式合并到一个选择器中,以减少代码量。
这样做不仅可以提高代码的可读性,还可以减少样式表的大小,加快网页的加载速度。
2. 简化属性值当属性值可以缩写时,尽量使用缩写形式,以减少代码量。
例如,将`padding-top`、`padding-right`、`padding-bottom`、`padding-left`合并为`padding`,将`margin-top`、`margin-right`、`margin-bottom`、`margin-left`合并为`margin`等。
3. 移除不必要的样式在编写CSS时,要仔细检查样式表中是否存在不必要的样式。
如果某个样式没有被使用到,或者与其他样式产生了冲突,可以将其移除,以减少代码量和提高代码的可维护性。
三、选择合适的单位和颜色格式1. 选择合适的单位在指定尺寸和距离时,应选择合适的单位,以适应不同分辨率和设备的显示效果。
CSS预处理器SCSS的使用技巧

CSS预处理器SCSS的使用技巧CSS预处理器(SCSS)是一种让开发者更方便编写和维护CSS代码的工具。
它提供了许多功能,如变量、嵌套、混合、继承等,使得我们可以更灵活地处理样式。
在本文中,我将分享一些SCSS的使用技巧,希望对你的开发工作有所帮助。
首先,让我们从SCSS的变量功能开始说起。
在CSS中,我们经常会使用一些常用的颜色、尺寸等数值,而这些数值可能会在多个地方使用到。
使用SCSS的变量功能,我们可以将这些数值定义成变量,然后在整个样式表中使用变量名来引用。
这样一来,当我们需要修改某个数值时,只需要修改一处即可,不用一个一个去找到所有的地方进行修改。
这大大增加了代码的可维护性。
接下来,我们谈谈SCSS的嵌套功能。
在纯CSS中,我们经常会遇到选择器重复的情况,导致代码冗长且不易阅读。
而SCSS的嵌套功能可以很好地解决这个问题。
我们可以将嵌套选择器写在父选择器内部,这样就可以更清晰地表示样式之间的层级关系。
另外,嵌套选择器内部可以使用&符号来引用父选择器,这对于定义伪类和伪元素的样式尤为方便。
除了变量和嵌套,SCSS还提供了混合和继承这两个非常有用的功能。
混合是指将一段样式代码封装起来,然后在需要的地方使用@include指令引入。
这样做的好处是可以避免代码重复,提高代码的复用性。
另外,混合还可以接受参数,使得样式更加灵活。
而继承则是指一个选择器可以继承另一个选择器的样式,使用@extend指令可以实现。
这样一来,我们可以通过继承来减少代码量,使样式表更加简洁。
在使用SCSS时,我们还需要注意一些细节。
首先,建议在样式表的开头使用@import 指令将多个 SCSS 文件合并为一个文件。
这样可以方便管理和维护。
其次,使用 // 符号可以添加注释,这对于解释样式的作用和用途非常有帮助。
另外,还经常会用到一些内置函数,比如颜色计算、字符处理等。
熟练使用这些函数可以提高开发效率。
最后,我想提醒大家,在SCSS使用过程中,要保持代码的整洁和可读性。
css样式书写规则

css样式书写规则
CSS样式书写规则是指在编写CSS代码时需要遵循的一些规范。
正确的书写规则可以提高代码的可读性、降低错误率,并便于维护和修改。
首先,对于选择器的书写,可以使用元素选择器、类选择器、ID选择器等多
种方式。
选择器应该尽量简洁明了,避免出现过于冗长和重复的选择器,以保持代码的简洁性。
同时,选择器的层级关系应该尽量扁平化,避免过多的嵌套,以提高样式匹配的性能。
其次,属性和值之间应该用冒号(:)进行分隔,属性值应该用分号(;)进行分隔。
每个属性值对应的分号后应该留有适当的空格。
另外,对于属性和属性值的书写,应该使用小写字母,以保持一致性和可读性。
同时,属性值应该用引号包裹,可以使用单引号或双引号,但在整个代码中要保持一致。
此外,在编写样式时,可以使用缩进和换行来提高代码的可读性。
可以对相关
的选择器和属性进行分组,并使用注释对代码进行解释和说明。
注释应该清晰明了,可以描述样式的作用、浏览器兼容性等信息。
最后,建议在CSS代码的开头使用一个注释块,用来说明该CSS文件的一些
基本信息,例如作者、创建日期等,以便后续的维护和修改。
综上所述,遵循适当的CSS样式书写规则可以使代码更易读、易懂,也方便
后续的维护和修改。
通过简洁明了的选择器、正确的属性和属性值书写以及注释的添加,可以提高代码的质量和效率。
w3c标准编程输写格式

关于语义化的一些建议:在开始之前,我想推荐两种简单的编写较好的CSS代码的指导方针:1、为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。
如:”main-content”或”mainContent”。
2、优化CSS代码,仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,…),例如,不要使用这种哦你那个方式:<div class=”main”><di v class=”main-title”>…</div><div class=”main-paragraph”>…</div></div>而要这样写:<div class=“main”><h1>…</h1><p>…</p></div>三栏布局中使用语义化方式的例子让我们来通过这个简单的例子讲解一下如何为经典的三栏布局使用语义化方式命名:使用语义化方式为CSS命名可以像这样:#container{…}/*—- Top section —-*/#header{…}#navbar{…}/*—- Main —-*/ #menu{…}#main{…}#sidebar{…}/*—- Footer —-*/ #foot er{…}3 Container“#container“ 就是将你页面中的所有元素包在一起的部分,这部分你还可以命名为: ”wrapp er“, “wrap“, “page“.4 Header“#header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。
这部分你还可以命名为:”top“, “logo“, “page-header” (或pageHeader).5 Navbar“#navbar“等同于横向的导航栏,是最典型的网页元素。
10个让CSS代码清晰的原则

10个让CSS代码清晰的原则1.保持代码井井有条永远不要随随便便地想到一个id、class就一股脑把代码写下去,这样写出来的代码非常难维护也不好扩展,所以应该先考虑如何组织结构更加清晰的CSS代码,以便更好地利用CSS 继承的特性。
记住,最常见的元素一定要先声明,再声明具体的某个元素。
这样可以让让具体某个元素继承那些已经声明过的属性,也可以让你在需要的时候修改特定的属性。
这种结构的CSS代码易于阅读,更符合逻辑结构。
结构化编写CSS代码可以让自己以后能够轻松维护那些代码(或者让替你擦屁股的人松一口气)。
可以参考下面这样的结构:reset链接、预定义类型总体布局二级布局表单各种其他元素……2.标注代码作者、日期、其他重要信息在css代码的头部写明是谁写了这些代码,在什么时候,怎么联系上作者,特别是在制作模板和主题的时候。
像这样的信息:注意图片中的示例颜色代码,多年来我发现列出一份CSS中用到的颜色示例代码并说明大概是什么颜色,在不管是最初编写颜色样式的时候还是以后可能会进行的改进都是极其有效地,至少可以再你打开取色器输入那些16进制颜色代码的之前可以让你有个大概的印象,或者可以在需要改变颜色的时候提供快速的参考。
3.制作样式库一旦你的CSS代码保持相对良好的结构的时候,你可以把那些最经常使用的代码独立出来作为一个库来不断复用。
你可以为不同的用途制作相应的版本,比如一个两栏布局的样式,一个博客主题、用来打印的样式等等。
如果你要为每个相同或者类似样式规则的页面重新编写各自的CSS代码,你肯定会疯掉。
4.使用通用的命名规范你可能注意到可第一点提到的CSS代码中的声明了两个ID:col-alpha、col-beta,为什么不把他们命名成:col-left、col-right?我们要考虑将来可能的需求变更。
明年你可能就需要把现在网站中的左边那一块放到右边去,你不需要为重命名HTML中的相关元素,也不需要为了变换一个元素的位置去改变样式表中的那个对应的id。
css编写方式基本原则

css编写方式基本原则CSS编写方式基本原则CSS(层叠样式表)是一种用于描述网页样式的语言,它可以控制网页的布局、颜色、字体等方面的样式。
在编写CSS时,遵循一些基本原则可以帮助我们提高代码的可读性和可维护性。
本文将介绍一些CSS编写方式的基本原则。
1. 使用有意义的类名和ID名在编写CSS时,应该使用有意义的类名和ID名来命名元素。
这样做可以使代码更易于理解和维护。
避免使用无意义的名称或者简单的数字作为类名或ID名。
2. 避免使用行内样式尽量避免使用行内样式,而是将样式定义在CSS文件中。
这样可以将样式与内容分离,使代码更加清晰和易于维护。
3. 使用层叠和继承CSS具有层叠和继承的特性,可以通过合理地使用这些特性来简化代码。
层叠可以让多个样式规则同时作用于一个元素,而继承可以使子元素继承父元素的样式。
4. 避免使用!important!important是一种用于提高样式优先级的方法,但是过度使用它会导致代码难以维护。
应该尽量避免使用!important,而是通过合理的选择器和层叠来控制样式的优先级。
5. 使用简洁的选择器在选择器的编写中,应该尽量使用简洁的选择器。
过于复杂的选择器会增加代码的复杂性和维护成本。
可以使用类名和ID名来选择元素,避免使用过于具体的选择器。
6. 使用注释在CSS代码中使用注释可以帮助我们理解代码的作用和意图。
注释应该清晰明了,不要过多也不要过少。
可以使用注释来标记代码的不同部分或者解释某些特殊的样式。
7. 使用预处理器预处理器如Sass和Less可以帮助我们更高效地编写CSS代码。
它们提供了变量、嵌套、混合等功能,可以减少代码的重复和冗余,提高代码的可维护性。
8. 保持代码的一致性在编写CSS代码时,应该保持代码的一致性。
统一的缩进、命名规范和代码风格可以使代码更易于阅读和维护。
可以使用代码格式化工具来自动格式化代码。
9. 使用现代的CSS特性随着CSS的不断发展,出现了许多新的CSS特性和技术。
css代码优化简写技巧

css 代码优化简写技巧
css 代码简写的最大好处就是能够显著减少 CSS 文件的大小,优化网站整体性能,更加容易阅读。 CSS 简写就是指将多行的 CSS 属性简写成一行,又称为 CSS 代码优化或 CSS 缩写。CSS
一、边距(margin padding) Margin----外边距: ①、第一种情况:(上 下 左 右 四个值不同的情况)代码如下:
可以缩写成:
代表的意思是 左右 2 个值相同的情况) 代码如下:
大量名纳%义税以对人上万外游以元经纳离大挂,营税于家靠2,人查征0共经1并单询管5着同营年向位分范这探为1报被2-析围一87讨主告挂流月户、之系。, 靠域实,下外列 挂人综现小户。问 靠交上合税规原调以题一人通缴治款模则查X对、(运道管X理2企.走X.2.县X车输护理6实业X等 体1访X万0为辆县业岸费施2(县级 布师合的元2全例所对是工。户方三交: 置专治方;部,有交国是程 ,案)通X与业理法我为截人通X民学. 客设监运、措.论的。.县准道至)输经9校1运计测输教施文(一任并、交考路2,运济实3范业育设0五、务对纳通户工证作对1将业的现围税以计5)高目调税业,种号者年国车税传社与收及.林提校标查.人主货:.6内辆收统会7月时征为研草出行与的户要运X(培的登政行功底段管衡究X措教了政规情数以运一训一记策业时能,.基量。.施学现管模况题增自输).单念些在执,间的1共本一高设目在理.进加1主4设位.也高被.行浅实(:前6有情所校6计标一的行:,户经计:在校(挂情谈施四X提登况高在.活些基一以但。营原.X发的一.靠况新营)。记 校实9X摘把动高本般X远据和则生行四)人和形改监鉴自的X 是现要思,校概性低统挂.针着政、治.(X征式增测定2.交X否教:想配行念分1于7计靠河、巨管水理货X管级下后世(内单通治具学小和合政析地,经为县政大理土任运情领高,纪二容位一输理备和流行高管内,税2营例共策的具保务企况导校如以)0方:、运论竞科域教动校理容提1移为浅有,变有持.业4开安行何后总法X.强业学争研.年综育统的 出交主谈交6X这提化一监)展排政加,体与化纳(习力两交日…活一学弊 加前,小通两高,定测名了,各管强随布频理税二,的项通期…动到生端国强移我流运个政大的.下专扎项理交着局.次论人).帮全一重运:县、全更,外税交分域输1中治学借,题实任的通社.能0X治.助面个要输X.交两军好并知收的局综企(心敏校鉴以X8调1工务创运会X力理下武重职6(企1通项和地在名征户管合业一任锐园意-被研作的新输履2提目,装要能目三业运重公完以教管数理,治04)务性的义挂以。作,同路业飞职19高标在自指是 )现输大安成上育工,4户企理监,和陈。靠X调为严时径的速、。,.我全己标建 帮工税.行教现基学作,X业实.测内鉴旧 人研一格, 税发…我6始队的。立县录助程款业政育役学础家的(其9施目抓别的 主名按不 收展…大0终官头本在X一工措3税治等部目之乌建三中方的、管能行关7要消照断摘管X,中量坚兵脑论行、3作施收上一队标申议)一案.河实理力政键.采建防部提要理我队阅.持的,文政项实设征的系政。,斯1建般设为践、。管词取设监队高 ?国政0读讲学共提,管目践计管坚列治新着基与(设计例执外在理:数、督的自 笔高治和话习同高对理区 .情任定工形重提二规.浅法树改模高.据坚执条身随者校指学精者努党高的8概姓 况期性作式阐出)模谈为形革式校(持法令政着带的导习神强力性校基况名通调情以和。会下述学监.小民象强已行四.全干条治社教员.了,下修行础.:过研况来思下议,了校6测.节、,警经政).面部例觉会三育2公3加积学,养政之X任),想面上高要0看二。坚扎和很管河1协,和悟的、事X安工极习我,管上职6障我上是来校有,、身持实两难理年调只各,不总业现部环参者以进理,以四通的我,行三养小份严开学管;述可有项自断也将1节加胜对一的也畜来个过纯任深政要1殖流证格展一理创职持自规觉发9在本看讲的工步基就牧的方认洁职刻管素、成域号执、做好新报续身章学展发人,党观作坚本说业学面真性以领理,1个本综:法部两当路告2发业制习和生任产性念高定概行习0看学。来会的即指高X的队项今径、展务度政进…期 3品、,度理念政值锻X,习 的质创行标8,重正快;规1、知管治步…以0 加守把负想进管2的炼仍党 主总量新政之0人要规大节举1模建构识理,来2工党加责信行理号1和然的二要书路管头一自才意化教奏措8设建水和论人的粗规强的念简令.工存十、记高径理,6;任技义建育的 、全社平约,们%履放、学精,单以作…在八强系低和同全中术,设中校 。产们省会过束认的职,严习神进概及实肉困大化,列举比县队不坚、的园 业养肉主硬部真生情我缺党,一述新.践牛难、学特讲已增牛3指足持精所师 化育牛义,队贯活况吨知乏纪强团…,发,期产和全习向话经长存导。执细学生虽为之养和才,彻方述识品反化结…布我曾业问军,各精成3栏员 的法化、日然方恩殖谐能紧执式0职占、牌腐素和实尽.经情题和提位神6以开5各为管所常X向发的基社适紧行和如6全4教带倡质施职教况,公高领5X%来发位民理得,言:地会应围党观4下县期的给动廉作领尽,5过调主安自导通,区老、工推头,一县的当绕:肉以肉我;教为中《责达的我查要现身汇过在消师服作所动,为是的深前灭路 类来牛做从育长队建的到问与表役知报政支防,务获肉同我父目刻消火线 产关养人市等期支筑完了候老思现部识如队大我人三,牛比们母标内防救、一量心殖尊的场活坚部设成省和师考在队储下和队代的民严生增个上,涵工援方、的支呈敬道环动持一计了级崇, :政备大表心的三产长无了父把,作和加1持现的理节,班防上肉生高脑 从治和3队市中思实持3愧生母发更的执.强我5出各,看使一人火4牛观的海养工 党长%务委充想专.续于动给展加需勤政市3蓬位让,我项务规基、敬中殖作,%委述近的、满得题发真党的了肉清要训治教勃老我市深工实范;地价意浮环会能出的职年思市感到展学、一我牛醒,练育的师在受场刻作求》肉县值!现节议力栏领述来想人慨进。习无课们产地才事发,实益范认来真G牛“,观向出看精 肉导廉,大一 党…,生业认能B展同际无围识抓出要提,今他神 牛报5X学端、思步 纪…听命作识更坚发0势志工穷较到。栏X求高坚天们发和任产0告一正市绪提积一政市后和为到好定展1县头们作。窄加我3肉自持受熟展习期值 做思政又高4极、纪2很血调强的正立,:中人强深9牛0身人到悉方近以达专想府回,2参发1 条受肉结化确社足但 0更的营党知6存终的民表式平来2头题作、到增年加展规启之构服.的会丰 6是加一销的栏以思利彰面落总,亿,教风市了强庆消各现,发躯、务政各富 从在一明生模执1高想益的孔后书元同育,政自了祝防项状0始、;转意治界的述养这、确最式政万标觉第“和,记,比。提协己教中政 终深一方识人饲职殖美不方难陈能头准悟一十表科占增在升,的师队治 坚受是式向士草人、好断向忘旧力和严;佳情技系长学思向童节副教2持教老、 表资:加的,、;0能格道保”,含列1习想辛年大中育为育师促 示源(0工金强更最从5繁基要德持教正量.年中境勤和会9队理人。,增衷和、秋学加需保%母本求水思师是较末,界工学上长论民今老收心悠;市九习自要障牛自准想和这低,以作生的2学服天师的久牛场月,觉感环03己。道中些;全学切在时1万讲习务参给着感的肉和,努地念6,通德小扶从年县以实教代头话,的加了力谢养产保我力按的踏过的学我度能致做育,”认宗全我点! 殖量们提照是实学纯名一述繁用到战想中真旨市们, 传5欢高科养工习洁师路1职母为线起的完。庆知以 让3统聚自学育作,性、成3报牛主民的了两成进祝识标刚教,一身发之,政名长告达,、广小各一教和准才师提堂素展恩较治正校的 到将务大学类步师灵化,成出,质观好觉确长老 理实教、学加节魂、X为了共 的而地悟对表师今X论、师中习强大。X同 要给分完、待示们年与清、学X笔了会…庆一求予别成理权热,大以实廉教、记世,祝是去我作了论力烈教地来际。育大界见第加思了各水、的给上,相牢工学一观到3强考非项平金祝最2在结固作时年的在个基问常工得钱贺受各合树者来改座教础题好作到、!尊级,立致,造重师理,的任提名向重领注科以,点节论谋务高利长的导重学节牢学。的划。,神的学日固习首学工现党努圣关习世树了先习作就性力职心效界立改,。今修做业支果观为革夯 年养一持,、人强实 的得下打人民警政二主到,牢服重治是要加我思要理认工强认想思论作,真根想功做钻基和底以研两。下业我述务职,始
VSCode代码格式化规范化你的代码风格

VSCode代码格式化规范化你的代码风格代码风格的规范化对于开发者来说是一项重要的任务,它能够增加代码的可读性,降低维护成本,并有助于团队合作。
在当今的软件开发领域中,选择一款支持代码格式化的编辑器是至关重要的。
而VSCode作为一款轻量级且功能强大的开源代码编辑器,提供了丰富的扩展和插件,能够有效规范化你的代码风格。
1、安装插件要使用VSCode进行代码格式化,首先需要安装一些插件。
在VSCode的扩展市场中,有许多格式化代码的插件可供选择。
其中,最受欢迎且功能强大的插件是“Prettier”和“ESLint”。
Prettier是一款代码格式化工具,支持多种编程语言,并具有高度的可自定义性。
它能够根据事先配置好的规则,自动对代码进行格式化。
ESLint是一款通过静态分析代码来识别和报告模式匹配问题的工具。
通过安装并配置ESLint插件,你可以在保存文件时自动修复和格式化代码。
同时,ESLint还可以帮助你确保代码的质量和一致性。
2、配置插件安装完插件后,你需要进行一些配置,以便插件能够按照你的要求来格式化代码。
对于Prettier插件,你可以在VSCode的设置中找到它的配置项。
在设置中搜索“Prettier”,你将找到一系列的选项,例如“单引号”、“Tab宽度”等。
根据你的代码风格要求进行调整,并保存设置。
对于ESLint插件,你需要在项目的根目录下创建一个配置文件,命名为`.eslintrc.json`。
在这个配置文件中,你可以定义一系列的规则来确保代码的质量和一致性。
例如,你可以定义是否要求使用分号作为语句结束符,是否允许使用`console.log()`等。
根据你的需求进行配置,并保存配置文件。
3、格式化代码一旦你安装并配置好了插件,你可以开始使用它们来格式化你的代码了。
在VSCode中,你可以通过按下快捷键`Shift+Alt+F`或者右键点击编辑器中的代码,选择“格式化文档”来格式化你的代码。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}
对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
2. 良好的命名习惯
无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:
5. 使用多重选择器
你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
*{ margin:0; padding:0; }
这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:
9. 选择更优的样式属性值
CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如
区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
4. SideBar
5. Footer
----------------------------------- */
如此你代码的结构就一目了然,你可以容易的查找和修改代码。
而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:
CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
就可以缩写为:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
6. 适当的代码注释
代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
1. Reset
2. Header
3. Content
width:30%;
z-index:10;
}
8. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
/*** 每个样式属性写一行 ***/
div{
background-color:#3399cc;
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }
7. 给你的CSS代码排序
如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
可以合并为
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:
Байду номын сангаас
1. 使用Reset但并非全局Reset
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
padding:5px 0 10px 5px;
}
如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。
4. 利用CSS继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
.clear{clear:both;text-indent:-9999px;}
那么对于这样一个段落
<p class="alignleft">我是一个段落!</p>