前端复习笔记

前端复习笔记

前端三要素--css
层叠样式表
1.在html中应用
    1)css嵌入到元素style属性内
    2)css嵌入到html头部的style
    3)css单独写入.css文件，通过link引入到html
        css规则与html结构分离（解耦）
        css规则可以复用

2.语法
    注释： /*注释内容*/
    语法：
        选择器{
            样式规则
        }
        .box{
            background-color:lightCoral;
            color:#fff;
            width:300px;
            margin-bottom:1em;
        }

3.选择器
    1)核心选择器
        id选择器      利用了html元素的id唯一性
            #one{}   选中了id为one的元素
        class选择器   利用了html元素的class属性，非唯一,一个元素可以有多个class，一个class也可以被多个元素拥有
            .box{}     选中了所有class为box的元素
        标签选择器     利用了标签名进行选择
            div{}    选中所有div标签
        并且选择器 .
            div.box{}   选中了div元素，并且这个元素class为box
        和选择器
            div,.box{}   同时选中了div元素和class为box的元素  
        普遍选择器
            *{}         选中所有元素

    2)层次选择器
        子代选择器      通过父元素选择子元素
            ul>li       选中ul的子代li
        后代选择器  空格
            ul li       选中了ul的后代li
        兄弟选择器  +  ~

    3)属性过滤器
        [name]      含name属性的元素
        [name='username']   name属性值为username的元素
        [name*='u']         name属性值含有u
        [name^='u']         name的属性值以u开头
        [name$='u']         name的属性值以u结尾   

    4)伪类过滤器
        子元素
            :nth-child(n)       n序号 从1开始
            :nth-child(2n+1)    n的取值
            :nth-child(even)    偶数
            :nth-child(odd)     奇数
            :first-child        
            :last-child
        状态
            :hover              鼠标悬停
            :visited            访问过后
            :active             a标签
            :focus              聚焦

    5)伪元素选择器
        ::before
        ::after
        <ul>
            ul::before
            <li><!--li::before-->one</li>
            <li>two</li>
            ul::after
        </ul>
        ul::after
    //form.login_form>input[checked]
    //class为login_form的form表单的子代中含有checked属性的input标签

4.多个选择器优先级
    1).权重（积分）
        1000    style标签内
        100     id选择器
        10      class，伪类)
        1       标签选择器
        //ul.menu > li.menu_item > ul.sub_menu > li
        1+ 10    +1 +  10        1+  10      +1

    2)顺序（排名)
        权重相同情况下，后者覆盖前者

    3)特权(!important)
        脱离了权重和顺序规则

5.样式规则
    1).字体规则
        可以被继承
        font-family     字体
        font-size       字体大小
        font-weight     字体粗细程度
        font-style      是否是斜体  italic      斜体
                                    normal      一般
        font-weight     是否加粗    bold    加粗
                                    bolder  更粗
                                    normal  一般
        color           字体颜色
        line-height     行高
            长度的单位
                px  像素绝对单位
                em  相对单位，相对于当前元素上字体大小
                rem 相对单位，相对于根元素上的字体大小
        font速写形式
        font:  font-style font-weight   font-size/line-height font-family
            font:italic   bold   14px/1.2 '宋体'
        
        网络字体（应用 iconfont）
        1.获取字体文件 .ott .(字体方正) 阿里云服务器（共享）
        2.css3
            @font-face{
                font-family:'李氏名字';
                src:url('./lasi.woff');
            }

            .logo{
                font-family:'李氏名字';