清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

清除系统默认样式

大多系统预定义标签，有默认样式，不满足实际开发需求，反倒影响布局
通常清除系统样式，利于开发

body,h1-h6,p,table {
    margin:0;
}

ul {
    margin:0;
    padding:0;
    list-style:none;    #清除列表样式
}

a {
    text-decoration:none;  #清除a标签下划线
    color:black;    # 设置a标签字体颜色
}

文本样式

简写： font:   字重      字体大小/行高     字族
            font:   normal   30px/200px         "STSong"

<style>

        color:red;     字体颜色

        字体大小：相关属性都是从父级继承
            font-size:inherit;   继承
            font-size:12px;   字体最小为12px

        font-weight:100-900 | bold粗线 |            字重
        font-family:"微软雅黑" , "STSong" 华文宋     字族
        line-height:100px;                          行高
        text-align:center | left | right            字体水平居中

        text-indent:2em 文本缩进2个字，跟父级的字体有关
                    2rem 只和html的字体有关

        text-decoration:none           清除划线
                        line_through   下划线
                        underline      中划线
                        overline       上划线

        简写：font:字重 字体大小/行高 字族
            font:normal 30px/200px  "STSong"

</style>

高级选择器

群组选择器：  逗号 ，

 <style> 
     .div1,.p1 {
         width: 100px;
     }
 </style>

后代选择器：空格表示    div a
子代选择器：大于号表示   >

控制关系层次控制目标选择器

 .sup > .sub  { width: 100px; }  父子关系
 .sup .sub  { width: 100px; }  后代关系

兄弟选择器：  + 相邻
            ~ 兄弟

通过关系层次控制一个目标选择器

.li2 ~ .li3   { width: 100px; }  # 兄弟
.li2 + .li3   { width: 100px; } # 相邻

伪类选择器：

ul li:nth-child(3) { }      表示ul下的第三个li标签
ul:nth-child(3) > li:nth-child(6) { }     表示第 三 个ul下的第 六 个li
li:nth-child(3n-1) { }   表示偶数个

多类选择器

.div.div1#dd {
　　width:50px;
}

<div class="div div1" id="dd">   </div>

高级选择器优先级

选择器优先级和个数有关
基础选择器占主导    id > class > 标签 > 通配
选择器优先级相同时，跟顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class

 

边界圆角

左上角为第一个角，顺时针走， 先横后纵

  div {
      border-radius:50%;  圆形
      border-radius:50%;  30px  60px   先横后纵
      border-radius:50%;  30px/60px
  }

a标签的四大伪类

    未访问过状态
        a:link {
        }

    鼠标悬浮状态
        a:hover {
            cursor:pointer; 手掌
        }

    鼠标点击时状态
        a:active { }

    鼠标离开时状态
        a:visited { }

背景图片

background:图片地址 图片平铺 x轴 y轴

    background:图片地址 图片平铺 x轴 y轴
    background-image:url("01.png") no-repeat 20px 20px;

    background-repeat:no-repeat 不平铺
                        repeat  平铺
                        repeat-x
                        repeat-y

    background-position: 水平位置，垂直位置
                         center center; 居中
                         20px,50px;

    background-position-x:20px;   x轴位移20px
    background-position-y:20px;   y轴位移20px