2016年11月 选择器的基本用法和Css的特性

3种基本的选择器：  标签选择器   id选择器  类选择器
4种复合的:  后代选择器  交集选择器  并集选择器

三  css的特性

   1 继承性 ：有一些属性，当给自己设置的时候，

自己的后代就已经继承，哪些属性可以被继承？

     color、text-开头的、font-开头的，line-开头的这些文字样式的

可以被继承 ；盒子、布局、定位不能被继承的

     如何让整个页面设置字号为14px,字体颜色为灰色

             body {

                  color:gray;

                  font-size:14px;

              }

    2 层叠性（面试或笔试常出现）

      a 当多个选择器出现，会对元素样式造成影响；

      b css处理冲突的能力

       如何计算权重？

      id选择器的数量  类选择器的数量   标签选择器的数量，依次比较

 id数量大的就权重高，若相等，接着比类数量，依次类推，假如

 三者数量都一样即权重一样，谁在后面听谁的

    注意：选择器没有直接选中到元素，通过继承设置的，此时

 权重为0，若大家都是0，谁描述的近，就听谁的

      

          1         1               1

        

          1        0                  3

         0          3              4  

四  ******盒模型 （非常重要）

      盒子： 能放内容的标签，如p、div、span、a等

      与盒子相关的属性：

              width:  宽度  指的是盒子内容的宽

              height: 高度  指的是盒子内容的高

             padding: 内边距

             margin: 外边距

             border:   边框

     盒子真实的宽度=左边框的宽度+左padding+width+右padding+右边框

     ......................高    = 上边框+上padding+height+下padding+下边框

   

  padding属性的写法：

        用小属性（分别描述）：

                 padding-top: 上内边距

                 padding-right: 右内边距

                 padding-bottom: 下内边距

                 padding-left: 左内边距

       综合属性： padding:40px; 表示上下左右都是40px

                            padding: 10px 20px 20px 30px;

                                           上     右     下     左    （顺时针方向）

                            padding: 10px 20px 30px;

                                            上    右     下     左（右）

                            padding: 10px 20px;  

                                             上    右     下（上） 左（右）

 

     div {

           width: 123px;

           height: 123px;

           border: 1px solid #000;

           padding: 20px  40px;  

           padding-left: 20px;

      }

   做网页的时候，需要清除默认样式，清除的办法如下

      * {

               padding: 0;

               margin: 0;

       }

border: 边框

       边框三要素： 粗细   颜色  形状（线型）