导航:首页 > 万维百科 > 网页设计CSS目标规则命名

网页设计CSS目标规则命名

发布时间:2020-09-18 05:45:50

1、div+CSS的命名规则?

css样式的类名或者相关的ID名也是需要一定的规则,这样有利于前台和后台的交互。
1、一般公司开发都是给技术员一本网站前端开发规范,里面详细的说明了各个命名的规则等相关的问题。
2、常见的人们约定的命名习惯为:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

2、怎么给div+css样式表命名的规则

DIV+CSS样式表命名不能随意而为,否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样,DIV+CSS样式表命名也需要遵循规则。

DIV+CSS样式表的id的常用命名规则如下表所示:
页头 header 登录条 loginBar 标志 logo
侧栏 sideBar 广告 Banner 导航 nav
子导航 subNav 菜单 menu 子菜单 subMenu
搜索 search 滚动 scroll 页面主体 main
内容 content 标签页 tab 文章列表 list
提示信息 msg 小技巧 tips 栏目标题 title
加入 joinus 指南 guild 服务 service
热点 hot 新闻 news 下载 download
注册 regsiter 状态 status 按钮 btn
投票 vote 合作伙伴 partner 友情链接 friendLink
页脚 footer 版权 copyRight

DIV+CSS样式表的class的常用命名规则如下表所示:
外 套 wrap 主导航 mainNav 子导航 subnav
页 脚 footer 整个页面 content 页 眉 header
商 标 label 标 题 title 主导航 mainNav
边导航 sidebar 左导航 leftsideBar 右导航 rightsideBar
旗 志 logo 标 语 banner 菜单内容 menu1Content
菜单容量 menuContainer 子菜单 submenu 边导航图标 sidebarIcon
注释 note 面包屑 breadCrumb 容器 container
内容 content 搜索 search 登陆 login
功能区 shop 当前的 current

3、css样式表名字有什么规则?

常用的CSS命名规则:
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar
栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center
登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot
新闻:news 下载:download 子导航:subnav 菜单:menu
子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer
版权:copyright 滚动:scroll 内容:content 标签页:tab
文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title
加入:joinus 指南:guild 服务:service 注册:regsiter
状态:status 投票:vote 合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 导航:nav
侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav 主导航:mainbav 子导航:subnav
顶导航:topnav 边导航:sidebar 左导航:leftsidebar
右导航:rightsidebar 菜单:menu 子菜单:submenu
标题: title 摘要: summary
(3)功能
标志: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的命名:
(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 { }
.barproct { }

4、CSS布局命名规范

页头:header 如:#header{属性:属性值;}或.header{属性:属性值;}
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.CSS的 ID 的命名
外 套: wrap
主导航:mainNav
子导航:subnav
页 脚:footer
整个页面: content
页 眉:header
页 脚:footer
商 标:label
标 题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗 志:logo
标 语:banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释: note
面包屑:breadCrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: login
功能区:shop(如购物车,收银台)
当前的 current

2.CSS样式文件命名如下

主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

5、计算机一级dw中CSS目标规则名定为.gk要加点吗?

DIV中为CLASS,在CSS中需要加点 .
伪类可以不用加哈。

6、网页制作中命名有什么规则?像第一页为index.html.

第一页(首页)命名其实也是可以任意的。不过,在你绑定的服务器里的首页名要与之对应,不然,会打不开首页。

命名主要是为了好记、规范和与别人接轨,大家都这么做,才便于交流,如果你的首页非要取个com.html,也没人管你,但如果你的站点放在别的服务器,而这个服务器不支持自定义首页命名,那你就麻烦大了。

另外,很多网站的网面文件命名用拼音,真是掉价,这点要注意。另外也有用数字的,结果到最后都分不清哪儿是哪儿了。

所以,要养成一个好的命名习惯,这很重要。比如将图片放在一个目录,数据放在另一个目录,网页在一个目录。

7、CSS样式怎样命名才规范,css命名规则大全

这个链接就是CSS命名规则大全
http://www.divcss5.com/jiqiao/j4.shtml

8、网页DIV+CSS怎么规范命名.详细一定把。比如id、css、div、文件名、不要复制的。谢谢!

命名规则主要是要求在同一维度,让同一个团队的成员都能明白的。当然,也有公共命名方式的,例如head,body等等的。

例如,我们做一个DIV+CSS,就板块而言,先划分好:头部,通栏,左栏,右栏,内容区,底部等的大区块。然后,采用统一的命名。

CSS的命名,划分为:排版性区块,功能性区块,列表性区块等
即:排版性:main_head,main_body,main_left,main_right,main_footer;
功能性区块:FL(float-left),FR,将常用的建立类;方便调用;
还有就是列表:list_x(左右排列),list_y(上下排列的);

而div的命名也是按上述方式,先排版,再到功能性的;
比如,头部的<div id="main_head"></div>,如果头部里面的logo,那么main_head_logo等等;

多用类,因为一个div可以同时接受多个类,所以,命名的规则就是需要简单,明确,可读。

9、关于CSS规则的命名问题

不用要可视化,那个很烂的,用那个的换工作都难有人要
另外你说的#那是定义一个ID, .的话是class - 类

10、请问有没有关于网页制作中好的命名规则?还有如何合理的分配每个分页的CSS文件?

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

id的命名

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

导航

导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单: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的命名

(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 { }
.barproct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 mole.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

与网页设计CSS目标规则命名相关的知识