{"id":254,"date":"2026-03-16T23:18:43","date_gmt":"2026-03-16T15:18:43","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=254"},"modified":"2026-03-16T23:18:43","modified_gmt":"2026-03-16T15:18:43","slug":"day-13-css%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=254","title":{"rendered":"Day-13-CSS\u57fa\u7840"},"content":{"rendered":"<h1>Day 13: CSS \u57fa\u7840<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u7406\u89e3 CSS \u7684\u4f5c\u7528\u548c\u57fa\u672c\u8bed\u6cd5<\/li>\n<li>\u638c\u63e1\u9009\u62e9\u5668\u7684\u4f7f\u7528\u65b9\u6cd5<\/li>\n<li>\u5b66\u4f1a\u8bbe\u7f6e\u6587\u672c\u3001\u989c\u8272\u3001\u80cc\u666f\u7b49\u57fa\u672c\u6837\u5f0f<\/li>\n<li>\u4e86\u89e3\u76d2\u6a21\u578b\u7684\u6982\u5ff5<\/li>\n<li>\u5b66\u4f1a\u4f7f\u7528 CSS \u6392\u7248\u548c\u5e03\u5c40<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>\u4ec0\u4e48\u662f CSS\uff1f<\/h3>\n<p><strong>CSS\uff08Cascading Style Sheets\uff0c\u5c42\u53e0\u6837\u5f0f\u8868\uff09<\/strong> \u662f\u7528\u4e8e\u63cf\u8ff0\u7f51\u9875\u5916\u89c2\u548c\u683c\u5f0f\u7684\u6837\u5f0f\u8bed\u8a00\u3002<\/p>\n<p><strong>CSS \u7684\u4f5c\u7528<\/strong>\uff1a<\/p>\n<ul>\n<li>\u63a7\u5236\u7f51\u9875\u7684<strong>\u5e03\u5c40<\/strong>\uff08Layout\uff09<\/li>\n<li>\u8bbe\u7f6e<strong>\u989c\u8272<\/strong>\u3001<strong>\u5b57\u4f53<\/strong>\u3001<strong>\u5927\u5c0f<\/strong><\/li>\n<li>\u6dfb\u52a0<strong>\u52a8\u753b<\/strong>\u548c<strong>\u8fc7\u6e21\u6548\u679c<\/strong><\/li>\n<li>\u5b9e\u73b0<strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>\uff08\u9002\u914d\u4e0d\u540c\u8bbe\u5907\uff09<\/li>\n<\/ul>\n<p><strong>HTML vs CSS<\/strong>\uff1a<\/p>\n<ul>\n<li><strong>HTML<\/strong>\uff1a\u7f51\u9875\u7684<strong>\u7ed3\u6784<\/strong>\uff08\u9aa8\u67b6\uff09<\/li>\n<li><strong>CSS<\/strong>\uff1a\u7f51\u9875\u7684<strong>\u6837\u5f0f<\/strong>\uff08\u76ae\u80a4\uff09<\/li>\n<\/ul>\n<h3>CSS \u7684\u4e09\u79cd\u5f15\u5165\u65b9\u5f0f<\/h3>\n<h4>1. \u884c\u5185\u6837\u5f0f\uff08Inline Style\uff09<\/h4>\n<pre><code class=\"language-html\">&lt;p style=&quot;color: red; font-size: 20px;&quot;&gt;\n    \u8fd9\u662f\u7ea2\u8272\u6587\u5b57\n&lt;\/p&gt;\n<\/code><\/pre>\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u4f18\u5148\u7ea7\u6700\u9ad8\uff0c\u7528\u4e8e\u8986\u76d6\u5176\u4ed6\u6837\u5f0f<br \/>\n<strong>\u7f3a\u70b9<\/strong>\uff1a\u4ee3\u7801\u6df7\u4e71\uff0c\u4e0d\u63a8\u8350\u5927\u91cf\u4f7f\u7528<\/p>\n<h4>2. \u5185\u90e8\u6837\u5f0f\uff08Internal Style\uff09<\/h4>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;style&gt;\n        p {\n            color: red;\n            font-size: 20px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;p&gt;\u8fd9\u662f\u7ea2\u8272\u6587\u5b57&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u6837\u5f0f\u96c6\u4e2d\u7ba1\u7406<br \/>\n<strong>\u7f3a\u70b9<\/strong>\uff1a\u4e0d\u80fd\u8de8\u6587\u4ef6\u590d\u7528<\/p>\n<h4>3. \u5916\u90e8\u6837\u5f0f\uff08External Style\uff09\u2b50 \u63a8\u8350<\/h4>\n<pre><code class=\"language-html\">&lt;!-- HTML \u6587\u4ef6 --&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css\">\/* styles.css *\/\np {\n    color: red;\n    font-size: 20px;\n}\n<\/code><\/pre>\n<p><strong>\u4f18\u70b9<\/strong>\uff1a<\/p>\n<ul>\n<li>\u6837\u5f0f\u4e0e\u7ed3\u6784\u5206\u79bb<\/li>\n<li>\u591a\u4e2a\u9875\u9762\u5171\u4eab\u6837\u5f0f<\/li>\n<li>\u6d4f\u89c8\u5668\u7f13\u5b58\uff0c\u63d0\u9ad8\u52a0\u8f7d\u901f\u5ea6<\/li>\n<\/ul>\n<h3>CSS \u8bed\u6cd5\u7ed3\u6784<\/h3>\n<pre><code class=\"language-css\">\u9009\u62e9\u5668 {\n    \u5c5e\u6027\u540d: \u5c5e\u6027\u503c;\n    \u5c5e\u6027\u540d: \u5c5e\u6027\u503c;\n}\n\n\/* \u793a\u4f8b *\/\nh1 {\n    color: blue;\n    font-size: 32px;\n    text-align: center;\n}\n<\/code><\/pre>\n<p><strong>\u7ec4\u6210\u90e8\u5206<\/strong>\uff1a<\/p>\n<ul>\n<li><strong>\u9009\u62e9\u5668\uff08Selector\uff09<\/strong>\uff1a\u9009\u4e2d\u8981\u6837\u5f0f\u5316\u7684\u5143\u7d20<\/li>\n<li><strong>\u5c5e\u6027\uff08Property\uff09<\/strong>\uff1a\u8981\u8bbe\u7f6e\u7684\u6837\u5f0f\u5c5e\u6027<\/li>\n<li><strong>\u503c\uff08Value\uff09<\/strong>\uff1a\u5c5e\u6027\u7684\u5177\u4f53\u503c<\/li>\n<\/ul>\n<h2>\ud83d\udcdd CSS \u9009\u62e9\u5668<\/h2>\n<h3>\u57fa\u7840\u9009\u62e9\u5668<\/h3>\n<h4>1. \u5143\u7d20\u9009\u62e9\u5668\uff08Type Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d\u6240\u6709 p \u5143\u7d20 *\/\np {\n    color: black;\n}\n\n\/* \u9009\u4e2d\u6240\u6709 h1 \u5143\u7d20 *\/\nh1 {\n    font-size: 32px;\n}\n<\/code><\/pre>\n<h4>2. \u7c7b\u9009\u62e9\u5668\uff08Class Selector\uff09\u2b50 \u5e38\u7528<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d\u6240\u6709 class \u4e3a &quot;highlight&quot; \u7684\u5143\u7d20 *\/\n.highlight {\n    background-color: yellow;\n}\n\n\/* \u9009\u4e2d class \u5305\u542b &quot;btn-primary&quot; \u7684\u5143\u7d20 *\/\n.btn-primary {\n    background-color: blue;\n    color: white;\n}\n<\/code><\/pre>\n<pre><code class=\"language-html\">&lt;p class=&quot;highlight&quot;&gt;\u9ad8\u4eae\u6587\u672c&lt;\/p&gt;\n&lt;button class=&quot;btn-primary&quot;&gt;\u4e3b\u8981\u6309\u94ae&lt;\/button&gt;\n<\/code><\/pre>\n<h4>3. ID \u9009\u62e9\u5668\uff08ID Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d id \u4e3a &quot;header&quot; \u7684\u5143\u7d20 *\/\n#header {\n    background-color: navy;\n    color: white;\n}\n<\/code><\/pre>\n<pre><code class=\"language-html\">&lt;div id=&quot;header&quot;&gt;\u9875\u9762\u5934\u90e8&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>\u6ce8\u610f<\/strong>\uff1aID \u5728\u9875\u9762\u4e2d\u5e94\u8be5\u662f\u552f\u4e00\u7684<\/p>\n<h4>4. \u901a\u914d\u7b26\u9009\u62e9\u5668\uff08Universal Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d\u6240\u6709\u5143\u7d20 *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n<\/code><\/pre>\n<h3>\u7ec4\u5408\u9009\u62e9\u5668<\/h3>\n<h4>1. \u540e\u4ee3\u9009\u62e9\u5668\uff08Descendant Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d div \u5185\u90e8\u7684\u6240\u6709 p \u5143\u7d20 *\/\ndiv p {\n    color: blue;\n}\n<\/code><\/pre>\n<h4>2. \u5b50\u5143\u7d20\u9009\u62e9\u5668\uff08Child Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u53ea\u9009\u4e2d div \u7684\u76f4\u63a5\u5b50\u5143\u7d20 p *\/\ndiv &gt; p {\n    color: red;\n}\n<\/code><\/pre>\n<h4>3. \u76f8\u90bb\u5144\u5f1f\u9009\u62e9\u5668\uff08Adjacent Sibling Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d\u7d27\u63a5\u5728 h1 \u540e\u9762\u7684 p \u5143\u7d20 *\/\nh1 + p {\n    font-weight: bold;\n}\n<\/code><\/pre>\n<h4>4. \u901a\u7528\u5144\u5f1f\u9009\u62e9\u5668\uff08General Sibling Selector\uff09<\/h4>\n<pre><code class=\"language-css\">\/* \u9009\u4e2d h1 \u4e4b\u540e\u7684\u6240\u6709 p \u5144\u5f1f\u5143\u7d20 *\/\nh1 ~ p {\n    color: gray;\n}\n<\/code><\/pre>\n<h3>\u4f2a\u7c7b\u9009\u62e9\u5668\uff08Pseudo-class Selector\uff09<\/h3>\n<pre><code class=\"language-css\">\/* \u9f20\u6807\u60ac\u505c *\/\na:hover {\n    color: red;\n}\n\n\/* \u8bbf\u95ee\u8fc7\u7684\u94fe\u63a5 *\/\na:visited {\n    color: purple;\n}\n\n\/* \u672a\u8bbf\u95ee\u7684\u94fe\u63a5 *\/\na:link {\n    color: blue;\n}\n\n\/* \u88ab\u6fc0\u6d3b\u7684\u94fe\u63a5 *\/\na:active {\n    color: orange;\n}\n\n\/* \u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20 *\/\nli:first-child {\n    font-weight: bold;\n}\n\n\/* \u6700\u540e\u4e00\u4e2a\u5b50\u5143\u7d20 *\/\nli:last-child {\n    border-bottom: none;\n}\n\n\/* \u7b2c n \u4e2a\u5b50\u5143\u7d20 *\/\nli:nth-child(3) {\n    color: red;\n}\n\n\/* \u5076\u6570\u9879 *\/\nli:nth-child(even) {\n    background-color: #f0f0f0;\n}\n\n\/* \u5947\u6570\u9879 *\/\nli:nth-child(odd) {\n    background-color: #fff;\n}\n<\/code><\/pre>\n<h2>\ud83c\udfa8 \u5e38\u7528 CSS \u5c5e\u6027<\/h2>\n<h3>\u6587\u672c\u6837\u5f0f<\/h3>\n<pre><code class=\"language-css\">.text-style {\n    \/* \u989c\u8272 *\/\n    color: #333333;\n\n    \/* \u5b57\u4f53\u5927\u5c0f *\/\n    font-size: 16px;\n\n    \/* \u5b57\u4f53\u7c97\u7ec6 *\/\n    font-weight: bold;\n\n    \/* \u5b57\u4f53\u5bb6\u65cf *\/\n    font-family: Arial, sans-serif;\n\n    \/* \u6587\u672c\u5bf9\u9f50 *\/\n    text-align: center;\n\n    \/* \u6587\u672c\u88c5\u9970 *\/\n    text-decoration: underline;\n\n    \/* \u884c\u9ad8 *\/\n    line-height: 1.5;\n\n    \/* \u5b57\u6bcd\u95f4\u8ddd *\/\n    letter-spacing: 1px;\n\n    \/* \u6587\u672c\u8f6c\u6362 *\/\n    text-transform: uppercase;\n}\n<\/code><\/pre>\n<h3>\u80cc\u666f\u6837\u5f0f<\/h3>\n<pre><code class=\"language-css\">.background-style {\n    \/* \u80cc\u666f\u989c\u8272 *\/\n    background-color: #f0f0f0;\n\n    \/* \u80cc\u666f\u56fe\u7247 *\/\n    background-image: url('image.jpg');\n\n    \/* \u80cc\u666f\u91cd\u590d *\/\n    background-repeat: no-repeat;\n\n    \/* \u80cc\u666f\u4f4d\u7f6e *\/\n    background-position: center center;\n\n    \/* \u80cc\u666f\u5927\u5c0f *\/\n    background-size: cover;\n\n    \/* \u7b80\u5199 *\/\n    background: #f0f0f0 url('image.jpg') no-repeat center;\n}\n<\/code><\/pre>\n<h3>\u8fb9\u6846\u6837\u5f0f<\/h3>\n<pre><code class=\"language-css\">.border-style {\n    \/* \u8fb9\u6846\u5bbd\u5ea6 *\/\n    border-width: 2px;\n\n    \/* \u8fb9\u6846\u6837\u5f0f *\/\n    border-style: solid;\n\n    \/* \u8fb9\u6846\u989c\u8272 *\/\n    border-color: #333;\n\n    \/* \u5706\u89d2 *\/\n    border-radius: 5px;\n\n    \/* \u7b80\u5199 *\/\n    border: 2px solid #333;\n    border-radius: 5px;\n}\n<\/code><\/pre>\n<h3>\u95f4\u8ddd\uff08Padding &amp; Margin\uff09<\/h3>\n<pre><code class=\"language-css\">.spacing {\n    \/* \u5185\u8fb9\u8ddd *\/\n    padding-top: 10px;\n    padding-right: 20px;\n    padding-bottom: 10px;\n    padding-left: 20px;\n\n    \/* \u7b80\u5199\uff1a\u4e0a \u53f3 \u4e0b \u5de6 *\/\n    padding: 10px 20px 10px 20px;\n\n    \/* \u7b80\u5199\uff1a\u4e0a\u4e0b \u5de6\u53f3 *\/\n    padding: 10px 20px;\n\n    \/* \u5916\u8fb9\u8ddd *\/\n    margin-top: 10px;\n    margin-right: 20px;\n    margin-bottom: 10px;\n    margin-left: 20px;\n\n    \/* \u7b80\u5199 *\/\n    margin: 10px 20px;\n\n    \/* \u5c45\u4e2d\uff08\u5757\u7ea7\u5143\u7d20\uff09 *\/\n    margin: 0 auto;\n}\n<\/code><\/pre>\n<h2>\ud83d\udce6 \u76d2\u6a21\u578b\uff08Box Model\uff09<\/h2>\n<h3>\u4ec0\u4e48\u662f\u76d2\u6a21\u578b\uff1f<\/h3>\n<p>CSS \u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u88ab\u8868\u793a\u4e3a\u4e00\u4e2a<strong>\u77e9\u5f62\u76d2\u5b50<\/strong>\uff0c\u5305\u542b\u56db\u4e2a\u90e8\u5206\uff1a<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502       Margin (\u5916\u8fb9\u8ddd)        \u2502  \u2190 \u5143\u7d20\u5916\u90e8\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502    Border (\u8fb9\u6846)            \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502    Padding (\u5185\u8fb9\u8ddd)         \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510    \u2502\n\u2502  \u2502  Content (\u5185\u5bb9)     \u2502    \u2502  \u2190 \u5b9e\u9645\u5185\u5bb9\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518    \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<h3>\u76d2\u6a21\u578b\u5c5e\u6027<\/h3>\n<pre><code class=\"language-css\">.box {\n    \/* \u5185\u5bb9\u5bbd\u5ea6 *\/\n    width: 200px;\n\n    \/* \u5185\u5bb9\u9ad8\u5ea6 *\/\n    height: 100px;\n\n    \/* \u5185\u8fb9\u8ddd *\/\n    padding: 20px;\n\n    \/* \u8fb9\u6846 *\/\n    border: 2px solid #333;\n\n    \/* \u5916\u8fb9\u8ddd *\/\n    margin: 10px;\n\n    \/* \u76d2\u6a21\u578b\u7c7b\u578b *\/\n    box-sizing: border-box;  \/* \u63a8\u8350 *\/\n}\n<\/code><\/pre>\n<h3>box-sizing \u5c5e\u6027<\/h3>\n<pre><code class=\"language-css\">\/* content-box\uff08\u9ed8\u8ba4\uff09 *\/\n\/* width \u53ea\u5305\u542b\u5185\u5bb9\uff0c\u4e0d\u5305\u542b padding \u548c border *\/\n.box1 {\n    box-sizing: content-box;\n    width: 200px;\n    padding: 20px;  \/* \u603b\u5bbd\u5ea6 = 200 + 20*2 = 240px *\/\n    border: 5px;    \/* \u603b\u5bbd\u5ea6 = 240 + 5*2 = 250px *\/\n}\n\n\/* border-box\uff08\u63a8\u8350\uff09 *\/\n\/* width \u5305\u542b\u5185\u5bb9\u3001padding \u548c border *\/\n.box2 {\n    box-sizing: border-box;\n    width: 200px;\n    padding: 20px;  \/* \u603b\u5bbd\u5ea6 = 200px\uff08\u5185\u5bb9\u81ea\u52a8\u7f29\u5c0f\uff09 *\/\n    border: 5px;\n}\n<\/code><\/pre>\n<h2>\ud83c\udfae \u793a\u4f8b\u4ee3\u7801<\/h2>\n<h3>\u793a\u4f8b 1: \u5361\u7247\u6837\u5f0f<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u5361\u7247\u6837\u5f0f&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f0f0f0;\n            padding: 20px;\n        }\n\n        .card {\n            background-color: white;\n            border-radius: 10px;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n            padding: 20px;\n            margin: 20px auto;\n            max-width: 400px;\n        }\n\n        .card-title {\n            font-size: 24px;\n            font-weight: bold;\n            color: #333;\n            margin-bottom: 10px;\n        }\n\n        .card-content {\n            font-size: 16px;\n            color: #666;\n            line-height: 1.6;\n        }\n\n        .card-footer {\n            margin-top: 20px;\n            padding-top: 15px;\n            border-top: 1px solid #eee;\n            text-align: right;\n        }\n\n        .btn {\n            display: inline-block;\n            padding: 10px 20px;\n            background-color: #4CAF50;\n            color: white;\n            text-decoration: none;\n            border-radius: 5px;\n            transition: background-color 0.3s;\n        }\n\n        .btn:hover {\n            background-color: #45a049;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;card&quot;&gt;\n        &lt;div class=&quot;card-title&quot;&gt;\u6b22\u8fce\u4f7f\u7528 CSS&lt;\/div&gt;\n        &lt;div class=&quot;card-content&quot;&gt;\n            CSS \u662f\u7f51\u9875\u8bbe\u8ba1\u4e2d\u6700\u91cd\u8981\u7684\u6280\u80fd\u4e4b\u4e00\u3002\n            \u638c\u63e1 CSS \u53ef\u4ee5\u8ba9\u4f60\u7684\u7f51\u9875\u66f4\u52a0\u7f8e\u89c2\u548c\u4e13\u4e1a\u3002\n        &lt;\/div&gt;\n        &lt;div class=&quot;card-footer&quot;&gt;\n            &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 2: \u5bfc\u822a\u680f<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u5bfc\u822a\u680f&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n        }\n\n        .navbar {\n            background-color: #333;\n            overflow: hidden;\n        }\n\n        .navbar a {\n            float: left;\n            display: block;\n            color: white;\n            text-align: center;\n            padding: 14px 20px;\n            text-decoration: none;\n            transition: background-color 0.3s;\n        }\n\n        .navbar a:hover {\n            background-color: #555;\n        }\n\n        .navbar .active {\n            background-color: #4CAF50;\n        }\n\n        .navbar-right {\n            float: right;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;navbar&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;\u9996\u9875&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u65b0\u95fb&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u4ea7\u54c1&lt;\/a&gt;\n        &lt;a href=&quot;#&quot;&gt;\u5173\u4e8e&lt;\/a&gt;\n        &lt;div class=&quot;navbar-right&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;\u767b\u5f55&lt;\/a&gt;\n            &lt;a href=&quot;#&quot;&gt;\u6ce8\u518c&lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 3: \u8868\u683c\u6837\u5f0f<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u8868\u683c\u6837\u5f0f&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n            padding: 20px;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            margin: 20px 0;\n        }\n\n        th, td {\n            padding: 12px;\n            text-align: left;\n            border-bottom: 1px solid #ddd;\n        }\n\n        th {\n            background-color: #4CAF50;\n            color: white;\n            font-weight: bold;\n        }\n\n        tr:hover {\n            background-color: #f5f5f5;\n        }\n\n        tr:nth-child(even) {\n            background-color: #f9f9f9;\n        }\n\n        .table-caption {\n            font-size: 20px;\n            font-weight: bold;\n            margin-bottom: 10px;\n            color: #333;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;table-caption&quot;&gt;\u5b66\u751f\u6210\u7ee9\u8868&lt;\/div&gt;\n    &lt;table&gt;\n        &lt;thead&gt;\n            &lt;tr&gt;\n                &lt;th&gt;\u59d3\u540d&lt;\/th&gt;\n                &lt;th&gt;\u8bed\u6587&lt;\/th&gt;\n                &lt;th&gt;\u6570\u5b66&lt;\/th&gt;\n                &lt;th&gt;\u82f1\u8bed&lt;\/th&gt;\n                &lt;th&gt;\u603b\u5206&lt;\/th&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\u5f20\u4e09&lt;\/td&gt;\n                &lt;td&gt;85&lt;\/td&gt;\n                &lt;td&gt;90&lt;\/td&gt;\n                &lt;td&gt;88&lt;\/td&gt;\n                &lt;td&gt;263&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\u674e\u56db&lt;\/td&gt;\n                &lt;td&gt;92&lt;\/td&gt;\n                &lt;td&gt;87&lt;\/td&gt;\n                &lt;td&gt;95&lt;\/td&gt;\n                &lt;td&gt;274&lt;\/td&gt;\n            &lt;\/tr&gt;\n            &lt;tr&gt;\n                &lt;td&gt;\u738b\u4e94&lt;\/td&gt;\n                &lt;td&gt;78&lt;\/td&gt;\n                &lt;td&gt;85&lt;\/td&gt;\n                &lt;td&gt;82&lt;\/td&gt;\n                &lt;td&gt;245&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/tbody&gt;\n    &lt;\/table&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h2>\u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>1. \u4f18\u5148\u7ea7\uff08Specificity\uff09<\/h3>\n<p>\u5f53\u591a\u4e2a\u89c4\u5219\u5e94\u7528\u4e8e\u540c\u4e00\u5143\u7d20\u65f6\uff0c\u4f18\u5148\u7ea7\u51b3\u5b9a\u54ea\u4e2a\u89c4\u5219\u751f\u6548\u3002<\/p>\n<p><strong>\u4f18\u5148\u7ea7\u4ece\u9ad8\u5230\u4f4e<\/strong>\uff1a<\/p>\n<ol>\n<li><code>!important<\/code><\/li>\n<li>\u5185\u8054\u6837\u5f0f\uff08<code>style=&quot;...&quot;<\/code>\uff09<\/li>\n<li>ID \u9009\u62e9\u5668<\/li>\n<li>\u7c7b\u9009\u62e9\u5668\u3001\u4f2a\u7c7b\u9009\u62e9\u5668<\/li>\n<li>\u5143\u7d20\u9009\u62e9\u5668<\/li>\n<li>\u901a\u914d\u7b26\u9009\u62e9\u5668<\/li>\n<\/ol>\n<pre><code class=\"language-css\">\/* \u4f18\u5148\u7ea7\uff1aID &gt; \u7c7b &gt; \u5143\u7d20 *\/\n#header .nav a {\n    color: red;  \/* \u4f18\u5148\u7ea7\u6700\u9ad8 *\/\n}\n\n.nav a {\n    color: blue;\n}\n\na {\n    color: green;  \/* \u4f18\u5148\u7ea7\u6700\u4f4e *\/\n}\n<\/code><\/pre>\n<h3>2. \u989c\u8272\u8868\u793a\u65b9\u6cd5<\/h3>\n<pre><code class=\"language-css\">.color-methods {\n    \/* \u989c\u8272\u540d\u79f0 *\/\n    color: red;\n\n    \/* \u5341\u516d\u8fdb\u5236 *\/\n    color: #FF0000;\n    color: #F00;  \/* \u7b80\u5199 *\/\n\n    \/* RGB *\/\n    color: rgb(255, 0, 0);\n\n    \/* RGBA\uff08\u5e26\u900f\u660e\u5ea6\uff09*\/\n    color: rgba(255, 0, 0, 0.5);\n\n    \/* HSL *\/\n    color: hsl(0, 100%, 50%);\n\n    \/* HSLA\uff08\u5e26\u900f\u660e\u5ea6\uff09*\/\n    color: hsla(0, 100%, 50%, 0.5);\n}\n<\/code><\/pre>\n<h3>3. \u5355\u4f4d<\/h3>\n<p><strong>\u957f\u5ea6\u5355\u4f4d<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.sizing {\n    \/* \u7edd\u5bf9\u5355\u4f4d *\/\n    width: 200px;      \/* \u50cf\u7d20 *\/\n    font-size: 16pt;   \/* \u78c5 *\/\n    font-size: 1cm;    \/* \u5398\u7c73 *\/\n\n    \/* \u76f8\u5bf9\u5355\u4f4d\uff08\u63a8\u8350\uff09*\/\n    width: 50%;        \/* \u767e\u5206\u6bd4 *\/\n    font-size: 1.2em;  \/* \u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u5b57\u4f53\u5927\u5c0f *\/\n    font-size: 1.2rem; \/* \u76f8\u5bf9\u4e8e\u6839\u5143\u7d20\u5b57\u4f53\u5927\u5c0f *\/\n    width: 10vw;       \/* \u89c6\u53e3\u5bbd\u5ea6 *\/\n    height: 10vh;      \/* \u89c6\u53e3\u9ad8\u5ea6 *\/\n}\n<\/code><\/pre>\n<h3>4. CSS \u547d\u540d\u89c4\u8303<\/h3>\n<p><strong>\u63a8\u8350<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* BEM \u547d\u540d\u6cd5\uff08Block Element Modifier\uff09 *\/\n.card { }                    \/* Block *\/\n.card__title { }             \/* Element *\/\n.card--highlight { }         \/* Modifier *\/\n\n\/* \u5c0f\u5199 + \u8fde\u5b57\u7b26 *\/\n.main-content { }\n.nav-bar { }\n<\/code><\/pre>\n<p><strong>\u907f\u514d<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u9a7c\u5cf0\u547d\u540d\uff08JavaScript \u98ce\u683c\uff09*\/\n.mainContent { }  \/* \u4e0d\u63a8\u8350 *\/\n\n\/* \u4e0b\u5212\u7ebf *\/\n.main_content { }  \/* \u90e8\u5206\u9879\u76ee\u4f7f\u7528 *\/\n<\/code><\/pre>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u7ec3\u4e60 1: \u4e2a\u4eba\u540d\u7247<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u521b\u5efa\u4e00\u4e2a\u4e2a\u4eba\u540d\u7247\u5361\u7247<\/li>\n<li>\u5305\u542b\u5934\u50cf\u3001\u59d3\u540d\u3001\u804c\u4e1a\u3001\u8054\u7cfb\u65b9\u5f0f<\/li>\n<li>\u6dfb\u52a0\u60ac\u505c\u6548\u679c\uff08\u653e\u5927\u3001\u9634\u5f71\uff09<\/li>\n<li>\u4f7f\u7528\u5706\u89d2\u548c\u9634\u5f71\u7f8e\u5316<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a\u4f7f\u7528 <code>transform: scale()<\/code> \u5b9e\u73b0\u653e\u5927\u6548\u679c<\/p>\n<h3>\u7ec3\u4e60 2: \u4ee3\u7801\u5757\u6837\u5f0f<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u4e3a\u4ee3\u7801\u5757\u8bbe\u8ba1\u6837\u5f0f<\/li>\n<li>\u6df1\u8272\u80cc\u666f\uff08#282c34\uff09<\/li>\n<li>\u8bed\u6cd5\u9ad8\u4eae\uff08\u5173\u952e\u8bcd\u3001\u5b57\u7b26\u4e32\u3001\u6ce8\u91ca\uff09<\/li>\n<li>\u884c\u53f7\u663e\u793a<\/li>\n<li>\u590d\u5236\u6309\u94ae<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a\u4f7f\u7528 <code>::before<\/code> \u4f2a\u5143\u7d20\u6dfb\u52a0\u884c\u53f7<\/p>\n<h3>\u7ec3\u4e60 3: \u54cd\u5e94\u5f0f\u5361\u7247\u7f51\u683c<\/h3>\n<p><strong>\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u521b\u5efa\u5361\u7247\u7f51\u683c\u5e03\u5c40<\/li>\n<li>\u5927\u5c4f\u5e55\uff1a3 \u5217<\/li>\n<li>\u4e2d\u7b49\u5c4f\u5e55\uff1a2 \u5217<\/li>\n<li>\u5c0f\u5c4f\u5e55\uff1a1 \u5217<\/li>\n<li>\u5361\u7247\u95f4\u8ddd 20px<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a\u4f7f\u7528\u5a92\u4f53\u67e5\u8be2 <code>@media<\/code><\/p>\n<h2>\ud83c\udf93 \u4eca\u65e5\u6311\u6218<\/h2>\n<h3>\u5b9e\u73b0\uff1a\u5b8c\u6574\u7684\u4e2a\u4eba\u4f5c\u54c1\u96c6\u9875\u9762<\/h3>\n<p><strong>\u529f\u80fd\u8981\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u5934\u90e8\u533a\u57df<\/strong><\/p>\n<ul>\n<li>\u5bfc\u822a\u680f\uff08\u56fa\u5b9a\u9876\u90e8\uff09<\/li>\n<li>Logo \u548c\u83dc\u5355\u9879<\/li>\n<li>\u6eda\u52a8\u65f6\u9ad8\u4eae\u5f53\u524d\u90e8\u5206<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u82f1\u96c4\u533a\uff08Hero Section\uff09<\/strong><\/p>\n<ul>\n<li>\u5168\u5c4f\u80cc\u666f\u56fe<\/li>\n<li>\u6807\u9898\u548c\u526f\u6807\u9898<\/li>\n<li>CTA \u6309\u94ae<\/li>\n<li>\u5411\u4e0b\u6eda\u52a8\u63d0\u793a<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u5173\u4e8e\u6211<\/strong><\/p>\n<ul>\n<li>\u4e2a\u4eba\u7b80\u4ecb<\/li>\n<li>\u6280\u80fd\u6807\u7b7e\uff08\u5e26\u56fe\u6807\uff09<\/li>\n<li>\u8fdb\u5ea6\u6761\u663e\u793a\u6280\u80fd\u719f\u7ec3\u5ea6<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u4f5c\u54c1\u5c55\u793a<\/strong><\/p>\n<ul>\n<li>\u5361\u7247\u7f51\u683c\u5e03\u5c40<\/li>\n<li>\u60ac\u505c\u663e\u793a\u8be6\u60c5<\/li>\n<li>\u5206\u7c7b\u7b5b\u9009\uff08\u5168\u90e8\/\u7f51\u9875\/\u5e94\u7528\uff09<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u8054\u7cfb\u65b9\u5f0f<\/strong><\/p>\n<ul>\n<li>\u8868\u5355\u6837\u5f0f<\/li>\n<li>\u793e\u4ea4\u5a92\u4f53\u94fe\u63a5<\/li>\n<li>\u5730\u56fe\u5360\u4f4d\u7b26<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>\u6280\u672f\u8981\u70b9<\/strong>\uff1a<\/p>\n<ul>\n<li>\u4f7f\u7528 Flexbox \u6216 Grid \u5e03\u5c40<\/li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff08\u79fb\u52a8\u4f18\u5148\uff09<\/li>\n<li>\u5e73\u6ed1\u6eda\u52a8\u6548\u679c<\/li>\n<li>CSS \u8fc7\u6e21\u548c\u52a8\u753b<\/li>\n<\/ul>\n<p><strong>\u6269\u5c55\u529f\u80fd<\/strong>\uff1a<\/p>\n<ul>\n<li>\u6697\u8272\u6a21\u5f0f\u5207\u6362<\/li>\n<li>\u6eda\u52a8\u52a8\u753b\uff08\u4f7f\u7528 Intersection Observer API\uff09<\/li>\n<li>\u8fd4\u56de\u9876\u90e8\u6309\u94ae<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898 FAQ<\/h2>\n<h3>Q1: px\u3001em\u3001rem \u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<table>\n<thead>\n<tr>\n<th>\u5355\u4f4d<\/th>\n<th>\u76f8\u5bf9\u4e8e<\/th>\n<th>\u9002\u7528\u573a\u666f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>px<\/code><\/td>\n<td>\u56fa\u5b9a\u503c<\/td>\n<td>\u8fb9\u6846\u3001\u56fa\u5b9a\u5c3a\u5bf8<\/td>\n<\/tr>\n<tr>\n<td><code>em<\/code><\/td>\n<td>\u7236\u5143\u7d20\u5b57\u4f53\u5927\u5c0f<\/td>\n<td>\u5c40\u90e8\u7ec4\u4ef6<\/td>\n<\/tr>\n<tr>\n<td><code>rem<\/code><\/td>\n<td>\u6839\u5143\u7d20\u5b57\u4f53\u5927\u5c0f<\/td>\n<td>\u5168\u5c40\u5e03\u5c40<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">html {\n    font-size: 16px;  \/* \u6839\u5143\u7d20 *\/\n}\n\n.parent {\n    font-size: 20px;\n}\n\n.child {\n    \/* em: \u76f8\u5bf9\u4e8e .parent \u7684 20px *\/\n    font-size: 0.8em;  \/* 16px *\/\n\n    \/* rem: \u76f8\u5bf9\u4e8e html \u7684 16px *\/\n    font-size: 1.5rem;  \/* 24px *\/\n\n    \/* px: \u56fa\u5b9a\u503c *\/\n    width: 100px;\n}\n<\/code><\/pre>\n<h3>Q2: \u5982\u4f55\u6c34\u5e73\u5c45\u4e2d\u5143\u7d20\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<pre><code class=\"language-css\">\/* \u65b9\u6cd51\uff1a\u6587\u672c\u548c\u884c\u5185\u5143\u7d20 *\/\n.text-center {\n    text-align: center;\n}\n\n\/* \u65b9\u6cd52\uff1a\u5757\u7ea7\u5143\u7d20\uff08\u5df2\u77e5\u5bbd\u5ea6\uff09*\/\n.block-center {\n    width: 200px;\n    margin: 0 auto;\n}\n\n\/* \u65b9\u6cd53\uff1aFlexbox\uff08\u63a8\u8350\uff09*\/\n.flex-center {\n    display: flex;\n    justify-content: center;\n}\n\n\/* \u65b9\u6cd54\uff1a\u7edd\u5bf9\u5b9a\u4f4d *\/\n.abs-center {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n}\n<\/code><\/pre>\n<h3>Q3: \u4ec0\u4e48\u65f6\u5019\u4f7f\u7528 class\uff0c\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528 ID\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>\u4f7f\u7528 Class<\/strong>\uff1a<\/p>\n<ul>\n<li>\u53ef\u91cd\u590d\u4f7f\u7528\u7684\u6837\u5f0f<\/li>\n<li>\u591a\u4e2a\u5143\u7d20\u5171\u4eab\u6837\u5f0f<\/li>\n<li>JavaScript \u9009\u62e9\u5143\u7d20<\/li>\n<\/ul>\n<p><strong>\u4f7f\u7528 ID<\/strong>\uff1a<\/p>\n<ul>\n<li>\u9875\u9762\u552f\u4e00\u7684\u5143\u7d20<\/li>\n<li>\u951a\u70b9\u94fe\u63a5\uff08\u5982 <code>#section1<\/code>\uff09<\/li>\n<li>JavaScript \u7279\u5b9a\u64cd\u4f5c<\/li>\n<\/ul>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-html\">&lt;!-- \u2705 \u6b63\u786e --&gt;\n&lt;div class=&quot;card&quot;&gt;\u5361\u72471&lt;\/div&gt;\n&lt;div class=&quot;card&quot;&gt;\u5361\u72472&lt;\/div&gt;\n&lt;div id=&quot;header&quot;&gt;\u9875\u9762\u5934\u90e8\uff08\u552f\u4e00\uff09&lt;\/div&gt;\n\n&lt;!-- \u274c \u9519\u8bef --&gt;\n&lt;div class=&quot;header&quot;&gt;\u5e94\u8be5\u7528 ID&lt;\/div&gt;\n&lt;div id=&quot;card1&quot;&gt;\u5e94\u8be5\u7528 class&lt;\/div&gt;\n<\/code><\/pre>\n<h3>Q4: \u5982\u4f55\u4f18\u5316 CSS \u6027\u80fd\uff1f<\/h3>\n<p><strong>A<\/strong>:<\/p>\n<p><strong>1. \u9009\u62e9\u5668\u4f18\u5316<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u274c \u907f\u514d\uff1a\u8fc7\u957f\u7684\u9009\u62e9\u5668\u94fe *\/\ndiv ul li a span { }\n\n\/* \u2705 \u63a8\u8350\uff1a\u4f7f\u7528 class *\/\n.nav-link { }\n<\/code><\/pre>\n<p><strong>2. \u907f\u514d\u901a\u914d\u7b26<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u274c \u6027\u80fd\u5dee *\/\n* { margin: 0; }\n\n\/* \u2705 \u66f4\u597d\u7684\u65b9\u5f0f *\/\nbody, h1, p, ul { margin: 0; }\n<\/code><\/pre>\n<p><strong>3. \u4f7f\u7528\u7b80\u5199<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u2705 \u7b80\u5199 *\/\nmargin: 10px 20px;\nbackground: #fff url('bg.jpg') no-repeat;\n\n\/* \u274c \u5197\u957f *\/\nmargin-top: 10px;\nmargin-right: 20px;\nmargin-bottom: 10px;\nmargin-left: 20px;\n<\/code><\/pre>\n<p><strong>4. \u538b\u7f29 CSS<\/strong>\uff1a<\/p>\n<ul>\n<li>\u4f7f\u7528\u5de5\u5177\uff1acssnano\u3001cssminifier<\/li>\n<li>\u79fb\u9664\u6ce8\u91ca\u548c\u7a7a\u683c<\/li>\n<li>\u5408\u5e76\u76f8\u540c\u89c4\u5219<\/li>\n<\/ul>\n<h3>Q5: CSS \u9884\u5904\u7406\u5668\uff08Sass\/Less\uff09\u503c\u5f97\u5b66\u4e60\u5417\uff1f<\/h3>\n<p><strong>A<\/strong>: <strong>\u5f3a\u70c8\u63a8\u8350\uff01<\/strong><\/p>\n<p><strong>\u4f18\u70b9<\/strong>\uff1a<\/p>\n<ol>\n<li><strong>\u53d8\u91cf<\/strong>\uff1a\u5b9a\u4e49\u989c\u8272\u3001\u5c3a\u5bf8\u7b49<\/li>\n<li><strong>\u5d4c\u5957<\/strong>\uff1a\u66f4\u6e05\u6670\u7684\u4ee3\u7801\u7ed3\u6784<\/li>\n<li><strong>\u6df7\u5408\uff08Mixins\uff09<\/strong>\uff1a\u53ef\u590d\u7528\u7684\u4ee3\u7801\u5757<\/li>\n<li><strong>\u51fd\u6570<\/strong>\uff1a\u52a8\u6001\u8ba1\u7b97\u503c<\/li>\n<li><strong>\u6a21\u5757\u5316<\/strong>\uff1a\u62c6\u5206\u4e3a\u591a\u4e2a\u6587\u4ef6<\/li>\n<\/ol>\n<p><strong>Sass \u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-scss\">\/\/ \u53d8\u91cf\n$primary-color: #4CAF50;\n\n\/\/ \u6df7\u5408\n@mixin border-radius($radius) {\n    border-radius: $radius;\n    -webkit-border-radius: $radius;\n}\n\n\/\/ \u4f7f\u7528\n.button {\n    color: $primary-color;\n    @include border-radius(5px);\n}\n<\/code><\/pre>\n<p><strong>\u5b66\u4e60\u5efa\u8bae<\/strong>\uff1a\u5148\u638c\u63e1 CSS \u57fa\u7840\uff0c\u518d\u5b66\u4e60\u9884\u5904\u7406\u5668\u3002<\/p>\n<h2>\ud83d\udcda \u62d3\u5c55\u9605\u8bfb<\/h2>\n<h3>\u76f8\u5173\u4e3b\u9898<\/h3>\n<ol>\n<li><strong>Flexbox \u5e03\u5c40<\/strong>\uff1a\u73b0\u4ee3\u4e00\u7ef4\u5e03\u5c40\u65b9\u6848<\/li>\n<li><strong>Grid \u5e03\u5c40<\/strong>\uff1a\u73b0\u4ee3\u4e8c\u7ef4\u5e03\u5c40\u65b9\u6848<\/li>\n<li><strong>CSS \u52a8\u753b<\/strong>\uff1atransition \u548c animation<\/li>\n<li><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>\uff1a\u5a92\u4f53\u67e5\u8be2\u548c\u79fb\u52a8\u4f18\u5148<\/li>\n<li><strong>CSS \u9884\u5904\u7406\u5668<\/strong>\uff1aSass\u3001Less\u3001Stylus<\/li>\n<\/ol>\n<h3>\u63a8\u8350\u8d44\u6e90<\/h3>\n<ul>\n<li><strong>MDN Web Docs<\/strong>: https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS<\/li>\n<li><strong>CSS-Tricks<\/strong>: https:\/\/css-tricks.com\/<\/li>\n<li><strong>Can I Use<\/strong>: \u67e5\u8be2\u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/li>\n<\/ul>\n<h3>\u5b9e\u7528\u5de5\u5177<\/h3>\n<ol>\n<li><strong>CSS Reset<\/strong>: normalize.css<\/li>\n<li><strong>CSS \u6846\u67b6<\/strong>: Bootstrap\u3001Tailwind CSS<\/li>\n<li><strong>\u5728\u7ebf\u751f\u6210\u5668<\/strong>\uff1a\u6e10\u53d8\u3001\u9634\u5f71\u3001\u5706\u89d2<\/li>\n<\/ol>\n<hr>\n<p><strong>\u5b66\u4e60\u65f6\u95f4<\/strong>: 2026-03-13 07:14<br \/>\n<strong>\u96be\u5ea6<\/strong>: \u2b50\u2b50\u2b50\u2606\u2606<br \/>\n<strong>\u9884\u8ba1\u7528\u65f6<\/strong>: 3-4 \u5c0f\u65f6<br \/>\n<strong>\u5173\u952e\u8bcd<\/strong>: CSS, \u9009\u62e9\u5668, \u76d2\u6a21\u578b, \u6837\u5f0f, \u5e03\u5c40<br \/>\n<strong>\u76f8\u5173\u6807\u7b7e<\/strong>: #08-\u6837\u5f0f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 13: CSS \u57fa\u7840 \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u7406\u89e3 CSS \u7684\u4f5c\u7528\u548c\u57fa\u672c\u8bed\u6cd5 \u638c\u63e1\u9009\u62e9\u5668\u7684\u4f7f\u7528\u65b9\u6cd5 \u5b66\u4f1a\u8bbe\u7f6e\u6587\u672c &#8230; <a title=\"Day-13-CSS\u57fa\u7840\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=254\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-13-CSS\u57fa\u7840\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-254","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=254"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/254\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/254\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}