css-文本编辑

文本的缩进：text-indent

取值：

1、数字+px

2、数字+em 1em = font-size

文本的对齐方式：text-align  （水平方向）

取值：

1、左边:left

2、中间：center

3、右边：right

text-align: center;

text-align:center能让哪些元素水平居中？

1、文本

2、span、a标签（行内元素）

3、input、img（行内块元素）

如果想让以上的元素水平居中，需要给以上元素所在的标签（父元素）设置text-align：center；

文本的修饰：text-decoration

取值：

1、下划线：underline

2、删除线：line-through

3、没有效果：none（无） ！去除a标签默认的下划线！

text-decoration: none;
text-decoration: line-through;
text-decoration: underline

text-align:center可以让哪些元素水平居中？？

      1、文本

      2、span、a

      3、input、img

    如果让以上的元素水平居中，需要给父元素设置text-align：center

    如果要让div/p/h（盒子）水平居中，需要margin：0 auto，在父元素中水平居中

    直接给盒子设置margin：0 auto；

    条件：有宽度的盒子

    如果div不设置宽度，默认就是父元素的宽度！！（独占一行的效果）

 .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      margin: 0 auto;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      text-align: center;
    }

 继承性：子元素有默认继承父元素样式的效果（子承父业）

 有哪些样式可以继承：

        1、color

        2、font-相关的样式可以继承：style  weight  size  family

        3、text-相关的样式可以继承

        4、line-height：行高

      通过开发人员调试工具中能的computed  查看当前标签某个属性值具体是多少！

.father {
      color: red;*/

      font-style: italic;
      font-weight: 700;
      font-size: 60px;
      font-family: '楷体';

      text-align: center;

      line-height: 40px;
    }

 <div class="father">
    父亲
    <div class="son">
      儿子
    </div>
 </div>

继承性的应用：

去除列表前面的小圆点：list-style: none;

   ul {
      list-style: none;
    }

  <ul>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
    <li>呵呵哈哈</li>
  </ul>

 

继承性的失效：

      1、a标签颜色默认是不能继承的！(其实是继承下来了，但是被浏览器默认设置的样式给覆盖掉了！)

      2、h系列标签font-size也是不能继承的！(其实也是继承下来了，但是被浏览器默认设置的样式给覆盖掉了！)

      3、div的高度不能继承，宽度有默认继承父元素宽度的效果(div其实没有继承父元素的宽度，只是因为有独占一行的特点！)

      4、如果标签自己有样式(可以是自己设置的，浏览器默认加的)，就不会问父元素要样式（标签很独立）

 

 层叠性：只有当优先级相同时，才会比较层叠性

      1、当层叠的样式相同时-》样式会覆盖-》写在下面的样式会生效！！！

      2、当层叠的样式不同时-》样式会叠加的-》共同作用在标签上、

优先级：

     继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

 注意点：

          1、!important书写位置：!important写在属性值的后面，分号的前面

          2、!important是不能提升继承的优先级，继承的优先级是最低的！！

权重：处理复合选择器谁显示的情况！！

    权重的计算公式：（0,0,0,0）

    从左往右：

      1、第一个数字：行内样式的个数

      2、第二个数字：id选择器的个数

      3、第三个数字：类选择器的个数

      4、第四个数字：标签选择器的个数

    比较规则：

      1、先比较第一个数字，如果比较出来了，之后的就统统不看了

      2、如果第一个数字相同，再去比较第二个数字

      ....

      如果数字都相同，最后就比较层叠性（谁写在下面，谁说了算！！！）

    !important：天下第一！！（只要不是继承，优先级最高的！！！）

    步骤：

      1、判断选择器能不能直接选中标签，如果不能直接选中-》继承（继承的优先级最低-》直接pass）

      2、通过权重计算公式，判断设置的权重最高！！！

    /*0,1,1,0*/
    .father #red {
      color: blue;
    }
    /*0,0,0,2*/
    div p {
      color: red;
    }
    
    /*0,0,2,0*/
    .father .son {
      color: pink;
    }
    
    /*0,1,0,1*/
    p#red {
      color: orange;
    }

    1、如果所有的选择器都是继承的效果，此时就把目光看到目标标签的父元素上！！

    2、在通过步骤看其父元素的样式是多少即可