当前位置 : 主页 > 网络编程 > PHP >

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

来源:互联网 收集:自由互联 发布时间:2023-09-06
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align … /*文字*/ color font content /*边框背景 为什么要


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

加入我们

网友评论