案例：蛙儿子的明信片

案例：蛙儿子的明信片

1 css继承与优先级

1.1 继承与非继承

当元素的一个继承属性（inherited property ）没有指定值时，则取父元素的同属性的计算值
当元素的一个非继承属性 (在Mozilla code 里有时称之为 reset property ) 没有指定值时，则取属性的初始值
每个属性，定义时候有标注是否可继承

https://developer.mozilla.org/en-US/docs/Web/CSS/background

1.2 下面列表中，选择器类型的优先级是递增的
类型选择器（type selectors）（例如, h1）和伪元素（pseudo-elements）（例如, ::before）
类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如 , [type=”radio”]），伪类（pseudo-classes）（例如, :hover）
ID选择器（例如, #example），元素外部使用css时，优先级最高！
给元素添加的内联样式 (例如, style=”font-weight:bold”) 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级

1.3 注意
为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。
优先级是基于选择器的形式进行计算的
使用 !important 是一个坏习惯，应该尽量避免

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css-tips</title>
    <style>
        #parent {
            color: green;
        }
        #id-h1 {
            color: orange;
        }
        .title{
            color: red;
        }
        h1 {
            color: purple;
        }
        * #foo {
            color: green;
        }
        *[id="foo"] {
            color: purple;
        }
    </style>
</head>
<body>
    <div id="parent">
        <h1 class="title" id="id-h1">Here is a title!</h1>
    </div>
    <p id="foo">I am a sample text.</p>
</body>
</html>

2 编写规则

相关文档：http://www.shejidaren.com/css-written-specifications.html

顺序
- 1.位置属性(position, top, right, z-index, display, float等)
- 2.大小(width, height, padding, margin)
- 3.文字系列(font, line-height, letter-spacing, color- text-align等)
- 4.背景(background, border等)
- 5.其他(animation, transition等)
可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
简写命名：nav,bg,pwd
16进制颜色代码缩写: #666 (和666666一样)，#abc（aabbcc）
规范命名，用a-b的形式，不要a_b
id名称唯一，尽量优先用class
为选择器加前缀，随业务和具体组件名称来定

3 从设计到开发的流程

相关文档： https://lanhuapp.com/web/#/item http://cdc.tencent.com/2010/12/01/%E4%B8%80%E7%A0%82%E4%B8%80%E4%B8%96%E7%95%8C%EF%BC%8C%E4%B8%80%E8%8A%B1%E4%B8%80%E5%A4%A9%E5%A0%82%EF%BC%9A%E5%BE%AE%E5%9E%8B%E8%AE%BE%E8%AE%A1%E4%B8%93%E7%94%A8%E5%B7%A5%E5%85%B7dorado/ https://www.w3cplus.com/tools/emmet-cheat-sheet.html
需求-设计-审核-开发-测试（循环）
设计-【标注】-开发
明信片开发：正面/反面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style\post.css">
    <title>postcard</title>

</head>

<body>
    <section>
        <h2>原图</h2>
        <div>
            <figure>
                <figcaption>正面</figcaption>
                <img class="origin" src="./images/wa.jpg" alt="wa">
            </figure>

            <figure>
                <figcaption>反面</figcaption>
                <img class="origin" src="./images/wa-back.jpg" alt="wa-back">
            </figure>
        </div>
    </section>
    <section>
        <h2>css制作</h2>
        <div>
            <figure>
                <figcaption>正面</figcaption>
                <img class="origin prod" src="./images/wa.jpg" alt="wa">
            </figure>

            <figure class="css-post">
                <figcaption>反面</figcaption>
                <div class="wa-back">
                    <div class="box1">
                        <div class="code"></div>
                        <div class="code"></div>
                        <div class="code"></div>
                        <div class="code"></div>
                        <div class="code"></div>
                        <div class="code"></div>
                    </div>
                    <div class="box2">
                        <div class="ch-post">
                            <img class="logo" src="./images/ch-post.jpg" alt="中国邮政">
                        </div>
                    </div>
                    <div class="box3">
                        <img src="./images/stamp.jpg" alt="邮票" class="stamp">
                    </div>
                    <div class="box4">
                        <div class="content"></div>
                        <div class="content"></div>
                        <div class="content"></div>
                    </div>
                    <div class="box5">
                        <p>北京2022年冬季奥运会</p>
                    </div>
                    <div class="box6">
                        <p>0336104</p>
                    </div>
                    <div class="box7">
                        <p>邮政编码</p>
                    </div>
                </div>
            </figure>
        </div>
    </section>
</body>

</html>

style.css

.origin {
    width: 400px;
    margin: 20px;
    border: 1px solid gold;
}

figure {
    display: inline-block;  /* 变成行内块级元素 */
}

figcaption {
    /* border: 1px solid red; */
    text-align: center;
}

.prod {
    border: 10px solid #fff;
    outline: 1px solid #000;
}

.css-post {
    position: relative;
    top: -257px;
}

.wa-back {
    display: grid;
    width: 600px;
    grid-template-columns: repeat(10, 1fr);  /* 分10列 */
    grid-auto-rows: 30px;  /*不知道给多少个行时使用,行高30px*/
    border: 1px solid gold;
    padding: 20px;
}

.wa-back>div {
    /* border: 1px solid #999; */
}

.box1 {
    grid-column: 1/6;  /* 占多少列1-5 */
    grid-row: 1/1;  /* 占多少行 */
}

.box2 {
    grid-column: 6/9;
    grid-row: 1/1;
}

.box3 {
    grid-column: 9/11;
    grid-row: 1/3;
}

.box4 {
    grid-column: 6/11;
    grid-row: 8/12;
}

.box5 {
    grid-column: 1/4;
    grid-row: 12/13;
}

.box6 {
    grid-column: 4/8;
    grid-row: 12/13;
}

.box7 {
    grid-column: 8/11;
    grid-row: 12/13;
}

.code {
    border: 2px solid red;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 2px;
}

.ch-post, .logo {
    height: 50px;  /* 给指定高度，自动适应宽度 */
}

.stamp {
    width: 80px;  /* 给指定宽度，自动适应高度 */
}

.content {
    height: 30px;
    width: 80%;
    border-bottom: 1px solid #aaa;
}

.box5 p {
    font-size: 10px;
    color: #bbb;
    padding: 10px
}

.box6 p {
    font-size: 20px;
    color: #000;
    padding: 10px;
    font-weight: 500;  /* 字体加重 */
    margin-top: 0;
}

.box7 p {
    font-size: 15px;
    color: #bbb;
    padding: 10px;
    margin-top: 10px;
}

python全栈教学知识库

【CSS】案例：蛙儿子的明信片

案例：蛙儿子的明信片

1 css继承与优先级

1.1 继承与非继承

1.2 下面列表中，选择器类型的优先级是递增的

1.3 注意

2 编写规则

3 从设计到开发的流程