AI智能
改变未来

CSS第二天——复合选择器、块级行内元素、背景属性、css特性、优先级权重


复合选择器

后代选择器:  空格
子元素选择器: >
交集选择器:  紧跟写 不空格
并集选择器:  逗号,
链接的类选择器:
  a:link    未访问
  a:visited   已访问
  a:hover   鼠标经过
  a:active   按下鼠标不放时
  实际应用:先总写a —— a:hover

标签显示模式

块级元素:div、h1–h6、p、ul、li、dl、dt、dd
    独占一行,可设宽高
    没设宽度,默认父级100%
    里面可放行内或块级元素
    (p不能放div,h、dt不放其他块级)
行内元素:a、span、u、s、del、strong、em、i、ins
    一行共存多个,宽高不生效,内容撑开
    内部只放文本、行内元素
行内块元素:img、input、button
    一行共存多个,宽高生效,默认内容撑开

转块级:  display:block;
转行内:  display:inline;
转行内块: display:inline-block;

单行文本垂直居中,行高等于高度

背景属性

背景颜色:  background-color:
背景图片:  background-image: url( );
背景平铺:  background-repeat:no-repeat;
                repeat-x  x轴平铺
                repeat-y  y轴平铺
背景定位:  background-position:水平(x) 垂直(y)
                left、right   top、bottom
                    center
背景图片固定:background-attachment:fixed
综合写法:
  background:color url repeat fixed x轴 y轴
        颜色    平铺  固定

背景透明:  background:rgba(0,0,0,.3)
       (不会影响内容透明度)
透明:    opacity:0—1
         完全透明—不透明
       (背景,内容都透明)

css三大特性

层叠性(覆盖): 样式重叠、后覆盖前
继承性:     除a外,font- / color 子会继承父
优先级,权重:  !important  最高
         内联样式  style=\” \”  1000  1,0,0,0
         ID           100   0,1,0,0
         类,伪类        10   0,0,1,0
         标签          1    0,0,0,1
         
         基础选择器:id = 100 > 类 = 10 > 标签 = 1
         
         没有进位
         继承权重为0

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS第二天——复合选择器、块级行内元素、背景属性、css特性、优先级权重