web第五天复合样式与选择器

一,复合样式

1,background : 复合的值通过空格隔开,并且没有顺序要求。(未在复合样式中规定的属性值会赋一个默认值)

  backgroung-size : 如果想添加到复合样式中,一般加在background-position后,用/隔开 (x y / w h)

  background-size : 还可以将该样式添加在复合样式后

2,border : 复合的值通过空格隔开,并且没有顺序要求。(未在复合样式中规定的属性值会赋一个默认值)

3,font : 复合写法是有顺序的,并且最少要写两个值(size family)

  weight  style  size  family

  style  weight  size  family

  style  weight  size/line-height  family

  注 : text是没有复合写法的。

  注 : 尽量不要混写,如果非要混写,那么先写复合样式再写单一样式。

二,CSS选择器

  

  1,ID选择器:

    快捷键创建 : div#elem + tab键 - >  <div id="elem"></div>

    ID选择器规范 :

      在一个页面中, ID是唯一值。(身份证)

      命名规范 : 由数字,字母,_组成,(命名的第一位不能是数字)

    除了常规写法外,命名方式还有 : 驼峰式,下划线式,短线式。

      常规:leftsidebar

      驼峰式:leftSideBar

      下划线式: left_side_bar

      短线式:left-side-bar ( W3C推荐的写法 )

   

  2,CLASS选择器(类选择器)

    1,class选择器是可以复用的。

         跟ID选择器有很大区别,复用代码的能力非常强。(在网页中使用的频率十分高)

    2,可以添加多个class样式

          与ID选择器的区别 : ID只能写一个, class可以写多个, 通过空格隔开。

    3,多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。

      看CSS样式的优先级,不看class属性的顺序。

    4.标签加类的写法 :

      div.elem{}

  3,标签选择器(TAG选择器)

    

    div{} - > <div></div>

    使用场景 : 1,ul{list-style:none}  2,  a{text-decoration:none} 

  4,群组选择器(分组选择器)

    div, p, h1{color: red;}

  5,通配选择器

    *{}(*是所有标签的意思)

    使用场景 : 有时候需要去掉所有标签的默认样式。

  6,层次选择器

    后代 : M  N

    找M下的所有N。

    父子 : M>N

    找M下的子标签N。

    兄弟 : M~N

    相邻 : M+N

    特点 : ~找M标签下所有的N标签

        +找M标签下相邻的N标签(仅一个)

        无论是 ~   +  都是找下面的兄弟,上面的兄弟不会有作用。

  7,属性选择器

    M [ ] : [class="elem"]  *   ^   $

    *(模糊搜索)class里面只要有elem,div[class*="elem"]

    ^(起始值搜索)class起始值为elem,div[class^="elem"]

    $(结束值搜索)class结束值为elem,div[class$="elem"]

    组合属性选择器 : M [ ]  [ ]  [ ]{}

  8,伪类选择器

    CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。

      

    :link      访问前的选择器     ( 只能加给a标签 )

    :visited   访问过后的选择器   ( 只能加给a标签 )

    :hover     鼠标移入的选择器    ( 所有标签都能添加 )

    :active    鼠标按下的选择器    ( 所有标签都能添加 )
 
    注 : a标签如果四个伪类都添加的话,那么是有顺序的 L V H A。
        一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
    

  

    :before ;after ( 特点,不用单独在创建一个标签,就可以给文本添加样式 )

    input:checked{ width:100px; height:100px;}(选中事件)
    input:disabled{ width:100px; height:100px;}(无法点击事件)

    当标签能够获取焦点的时候,会触发 :focus(点击事件)
    input:focus{ background:Red;}

    结构性伪类选择器:将该结构的第n个属性添加样式。

    :nth-of-type()、 :nth-child()

    :first-of-type、 :first-child 

    :last-of-type、  :last-child

    :only-of-type、 :only-child

    ()中可以添加的值:number(第几个,从1开始) | n(表示一个0到无穷大的数)

 

           

猜你喜欢

转载自www.cnblogs.com/lykpy/p/12283135.html