第2课命名.pptVIP

命名 CSS选择器命名及常用命名 ???规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义了两个div，一个id命名为 “div1”，另外一个命名为“News”，肯定第二个比较易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效率。为了达到这种效果我们就 要规范化命名（语义化命名）！说个题外话，规范化命名的代码，会显着更加专业！ ?关于CSS命名法，和其他的程序命名差不多，主要有三种： 骆驼命名法 帕斯卡命名法 匈牙利命名法 看他们的名字挺不好理解的，不要被吓到了，其实很容易 骆驼命名法 说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母，大写的英文就相当于骆 驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下： 第一个单词（nav）的第一个字母（n）用小写，第二个单词（menu）的第一个字母用大写（M），第三个单词（red）的第一个字母也用大写（R），第四个单词（button）的第一个字母还是用大写（B），同样后面所有单词的首字母都要大写。 帕斯卡命名法 这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下： 匈牙利命名法 匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如： ?头：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? ?? ???小技巧：tips 从下节课开始，将介绍CSS布局页面中的很重要的两个概念：? ?? ?  1）盒子模型? ?? ? 2）内联元素VS块状元素 强调：这两块内容要求大家一定要理解透彻，不然会对后面的实战练习有影响，比如做出来的页面错位，就是因为对这两块的内容理解不够导致的。 * * #headerBlock 第一个单词（header）的第一个字母（h）用小写，第二个单词（block）的第一个字母用大写（B），如果第二个单词后面还有单词？那就是下面这种情况 .navMenuRedButton #HeaderBlock 和骆驼命名法只有一点区别，就是所有单词的首字母都要大写，当然也包括第一个单词（header）的首字母（h）了，也要大写。 .NavMenuRedButton 如果有多个，也是全部单词的首字母均要大写。题外话，如果说“骆驼命名法”是单峰驼的话，那么“帕斯卡命名法”就是双峰驼~ #head_navigation .red_navMenuButton 以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则“容易理解，方便 协同工作”就OK了，或者说“即使不懂代码的人看了代码也知道这块起什么作用”，没有必要强调是哪种命名法，根据个人喜好使用就行。? ?? ???以下为页面模块的常用命名：