2019/8/28，day03,web前端

菜鸟笔记2

2019年8月28日周三 20：46 重庆
以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~

今日内容

1、CSS选择器
    ①元素选择器
    ②ID选择器
        html: <元素 id=“id值”></元素>
        css : #id值{样式规则;}
    ③类选择器
        html: <元素 class=“类名”></元素>
        css : .类名{样式规则;}
    ④子代选择器（父级选择器>子级选择器{样式规则}）：父级选择器和子级选择器由基础选择器(元素，id，类，通识符)构成；子级选择器只会选择一级进行样式规则的设置
        例：
        若div ul li{···}则其列表符号也会变红

    ⑤后代选择器（父代选择器 子代选择器{样式规则;}）
        例：
        误区：#red {}中间有空格 导致效果加不上

    ⑥群组选择器（选择器01,选择器02,…,选择器n{样式规则;}）
        例：

p>a,div>a{
   color: red;
    }

    ⑦伪类选择器
        鼠标移入伪类

选择器：hover{
         鼠标移入之后的样式规则
        }
例：
.title{
            color: red;
        }
.title:hover{
            color:blueviolet;
        }
.box:hover>a{
            color: red;
        }

        结构伪类

选择器:before{
       content: "";   --->    可写，可不写，不写该属性选择器失效（必须存在）
       修饰该伪类的样式规则;
                 }
选择器:after{
       content: "";
       修饰该伪类的样式规则;
       }

例：
.text{
            color: orange;
        }
        .text:before{
            content: "Me";/*则me会出现在handsome前面且不可选中me，content必须有，但可不要内容应该是content:""*/
            color: aquamarine;
        }
        .text:after{
            content: "YOU";
            color: black;
        }

        查询结构

选择器:first-child{
       该选择器集中第一个元素的样式规则;
       }
选择器:last-child{
       该选择器集中最后一个元素的样式规则;
       }
选择器:nth-child(n){
       该选择器集中第n个元素的样式规则
       }

    ⑧通识符选择器
        *{样式规则}
2、选择器命名
    ①选择器名称有数字，字母，-和_构成，且不能以数字开头
    ②取名规律
        驼峰命名法：将各个单词的首字母进行大写
        （userName/UserName）
        （myFirstPage/MyFirstPage）
        匈牙利命名法：将单词之间用-或者_相连
        （user-name/user_name）
        （my-first-page/my_first_page）
        小组项目命名遵循匈牙利命名法（wx-box）
3、类选择器叠加
（<元素 class=“类名01 类名02 类名03 … 类名n”></元素>）

一定要有bold的类选择器，才可以空格即.bold{font-weight: bold;}
<p class="red bold">我希望我的颜色 为红色</p>

一定要有bold的ID选择器，才可以id="bold"即 #bold{font-weight: bold}
<p id="bold" class="orange">ul>li>p</p>

<p class="orange bold center">我也希望加粗</p>

可见day03>practice.html

注意：
    ①当前元素处于已经有样式规则之下需要添加新的样式规则，且不影响原有的类名样式规则时使用
    ②清除元素浮动影响时使用
4、CSS选择器优先级
    ①ICE计算法
         I —> id选择器 --数值–> 100
        C —> 类选择器 --数值–> 10
        E —> 元素选择器 --数值–> 1
    两种情况：
    单个选择器的数值比较，值越大，优先级越高；
    当多个选择器组合而成一个选择器时，需将多个选择器的数值进行相加，值越大，优先级越高。

<style>
        p{color: rebeccapurple;} /*1*/
        .text{color: cornflowerblue}/*10*/
        #text{color: aquamarine}/*100*/
        .list h1{
            color: pink;
        }

        /*只有加了.list才能改变颜色（20），不加则为（11）*/
        .list .green{color: green}
</style>
·
<p id="text" class="text">p</p>
<ul class="list">
    <li>
        <h1>list>li>h1</h1>
    </li>
    <li>
        <h1 class="green">list>li>h1:green</h1>
    </li>
</ul>

    ②元素样式规则继承
        子代选择器会继承父代选择器的样式规则
5、CSS常用样式规则
    ①文本颜色（color）
        单词(black,red,…)
        十六进制取值(#ff00ff,#fff,#000)
        rgb255色[rgb(255,0,180)]
        rgba透明色[rgba(255,0,168,0-1)]
    ②文本大小（font-size）
        单位(px/%/em/rem/rpx)
        默认字体大小为16px
        字体最小设置值为12px（有些浏览器可以，但建议不小于12px）
        字体最大设置无限
    ③文本字体
        微软雅黑：
        font-family: “Microsoft YaHei”;
    ④文本加粗（font-weight）
        normal 正常即不加粗
        bold 加粗
        100-900 按照数值从100~900依次加粗
        （1-500无太大区别，600-900无太大区别）
    ⑤文本对齐（text-align）：left(默认)
    ⑥文本行高（line-height）：单行文本行高与高度相等时，文本单行上下居中

.line{
            /*可使其居中*/
            line-height: 50px;
            height:50px ;
            background: red;
        }
·
<p class="line">height</p>

    ⑦文本缩进（text-indent）
    ⑧文本横线（text-decoration）
        none 空即无横线
        underline 下横线
        overline 上横线
        line-through 删除线
    ⑨文本字间距（letter-spacing）
    ⑩边框样式（border-style）
        solid 实线
        dashed 矩形虚线
        dotted 圆点虚线
        double 双实线
    简写属性（border: 宽度 样式 颜色;）
    方向边框设置
        border-left/top/right/bottom: 宽度 样式 颜色;
        例：

三角（transparent是透明）
.arrow{
            /*width: 0;  要或不要，目前都可实现效果*/
            border-top: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid palevioletred;
        } 

    边框圆角（border-radius）
        当边框取值为50%时，正矩形即为正圆
    边框圆角方向设置
        左上：border-top-left-radius
        右上：border-top-right-radius
        左下：border-bottom-left-radius
        右下：border-bottom-right-radius

 /*圆形*/
        .radius{
            width: 300px;
            height: 300px;
            border-top: 5px solid yellowgreen;
            border-right: 5px dashed lightgoldenrodyellow;
            border-bottom: 5px dotted gray;
            border-left: 5px double palevioletred;
            border-radius: 200px;
        }

今日份收获

1、元素样式规则继承
外边距和内边距不会继承，只会继承字体样式
2、元素的border由三角形组成，不是矩形
（具体参看Chrome收藏栏CSS三角理解）
3、border-radius为200px时为圆形
4、快捷键（webstorm）
    ①直接p后tab快速创建标签
    ②在需要复制的内容后ctrl+D ，下一行会自动复制
    ③ol>li再按tab则会显示完整
    ④p.class名 后 tab会添加class
    （p#ID名应该同理）

注意事项

1、选择器的叠加使用很重要，注意常使用，以熟练
2、十六进制的颜色取值很少用#000，尝试下#333

补充

1、p 与 div 区别在于前者有默认间距，后者无
2、 div 与 div 无默认间距