小白前端基础css篇（三）

css基本使用方式

css：指层叠样式表，定义如何显示html元素，样式通常存储在样式表中，多个样式定义可层叠为一个

css的文档流顺序为：上左下右

css的基本语法

    /* 选择器           声明 */
        h1       { color: blue;}
                /*  属性    值   */

css的基本样式

width(宽度)，

height(高度)，

background-color(背景色)，

list-style:none；(清除li默认样式)

css的引入方法

行内引入：style

    <div style="height: 12px; width: 20px;"></div>

内联式：在头部标签结束标签的上方插入<style></style>

    <style>
        h1{
            color: blue;
        }
    </style>

外联式：

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

引入方式的优先级关系：内联式和外联式谁在后谁生效（原理：遵循代码自上而下执行的规则，后方的代码会将前面的代码样式覆盖）

选择器

全局选择器/通配符选择器（*）

/* 去掉游览器默认样式 */
*{
    margin: 0;
    padding: 0;
}

标签选择器（标签名{}）

p{
    background-color: aliceblue;
}

类选择器（.）

.{

    background-color: antiquewhite;
}

id选择器（#）

#{
    background-color: aqua;
}

群组选择器（,）

.arr,.as,.ar,.p{
    background-color: red;
}

层级选择器

子代选择器 （>）

.ar > li{
    background-color: ;
}

后代选择器（ 空格）

.ar li{
    background-color: azure;
}

兄弟选择器

/* 相邻兄弟选择器 */
.as1+li{
    color: beige;
}
/* 通用兄弟选择器 */
.as1 ~li{
    color: blueviolet;
}

伪类选择器 （:）

p:hover{
    cursor: pointer;
}

选择器优先级

！important > 行内引入方式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器 

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