4.3CSS-day03

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

 

css:级联样式单

1.基本使用：
    引入外部样式文件
        - <link type="text/css" rel="stylesheet" href="css样式文件的URL">
        - 优点
            将样式文件彻底和HTML文档分隔开，灵活多变。
        - 缺点
            需要弄清楚样式文件和HTML路径
    导入外部样式文件(不推荐)
        - @import URL sMedia;
        - 优点
            和引入外部样式理论一样
        - 缺点
            大部分浏览器不支持
    使用内部css样式
        - <style type="text/css">样式单文件定义</style>
        - 优点
            如果想要实现css样式和html页面单独对应，可以用这种样式。
        - 缺点
            冗余，不利于管理。
    使用行内样式
        - <... style="..."></...>
        - 优点
            只对单个标签有用，可以用于调试。对这个标签，这种写法优先级最高。
        - 缺点
            和内部css样式一样，如果使用过多，会造成文档冗余。
2.css选择器
    概述
        - 语法
            Selector{
                property1:value1;
                property2:value2;
                ...
            }
        - 语法解释
            Selector（选择器）
                选择器决定该样式定义对哪些元素起作用。
            语法块
                属性定义部分决定哪些样式起什么样的作用。
    元素选择器
        - 语法
            E{...}
        - 语法解释
            E可以是任意有效的HTML元素名，也可用“*”来代表元素名，“*”可匹配HTML文档中任意元素。
    属性选择器
        - 语法及解释
            E{...}:指定该CSS样式对所有E标签起作用
            E[attr]{...}:指定该CSS样式对具有attr属性的E标签起作用
            E[attr=value]{...}:指定所有attr属性为value的E标签起作用
            E[attr~=value]{...}:指定所有attr属性包含value,且以空格分隔的E标签起作用
            E[attr|=value]{...}:指定所有attr属性包含value,且以字符分隔的E标签起作用
            E[attr^=value]{...}:指定所有attr属性以value开头的E标签起作用
            E[attr$=value]{...}:指定所有attr属性以value结尾的E标签起作用
            E[attr*=value]{...}:指定所有attr属性包含value的E标签起作用
    ID选择器
        - 语法
            [E]#idValue{...}
        - 语法解释
            #idValue是id的value。
            也可以指定E标签，来指定选择的标签。
    CLASS选择器
        - 语法
            [E].classValue{...}
        - 语法解释
            .classValue是class的value。
            也可以指定E标签，来指定选择的标签。
    包含选择器
        - 语法
            Selector1 Selector2 {...}
        - 语法解释
            Selector2选择的标签必须在Selector1选择的标签之内，且可以无限嵌套。
    子选择器
        - 语法
            Selector1>Selector2 {...}
        - 语法解释
            和包含选择器类似，但是子选择器中Selector2选择的标签必须是Selector1选择的标签的子标签。
    兄弟选择器
        - 语法
            Selector1~Selector2 {...}
        - 语法解释
            Selector2选择的标签必须是Selector1选择的标签的弟标签
    选择器组合
        - 语法
            Selector1,Selector2,Selector3... {...}
        - 语法解释
            将一份css样式对多个多种选择器起作用
3.伪元素选择器
    概念
        只能针对CSS中已有的伪元素起作用。
    first-letter选择器
        - 语法
            Selector1:first-letter {...}
        - 语法解释
            该选择器对应的css样式对指定对象内的第一个字符起作用
    first-line选择器
        - 语法
            Selector1:first-line {...}
        - 语法解释
            该选择器对应的css样式对指定对象内的第一行内容起作用
    before选择器
        - 语法
            Selector1:before {...}
        - 语法解释
            该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入文本
    after选择器
        - 语法
            Selector1:after {...}
        - 语法解释
            该选择器与内容相关的属性结合使用，用于在指定对象内部的尾部添加文本
    结构化伪类选择器
        nth-child选择器
            - 语法
                Selector1:nth-child(n)
            - 语法解释
                匹配符合selector选择器并且是其父节点的第n个子节点的元素。
        nth-last-child选择器
            - 语法
                Selector1:nth-last-child(n)
            - 语法解释
                匹配符合Selector选择器并且是其父节点的倒数第n个子节点的元素。
    UI元素状态伪类选择器
        link选择器
            - 语法
                Selector1:link
            - 语法解释
                匹配选择器且未被访问前的标签（通常为超链接）
        visited选择器
            - 语法
                Selector1:visited
            - 语法解释
                匹配选择器且已被访问过的元素（通常只能是超链接）
        active选择器
            - 语法
                Selector1:active
            - 语法解释
                匹配选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素。
        hover选择器
            - 语法
                Selector1:hover
            - 语法解释
                匹配选择器且处于鼠标悬停状态的元素
        focus选择器
            - 语法
                Selector1:focus
            - 语法解释
                匹配选择器且已获得焦点的元素
        enabled选择器
            - 语法
                Selector1:enabled
            - 语法解释
                匹配选择器且当前处于可用状态的元素
        disabled选择器
            - 语法
                Selector1:disabled
            - 语法解释
                匹配选择器且当前处于不可用状态的元素
        checked选择器
            - 语法
                Selector1:active
            - 语法解释
                匹配选择器且页面打开时处于选中状态。
4.使用脚本修改样式
    第一步：获取需要设置CSS样式的目标标签，例如getElementById（）
    第二步：修改目标元素的CSS样式。
        obj.style.属性名=属性值。
        obj.className=Class选择器。