标签显示模式,复合选择器,规范

1.标签显示模式

  • 行内样式表
  • 内部样式表
  • 外部样式表   link连接css与html

 标签显示模式

  1. 块标签:div,p,ol,ul等   可以设置高度,宽度
  2. 行内元素:span,a,strong等
  3. 行内块元素:img,input,td

标签显示模式,复合选择器,规范_第1张图片

标签显示模式转换

 display:inline  块集元素转换为行内

 display:block  行内元素转换为块集

 display:inline-block 行内块显示模式

2.复合选择器

  • 交集选择器:标签.class{}  既满足标签又满足class
  • 并集选择器:标签或者类选择器用逗号隔开{}
  • 后代选择器:层层关系用空格隔开{}
  • 子元素选择器:类>亲儿子{}

     案例:




    
    
    
    复合选择器
    


    
    
左侧导航栏
登录
  • 属性选择器一:标签[属性] 或者   标签[属性=值]
  • 属性选择器二:标签[属性^=font] 表示以font开头 或者 标签[属性$=font] 表示以font结尾 或者 标签[属性*=font] 表示以font任意位置
  • 伪元素选择器一:E::first-letter{}  E::first-line{}  E::selection{}       注意:代表伪类 ::代表伪元素
  • 伪元素选择器二:E::before{content:" ";}内部前面插入 E::after{content:" ";}内部后面插入

 3.规范

  1. 并集选择器的各个元素换行
  2. 大括号之前加个空格
  3. 属性:之后不可以有空格
  4. 一般情况下不允许超过三级
  5. 每个属性写完后面加“;”

修改案例


    
    
    复合选择器
    


    
    
左侧导航栏
登录

 

 

 

你可能感兴趣的:(CSS)