6.23 学习笔记

CSS段落样式

line-height:定义行高

 一行文字的高度，上边距和下边距的等价关系。

 默认行高:不是固定值，根据当前字体的大小不断变化

取值:1.number（px）     scale（比例值，跟文字大小成比例）

letter-spacing:字之间的间距

word-spacing:词之间的间距

强制折行:（针对英文、数字）

 1.worder-break:break-all（非常强烈的折行）

 2.word-wrap:break-word（不是那么强烈的折行，会产生一些空白区域）

11、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。

一个CSS属性控制多种样式，叫做复合样式

复合样式的写法是通过空格的方式实现的，有的需要注意顺序，有的不需要

 1.background:red   url（）   repeat   0   0

 2.boder:1px   red   solid

 3.font:

 注:至少写两个值  size family（需要注意顺序）只这俩注意顺序，且放在最后

        要先写复合再写单一:样式才不会被覆盖

 12、CSS选择器

      1.id选择器

         CSS:#elem{}

         HTML:id＝“elem”

      注: 1.在一个页面中，一个id值只能出现一次

         2.命名的规范，由字母，下划线，中划线，字母（第一个不能为数字）

         3.驼峰写法:searchButtor（小驼峰）   SearchButton（大坨峰）        searchSmallButtom

            短线写法:search-small-button

            下划线写法:search_small_button

  2.class选择器

       css:.elem{}

       html:class＝“elem”

       注: 1.class选择器是可以复用的

          2.可以添加多个class样式

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

          4.标签＋类的写法

  3.标签选择:(TAG选择器）

      div{}        <div></div>

      使用场景:去掉某些标签的默认样式；复杂选择器中，如  层次选择器

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

    通过，的形式给多个不同的选择器添加统一的CSS样式，来达到代码的复用

     div，#text，title{background:red}

  5.，通配选择器

       *{    }–＞  div，ul，li，p，h1，h2……{}

       注:尽量避免使用，因为会给所有的标签添加样式

     使用场景:去掉所有标签的默认样式

  6.层次选择器

      后代   M N {  }

      父子   M＞N{   }

      兄弟   M～N {   }当前M下面的所有兄弟N标签

      相邻   M＋N{    }当前M下面相邻的N标签

  7.属性选择器

    M【attr】{   }

    ＝:完全匹配

    *＝:部分体会

    ^＝:起始匹配

    $＝:结束匹配

     【】【】【】:组合匹配

  8.伪类选择器

     M:伪类{  }

       :link         访问前的样式(只能添加给a标签)

       :visited      访问后的样式(只能添加给a标签)

           :hover       鼠标移入时的样式(可以添加给所有的标签)

           :active       鼠标按下时的样式(可以添加给所有的标签)

        注:一般的网站都只设置

           a{  }   (link visited active )    a:hover{  }

           :after、:before   通过伪类的方式给元素添加一段文本内容，使用content属性

           :checked、:disable、:focus   都是针对表单元素的