CSS样式基础

• 本章记录CSS的基础样式
  代码示例：

body部分（注释都在代码中）：

<!-- css:层叠样式表:
            作用：定义如何显示HTML元素
            写法：样式通常存储在样式表(style)中
-->

<!-- 
    基本语法：
            选择器{属性1:值1;属性2:值2;}
    基本样式有：
            宽(width)
            高(height)
            背景颜色(background-color)
        !行级标签设置宽高是不生效的
    -->

<!-- css引入方式：
            1、行内引入
            2、内联式引入
            3、外联式引入
            ！还有一个import，但是因为其兼容性较差，加载顺序不是同时加载所以不常用可以忽略
-->

    <!-- 1、行内引用
                一般直接写在要添加css样式的标签内
                优点：随用随写,优先级高
                缺点：容易导致代码重复性高
    -->
    <p style="background-color: pink;">行内引用</p>

    <!-- 2、内联式引入
                写在本html页head部分的最后(要写在style标签内)，所以叫内联式
                优点：本页设置
                缺点：可能会导致单页代码太长
    -->
    <p>内联式引入</p>

    <!-- 3、外联式引用
                写在单独的css页面,使用时引用
                优点:
                缺点:
    -->
    <span>外联式引入</span>


    <!-- 选择器练习 -->
    <ul>
        <li class="classname">类选择器</li>
        <br>
        <li id="idname">ID选择器</li>
        <br>
        <li class="qunzu1">群组选择器1</li>
        <li id="qunzu2">群组选择器2</li>
        <br>
        <li class="CengJi1">子代层级选择器(父亲辈)
            <ul>子代层级选择器(儿子辈)
                <ul>子代层级选择器(孙子辈)</ul>
            </ul>
        </li>
<br>
        <li class="CengJi2">后代层级选择器(父亲辈)
            <ul>后代层级选择器(儿子辈)
                <ul>后代层级选择器(孙子辈)</ul>
            </ul>
        </li>
<br>
        <li class="XiongDi1">相邻兄弟选择器1</li>
        <li>相邻兄弟选择器2</li>
        <li>相邻兄弟选择器3</li>
<br>
        <li class="XiongDi2">通用兄弟选择器1</li>
        <li>通用兄弟选择器2</li>
        <li>通用兄弟选择器3</li>
<br>


        <li class="WeiLei">伪类选择器</li>

        <li class="ShuXing" title="111">属性选择器</li>
    </ul>

内外联头部代码示例：

<!-- 外联式引入 -->
    <link rel="stylesheet" href="./css/day3.css">

    <!-- 内联式引入 -->
    <style>
        p{
            background-color: blue;
        }
    </style>

外联css部分：

/*  css选择器:
            1、全局(通配符)选择器
            2、标签选择器
            3、类选择器
            4、ID选择器
            5、群组选择器
            6、层级选择器
            7、兄弟选择器
            8、伪类选择器
            9、属性选择器
*/

/* 1、全局(通配符)选择器:
            一般用于删除浏览器默认样式
 */
 *{
    padding: 0;
    margin: 0;
 }

 /* 2、标签选择器:
            html中的标签   
 */
 span{
    background-color: aqua;
}

/*  3、类选择器
            使用.调用HTML中规定好的类(class)名
*/
.classname{
    background-color: blueviolet;
}

/* 4、ID选择器
            使用#调用HTML中写好的ID名,和类选择器的区别是ID名是唯一的但是类名是可以重复的
*/
#idname{
    background-color: green;
}

/* 5、群组选择器
            可以批量选择,中间用逗号隔开就行
 */
 .qunzu1,#qunzu2{
    background-color: pink;
 }

 /* 6、层级选择器
 !字体大小,背景颜色是可以继承(子类会自动继承)的
            6.1 子代选择器(>)
                只能选择下一级
            6.2 后代选择器( )(空格)
                可以选择到所有的子级(包括子级的子级,以此类推)

 */

    /* 6.1 子代选择器(>)
                只能选择下一级 */
.CengJi1 > ul{
    border: solid red 1px;
}

    /* 6.2 后代选择器( )(空格)
                可以选择到所有的子级(包括子级的子级,以此类推)*/
.CengJi2 ul{
    border: solid blue 1px;

}

/* 7、兄弟选择器
!兄弟选择器只能选中之后的同级
        7.1 相邻兄弟选择器(+)
                只能选中之后的一个
        7.2 通用兄弟选择器(~)
                可以批量选择
*/

    /*  7.1 相邻兄弟选择器(+)
                只能选中之后的一个*/
.XiongDi1 + li{
background-color: pink;

}
    /* 7.2 通用兄弟选择器(~)
                可以批量选择 */
.XiongDi2 ~ li{
    background-color: pink;
    
    }

/* 8、伪类选择器
                使用:有很多种
*/
.WeiLei:hover  /*鼠标悬浮*/{
    /* 显示小手图标  */
    cursor: pointer;
}

/* 9、属性选择器
            可以根据标签中的一些属性值来选择
*/
/* 将包含1的title属性颜色改为青色 */
[title ^= "1"]{
    color: aquamarine;
}

/* 优先级
        优先级最高的为 !important
        最低的为 全局选择器
        然后 id选择器>类选择器>标签选择器
        组合选择器按优先级顺序叠加,谁大谁生效
        (行内引入是大于外联和内联的)
*/