CSS样式基础

外联式：

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

内联式：

<style>css样式</style>

行内引入：

style="background-color: pink;"

通配符：

        *{
            /* 内边距 */
            padding: 0;
            /* 外边距 */
            margin: 0;
   }

主要用于去除页面的外边框和内边框

标签选择器：

适用于所有标签

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

类选择器

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

<p class="classname" id="idname"  style="background-color: aqua;">这是另一个<span class="red_color">段落</span>标签</p>

id选择器

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

注意：id名不能重复

群组选择器：使用，隔开

.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;
        }

伪类选择器：

        .li4:hover：鼠标悬浮{

            color: blue;

            /鼠标变小手 

            cursor: pointer;

        }

属性选择器

        div[class^='div']{
            color: yellow;
        }