标签:嵌套 两种 组合 区别 navig 常用 索引 控制 而且
CSS选择符命名
规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义两个div,一个id命名为“div1”,另外一个命名为“news”,肯定第二个比较易读,而且搜索引擎抓取率高,在团队合作中还可以提高工作效率。为了达到这种效果我们就要规范化命名(语义化命名)!
关于CSS命名法,和其他的程序命名差不多,主要有三种:驼峰,帕斯卡,匈牙利法。
驼峰命名法:除第一个单词首字母小写外,其余所有单词首字母都大写
例:#headerBlock,.navMenuRedButton
帕斯卡命名法:与驼峰相似,区别就是所有单词首字母都大写
例:#HeaderBlock, .NavMenuRedButton
匈牙利命名法:是需要在名称前面加上一个或者多个小写字母作为前缀
例 head_navigation, .red_navMenuBotton
前两种比较常用,其实CSS命名就一个原则“容易理解,方便协同工作”
网页模块的常用CSS命名
头:header 热点:hot 内容:content 新闻:news
尾:footer 下载:download 导航:nav 广告:banner
侧栏:sidebar 页面主体:main 栏目:coluumn 子导航:subnav
页面外围控制整体布局宽度:prapper 菜单:menu 左右中:left right center
子菜单:submenu 登陆条:loginbar 版权:copyright 标志:logo
友情链接:friendlinks
ID选择符:与类选择符相似,只是以英文 “#” 开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式
如:#main{属性:值}
同时给某个元素应用多个类与ID
<p class="a1 a2" id="a6">......</p>
通配选择符: *{属性:值},用于定义所有的html元素
包含选择符(嵌套、派生):语法 e1 e2{属性:值}
含义是所有被e1包含的e2
如:table td{属性:值} #header li a{属性,值}
优点就是不需要再单独为ID为header的标签内,li标签内的a标签再定义class或者ID,css代码就少了、同样优化了css代码
选择符分组(集体控制):将同样的样式定义用于多个选择符,选择符之间用逗号分隔。
如: p,div,warning{属性:值}
标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符
例:h1#content{}表示针对所有id为content的h1标签
h1.p1{}表示针对所有class为p1的h1标签
组合选择符:将以上选择符进行组合使用
h1.p1,#content h1{}
标签:嵌套 两种 组合 区别 navig 常用 索引 控制 而且
原文地址:https://www.cnblogs.com/xiang-liang/p/12545408.html