{"id":1014,"date":"2025-12-28T09:13:50","date_gmt":"2025-12-28T01:13:50","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=1014"},"modified":"2025-12-28T09:13:50","modified_gmt":"2025-12-28T01:13:50","slug":"css%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/28\/css%e6%95%99%e7%a8%8b\/","title":{"rendered":"css\u6559\u7a0b"},"content":{"rendered":"\n<p>\u4e0b\u9762\u662f\u4e00\u5957<strong>\u4ece\u96f6\u5f00\u59cb\u3001\u5faa\u5e8f\u6e10\u8fdb\u7684 CSS \u6559\u7a0b<\/strong>\uff0c\u9002\u5408\u521d\u5b66\u8005\uff0c\u4e5f\u65b9\u4fbf\u4f60\u540e\u671f\u67e5\u9605\u901f\u5b66 \ud83d\udc47<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e00\u3001CSS \u662f\u4ec0\u4e48\uff1f<\/h1>\n\n\n\n<p><strong>CSS\uff08Cascading Style Sheets\uff0c\u5c42\u53e0\u6837\u5f0f\u8868\uff09<\/strong><br>\u7528\u4e8e\u63a7\u5236 HTML \u7684 <strong>\u6837\u5f0f\u548c\u5e03\u5c40<\/strong>\uff0c\u6bd4\u5982\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u989c\u8272<\/li>\n\n\n\n<li>\u5b57\u4f53<\/li>\n\n\n\n<li>\u95f4\u8ddd<\/li>\n\n\n\n<li>\u5e03\u5c40<\/li>\n\n\n\n<li>\u52a8\u753b<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udc49 <strong>HTML \u7ba1\u7ed3\u6784\uff0cCSS \u7ba1\u6837\u5b50<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e8c\u3001CSS \u7684\u4e09\u79cd\u5f15\u5165\u65b9\u5f0f<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">1\ufe0f\u20e3 \u884c\u5185\u6837\u5f0f\uff08\u4e0d\u63a8\u8350\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;p style=&quot;color:red; font-size:16px;&quot;&gt;Hello&amp;lt;\/p&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">2\ufe0f\u20e3 \u5185\u90e8\u6837\u5f0f\uff08\u5c0f\u9879\u76ee\u53ef\u7528\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;style&gt;\n  p {\n    color: blue;\n  }\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">3\ufe0f\u20e3 \u5916\u90e8\u6837\u5f0f\uff08\u63a8\u8350 \u2705\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e09\u3001CSS \u57fa\u7840\u8bed\u6cd5<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u9009\u62e9\u5668 {\n  \u5c5e\u6027: \u503c;\n}\n\n<\/pre><\/div>\n\n\n<p>\u793a\u4f8b\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh1 {\n  color: red;\n  font-size: 24px;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u56db\u3001\u5e38\u89c1\u9009\u62e9\u5668\uff08\u5fc5\u5b66\uff09<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">1\ufe0f\u20e3 \u6807\u7b7e\u9009\u62e9\u5668<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np { color: black; }\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">2\ufe0f\u20e3 \u7c7b\u9009\u62e9\u5668 \u2b50\u2b50\u2b50<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.box { width: 100px; }\n\n<\/pre><\/div>\n\n\n<p>HTML\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;box&quot;&gt;&amp;lt;\/div&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">3\ufe0f\u20e3 ID \u9009\u62e9\u5668<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n#header { height: 60px; }\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">4\ufe0f\u20e3 \u7ec4\u5408\u9009\u62e9\u5668<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ndiv p { color: blue; }   \/* \u540e\u4ee3 *\/\ndiv &gt; p { color: red; } \/* \u5b50\u5143\u7d20 *\/\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e94\u3001CSS \u76d2\u6a21\u578b\uff08\u6838\u5fc3\uff09<\/h1>\n\n\n\n<p>\u6bcf\u4e2a\u5143\u7d20\u90fd\u7531 4 \u90e8\u5206\u7ec4\u6210\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  margin     \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\n\u2502 \u2502 border  \u2502 \u2502\n\u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\n\u2502 \u2502 \u2502padding\u2502\u2502\n\u2502 \u2502 \u2502content\u2502\u2502\n\u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\n\u2502 \u2514\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\u2518\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.box {\n  width: 200px;\n  padding: 10px;\n  border: 1px solid #000;\n  margin: 20px;\n}\n\n<\/pre><\/div>\n\n\n<p>\ud83d\udc49 \u63a8\u8350\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n* {\n  box-sizing: border-box;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u516d\u3001\u5e38\u7528\u6837\u5f0f\u5c5e\u6027<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b57\u4f53<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  font-size: 16px;\n  font-family: Arial;\n  font-weight: bold;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u6587\u672c<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh1 {\n  text-align: center;\n  color: #333;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u80cc\u666f<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbody {\n  background-color: #f5f5f5;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e03\u3001\u5e03\u5c40\uff08\u91cd\u70b9 \u2b50\u2b50\u2b50\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 Flex \u5e03\u5c40\uff08\u5fc5\u5b66\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n<\/pre><\/div>\n\n\n<p>\u5e38\u7528\u5c5e\u6027\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>justify-content<\/code>\uff08\u4e3b\u8f74\uff09<\/li>\n\n\n\n<li><code>align-items<\/code>\uff08\u4ea4\u53c9\u8f74\uff09<\/li>\n\n\n\n<li><code>flex-direction<\/code><\/li>\n\n\n\n<li><code>gap<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 Grid \u5e03\u5c40\uff08\u8fdb\u9636\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u516b\u3001\u5b9a\u4f4d position<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.box {\n  position: relative;\n}\n.child {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n\n<\/pre><\/div>\n\n\n<p>\u7c7b\u578b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>static\uff08\u9ed8\u8ba4\uff09<\/li>\n\n\n\n<li>relative<\/li>\n\n\n\n<li>absolute<\/li>\n\n\n\n<li>fixed<\/li>\n\n\n\n<li>sticky<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e5d\u3001\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u5a92\u4f53\u67e5\u8be2<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@media (max-width: 768px) {\n  body {\n    font-size: 14px;\n  }\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u5341\u3001\u52a8\u753b\u4e0e\u8fc7\u6e21<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u8fc7\u6e21<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbutton {\n  transition: all 0.3s;\n}\nbutton:hover {\n  background: red;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u52a8\u753b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@keyframes move {\n  from { left: 0; }\n  to { left: 100px; }\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u5341\u4e00\u3001CSS \u5b66\u4e60\u8def\u7ebf\uff08\u63a8\u8350\uff09<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CSS \u9009\u62e9\u5668<\/li>\n\n\n\n<li>\u76d2\u6a21\u578b<\/li>\n\n\n\n<li>Flex \u5e03\u5c40<\/li>\n\n\n\n<li>Grid \u5e03\u5c40<\/li>\n\n\n\n<li>\u5b9a\u4f4d<\/li>\n\n\n\n<li>\u54cd\u5e94\u5f0f<\/li>\n\n\n\n<li>\u52a8\u753b<\/li>\n\n\n\n<li>\u9884\u5904\u7406\u5668\uff08Sass\uff09<\/li>\n\n\n\n<li>\u6846\u67b6\uff08Tailwind \/ Bootstrap\uff09<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u5341\u4e8c\u3001\u5b9e\u6218\u5efa\u8bae<\/h1>\n\n\n\n<p>\u2705 \u591a\u5199<br>\u2705 \u591a\u8c03\u8bd5\uff08F12\uff09<br>\u2705 \u6a21\u4eff\u4f18\u79c0\u7f51\u7ad9\u5e03\u5c40<br>\u2705 \u5c11\u80cc\uff0c\u591a\u7406\u89e3<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u662f\u4e00\u5957\u4ece\u96f6\u5f00\u59cb\u3001\u5faa\u5e8f\u6e10\u8fdb\u7684 CSS \u6559\u7a0b\uff0c\u9002\u5408\u521d\u5b66\u8005\uff0c\u4e5f\u65b9\u4fbf\u4f60\u540e\u671f\u67e5\u9605\u901f\u5b66 &#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/28\/css%e6%95%99%e7%a8%8b\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1014","post","type-post","status-publish","format-standard","hentry","category-css"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=1014"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1014\/revisions"}],"predecessor-version":[{"id":1015,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1014\/revisions\/1015"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=1014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=1014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}