`
pcajax
  • 浏览: 2112743 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS 命名规范参考及书写注意事项

CSS框架 
阅读更多


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

左右中：left right center

　三．导航

导航：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

 

Container div

#container

容器

Layout

#layout

布局

Header or banner div

#head, #header

页头部分

Footer div

#foot, #footer

页脚部分

Navigation list

#nav

主导航

Sub-navigation list

#subNav

二级导航

Menu

#menu

菜单

Sub Menu

#submenu

子菜单

Left or right side columns

#sidebar_a, #sidebar_b

左边栏或右边栏

Main div

#main

页面主体

Tag

#tag

标签

Message

#msg #message

提示信息

Tips

#tips

小技巧

Vote

#vote

投票

Friend Link

#friendlink

友情连接

Title

#title

标题

Summary

#summary

摘要

Search input

#searchInput

搜索输入框

Search output

#search_output

搜索输出和搜索结果相似

Search

#search

搜索

Search bar

#searchBar

搜索条

Search results

#search_results

搜索结果

Copyright information

#copyright

版权信息

brand

#branding

商标

branding-logo

#logo

LOGO

Site information

#siteinfo

网站信息

Copyright information etc.

#siteinfoLegal

法律声明

Designer or other credits

#siteinfoCredits

信誉

Join us

#joinus

加入我们

Partnership opportunities

#partner

合作伙伴

Services

#service

服务

Regsiter

#regsiter

注册

Arrow

arr/arrow

箭头

Little

#little

标题

Website map

#sitemap

网站地图

List

#list

列表

Home page

#homepage

首页

Sub page

subpage

二级页面子页面

Toolbar

#tool, #toolbar

工具条

Next pulls

#drop

下拉

Next pulls menu

#dorpmenu

下拉菜单

Status

#status

状态

Container div

#container

容器

Header or banner div

#header

页头部分

Main or global navigation div

#mainNav

主导航

Menu

#menu

菜单

Sub Menu

#submenu

子菜单

Left or right side columns

#sidebarA, #sidebarB

左边栏或右边栏

Main div

#main

页面主体

Content div

#content

内容部分

The main content area

#contentMain

主要内容区域

Footer div

#footer

页脚部分

Tag

#tag

标签

Message

#msg #message

提示信息

Tips

#tips

小技巧

Vote

#vote

投票

Friend Link

#friendlink

友情连接

Title

#title

标题

Summary

#summary

摘要

Sub-navigation list

#subNav

二级导航

Search input

#searchInput

搜索输入框

Search output

#searchOutput

搜索输出和搜索结果相似

Search

#search

搜索

Search results

#searchResults

搜索结果

Copyright information

#copyright

版权信息

brand

#branding

商标

branding-logo

#brandingLogo

LOGO

Site information

#siteinfo

网站信息

Copyright information etc.

#siteinfoLegal

法律声明

Designer or other credits

#siteinfoCredits

信誉

Join us

#joinus

加入我们 <

分享到：
| C#命名规范，SqlServer命名规范
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics