《css常用class名.docx》由会员分享，可在线阅读，更多相关《css常用class名.docx（13页珍藏版）》请在三一办公上搜索。
1、css常用class名CSS的class、id、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 版权：copyr
2、ight 滚动：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
3、 页面外围控制整体布局宽度：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
4、 标签页：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-siz
5、e: 12px; .font9pt font-size: 9pt; (3)对齐样式,使用对齐目标的英文名称,如 .left float:left; .bottom float:bottom; (4)标题栏样式,使用类别+功能的方式命名,如 .barnews .barproduct 注意事项: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写，除非一看就明白的单词. 主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单
6、forms.css 补丁 mend.css 打印 print.css CSS文件中class或id起名规则： 1） 开头字母一律小写 2） 尽量不要用缩写英文除非可以一目了然的 3） 如果遇到相差不大class或者id，主功能识别字母在前，位置识别字母在后，位置识别字母第一个可大写 4） 必须使用英文开头 css文件内容注释写法： Css文件内容注释统一采用： /* 注释内容 */ css文件存放位置： 所有css文件统一存放，例如在根目录下的style目录下 。 10个最常用的CSS className 很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，
7、一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。 1.class=”fixed” fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下 以下为引用的内容： .fixed:after content:.; display:block; height:0; clear:both; visibility:hidden; .fixed display:block; /* */ .fixed min-height:1%
8、; * html .fixed height:1%; 这个样式就可以用在下面的情形，每个li都是浮动的： 以下为引用的内容： . 2.class=”alt” alt是”alternative”的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样： 以下为引用的内容： #content img float:left; display:inline; margin-right:10px; border:1px solid #ccc; padding:1em 0; background:#fff; #content
9、img.alt float:right; margin-right:0; margin-left:10px; 3.class=”selected” 这个最经常用的，用来处理mouseover或选中元素的效果。 以下为引用的内容： About Us 4.class=”first”, class=”last” 直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。 5.class=”image” 平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的cl
10、ass=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做： 以下为引用的内容： This is me trying to look cool! The rest of the content here . 6. class=”inner” inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式： 7.class=”link” link跟image类似，我用来嵌套一个A标签，最经常用来制作”Read More”链接： 以下为引用的内容： Read more.
11、 8.class=”one”, class=”two”, class=”three” 这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单： 以下为引用的内容： Home About . 9.class=”even”, class=”odd” 用来实现隔行换样式，一般用在表格和列表： 以下为引用的内容： Content Content Content Content 10.class=”section” 一般用在为指定内容中特定部分添加特定的样式： 以下为引用的内容： content here. 要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了
12、，有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下： 首先讲一下div+css样式表的id的常用命名规则如下表所示: 实际上上面的div+css样式表的id命名也会经常用大小写和_来区分，比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用类型+变量名称的规则来命
13、名，比如写一个红色字体的class,可以.f_red (f是font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。 当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言，多多指教. CSS最常用的五类选择器 转载 准确而简洁的运用CSS选择器会达到非常好的效果。不必通篇给每一个元素定义类或ID，通过合适的组织，可以用最简单的方法实现同样的效果。在实际工作中，最常用的选择器有以下五类： 一、标签选择器： 顾名思议，标签选择
14、器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如： p font:12px; em color:blue; dl float:left; margin-top:10px; 二、id选择器： 我们通常给页面元素定义id。例如定义一个层 div id=menubar/div 然后在样式表里这样定义： #menubar margin:0 auto; background:#ccc; color:#c00; 其中menubar是你自己定义的id名称。注意在前面加#号。 id选择器也同样支持后代选择器，例如： #menubar p text-align:center
15、; line-height:20px; 这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的元素。 三、类选择器： 在CSS里用一个点开头表示类别选择器定义，例如： .da1 color:#f60; font-size:14px ; 在页面中，用class=类别名的方法调用： span class=da114px大小的字体/span 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多class综合症。 四、群组选择器： 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如： p, td, li line-height:20px; color:#c00;
16、#main p, #sider span color:#000; line-height:26px; .www_52css_com,#main p span color:#f60; .text1 h1,#sider h3,.art_title h2 font-weight:100; 使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。 五、后代选择器： 后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样： li strong font-style:italic; fo
17、nt-weight:800; color:#f00; #main p color:#000; line-height:26px; #sider .con span color:#000; line-height:26px; .www_52css_com p span color:#f60; #sider ul li.subnav1 margin-top:5px; 第一段，就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。其他以此类推。 后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可，例如下面的
18、h3与ul就不必指定class或id。 div id=sider h3/h3 ul li./li li./li li./li /ul /div 在这里CSS就可以及样写： #sider h3 . #sider ul . #sider ul li . 结合使用上面的四种CSS选择器，基本满足了CSS布局的需要，主要在于灵活的使用，特别是后代选择器的使用能大大的简化HTML文档，使HTML做到结构化明确，最小的代码实现同样的效果。 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active。 例如： a:linkfont-weight : bold ;text-decoration : none ;color : #c00 ; a:visited font-weight : bold ;text-decoration : none ;color : #c30 ; a:hover font-weight : bold ;text-decoration : underline ;color : #f60 ; a:active font-weight : bold ;text-decoration : none ;color : #F90 ;
