CSS命名规范参考及书写注意事项.docx
《CSS命名规范参考及书写注意事项.docx》由会员分享,可在线阅读,更多相关《CSS命名规范参考及书写注意事项.docx(32页珍藏版)》请在冰豆网上搜索。
![CSS命名规范参考及书写注意事项.docx](https://file1.bdocx.com/fileroot1/2023-6/8/583af301-1487-4047-a0bf-09351da688da/583af301-1487-4047-a0bf-09351da688da1.gif)
CSS命名规范参考及书写注意事项
CSS命名规范参考及书写注意事项,这里整理的比较全,web前端开发的朋友非常值得参考下。
CSS书写顺序
*{
/*显示属性*/
display
position
float
clear
cursor
…
/*盒模型*/
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*文字*/
color
font
content
/*边框背景为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈。
*/
border
background
}
下表顺序为从上到下,从左到右:
========================
display||visibility
list-style:
list-style-type||list-style-position||list-style-image
position
top||right||bottom||left
z-index
clear
float
width
max-width||min-width
height
max-height||min-height
overflow||clip
margin:
margin-top||margin-right||margin-bottom||margin-left
padding:
padding-top||padding-right||padding-bottom||padding-left
outline:
outline-color||outline-style||outline-width
border
background:
background-color||background-image||background-repeat||background-attachment||background-position
color
font:
font-style||font-variant||font-weight||font-size||line-height||font-family
font:
caption|icon|menu|message-box|small-caption|status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
CSS命名规则:
一.文件命名规范
全局样式:
global.css;
框架布局:
layout.css;
字体样式:
font.css;
链接样式:
link.css;
打印样式:
print.css;
主要的master.css
专栏columns.css
主题themes.css
主要的master.css
模块module.css
基本共用base.css
表单forms.css
补丁mend.css
二.页面结构
容器:
container
页头:
header
内容:
content
页面主体:
main
页尾:
footer
栏目:
column
页面外围控制整体布局宽度:
wrapper
左右中:
leftrightcenter
三.导航
导航:
nav
主导航:
mainbav
子导航:
subnav
顶导航:
topnav
边导航:
sidebar
左导航:
leftsidebar
右导航:
rightsidebar
菜单:
menu
子菜单:
submenu
摘要:
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
Containerdiv
#container
容器
Layout
#layout
布局
Headerorbannerdiv
#head,#header
页头部分
Footerdiv
#foot,#footer
页脚部分
Navigationlist
#nav
主导航
Sub-navigationlist
#subNav
二级导航
Menu
#menu
菜单
SubMenu
#submenu
子菜单
Leftorrightsidecolumns
#sidebar_a,#sidebar_b
左边栏或右边栏
Maindiv
#main
页面主体
Tag
#tag
标签
Message
#msg#message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
FriendLink
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Searchinput
#searchInput
搜索输入框
Searchoutput
#search_output
搜索输出和搜索结果相似
Search
#search
搜索
Searchbar
#searchBar
搜索条
Searchresults
#search_results
搜索结果
Copyrightinformation
#copyright
版权信息
brand
#branding
商标
branding-logo
#logo
LOGO
Siteinformation
#siteinfo
网站信息
Copyrightinformationetc.
#siteinfoLegal
法律声明
Designerorothercredits
#siteinfoCredits
信誉
Joinus
#joinus
加入我们
Partnershipopportunities
#partner
合作伙伴
Services
#service
服务
Regsiter
#regsiter
注册
Arrow
arr/arrow
箭头
Little
#little
标题
Websitemap
#sitemap
网站地图
List
#list
列表
Homepage
#homepage
首页
Subpage
subpage
二级页面子页面
Toolbar
#tool,#toolbar
工具条
Nextpulls
#drop
下拉
Nextpullsmenu
#dorpmenu
下拉菜单
Status
#status
状态
Containerdiv
#container
容器
Headerorbannerdiv
#header
页头部分
Mainorglobalnavigationdiv
#mainNav
主导航
Menu
#menu
菜单
SubMenu
#submenu
子菜单
Leftorrightsidecolumns
#sidebarA,#sidebarB
左边栏或右边栏
Maindiv
#main
页面主体
Contentdiv
#content
内容部分
Themaincontentarea
#contentMain
主要内容区域
Footerdiv
#footer
页脚部分
Tag
#tag
标签
Message
#msg#message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
FriendLink
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Sub-navigationlist
#subNav
二级导航
Searchinput
#searchInput
搜索输入框
Searchoutput
#searchOutput
搜索输出和搜索结果相似
Search
#search
搜索
Searchresults
#searchResults
搜索结果
Copyrightinformation
#copyright
版权信息
brand
#branding
商标
branding-logo
#brandingLogo
LOGO
Siteinformation
#siteinfo
网站信息
Copyrightinformationetc.
#siteinfoLegal
法律声明
Designerorothercredits
#siteinfoCredits
信誉
Joinus
#joinus
加入我们
Partnershipopportunities
#partner
合作伙伴
Services
#service
服务
Regsiter
#regsiter
注册
Status
#status
状态
Products
.products
产品
Productsprices
.productsPrices
产品价格
Productsdescription
.productsDescription
产品描述
Productsreview
.productsReview
产品评论
Editor’sreview
.editorReview
编辑评论
Newrelease
.newsRelease
最新产品
Publisher
.publisher
生产商
Screenshot
.screenshot
缩略图
FAQ
.faqs
常见问题
Keyword
.keyword
关键词
Blog
.blog
博客
Forum
.forum
论坛
五class的命名:
(1)颜色:
使用颜色的名称或者16进制代码,如
.red{color:
red;}
.f60{color:
#f60;}
.ff8600{color:
#ff8600;}
(2)字体大小,直接使用“font+字体大小“作为名称,如
.font12px{font-size:
12px;}
.font9pt{font-size:
9pt;}
(3)对齐样式,使用对齐目标的英文名称,如
.left{float:
left;}
.bottom{float:
bottom;}
(4)标题栏样式,使用“类别+功能“的方式命名,如
.barnews{}
.barproduct{}
XHTML-CSS写作建议
1.所有的xhtml代码小写
2.属性的值一定要用双引号(“”)括起来,且一定要有值
3.每个标签都要有开始和结束,且要有正确的层次
4.空元素要有结束的tag或于开始的tag后加上“/”
5.表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6.
到的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给重要的区块加上注释,如:
9.给图片加上alt标签
10.所有的标签必须进行合理的嵌套
11.根元素前必须有元素,宣告使用那一种DTD
12.根元素必须有xmlns属性来指定使用http:
//www.w3.org/1999/xhtml的namespace
一.常规书写规范及方法
1.选择DOCTYPE:
XHTML1.0提供了三种DTD声明可供选择:
过渡的(Transitional):
要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下:
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严格的(Strict):
要求严格的DTD,你不能使用任何表现层的标识和属性,例如
。
完整代码如下:
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):
专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。
完整代码如下:
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。
因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
2.指定语言及字符集:
为文档指定语言:
//www.w3.org/1999/xhtml”lang=”en”>
为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:
常用的语言定义:
标准的XML文档语言定义:
xmlversion=”1.0″encoding=”utf-8″?
>
针对老版本的浏览器的语言定义:
为提高字符集,建议采用“utf-8”。
3.调用样式表:
外部样式表调用:
页面内嵌法:
就是将样式表直接写在页面代码的head区。
如:
–body{background:
white;color:
black;}–>
外部调用法:
将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。
如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。
4、选用恰当的元素:
根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。
例如,使用P元素来包含文字段落,而不是为了换行。
如果在创建文档时找不到适当的元素,则可以考虑使用通用的div或者是span;
避免过渡使用div和span。
少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;
尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;
5、派生选择器:
可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:
.mainMenuulli{background:
url(images/bg.gif;)}
6、辅助图片用背影图处理:
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。
将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:
#logo{background:
url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}
7、结构与样式分离:
在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写:
页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。
如:
”#”>首页
”#”>介绍”#”>服务 ...
...
...
对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。