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

来源:互联网 发布:逆转检察官攻略软件 编辑:程序博客网 时间:2024/05/11 12:46
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: 边框
       边框三要素: 粗细   颜色  形状(线型)



0 0
原创粉丝点击