官方课程学习记录 --- Rudaosongfengxu

这是我参与「第五届青训营」笔记创作活动的第2天

本文基于已有前端经验和本节课程简单记录一下在我的理解中该节课程所强调的内容。

CSS 基本结构

选择器 Selector

通配选择器

* {
    color: red;
    font-size: 20px;
}

标签选择器

p {
    color: gray;
    font-size: 20px;
}

id选择器

<p id="abc"> xxx </p>
<style>
    #abc {
        color: blue;
        font-size: 30px;
    }
</style>

类选择器

<p class="done"> xxx </p>
<p> yyy </p>
<style>
    .done {
        color: gray;
        text-decoration: line-through;
    }
</style>

属性选择器

<input value="xxx" disabled/>
<input value="yyy"/>
<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
</style>

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

以下特殊符号应用的依据是正则表达式规则

<a href="#top"> xxx </a>
<a href="a.jpg"> yyy </a>
<style>
    a[href^="#"] {
        color: red;
        background: 0 center/1em;
        padding-left: 1.1em;
    }
    a[href$=".jpg"] {
        color: blue;
        background: 0 center/1em;
        padding-left: 1.2em;
    }
</style>

选择器组

选择器的特异度

显式继承

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}

初始值

CSS 工作流程

CSS 求值过程

伪类

不基于标签和属性定位元素

状态伪类

<a> xxx </a>
<input type="text">
<style>
    a:link {
        color: black;
    }
    a:visited {
        color: gray;
    }
    a:hover {
        color: orange;
    }
    a:active {
        color: red;
    }
    :focus {
        outline: 2px solid orange;
    }
</style>

结构性伪类

<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ol>
<style>
    li {
        list-style-position: inside;
        border-bottom: 1px solid;
        padding: 0.5em;
    }
    li:first-child {
        color: coral;
    }
    li:last-child {
        border-bottom: none;
    }
</style>

<input class="error">
<span class="error"> wrong </span>
<style>
    .error {
        color: red;
    }
    input.error {
        border-color: red;
    }
</style>

组合

颜色

rgb(r, g, b)
hsl(h, s, l)

rgba(r, g, b, a)
hsla(h, s, l, a)

字体 font-family

font-family: Optima, Georgia, serif;

通用字体族

布局相关技术

盒模型

块级盒子

1、不和其它盒子并列摆放

2、适用所有的盒模型属性

行级盒子

1、和其它行级盒子一起放在一行或拆开成多行

2、盒模型中的width、height不适用

块级元素

生成块级盒子

body, article, div, main, section, h1-6, p, ul, li等

display: block

行级元素

生成行级盒子

内容分散在多个行盒中

span, em, strong, cite, code等

display: inline

display 属性

常规流 Normal Flow

行级排版上下文

    <div>
        No!
        Noooooooooooooooooooooooooooooooo!
        <em>Inline Block</em>
    </div>
    <style>
        div {
            color: white;
            width: 10em;
            overflow-wrap:break-word;
            background: #411;
        }
        em {
            display: inline-block;
            width: 3em;
            background: #33c;
        }
    </style>

块级排版上下文

BFC内的排版规则

既有块级又有行级

    <span>
        Nooooooooooooo
        <div>block</div>
        oooooooooooooN
    </span>
    <style>
        span {
            line-height: 3;
            border: 2px solid red;
            background: coral;
        }
        div {
            line-height: 1.5;
            background: lime;
        }
    </style>

Flex Box

    <div class="container">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
    <style>
        .container {
            display: flex;
            border: 2px solid #966;
        }
        .a, .b, .c {
            text-align: center;
            padding: 1em;
        }
        .a {
            background: #fcc;
        }
        .b {
            background: chartreuse;
        }
        .c {
            background: aqua;
        }
    </style>

前端与CSS-综述 | 青训营笔记