一篇文章学会css样式基础

学习目标：

学会css样式基础

---

学习内容：

css样式基础和最绕的选择器

例如：

1. 学会基础样式
2. 理解引用方式
3. 理解标签选择器

---

学习时间：

• 周一至周五晚上 7 点—晚上9点
• 周六上午 9 点-上午 11 点
• 周日下午 3 点-下午 6 点

---

学习产出：

• 技术笔记 3遍
• CSDN 技术博客 1 篇

笔记一次

---

• 学会基础样式

基础样式
            1.width 宽
            2.htight 高
            3. background-color 背景颜色
            4.list-style:none 清楚li默认样式

      

• 学会引用方式

1. 行内样式

 1.行内引入
            <p title="这是title" class="">这是<span class="red_color">段落</span>标签</p>v

        2.内联样式

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

        3.外联样式

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

• 学会标签选择器

/* 选择器
        通配符 全局选择器 去掉浏览器默认样式 */
        *{
            内边距
            padding：0；
            外边距
            margin 0;
            盒子模型
            注释
            color：red
        }
       
        /* 标签选择器*/
        h1-h6 div ul li span
 p{
            background-color: rgb(red, green, blue);
            color: #6a2121;
        }
        .red_color{
            color:red;
        }
        

• 学会使用选择器

  /* 层级选择器
            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;
            /* 鼠标变小手 */
        }
        .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

        ./class #id > #id
        组合选择器时，按优先顺序叠加 谁大谁谁生效

        */