案例：蛙儿子的明信片

image.png

1 css继承与优先级

1.1 继承与非继承

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

image.png

  • 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 是一个坏习惯，应该尽量避免
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>css-tips</title>
  9.     <style>
  11.         #parent {
  12.             color: green;
  13.         }
  15.         #id-h1 {
  16.             color: orange;
  17.         }
  18.         .title{
  19.             color: red;
  20.         }
  22.         h1 {
  23.             color: purple;
  24.         }
  26.         * #foo {
  27.             color: green;
  28.         }
  30.         *[id="foo"] {
  31.             color: purple;
  32.         }
  33.     </style>
  34. </head>
  36. <body>
  37.     <div id="parent">
  38.         <h1 class="title" id="id-h1">Here is a title!</h1>
  39.     </div>
  40.     <p id="foo">I am a sample text.</p>
  41. </body>
  43. </html>

image.png

2 编写规则

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

image.png

<!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;
}

image.png

image.png