CSS总结

基础部分还需参照 CSS MDN

上课内容

CSS: cascading style sheets

组成部分：

选择器selector、属性property、属性值value、声明declaration（属性和属性值组合）

在页面中使用css：

• 外链<link rel="stylesheet" href="文件地址">
• 嵌入<style>(中间为组成部分)</style>
• 内联如<p style="属性：属性值"></p>(不推荐)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVYsPOqJ-1661913174799)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e52b3dee79248f799f6284fa0b3acdc~tplv-k3u1fbpfcp-watermark.image?)]

选择器selector:找到页面中的元素，以便设置样式。

选择元素方法：

• 按照标签名、类名（.）、id（#）
• 按照属性
• 按照dom树中的位置

通配选择器*

属性选择器：
“:”+属性值

    <label>用户名：</label>
    <input value="zhao" disabled>

    <label>密码</label>
    <input value="123456" type="password"/>

    <style>
        :disabled{
   
            background: #eee;
            color: #999;
        }
    </style>

input[type=“password”]（属性+属性值）：

    <label>用户名：</label>
    <input value="zhao" disabled>

    <label>密码</label>
    <input value="123456" type="password"/>

    <style>
        input[type="password"]{
   
            border-color: red;
            color: red;
        }
    </style>

    <p><a href="#top">回到顶部</a></p>
    <p><a href="a.jpg">查看图片</a></p>

    <style>
        a[href^="#"]{
   
            color: #f54767;
            background: 0 center/1em url(https://assets.codepen.io/58477/arrowup.png) no-repeat;
            padding-left: 1.1em;
        }

        a[href$=".jpg"]{
   
            color: deepskyblue;
            background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
            padding-left: 1.2em;
        }
    </style>

以^=表示以#开头的进行匹配，以$=表示以=后元素为结果的进行匹配

伪类pseudo-classes：

• 不基于标签和属性定位元素
• 有状态伪类和结构性伪类

状态伪类：

a的不同状态显示不同颜色，focus input，外边框变格式为outline

    <a href="http://example.com">example.com</a>

    <label>
        用户名：
        <input type="text">
    </label>

    <style>
        a:link{
   
            color: black;
        }
        a:visited{
   
            color: gray;
        }
        a:hover{
   
            color: orange;
        }
        a:active{
   
            color: red;
        }
        :focus{
   
            outline: 2px solid blue;
        }
    </style>

结构伪类：

可以使用first/last-child、2n-child指定奇偶等

     <ol>
        <li>阿凡达</li>