{"id":476181,"date":"2023-08-09T07:26:52","date_gmt":"2023-08-09T07:26:52","guid":{"rendered":""},"modified":"2023-09-05T11:12:11","modified_gmt":"2023-09-05T11:12:11","slug":"cascading-stylesheets-css","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/cn\/wiki\/cascading-stylesheets-css\/","title":{"rendered":"\u5c42\u53e0\u6837\u5f0f\u8868 (CSS)"},"content":{"rendered":"<p>\u5c42\u53e0\u6837\u5f0f\u8868\uff08\u901a\u5e38\u79f0\u4e3a CSS\uff09\u662f\u7f51\u9875\u5f00\u53d1\u4e2d\u7528\u4e8e\u63a7\u5236 HTML \u6587\u6863\u7684\u663e\u793a\u548c\u5e03\u5c40\u7684\u57fa\u672c\u6280\u672f\u3002\u5b83\u5728\u5b9a\u4e49\u7f51\u9875\u4e2d\u5143\u7d20\u7684\u663e\u793a\u65b9\u5f0f\u65b9\u9762\u8d77\u7740\u81f3\u5173\u91cd\u8981\u7684\u4f5c\u7528\uff0c\u4f7f\u7f51\u9875\u5f00\u53d1\u4eba\u5458\u80fd\u591f\u5c06\u7f51\u7ad9\u7684\u5185\u5bb9\u4e0e\u89c6\u89c9\u8bbe\u8ba1\u533a\u5206\u5f00\u6765\u3002\u901a\u8fc7\u63d0\u4f9b\u4e00\u79cd\u5c06\u6837\u5f0f\u5e94\u7528\u4e8e\u7f51\u9875\u7684\u6807\u51c6\u5316\u65b9\u5f0f\uff0cCSS \u6781\u5927\u5730\u4fc3\u8fdb\u4e86\u73b0\u4ee3\u7f51\u9875\u8bbe\u8ba1\u548c\u7528\u6237\u4f53\u9a8c\u7684\u53d1\u5c55\u3002<\/p>\n<h2>\u5c42\u53e0\u6837\u5f0f\u8868\uff08CSS\uff09\u7684\u8d77\u6e90\u5386\u53f2\u4ee5\u53ca\u5bf9\u5b83\u7684\u9996\u6b21\u63d0\u53ca\u3002<\/h2>\n<p>\u5c42\u53e0\u6837\u5f0f\u8868\u7684\u8d77\u6e90\u53ef\u4ee5\u8ffd\u6eaf\u5230\u4e07\u7ef4\u7f51\u7684\u65e9\u671f\u30021994 \u5e74\uff0c\u4e07\u7ef4\u7f51\u8054\u76df (W3C) \u6210\u5458 H\u00e5kon Wium Lie \u548c Bert Bos \u63d0\u51fa\u4e86\u4e00\u79cd\u540d\u4e3a CSS \u7684\u6837\u5f0f\u8868\u8bed\u8a00\u3002\u4ed6\u4eec\u7684\u76ee\u7684\u662f\u5f15\u5165\u4e00\u79cd\u72ec\u7acb\u4e8e\u5185\u5bb9\u548c\u7ed3\u6784\u6765\u63a7\u5236 Web \u6587\u6863\u5448\u73b0\u7684\u65b9\u6cd5\u3002<\/p>\n<p>1996 \u5e74\uff0cCSS 1 \u7ea7\uff08CSS1\uff09\u4f5c\u4e3a W3C \u5efa\u8bae\u7684\u4e00\u90e8\u5206\u53d1\u5e03\uff0cCSS \u9996\u6b21\u88ab\u6b63\u5f0f\u63d0\u53ca\u3002\u6b64\u540e\uff0cCSS \u7ecf\u5386\u4e86\u591a\u6b21\u4fee\u8ba2\uff0c1998 \u5e74\u53d1\u5e03\u4e86 CSS 2 \u7ea7\uff08CSS2\uff09\uff0c1999 \u5e74\u53d1\u5e03\u4e86 CSS 3 \u7ea7\uff08CSS3\uff09\uff0c\u4e4b\u540e\u53c8\u9646\u7eed\u6dfb\u52a0\u4e86\u6a21\u5757\u3002CSS \u7684\u5f00\u53d1\u4e00\u76f4\u81f4\u529b\u4e8e\u589e\u5f3a\u5176\u529f\u80fd\uff0c\u5e76\u4e3a Web \u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u66f4\u590d\u6742\u7684\u6837\u5f0f\u9009\u9879\u3002<\/p>\n<h2>\u6709\u5173\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u6269\u5c55\u4e3b\u9898\u5c42\u53e0\u6837\u5f0f\u8868 (CSS)\u3002<\/h2>\n<p>CSS \u9075\u5faa\u5c42\u53e0\u539f\u5219\uff0c\u5373\u53ef\u4ee5\u5c06\u591a\u4e2a\u6837\u5f0f\u8868\u5e94\u7528\u4e8e\u540c\u4e00\u4e2a HTML \u6587\u6863\uff0c\u5e76\u6839\u636e\u6837\u5f0f\u7684\u7279\u6b8a\u6027\u548c\u5e94\u7528\u987a\u5e8f\u8fdb\u884c\u7ec4\u5408\u3002\u8fd9\u5141\u8bb8\u91c7\u7528\u6a21\u5757\u5316\u4e14\u9ad8\u6548\u7684\u65b9\u6cd5\u6765\u8bbe\u7f6e\u7f51\u9875\u6837\u5f0f\u3002\u901a\u8fc7\u5c06\u8868\u793a\u5c42\u4e0e\u5185\u5bb9\u5206\u79bb\uff0cWeb \u5f00\u53d1\u4eba\u5458\u53ef\u4ee5\u8f7b\u677e\u66f4\u65b0\u548c\u4fee\u6539\u7f51\u7ad9\u7684\u5916\u89c2\uff0c\u800c\u65e0\u9700\u66f4\u6539\u5176\u5e95\u5c42\u7ed3\u6784\u3002<\/p>\n<p>CSS \u901a\u8fc7\u9009\u62e9\u5668\u5b9a\u4f4d\u7279\u5b9a\u7684 HTML \u5143\u7d20\u6216\u5143\u7d20\u7ec4\u6765\u5b9e\u73b0\u8fd9\u79cd\u5206\u79bb\u3002\u6bcf\u4e2a\u9009\u62e9\u5668\u90fd\u4e0e\u4e00\u7ec4\u5c5e\u6027\u548c\u503c\u76f8\u5173\u8054\uff0c\u8fd9\u4e9b\u5c5e\u6027\u548c\u503c\u51b3\u5b9a\u4e86\u5e94\u5982\u4f55\u8bbe\u7f6e\u76ee\u6807\u5143\u7d20\u7684\u6837\u5f0f\u3002\u8fd9\u4e9b\u5c5e\u6027\u63a7\u5236\u5404\u79cd\u65b9\u9762\uff0c\u4f8b\u5982\u989c\u8272\u3001\u5b57\u4f53\u3001\u8fb9\u8ddd\u3001\u586b\u5145\u3001\u5b9a\u4f4d\u548c\u52a8\u753b\u3002<\/p>\n<p>CSS \u7684\u4e00\u5927\u4f18\u52bf\u662f\u5b83\u80fd\u591f\u521b\u5efa\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u8ba9\u7f51\u9875\u80fd\u591f\u9002\u5e94\u5404\u79cd\u8bbe\u5907\u548c\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u5e76\u4ee5\u6700\u4f73\u65b9\u5f0f\u663e\u793a\u3002CSS3 \u4e2d\u5f15\u5165\u7684\u5a92\u4f53\u67e5\u8be2\u4f7f\u5f00\u53d1\u4eba\u5458\u80fd\u591f\u6839\u636e\u5c4f\u5e55\u5bbd\u5ea6\u3001\u9ad8\u5ea6\u548c\u5206\u8fa8\u7387\u7b49\u7279\u5f81\u5e94\u7528\u4e0d\u540c\u7684\u6837\u5f0f\uff0c\u4ece\u800c\u589e\u5f3a\u667a\u80fd\u624b\u673a\u3001\u5e73\u677f\u7535\u8111\u548c\u53f0\u5f0f\u673a\u4e0a\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<h2>\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u7684\u5185\u90e8\u7ed3\u6784\u3002\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u7684\u5de5\u4f5c\u539f\u7406\u3002<\/h2>\n<p>\u5728\u5185\u90e8\uff0cCSS \u7531\u5b9a\u4e49\u5982\u4f55\u8bbe\u7f6e HTML \u5143\u7d20\u6837\u5f0f\u7684\u89c4\u5219\u96c6\u7ec4\u6210\u3002\u89c4\u5219\u96c6\u7531\u4e24\u90e8\u5206\u7ec4\u6210\uff1a\u9009\u62e9\u5668\u548c\u58f0\u660e\u5757\u3002\u9009\u62e9\u5668\u6307\u793a\u5c06\u6837\u5f0f\u5e94\u7528\u4e8e\u54ea\u4e9b HTML \u5143\u7d20\uff0c\u58f0\u660e\u5757\u5305\u542b\u7528\u82b1\u62ec\u53f7\u62ec\u8d77\u6765\u7684\u5c5e\u6027\u503c\u5bf9\u5217\u8868\u3002<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>CSS<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>\u590d\u5236\u4ee3\u7801<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-css\" data-no-translation=\"\">selector {\n  property1: value1;\n  property2: value2;\n  ...\n  propertyN: valueN;\n}\n<\/code><\/div><\/div><\/pre>\n<p>\u7f51\u9875\u52a0\u8f7d\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u89e3\u6790 CSS \u89c4\u5219\u5e76\u5c06\u6307\u5b9a\u7684\u6837\u5f0f\u5e94\u7528\u4e8e\u76f8\u5e94\u7684 HTML \u5143\u7d20\u3002\u5982\u679c\u591a\u6761\u89c4\u5219\u9488\u5bf9\u540c\u4e00\u5143\u7d20\uff0c\u6d4f\u89c8\u5668\u5c06\u9075\u5faa\u7ea7\u8054\u539f\u5219\uff0c\u901a\u8fc7\u8003\u8651\u7279\u5f02\u6027\u3001\u7ee7\u627f\u6027\u548c\u5e94\u7528\u987a\u5e8f\u6765\u786e\u5b9a\u6700\u7ec8\u7684\u6837\u5f0f\u3002<\/p>\n<h2>\u5206\u6790\u5c42\u53e0\u6837\u5f0f\u8868\uff08CSS\uff09\u7684\u4e3b\u8981\u7279\u6027\u3002<\/h2>\n<p>CSS \u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u57fa\u672c\u529f\u80fd\uff0c\u4f7f\u5176\u6210\u4e3a\u5f3a\u5927\u7684 Web \u5f00\u53d1\u5de5\u5177\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u7ea7\u8054\u6027\u8d28\uff1a<\/strong> CSS \u89c4\u5219\u53ef\u4ee5\u7ec4\u5408\u3001\u8986\u76d6\u548c\u7ee7\u627f\uff0c\u4e3a\u7f51\u9875\u8bbe\u8ba1\u63d0\u4f9b\u7075\u6d3b\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6a21\u5757\u5316\uff1a<\/strong> \u901a\u8fc7\u5c06\u6837\u5f0f\u4e0e\u5185\u5bb9\u5206\u79bb\uff0cCSS \u4fc3\u8fdb\u4e86 Web \u5f00\u53d1\u7684\u6a21\u5757\u5316\u65b9\u6cd5\uff0c\u4f7f\u5f97\u7ba1\u7406\u548c\u66f4\u65b0\u6837\u5f0f\u53d8\u5f97\u66f4\u52a0\u5bb9\u6613\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff1a<\/strong> \u5a92\u4f53\u67e5\u8be2\u652f\u6301\u54cd\u5e94\u5f0f\u7f51\u9875\u8bbe\u8ba1\uff0c\u8ba9\u7f51\u7ad9\u80fd\u591f\u9002\u5e94\u4e0d\u540c\u7684\u5c4f\u5e55\u5c3a\u5bf8\u548c\u8bbe\u5907\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\uff1a<\/strong> CSS \u6709\u52a9\u4e8e\u786e\u4fdd\u5728\u5404\u79cd\u7f51\u7edc\u6d4f\u89c8\u5668\u4e0a\u7684\u4e00\u81f4\u5448\u73b0\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u52a8\u753b\u548c\u8fc7\u6e21\uff1a<\/strong> CSS3 \u5f15\u5165\u4e86\u52a8\u753b\u548c\u8fc7\u6e21\u5c5e\u6027\uff0c\u4f7f\u5f00\u53d1\u4eba\u5458\u80fd\u591f\u521b\u5efa\u6d41\u7545\u4e14\u4ea4\u4e92\u5f0f\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u5f39\u6027\u6846\u548c\u7f51\u683c\u5e03\u5c40\uff1a<\/strong> CSS \u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u5e03\u5c40\u7cfb\u7edf\uff0c\u5982 Flexbox \u548c Grid\uff0c\u5141\u8bb8\u5f00\u53d1\u4eba\u5458\u521b\u5efa\u590d\u6742\u800c\u7075\u6d3b\u7684\u9875\u9762\u5e03\u5c40\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u9009\u62e9\u5668\uff1a<\/strong> CSS \u63d0\u4f9b\u4e86\u5404\u79cd\u5404\u6837\u7684\u9009\u62e9\u5668\uff0c\u5305\u62ec\u7c7b\u3001ID\u3001\u5143\u7d20\u3001\u5c5e\u6027\u548c\u4f2a\u7c7b\u9009\u62e9\u5668\uff0c\u53ef\u4ee5\u7cbe\u786e\u5730\u5b9a\u4f4d\u5143\u7d20\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u53d8\u91cf\uff1a<\/strong> CSS \u81ea\u5b9a\u4e49\u5c5e\u6027\uff08\u53d8\u91cf\uff09\u5141\u8bb8\u66f4\u591a\u52a8\u6001\u548c\u53ef\u91cd\u590d\u4f7f\u7528\u7684\u6837\u5f0f\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u5199\u51fa\u6709\u54ea\u4e9b\u7c7b\u578b\u7684\u5c42\u53e0\u6837\u5f0f\u8868 (CSS)\u3002\u4f7f\u7528\u8868\u683c\u548c\u5217\u8868\u6765\u5199\u3002<\/h2>\n<p>CSS \u968f\u7740\u65f6\u95f4\u7684\u63a8\u79fb\u4e0d\u65ad\u53d1\u5c55\uff0c\u5e76\u5f15\u5165\u4e86\u5404\u79cd CSS \u89c4\u8303\u548c\u6a21\u5757\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u91cd\u8981\u7684 CSS \u7c7b\u578b\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>CSS \u7c7b\u578b<\/th>\n<th>\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>CSS1<\/td>\n<td>CSS \u7684\u7b2c\u4e00\u4e2a\u7248\u672c\uff0c\u4ecb\u7ecd\u4e86\u57fa\u672c\u6837\u5f0f\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS2<\/td>\n<td>\u901a\u8fc7\u65b0\u7279\u6027\u548c\u6539\u8fdb\u7684\u652f\u6301\u6765\u6269\u5c55 CSS1\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS3<\/td>\n<td>\u540e\u7eed\u7248\u672c\u5177\u6709\u5404\u79cd\u6a21\u5757\u548c\u589e\u5f3a\u529f\u80fd\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u7f51\u683c<\/td>\n<td>\u5f3a\u5927\u7684\u4e8c\u7ef4\u7f51\u683c\u5e03\u5c40\u7cfb\u7edf\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u5f39\u6027\u6846<\/td>\n<td>\u67d4\u6027\u5bb9\u5668\u7684\u4e00\u7ef4\u5e03\u5c40\u6a21\u578b\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u8fc7\u6e21<\/td>\n<td>\u72b6\u6001\u6539\u53d8\u671f\u95f4\u53d1\u751f\u7684\u52a8\u753b\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u52a8\u753b<\/td>\n<td>\u57fa\u4e8e\u5173\u952e\u5e27\u7684\u52a8\u753b\u53ef\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u6548\u679c\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u53d8\u91cf<\/td>\n<td>\u53ef\u91cd\u590d\u4f7f\u7528\u548c\u52a8\u6001\u6837\u5f0f\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027\u3002<\/td>\n<\/tr>\n<tr>\n<td>CSS \u5a92\u4f53\u67e5\u8be2<\/td>\n<td>\u6839\u636e\u8bbe\u5907\u7279\u6027\u7684\u6761\u4ef6\u6837\u5f0f\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u5c42\u53e0\u6837\u5f0f\u8868\uff08CSS\uff09\u7684\u4f7f\u7528\u65b9\u6cd5\uff0c\u4f7f\u7528\u4e2d\u9047\u5230\u7684\u95ee\u9898\u53ca\u89e3\u51b3\u65b9\u6cd5\u3002<\/h2>\n<p>CSS \u662f Web \u5f00\u53d1\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\uff0c\u6709\u591a\u79cd\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u5916\u90e8 CSS\uff1a<\/strong> \u63a8\u8350\u7684\u65b9\u6cd5\u662f\u521b\u5efa\u4e00\u4e2a\u5355\u72ec\u7684 CSS \u6587\u4ef6\uff0c\u5e76\u4f7f\u7528 <code data-no-translation=\"\">&lt;link&gt;<\/code> \u5143\u7d20\u3002\u8fd9\u4fc3\u8fdb\u4e86\u6a21\u5757\u5316\u548c\u53ef\u91cd\u7528\u6027\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u5185\u90e8 CSS\uff1a<\/strong> \u60a8\u53ef\u4ee5\u4f7f\u7528 <code data-no-translation=\"\">&lt;style&gt;<\/code> \u5143\u7d20\u5185\u7684 <code data-no-translation=\"\">&lt;head&gt;<\/code> \u90e8\u5206\u3002\u867d\u7136\u8fd9\u79cd\u65b9\u6cd5\u5bf9\u4e8e\u5c0f\u89c4\u6a21\u7684\u6837\u5f0f\u8bbe\u8ba1\u6765\u8bf4\u5f88\u65b9\u4fbf\uff0c\u4f46\u5bf9\u4e8e\u8f83\u5927\u7684\u9879\u76ee\u6765\u8bf4\uff0c\u5b83\u53ef\u80fd\u4e0d\u592a\u5bb9\u6613\u7ef4\u62a4\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u5185\u8054 CSS\uff1a<\/strong> \u4f7f\u7528 <code data-no-translation=\"\">style<\/code> \u5c5e\u6027\u662f\u53ef\u884c\u7684\uff0c\u4f46\u7531\u4e8e\u5176\u53ef\u7ef4\u62a4\u6027\u4f4e\u4e14\u53ef\u91cd\u7528\u6027\u964d\u4f4e\u800c\u4e0d\u9f13\u52b1\u4f7f\u7528\u3002<\/p>\n<\/li>\n<li>\n<p><strong>CSS \u9884\u5904\u7406\u5668\uff1a<\/strong> \u5f00\u53d1\u4eba\u5458\u7ecf\u5e38\u4f7f\u7528 Sass\u3001Less \u6216 Stylus \u7b49 CSS \u9884\u5904\u7406\u5668\u6765\u6dfb\u52a0\u53d8\u91cf\u3001\u5d4c\u5957\u548c\u51fd\u6570\u7b49\u9ad8\u7ea7\u529f\u80fd\uff0c\u589e\u5f3a\u6837\u5f0f\u8868\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u7ec4\u7ec7\u6027\u3002<\/p>\n<\/li>\n<li>\n<p><strong>CSS \u6846\u67b6\uff1a<\/strong> \u5229\u7528 Bootstrap \u6216 Foundation \u7b49 CSS \u6846\u67b6\u53ef\u4ee5\u63d0\u4f9b\u9884\u5148\u8bbe\u8ba1\u7684\u7ec4\u4ef6\u548c\u6837\u5f0f\u6765\u52a0\u901f\u5f00\u53d1\u3002<\/p>\n<\/li>\n<\/ol>\n<p>\u4f7f\u7528CSS\u65f6\u53ef\u80fd\u51fa\u73b0\u7684\u95ee\u9898\u5305\u62ec\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u7279\u5f02\u6027\u51b2\u7a81\uff1a<\/strong> \u5f53\u591a\u4e2a CSS \u89c4\u5219\u4ee5\u4e0d\u540c\u7684\u7279\u5f02\u6027\u9488\u5bf9\u540c\u4e00\u5143\u7d20\u65f6\uff0c\u53ef\u80fd\u4f1a\u53d1\u751f\u51b2\u7a81\uff0c\u5e76\u4e14\u53ef\u80fd\u65e0\u6cd5\u5e94\u7528\u9884\u671f\u7684\u6837\u5f0f\u3002\u6b63\u786e\u7ba1\u7406\u9009\u62e9\u5668\u548c\u4f7f\u7528\u7c7b\u53ef\u4ee5\u5e2e\u52a9\u907f\u514d\u6b64\u7c7b\u95ee\u9898\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\uff1a<\/strong> \u4e0d\u540c\u7684 Web \u6d4f\u89c8\u5668\u53ef\u80fd\u4f1a\u4ee5\u4e0d\u540c\u7684\u65b9\u5f0f\u89e3\u91ca CSS \u89c4\u5219\uff0c\u4ece\u800c\u5bfc\u81f4\u6e32\u67d3\u4e0d\u4e00\u81f4\u3002\u6d4b\u8bd5\u548c\u4f7f\u7528\u4f9b\u5e94\u5546\u524d\u7f00\u53ef\u4ee5\u5e2e\u52a9\u7f13\u89e3\u6b64\u95ee\u9898\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6027\u80fd\u5f71\u54cd\uff1a<\/strong> \u5927\u578b\u4e14\u590d\u6742\u7684 CSS \u6587\u4ef6\u4f1a\u51cf\u6162\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u3002\u6700\u5c0f\u5316\u548c\u538b\u7f29 CSS \u6587\u4ef6\u53ef\u4ee5\u63d0\u9ad8\u6027\u80fd\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u6311\u6218\uff1a<\/strong> \u521b\u5efa\u9002\u7528\u4e8e\u6240\u6709\u8bbe\u5907\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\u9700\u8981\u4ed4\u7ec6\u7684\u89c4\u5212\u548c\u6d4b\u8bd5\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u4ee5\u8868\u683c\u548c\u5217\u8868\u7684\u5f62\u5f0f\u5217\u51fa\u4e3b\u8981\u7279\u5f81\u4ee5\u53ca\u4e0e\u7c7b\u4f3c\u672f\u8bed\u7684\u5176\u4ed6\u6bd4\u8f83\u3002<\/h2>\n<table>\n<thead>\n<tr>\n<th>CSS \u4e0e HTML<\/th>\n<th>CSS\uff08\u5c42\u53e0\u6837\u5f0f\u8868\uff09<\/th>\n<th>HTML\uff08\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff09<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u76ee\u7684<\/td>\n<td>\u63a7\u5236\u7f51\u9875\u7684\u663e\u793a\u548c\u5e03\u5c40\u3002<\/td>\n<td>\u5b9a\u4e49\u7f51\u9875\u7684\u7ed3\u6784\u548c\u5185\u5bb9\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u7528\u6cd5<\/td>\n<td>\u7528\u4e8e\u8bbe\u7f6e HTML \u5143\u7d20\u7684\u6837\u5f0f\u5e76\u63a7\u5236\u89c6\u89c9\u65b9\u9762\u3002<\/td>\n<td>\u7528\u4e8e\u521b\u5efa\u7f51\u9875\u7684\u7ed3\u6784\u548c\u5185\u5bb9\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u53e5\u6cd5<\/td>\n<td>\u7531\u9009\u62e9\u5668\u548c\u5c5e\u6027\u503c\u5bf9\u7ec4\u6210\u3002<\/td>\n<td>\u7531\u5e26\u6709\u5c5e\u6027\u7684\u6807\u7b7e\u548c\u5143\u7d20\u7ec4\u6210\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u6587\u4ef6\u6269\u5c55\u540d<\/td>\n<td>.css<\/td>\n<td>.html<\/td>\n<\/tr>\n<tr>\n<td>\u4f7f\u7528\u793a\u4f8b<\/td>\n<td>\u66f4\u6539\u5b57\u4f53\u989c\u8272\u3001\u8bbe\u7f6e\u8fb9\u8ddd\u3001\u5e94\u7528\u52a8\u753b\u3002<\/td>\n<td>\u5b9a\u4e49\u6807\u9898\u3001\u6bb5\u843d\u3001\u56fe\u50cf\u3001\u94fe\u63a5\u7b49\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u4e0e\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u76f8\u5173\u7684\u672a\u6765\u89c2\u70b9\u548c\u6280\u672f\u3002<\/h2>\n<p>CSS \u7684\u672a\u6765\u5f88\u53ef\u80fd\u4e13\u6ce8\u4e8e\u8fdb\u4e00\u6b65\u589e\u5f3a\u7f51\u9875\u8bbe\u8ba1\u548c\u7528\u6237\u4f53\u9a8c\u7684\u80fd\u529b\u3002\u4e00\u4e9b\u6f5c\u5728\u7684\u53d1\u5c55\u548c\u6280\u672f\u5305\u62ec\uff1a<\/p>\n<ol>\n<li>\n<p><strong>CSS4 \u53ca\u540e\u7eed\u7248\u672c\uff1a<\/strong> CSS \u89c4\u8303\u5c06\u4e0d\u65ad\u53d1\u5c55\uff0c\u5f15\u5165\u65b0\u7684\u6a21\u5757\u548c\u529f\u80fd\u4ee5\u6ee1\u8db3\u4e0d\u65ad\u53d8\u5316\u7684 Web \u5f00\u53d1\u9700\u6c42\u3002<\/p>\n<\/li>\n<li>\n<p><strong>JS \u4e2d\u7684 CSS\uff1a<\/strong> \u91c7\u7528 CSS-in-JS \u65b9\u6cd5\uff08\u5373\u76f4\u63a5\u7528 JavaScript \u7f16\u5199 CSS\uff09\u8d8a\u6765\u8d8a\u53d7\u6b22\u8fce\u3002\u8fd9\u79cd\u65b9\u6cd5\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u6a21\u5757\u5316\u3001\u5c01\u88c5\u548c\u6027\u80fd\u4f18\u5316\u3002<\/p>\n<\/li>\n<li>\n<p><strong>Web \u7ec4\u4ef6\uff1a<\/strong> Web \u7ec4\u4ef6\uff08\u53ef\u91cd\u590d\u4f7f\u7528\u4e14\u5c01\u88c5\u7684 UI \u5143\u7d20\uff09\u7684\u96c6\u6210\u5c06\u5f71\u54cd CSS \u67b6\u6784\uff0c\u4fc3\u8fdb\u66f4\u6709\u6761\u7406\u3001\u66f4\u6613\u4e8e\u7ef4\u62a4\u7684\u6837\u5f0f\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u80e1\u8fea\u5c3c\uff1a<\/strong> Houdini \u9879\u76ee\u65e8\u5728\u5411\u5f00\u53d1\u4eba\u5458\u516c\u5f00\u8f83\u4f4e\u7ea7\u522b\u7684 API\uff0c\u5141\u8bb8\u4ed6\u4eec\u521b\u5efa\u81ea\u5df1\u7684 CSS \u529f\u80fd\u5e76\u6269\u5c55 CSS \u7684\u53ef\u80fd\u6027\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u6697\u6a21\u5f0f\u548c\u4e3b\u9898\uff1a<\/strong> CSS \u53ef\u80fd\u4f1a\u5728\u652f\u6301\u7cfb\u7edf\u7ea7\u6697\u6a21\u5f0f\u548c\u66f4\u9ad8\u7ea7\u7684\u4e3b\u9898\u9009\u9879\u65b9\u9762\u53d6\u5f97\u8fdb\u6b65\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u5982\u4f55\u4f7f\u7528\u4ee3\u7406\u670d\u52a1\u5668\u6216\u5c06\u5176\u4e0e\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u5173\u8054\u3002<\/h2>\n<p>\u4ee3\u7406\u670d\u52a1\u5668\u548c CSS \u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5173\u8054\uff0c\u4ee5\u589e\u5f3a Web \u6027\u80fd\u3001\u9690\u79c1\u548c\u5b89\u5168\u6027\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u573a\u666f\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u7f13\u5b58\u548c\u6027\u80fd\uff1a<\/strong> \u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u7f13\u5b58 CSS \u6587\u4ef6\uff0c\u51cf\u5c11\u6e90\u670d\u52a1\u5668\u7684\u8d1f\u8f7d\u5e76\u52a0\u5feb\u7528\u6237\u540e\u7eed\u9875\u9762\u7684\u52a0\u8f7d\u901f\u5ea6\u3002<\/p>\n<\/li>\n<li>\n<p><strong>CSS \u538b\u7f29\uff1a<\/strong> \u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u6267\u884c\u5b9e\u65f6 CSS \u7f29\u5c0f\uff0c\u4ece\u800c\u51cf\u5c11\u6587\u4ef6\u5927\u5c0f\u5e76\u4f18\u5316\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u5185\u5bb9\u4ea4\u4ed8\uff1a<\/strong> \u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u4ece\u5730\u7406\u5206\u5e03\u7684\u4f4d\u7f6e\u63d0\u4f9b CSS \u6587\u4ef6\uff0c\u4ece\u800c\u7f29\u77ed\u5168\u7403\u7528\u6237\u7684\u52a0\u8f7d\u65f6\u95f4\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u5b89\u5168\uff1a<\/strong> \u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u5145\u5f53\u989d\u5916\u7684\u5b89\u5168\u5c42\uff0c\u8fc7\u6ee4\u548c\u963b\u6b62\u6076\u610f CSS \u4ee3\u7801\u6216\u9632\u6b62\u67d0\u4e9b\u57fa\u4e8e CSS \u7684\u653b\u51fb\uff0c\u5982\u8de8\u7ad9\u70b9\u811a\u672c (XSS)\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u9690\u79c1\uff1a<\/strong> \u4ee3\u7406\u670d\u52a1\u5668\u53ef\u4ee5\u9690\u85cf\u7528\u6237\u7684 IP \u5730\u5740\uff0c\u5728\u6d4f\u89c8\u7f51\u9875\u65f6\u63d0\u4f9b\u4e00\u5b9a\u7a0b\u5ea6\u7684\u533f\u540d\u6027\uff0c\u8fd9\u5728\u4e92\u8054\u7f51\u76d1\u7ba1\u4e25\u683c\u7684\u56fd\u5bb6\u6216\u5e0c\u671b\u4fdd\u62a4\u81ea\u5df1\u8eab\u4efd\u7684\u7528\u6237\u4e2d\u975e\u5e38\u6709\u7528\u3002<\/p>\n<\/li>\n<\/ol>\n<h2>\u76f8\u5173\u94fe\u63a5<\/h2>\n<p>\u6709\u5173\u5c42\u53e0\u6837\u5f0f\u8868 (CSS) \u7684\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u8003\u8651\u63a2\u7d22\u4ee5\u4e0b\u8d44\u6e90\uff1a<\/p>\n<ol>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_new\" rel=\"noopener nofollow\">MDN Web \u6587\u6863 \u2013 CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_new\" rel=\"noopener nofollow\">W3Schools \u2013 CSS \u6559\u7a0b<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/\" target=\"_new\" rel=\"noopener nofollow\">CSS \u6280\u5de7<\/a><\/li>\n<li><a href=\"https:\/\/css-weekly.com\/\" target=\"_new\" rel=\"noopener nofollow\">CSS \u5468\u520a<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/category\/css\/\" target=\"_new\" rel=\"noopener nofollow\">Smashing Magazine \u2013 CSS<\/a><\/li>\n<\/ol>\n<p>\u968f\u7740\u4f60\u5bf9\u5c42\u53e0\u6837\u5f0f\u8868\u7684\u6df1\u5165\u4e86\u89e3\uff0c\u4f60\u4f1a\u53d1\u73b0\u5b83\u4eec\u4e3a\u521b\u9020\u7f8e\u89c2\u3001\u54cd\u5e94\u8fc5\u901f\u4e14\u5f15\u4eba\u5165\u80dc\u7684 Web \u4f53\u9a8c\u63d0\u4f9b\u4e86\u5927\u91cf\u7684\u53ef\u80fd\u6027\u3002\u65e0\u8bba\u4f60\u662f\u521d\u5b66\u8005\u8fd8\u662f\u7ecf\u9a8c\u4e30\u5bcc\u7684\u5f00\u53d1\u4eba\u5458\uff0c\u638c\u63e1 CSS \u65e0\u7591\u4f1a\u589e\u5f3a\u4f60\u5236\u4f5c\u51fa\u7ed9\u7528\u6237\u7559\u4e0b\u6df1\u523b\u5370\u8c61\u7684\u7cbe\u5f69\u7f51\u7ad9\u7684\u80fd\u529b\u3002<\/p>","protected":false},"featured_media":467830,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476181","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Cascading Stylesheets (CSS)<\/mark>","faq_items":[{"question":"What is Cascading Stylesheets (CSS)?","answer":"<p>Cascading Style Sheets (CSS) is a crucial technology used in web development to control the visual appearance and layout of HTML documents. It allows web developers to separate the content of a website from its design, enabling easy and efficient updates to the site's appearance.<\/p>"},{"question":"How did CSS originate, and when was it first introduced?","answer":"<p>CSS was first proposed by H\u00e5kon Wium Lie and Bert Bos, members of the World Wide Web Consortium (W3C), in 1994. The first official mention of CSS came with the release of CSS level 1 (CSS1) in 1996 as part of the W3C's recommendations.<\/p>"},{"question":"What does CSS do and how does it work?","answer":"<p>CSS operates on the principle of cascading, allowing multiple style sheets to be applied to the same HTML document. The styles are combined based on their specificity and order of application. CSS uses selectors to target HTML elements and applies styles through property-value pairs within a declaration block.<\/p>"},{"question":"What are the key features of CSS?","answer":"<p>CSS offers a range of essential features, including cascading nature, modularity, responsive design, cross-browser compatibility, animations, and layout systems like Flexbox and Grid.<\/p>"},{"question":"What types of CSS exist?","answer":"<p>Various types of CSS include CSS1, CSS2, CSS3, CSS Grid, CSS Flexbox, CSS Transitions, CSS Animations, CSS Variables, and CSS Media Queries.<\/p>"},{"question":"How can CSS be used, and what problems may arise?","answer":"<p>CSS can be used externally through a separate file or internally within the <code>&lt;style&gt;<\/code> element of an HTML document. Problems may arise with specificity conflicts, browser compatibility, performance impact, and challenges in responsive design.<\/p>"},{"question":"What are the future perspectives of CSS?","answer":"<p>The future of CSS may involve CSS4 and beyond, CSS-in-JS approaches, web components, Houdini project, dark mode, and theming support.<\/p>"},{"question":"How can proxy servers be associated with CSS?","answer":"<p>Proxy servers can enhance CSS performance through caching, minification, content delivery, security, and privacy features.<\/p>"},{"question":"Where can I find more information about CSS?","answer":"<p>For more in-depth knowledge about CSS, you can explore resources like MDN Web Docs, W3Schools, CSS Tricks, CSS Weekly, and Smashing Magazine's CSS section. Additionally, OneProxy provides expert guidance on web development and CSS usage.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki\/476181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/wiki\/476181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/media\/467830"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/cn\/wp-json\/wp\/v2\/media?parent=476181"}],"curies":[{"name":"\u53ef\u6e7f\u6027\u7c89\u5242","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}