 上传我的文档
 下载
 收藏
多年一线物理教学 多年一线物理教学
多年一线物理教学
 下载此文档
正在努力加载中...
项目规范之CSS篇
下载积分：2200
内容提示：项目规范之CSS篇
文档格式：PPT|
浏览次数：1|
上传日期： 21:11:33|
文档星级：
全文阅读已结束，如果下载本文需要使用
 2200 积分
下载此文档
该用户还上传了这些文档
项目规范之CSS篇
官方公共微信CSS样式规范
为了是css的风格保持一致，容易被理解和维护，学习整理如下：
一.代码分格
1.重定义浏览器默认样式
2.全局常用css样式
3.表单集表单元素
4.页面布局已经通用的区块样式
5.列表样式
6.其他模块的格式事例
二.CSS样式模块示例：
1.模块名称
3.依赖关系，该模块必须依赖何种模块
4.用法示例
5.附加说明
6.创建者，日期
7.最终修改者，日期
三.写作注意事项
1.属性名写在一行内、属性之间、属性名和值之间已经属性与‘{}’之间须有空格
例如:.class { width: 400 height: 300 }
2.属性的书写顺序
a.按照元素的模型由外及内，由整体到细节的属性，大致为五组
位置：position，left，right,float
盒模型属性：display，margin，padding，width，height
边框与背景：border，background
段落与文本：line-height,text-indent,font,color,text-decoration....
其他属性：overflow,cursor,visiblity
b.针对特殊浏览器的属性，应写在标准属性之前
例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
c.谨慎添加新的选择符顺序，尤其补课滥用id，尽可能的利用继承和复用已有样式
d.选择符、属性、值、均小写(格式的颜色值除外)，缩写的选择符名称需说明缩写前的全程。&
例如：cl -& C
e.避免使用各种CSS Hack，如需对IE进行特殊定义：参照最后的“关于css Hack的说明”
f.勿使用冗余低效的 CSS 写法：
例如：ul li a span{}
g.慎用 !important
k.建议使用在 class/id名称中的词语
表示状态 a -& active
表示结构 h -& header,c -& content. f -& footer
表示区域 mn -& main, sd -& side,nv -& navigation, mu -&menu
表示样式 l-list,tab,p_pop
l.开发过程中未定义的事项，须用[!]标出，以便于后续讨论整理
/*=关于团队合作的css命名规范=*/
常用的class命名规则
头：header
内容：content/container
底部：footer
侧栏：sidebar
栏目：column
页面玩味控制整体布局宽度：wrapper
左中右：left、center、center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
转台：status
投票：vote
注释的写法：
/*Footer*/
content....
/*Footer*/
/*Footer [[*/
content....
/*Footer ]]*/
content....
id的命名：
容器：container
页头：header
内容：content/container
页面主题：main
页尾：footer
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左中右：left、center、right
导航:nav & & & & & & & & & & &
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar & & & & & & & &&
左导航:leftsidebar
右导航:rightsidebar & & & & & &
子菜单:submenu & & & & & & & &&
标题: title
摘要: summary
标志:logo & & & &
广告:banner & & & &&
登陆:login
登录条:loginbar &&
注册:regsiter & & &&
搜索:search
功能区:shop & & &&
标题:title & & & & &
加入:joinus
状态:status & & &&
按钮:btn & & & & & &
滚动:scroll
标签页:tab & & & &
文章列表:list & & &&
提示信息:msg
当前的: current &&
小技巧:tips & & & &&
图标: icon
注释:note & & & &&
指南:guild & & & & &
服务:service
热点:hot & & & & &
新闻:news & & & & &&
下载:download
投票:vote & & & &&
合作伙伴:partner & &
友情链接:link
版权:copyright
class的命名:
颜色:使用颜色的名称或者16进制代码,如
.red { color: }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12 }
.font9pt {font-size: 9 }
对齐样式,使用对齐目标的英文名称,如
.left { float: }
.bottom { float: }
标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
HTML5 中的一些:
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
/*----------------------------------Author:camnpr-----------------------------*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img{padding:0;margin:0border:0;}
html,body{width:100%;height:100%;font-size:12font-family:"宋体";color:#333;background-color:#}
ol,ul,li{list-style-type:}
table {border-collapse:border-spacing: 0;}
fieldset,img {border: 0;}
img{list-style:list-style-type:}
address,caption,cite,code,dfn,em,strong,th,var {font-weight:font-style:}
caption,th {text-align:}
h1,h2,h3,h4,h5,h6 {font-weight:font-size: 100%;}
h2{font-size:14font-weight:}
q:before,q:after {content:”;}
abbr,acronym { border: 0;}
.clearbh:after{height:0;visibility:display:clear:content:" ";}
.clearbh{ clear:font-size:0; height:0; overflow:display:inline-}
/* fix IE hack \*/
*html .clearbh{height:1%;}
.left{float:}
.right{float:}
a.t_link1,a.t_link1:hover,a.t_link1:active{color:/*[text_color]*/#7f1400/*[/text_color]*/;}
/*--------------------------------------全局样式结束------------------------*/& 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。
CSS样式文件的命名 建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：
themes.css
mend.css CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，必要时可压缩。 第二节 CSS选择符的命名 所有选择符必须有小写英文字母或“_”下划线组成，样式名必须是表示该样式的大概含义（禁止出现如Div1、div2、Style1……），参考后面的“样式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID选择器（ID是用于JavaScript的编写）。 如：li span {…}td.fancy {…}input[type="text"]{…} 当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo{ …} dcrm_logo_ico{…}
图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。设计人员在PS中保存图片时，请使用“文件”à“存储为Web和设备所用的格式”。
链接的小图片
标题的图片
banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg
4.1 提示和标签信息注释 这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。
.search{ border:1px solid # /*Border Color*/ } 注意：注释内容和前面样式语句间有3个空格，后面1个空格 4.2 修改样式注释（时间和相关人员）
/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour
--------------------------------------------------------------------------------------------*/ 4.3 文档结构
/*__Header
--------------------------------------------------------------------------------------------*/ .search{ border:1px solid # /*Border Color*/ color:#333; /*Color*/} /*__Menu
--------------------------------------------------------------------------------------------*/ .menul_ul{ border:1px solid # /*Border Color*/} 注意：相对独立的2段内容之间空1行。
5.1 建立样式表索引 样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）
/*--------------------------------------------------------------------------------------------- *Filename: main.css *Description: Global CSS *Version: 1.0.0()YYYY-MM-DD *Website:
==STRUCTURE:=================================== == ==== ===== *Page width: 980px *Number of columns: 2 --------------------------------------------------------------------------------------------*/ 5.2 命名锚点 的使用 命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。
*==STRUCTURE:=============================================== $__header Header Definitions $__menu Global Site $__content Everything within the content -----------------------------------------------------------------------------------------------*/ /*__header -----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} /*__menu ----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} 5.3 建立良好的CSS编码顺序 最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式，比如下面这个例子：
p { color: background:} p { color:} 以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了，至于黄色背景为何没有消失，那是因为第二个 p 的定义中并没有与之冲突的定义，因此它还是有效的。 5.4 合适的缩写 在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁；缩写语法参考相关章节。 5.5 CSS图像拼合(即CSS Sprites技术)
CSS Sprites技术：将用到的所有小图片（图标）合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。 5.6 CSS组合和嵌套 CSS组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。
h2 { color: } .w3cbbs { color: } .w3cbbs_52css { color: } 则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: } CSS嵌套 CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。
.top { background-color: # padding: 1} .top h1 { color: #ff0; } .top p { color: font-weight: }
friendlink
msg & & 注意：命名方式使用“类别_功能”的方式（.bar_news{} .bar_product{}）。 第七节 DIV+CSS页面的布局 Table布局由于代码冗余已经过时，所以HTML页面普遍采用代码简洁Div+CSS的布局，HTML页面大体可分为top、main和bottom，在main中又可以为left和right，这些CSS的名必须是有意义的名字。如下面代码：
&body& &div class="body"& &div class="top"& &/div& &div class="main"& &div class="left"& &/div& &div class="right"& &/div& &/div& &div class="bottom"& &/div& &/div& &/body& 目前table主要是用来展现数据表，反正在布局中尽量少用table。 第八节 HTML代码书写规范 页面的HTML代码书写必须符合XHTML规范，XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。 XHTML与HTML的不同： 1. XHTML 元素必须被正确地嵌套。 2. XHTML 元素必须被关闭。 3. 标签名必须用小写字母。 4. XHTML 文档必须拥有根元素。 对于第1点：最有可能发生错误是在与&table&标签的结合，&table&的直接子元素只能为：&thead&、&tbody&、&tfoot&和&tr&，而 &thead&、&tbody&和&tfoot&的直接子元素只能为：&tr&，而&tr&的直接子元素只能为&td&和&th&，在&td&和&th&才可以放其它标签。此外相类似的标签有：&dl&、&ul&、&ol&、&select&…。 某些标签不推荐使用，如：&b&&strong&&i&&em& &strong& &dfn& &code& &samp& &kbd&&var& &cite&……，因为这些标签有些是可以用CSS去统一控制，还有一些是不常使用的；某些标签是有特殊意义的，如：&h1&…&h6&，这些标签是专门用于内容标题的，本人也希望只允许使用&h1&…&h6&来表示内容标题。 在编写HTML代码时请注意缩进，在VS中按Ctrl+E+D可格式化文本。 第九节 网站基础CSS的定义 网站CSS必须得有个统一的架构，复用CSS，尽量减少重复CSS的定义。基础CSS就是那些常用的CSS定义，如：
.clear { clear: } .bold { font-weight: } .left { text-align: } .error { color: R } .succeed { color: G } .center { text-align: } .fleft { float: } .fright { float: } .left15 { margin-left: 15 } .radius { border-radius: 5 } CSS元素选择器可以对同一标签进行统一的样式定义，有些标签应该使用元素CSS定义，如：
body { font-size: 12 font-family: A margin: 0; padding: 0; color: #403f3f; background:url('../images/page_top.png') repeat-x top #d1d2d2; } a, a:link { color: #2a5685; text-decoration: line-height: } a:hover { color: #E0303A; text-decoration: cursor: } ul { margin: 0 padding: 0 } hr { height: 1 border: border-bottom: #dcdddd 1 } h1, h2 { font-size: 1.5 color: #000; } h3 { font-size: 1.2 } h4 { font-size: 1.1 } 第十节 CSS调试心得 目前的浏览器基本上都有客户端调试工具，所以当对页面进行设计或调试时，请尽量使用此类工具，而不是改源文件，然后再刷新页面，使用客户端工具可及时增、删、改HTML元素所对应的CSS，还可以得到HTML元素所在布局的具体数值，如：
在项目后期进行CSS调试时应，着重于页面展现给浏览器后形成的HTML+CSS代码，而不是关注于源文件，因为页面上很多元素是源文件里没有的，是动态生成的，对于那些动态生成的HTML元素，看看作用在它上面的CSS是哪些，再去修改其CSS或添加新的CSS。 对于CSS3，如果CSS3能达到更好的视觉效果，那就使用，不用去管那些不支持CSS3的浏览器，毕竟CSS3是一发展趋势，对于静态页面的设计人员也应该熟悉CSS3的那些效果（比如圆角、文字阴影……），来代替之前需要用图片来实现的效果。
阅读(...) 评论()css3中的@font_CSS教程_前端技术
您的位置： &
& 详细内容
文章简介：ICOFONT制作常用社交图标。
icofont为何物？图标字体也。图标和字体怎能混为一谈呢？icofont就是用font-family来实现icon，主要用到了css3中的@font-face。
实现我们来熟悉一下@font-face这个属性。
@font-face的语法规则：
@font-face {&& font-family: &YourWebFontName&;&& src: &source& [&format&][,&source& [&format&]]*;&& [font-weight: &weight&];&& [font-style: &style&];&}
取值说明：
YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如&font-family:&YourWebFontName&;&
source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
浏览器兼容：
浏览器兼容问题上不用太担心，&@font-face&规则首先定义在 CSS2 规范中，但是在 CSS2.1 中被删除，目前又被纳入到 CSS3 推荐草案中，所以不用担心IE系列，从IE4开始就支持这一属性了，并且现在一些主流的浏览器（Chrome 1+/Firefox 3.5+/Safari 3.1+/iOS 3.1+/Opera 10+）也都支持。
字体格式：
说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体。
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。举个栗子：
在font-face的应用中，由于中文字体文件过大，并不常用。如果需要英文字体的话，推荐大家用google的Google Web Fonts /webfonts .但可以使用font-face制作一些小图标，效果极好。
icoMoon 使用方法
推荐使用一个icofont的网站 icomoon首先进入网站选择 icoMoon App ,start the App.
然后选择需要使用的图标，选择下一步。最后将所需的图标重新自定义命名，下载自定义后的文件。文件中包括了各种字体。现在就可以使用酷酷的icofont了。
使用说明：
@font-face {font-family: "icofoont";src: url("icofont.eot");src:url("icofont.ttf")& format("truetype");& }&span{font-family: "icofoont";font-size:30padding:10}&div&&&&span&a&/span&&&&span style=&color:#3F5CA2&&b&/span&&&&span style=&color:#D2462F&&c&/span&&&&span style=&color:#215676&&d&/span&&&&span style=&color:#31B5F5&&e&/span&&&&span style=&color:#d6d6d6&&f&/span&&&&span style=&color:#b4ea5d&&g&/span&&&&span style=&color:#00ADEF&&h&/span&&&&span style=&color:#F47E24&&i&/span&&/div&
最后上效果图奉上优雅的 DOME
( 00:47:38)
( 00:47:22)
( 00:42:37)
( 00:41:11)
( 00:40:50)
( 00:39:48)
( 00:39:32)
( 12:41:04)
相关排行总榜}