css样式的认识

一、css基本使用

1.css概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 多个样式定义可层叠为一个

2.css作用

Css是可以把页面布局，字体布局，背景颜色，字体颜色修改 的，就好比毛坯房和精装房的区别。HTML可以把网页的元素铺出来，css把HTML页面进行美化。

二、css基本样式  

文档流的顺序：上左下右 行级标签：按照文档流的顺序依次排列 排列块级标签：独占一行

1. CSS基本语法

通配符（*）

全局选择器 去掉浏览器默认样式 

    <!-- 外联式 -->

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

    <!-- 内联式 -->

    <style>

        /* 基础样式

        1.width 宽

        2.height 高

        3.background-color 背景颜色

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

        */

        /* 选择器 */

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

        *{

            padding: 0;

            margin: 0;

            color: red;

        }

        /* 标签选择器

        h1-h6 div  ul li span

        */

        p{

            background-color: rgb(red, green, blue);    

            color: #6a2121;

        }

        /* 类选择器 class */

        .classname{

            height: 300px;

            background-color: #6a2121;

        }

        .red_color{

            color: red;

        }

        /* id 选择器

            注意：id名不能重复

        */

        #idname{

            width: 400px;

            background-color: white;

        }

        p{

            background-color: pink;

        }

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

        .div1,.div2,.div3,p{

            width: 400px;

        }

        .div1{

            height: 100px;

            background-color: chocolate;

        }

        .div2{

            height: 200px;

            background-color: rgb(164, 221, 91);

        }

        .div3{

            height: 300px;

            background-color: rgb(11, 108, 101);

        }

             层级选择器

            1. 子代选择器  >

            2. 后代选择器  空格

        .ulBig > li{

            list-style: none;

            font-size: 28px;

        }

        .ulBig li{

            list-style: none;

        }

    层级选择器

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

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

        .li4{

            color: red;

        }

        .li4+li{

            color: red;

        }

        .li4~li{

            color: red;

        }

        /* 伪类选择器

            :hover 鼠标悬浮

        .li4:hover{

            color: blue;

            /* 鼠标变小手 */

            cursor: pointer;

        }

        .li3:hover{

            cursor: pointer;

        }

        .li3:hover li{

            color: blue;

        }

        /* 属性选择器 */

        div[class^='div']{

            color: yellow;

        }

        input[type='checkbox']{

            background-color: yellow!important;

        }

        /* 优先级

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

        * 优先级最低 <  1

        标签选择器 <  10

        .class <  100

        #id     200 <

        行内引入方式  < !important  

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

    <!-- 引入方式

        1. 行内引入

        <p style="background-color: blue;color: red;font-size: 120px;">这是另一个段落标签</p>

        2. 内联式

        3. 外联式

        优先级：

        行内引入方式 优先级最高

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

    -->