css基础样式

  优先级：

        行内引入方式 优先级最高

        内联式和外联式 谁在后谁生效（原理：代码自上而下执行，后面的把前面的样式覆盖了）

外联式

<link rel="stylesheet" href="../css/style.css">

行内引入

<p style="background-color: blue;color: red;font-size: 120px;">

内联式

<style></style>

* 通配符 全局选择器 去掉浏览器默认样式

        *{
            padding: 0; */
            margin: 0; */
        }

        1.width 宽

        2.height 高

        3.background-color 背景颜色

        4.list-style: none;  清除li默认样式

标签选择器  h1-h6 div  ul li span

p{
  background-color: rgb(red, green, blue);    
  color: #6a2121;
}

类选择器 class

        .classname{
            height: 300px;
            background-color: #6a2121;
        }

id 选择器

注意：id名不能重复

 #idname{
            width: 400px;
            background-color: white;
        }

群组选择器  选择器之间用 , 隔开

        .div1,.div2,.div3,p{

            width: 400px;

        }

 .div1,.div2,.div3,p{
            width: 400px;
        }

层级选择器

            1. 子代选择器  >

            2. 后代选择器  空格

.ulBig > li{
            list-style: none;
            font-size: 28px;
        }
        .ulBig li{
            list-style: none;
        }

 层级选择器

            1. 兄弟选择器  相邻兄弟 +  只修改他下面的相邻的选择器

            2. 兄弟选择器  通用兄弟 ~  修改他后面的所有选择器

        .li4+li{
            color: red;
        }
        .li4~li{
            color: red;
        }

伪类选择器

:hover 鼠标悬浮

鼠标变小手: cursor: pointer;

   .li4:hover{
            color: blue;
            cursor: pointer;
        }

   

  /* 优先级 

* 优先级最低 < 

标签选择器 < 

.class <  

#id    <

行内引入方式  <

!important

组合选择器时，按优先级顺序叠加，谁大谁生效

!important  设置最高优先级；一般不建议用，改源代码时可以用