css基本使用

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

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

外联式

 <link rel="stylesheet" href="../css01样式基础/style.css">

内联式

 /*基础样式
        1.width 宽
        2.height 高
        3.background-color背景颜色
        4.list-style:none;清除默认模式
        */
        /*选择器*/
        /*通配符 全局选择器 去掉浏览器默认样式*/
        *{
            /*内边距*/
            /*padding:0;*/
            /*外边距*/
            /*margin:0*/
            /*盒子模型*/
            /*注释*/
            /*color:red;*/
        }
        /*标签选择器
        h1-h6 div ul li span
        */

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

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

 /*类选择器 class*/

.classname{
            height: 300px;
            background-color: #6a6a6a;
        }
        .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(red, green, blue);
        }
        .div3{
            height: 300px;
            background-color: rgb(red, green, blue);
        }

层级选择器

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

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

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

兄弟选择器只对他下面的兄弟生效，不对上面的兄弟生效