【免费】CSS命名规则资源-CSDN文库

共20个文件

js：9个

gif：5个

htm：3个

需积分: 0 153 浏览量 2008-07-14 16:00:32 上传评论收藏 39KB RAR 举报

在网页设计领域，CSS（Cascading Style Sheets）是用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的关键技术。一个良好的CSS命名规则对于提高代码可读性、可维护性和团队协作至关重要。下面我们将深入探讨CSS命名规则，并结合ASP.NET开发环境中的应用进行讨论。 1. 命名规范： - BEM（Block Element Modifier）：这是最常见的CSS命名方法，由Yandex提出。Block代表组件，Element是组件的子部分，Modifier表示组件的不同状态或变体。例如，`header__logo` 表示头部组件中的Logo元素，`btn--primary` 表示主按钮的修饰符。 2. 避免使用CSS保留关键字：避免使用如`font`, `color`, `width`等作为类名，因为这些是CSS属性，可能会引起混淆。 3. 使用有意义的名称：类名应具有描述性，比如`nav-menu`而非`nm`，这有助于理解代码的意图。 4. 避免使用ID选择器：ID选择器具有高优先级，可能导致样式覆盖问题。通常推荐使用类选择器。 5. 使用驼峰式命名：对于多单词的类名，可以采用驼峰式命名，如`mainHeader`，而不是`main-header`。 6. 简短但不过于简洁：类名应该简洁，但也要有足够的信息来描述其功能，如`modal`而非`m`。 7. 避免使用CSS语义化标签：如`div`, `span`等，应尽可能使用语义化的HTML标签，如`article`, `section`等。在ASP.NET环境下，CSS命名规则同样重要。由于ASP.NET使用控件ID，这些ID在客户端渲染时可能变得复杂且难以预测，所以使用CSS类来进行样式控制更稳定。例如，为ASP.NET控件添加自定义CSS类，可以提高代码的可维护性。 1. 控件CSS类命名：为每个控件指定一个独特的CSS类，如`aspButton btnPrimary`，其中`aspButton`表示控件类型，`btnPrimary`表示样式。 2. 使用CSS框架：在ASP.NET项目中，常使用Bootstrap或其他CSS框架，它们有自己的命名规则，如Bootstrap的按钮类`.btn.btn-primary`。 3. 组织CSS文件：根据功能或模块组织CSS文件，如`header.css`, `footer.css`, `forms.css`等，这有利于代码管理和维护。 4. 模板化：在ASP.NET MVC中，可以使用视图模板和部分视图，为特定元素提供统一的样式处理。 5. 响应式设计：针对不同设备和屏幕尺寸，使用媒体查询（Media Queries）和适应性CSS类，如`.visible-sm`（在小屏幕上可见）。总结来说，遵循良好的CSS命名规则能提升代码质量，提高开发效率，同时在ASP.NET环境中，合理运用CSS可以帮助我们构建出结构清晰、易于维护的网页应用程序。

资源详情

资源评论

资源推荐

收起资源包目录

CSS命名规则.rar （20个子文件）

CSS命名规则

web标准设计常用的CSS命名规则_建站学.htm 32KB

web标准设计常用的CSS命名规则_建站学_files

z_vivi.js 534B

z_hexun.js 491B

arrow.gif 162B

geren.jpg 3KB

z_wozhai.js 486B

Search_Google.gif 745B

s.htm 132B

532900.js 2KB

Prototype.js 49KB

Click.htm 339B

z_365sky.js 317B

Logo.gif 3KB

Search_icon.gif 450B

z_yazhai.js 508B

style.css 13KB

z_yesky.js 430B

tuiguang.jpg 4KB

show_ads.js 14KB

pix.gif 43B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>web标准设计:常用的CSS命名规则_建站学</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content=css,命名,xhtml name=keywords> <META content=web标准设计:常用的CSS命名规则 name=description><LINK href="web标准设计常用的CSS命名规则_建站学_files/style.css" type=text/css rel=stylesheet> <SCRIPT language=JavaScript src="web标准设计常用的CSS命名规则_建站学_files/Prototype.js"></SCRIPT>  <META content="MSHTML 6.00.3790.1830" name=GENERATOR></HEAD> <BODY onmouseover="window.status='Ⅱ ◇ 建站学--培养优秀的网页设计师和站长！*_*';return true" contentEditable=false bgColor=#ffffff> <DIV class=class_top_tab> <DIV class=top>精彩专题推荐:<A class="navlist font" href="http://www.jzxue.com/Html/special/Special_jzrm.htm">建站之入门课</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_jzbx.htm">建站之必修课</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_gjk.htm">建站之关键课</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_jiazhi.htm">网站价值所在</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_liuliang.htm">流量提高专题</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_divcss.htm">css+div 标准</A> <A class="navlist font" href="http://www.jzxue.com/Html/special/Special_homepage.html">个人网站打造全过程</A> </DIV></DIV> <DIV class=tab> <DIV class=class_t_1><A href="http://www.jzxue.com/"><IMG alt=返回建站学首页 src="web标准设计常用的CSS命名规则_建站学_files/Logo.gif" border=0></A></DIV> <DIV class=class_t_2><SPAN id=ad_11><A href="http://www.jzxue.com/Ads/AdsClick.asp?Location=4" target=_blank><IMG height=60 alt=火狐浏览器 src="" width=460 align=top border=0></A> <SCRIPT src=""></SCRIPT> </SPAN></DIV> <DIV class=class_t_3> <UL> <LI><A href="http://www.jzxue.com/jzxue_search.html">网站搜索</A> <LI><A href="javascript:window.external.AddFavorite('http://www.jzxue.com','建站学');">收藏本站</A> <LI><A href="http://www.jzxue.com/html/mail/" target=_blank>联系我们</A> </LI></UL></DIV></DIV> <DIV class=daohang> <DIV class=daohang_1><STRONG>导航</STRONG>:</DIV> <DIV class=daohang_2><A style="TEXT-DECORATION: none" href="http://www.jzxue.com/">建站首页</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/sheji/">网站设计</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/kaifa/">网站开发</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/yunying/">网站运营</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/ruanjian/">网页软件</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/zhinan/">建站指南</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/youhua/">搜索优化</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/chuli/">图像处理</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/video/">视频教程</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/down/ebook/">书籍教程</A> | <A style="TEXT-DECORATION: none" href="http://www.jzxue.com/html/lesson/">建站专题</A></DIV></DIV> <DIV class=blank><IMG height=1 src="web标准设计常用的CSS命名规则_建站学_files/pix.gif"></DIV> <DIV class=tab><SPAN id=ad_12 align="center"> <TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0> <TBODY> <TR> <TD> <LI><A href="http://www.jzxue.com/Files/ad/GoogleAdSense/GoogleAdsense.htm" target=_blank><FONT color=#009900>让你的网站产生收益赚钱,有博客和网站的绝对不能错过</FONT></A></LI></TD> <TD> <LI><A href="http://www.jzxue.com/Files/ad/GoogleAdSense/GoogleAdWords.htm" target=_blank><FONT color=#009900>将指定的流量带到你的网站,为你站增加有效的访客,为你提升业绩</FONT></A></LI></TD></TR></TBODY></TABLE></SPAN></DIV> <DIV class=blank><IMG height=1 src="web标准设计常用的CSS命名规则_建站学_files/pix.gif"></DIV> <DIV class=tab> <DIV class=class_tab_l> <DIV class=class_weizhi>当前位置:<A href="http://www.jzxue.com/" target=_self>首页</A>><A href="http://www.jzxue.com/Html/sheji/" target=_self>网站设计</A>><A href="http://www.jzxue.com/html/css/" target=_self>css教程</A>>正文 </DIV> <DIV class=blank><IMG height=1 src="web标准设计常用的CSS命名规则_建站学_files/pix.gif"></DIV> <DIV class=jzxue_lanse_da> <DIV class=jzxue_lanse_t></DIV> <DIV align=center> <H1><B>web标准设计:常用的CSS命名规则</B></H1></DIV> <DIV class=article_title align=middle valign="center"> <HR width="97%" SIZE=1> </DIV> <DIV align=center>来源:不详时间:07-04-02 点击: <SCRIPT language=JavaScript src="web标准设计常用的CSS命名规则_建站学_files/Click.htm"></SCRIPT> <SPAN id=NS_id_click_AI6D70GHCE96IEF></SPAN> <SPAN onmousemove="status='收藏本页文章';" onclick="window.external.AddFavorite(document.location.href,'web标准设计:常用的CSS命名规则')" onmouseout="status='';"><FONT color=#ff0000>点击这里收藏本文</FONT></SPAN></DIV><SPAN class=content_td> <DIV class=show_txt_guanggao id=ad_33> <SCRIPT type=text/javascript> </SCRIPT> <SCRIPT src="web标准设计常用的CSS命名规则_建站学_files/show_ads.js" type=text/javascript> </SCRIPT> </DIV><SPAN id=daodu></SPAN> <P>　　常用的CSS命名规则</P> <P>　　头：header</P> <P>　　内容：content/container</P> <P>　　尾：footer</P> <P>　　导航：nav</P> <P>　　侧栏：sidebar</P> <P>　　栏目：column</P> <P>　　页面外围控制整体<A href="http://www.jzxue.com/Html/buju/" target=_blank>布局</A>宽度：wrapper</P> <P>　　左右中：left right center</P> <P>　　登录条：loginbar</P> <P>　　标志：logo</P> <P>　　广告：banner</P> <P>　　页面主体：main</P> <P>　　热点：hot</P> <P>　　新闻：news</P> <P>　　下载：download</P> <P>　　子导航：subnav</P> <P>　　菜单：menu</P> <P>　　子菜单：submenu</P> <P>　　搜索：search</P> <P>　　友情链接：friendlink</P> <P>　　页脚：footer</P> <P>　　版权：copyright</P> <P>　　滚动：scroll</P> <P>　　内容：content</P> <P>　　标签页：tab</P> <P>　　文章列表：list</P> <P>　　提示信息：msg</P> <P>　　小技巧：tips</P> <P>　　栏目标题：title</P> <P>　　加入：joinus</P> <P>　　指南：guild</P> <P>　　服务：service</P> <P>　　注册：regsiter</P> <P>　　状态：status</P> <P>　　投票：vote</P> <P>　　合作伙伴：partner</P> <P>　　(二)注释的写法:</P> <P>　　/* Footer */</P> <P>　　内容区</P> <P>　　/* End Footer */</P> <P>　　(三)id的命名:</P> <P>　　(1)页面结构</P> <P>　　容器: container</P> <P>　　页头：header</P> <P>　　内容：content/container</P> <P>　　页面主体：main</P> <P>　　页尾：footer</P> <P>　　导航：nav</P> <P>　　侧栏：sidebar</P> <P>　　栏目：column</P> <P>　　页面外围控制整体<A href="http://www.jzxue.com/Html/buju/" target=_blank>布局</A>宽度：wrapper</P> <P>　　左右中：left right center</P> <P>　　(2)导航</P> <P>　　导航：nav</P> <P>　　主导航：mainbav</P> <P>　　子导航：subnav</P> <P>　　顶导航：topnav</P> <P>　　边导航：sidebar</P> <P>　　左导航：leftsidebar</P> <P>　　右导航：rightsidebar</P> <P>　　菜单：menu</P> <P>　　子菜单：submenu</P> <P>　　标题: title</P> <P>　　摘要: summary</P> <P>　　(3)功能</P> <P>　　标志：logo</P> <P>　　广