码迷,mamicode.com
首页 > Web开发 > 详细

16-CSS选择符详解

时间:2020-03-22 13:58:19      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:嵌套   两种   组合   区别   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{}

16-CSS选择符详解

标签:嵌套   两种   组合   区别   navig   常用   索引   控制   而且   

原文地址:https://www.cnblogs.com/xiang-liang/p/12545408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!