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

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

阅读更多


CSS
书写顺序

*{

/*显示属性*/

display

position

float

clear

cursor

 

/*盒模型*/

margin

padding

width

height

 

/*排版*/

vertical-align

white-space

text-decoration

text-align

 

/*文字*/

color

font

content

 

/*边框背景 为什么要把 boderbackground放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈。*/

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

加入我们 <

分享到:
评论

相关推荐

    CSS_命名规范参考及书写注意事项.rar

    本资料“CSS_命名规范参考及书写注意事项”将为你提供相关的指导原则。 1. BEM(Block Element Modifier)命名法:BEM是一种流行的CSS命名方法,由Yandex公司提出。它的核心理念是将CSS类名分为三部分:Block(块)...

    web前端+css命名 规范

    在Web前端开发中,CSS(层叠样式表)命名规范是至关...在实际工作中,可以参考提供的文档资源,如`CSS命名规范参考及书写注意事项.doc`、`WEB前端开发规范.doc`,以及`HTML+css PPT浅谈.rar`,深入理解并应用这些规范。

    网站开发必备参考手册[系列]

    CSS2.0中文手册.chm+CSS 命名规范参考及书写注意事项.chm+CSS_3.0.chm+DHTML 参考手册 - 颜色表.mht+Html DOM 手册.CHM+Html和css网页标准指南.chm+JavaScript参考手册E.chm+Javascript高级教程.CHM+JavaScript使用...

    如何规范 CSS 的命名和书写

    #### 常用CSS命名规则 - **通用结构**:例如`.header`, `.content`, `.footer`等。 - **导航结构**:例如`.nav`, `.sidebar`, `.submenu`等。 - **功能组件**:例如`.logo`, `.banner`, `.search`等。 - **状态标识...

    如何规范css的命名和书写

    本文将详细介绍CSS命名及书写方面的一系列最佳实践。 #### CSS书写顺序 在编写CSS时,按照一定的顺序组织属性可以提高代码的整洁度,便于后续的阅读与维护。通常推荐的顺序如下: 1. **位置属性**:包括`position...

    CSS属性编写顺序及命名规范

    ### CSS属性编写顺序及命名规范 #### 一、书写顺序 ...通过遵循以上CSS属性编写顺序、注意事项及命名规范,可以显著提升前端项目的质量和可维护性,帮助开发者构建更加高效、易维护的网站或应用。

    网页前端css书写规范

    在编写CSS命名规则时,常见的命名包括头部(header)、内容(content/container)、尾部(footer)、导航(nav)、侧栏(sidebar)、栏目(column)、页面外围控制布局宽度(wrapper)、左右中(left/right/center)...

    CSS命名规则--参考表.pdf

    ### CSS命名规则与实践 #### 文件命名规范 在进行网页设计时,良好的文件命名习惯能够极大地提高工作效率并便于团队协作。以下是一些常用的CSS文件命名规范: - **全局样式**:`global.css`,用于存放整个网站...

    CSS样式书写顺序和命名规范及注意事项

    书写顺序的意义 减少浏览器reflow(回流),提升浏览器渲染dom的性能 ①:解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构 ②:构建render树:DOM树和CSS树合并之后形成...

    CSS书写规范

    9. **CSS命名规范**: - 头部:header - 内容:content/container - 尾部:footer - 导航:nav - 侧栏:sidebar - 栏目:column - 页面宽度:wrapper - 左右中:left, right, center - 登录:loginbar - ...

    CSS书写规范、顺序和命名规则

    在编写CSS时,遵循一定的书写规范、顺序和命名规则至关重要,因为这不仅有助于提升代码的可读性,还可以促进团队间的协作效率。以下是一些关于CSS书写规范、顺序和命名规则的详细说明: **一、CSS书写顺序** 1. **...

    css(层叠样式表)规范文档

    #### 六、其他书写注意事项 **1. 鼠标手势** 使用 `pointer` 而不是 `hand` 来表示鼠标悬停时的手势。 **2. 代码缩写** 尽可能地使用缩写形式,比如将 `.white{#ffffff}` 缩写为 `.white{#fff}`。 以上就是关于...

    豆瓣css规范

    #### 六、修改全站级CSS的注意事项 - 不建议轻易修改全站级CSS文件,因为这可能会影响到整个站点的外观和功能。若确实需要修改,务必进行全面的测试以确保不会引入新的问题。 #### 七、CSS规则的书写格式 1. 属性...

    CSS进阶学习资源 面试题

    以上内容覆盖了CSS书写顺序、书写规范、注意事项、文件命名以及Flash和JavaScript交互的基本概念,还包括了JavaScript数组常用方法的总结,这些都是前端开发者面试和实际工作中经常会遇到的问题点。

    HTML,CSS的命名习惯总结

    在其他注意事项中,提出了代码书写的最佳实践,包括一律使用小写字母、尽量使用英文命名、不使用中杠和下划线、尽量不使用缩写等原则。这些规则有助于确保代码风格的统一,减少歧义。 对于CSS文件的命名,也提供了...

    XHTML DIV CSS教程

    - **注意事项**: 页面中每个 ID 必须是唯一的。 **Class 选择符** - **定义**: 类选择符允许为多个元素定义相同的样式。 - **示例**: ```html &lt;div class="font1"&gt;&lt;/div&gt; &lt;p class="font1"&gt;&lt;/p&gt; ...

Global site tag (gtag.js) - Google Analytics