\n
\u672c\u9636\u6bb5\u6838\u5fc3\u76ee\u6807：\u638c\u63e1CSS\u7684\u6838\u5fc3\u8fd0\u884c\u903b\u8f91\u3001\u57fa\u7840\u8bed\u6cd5\u30013\u79cd\u5f15\u5165\u65b9\u5f0f，\u80fd\u8ba9CSS\u6210\u529f\u4f5c\u7528\u4e8eHTML\u5143\u7d20，\u72ec\u7acb\u5199\u51fa\u7b2c\u4e00\u4e2a\u53ef\u8fd0\u884c\u7684CSS\u6837\u5f0f，\u7406\u89e3\u201c\u5c42\u53e0\u6837\u5f0f\u8868\u201d\u7684\u6d45\u5c42\u542b\u4e49，\u4e3a\u540e\u7eed\u9009\u62e9\u5668\u3001\u5e03\u5c40\u5b66\u4e60\u6253\u7262\u6700\u5e95\u5c42\u57fa\u7840\u3002<\/p>\n
\n
\u5b66\u4e60\u6838\u5fc3\u65b9\u6cd5：\u6bcf\u5b66\u4e00\u4e2a\u77e5\u8bc6\u70b9，\u7acb\u523b\u624b\u51993-5\u4e2a\u5c0f\u6848\u4f8b（\u6bd4\u5982\u5b66\u4e86\u6587\u5b57\u6837\u5f0f，\u5c31\u5199\u4e00\u4e2a\u6807\u9898+\u6bb5\u843d\u7684\u6837\u5f0f；\u5b66\u4e86\u9009\u62e9\u5668，\u5c31\u7528\u4e0d\u540c\u9009\u62e9\u5668\u7ed9\u540c\u4e00\u4e2a\u5143\u7d20\u52a0\u6837\u5f0f），\u62d2\u7edd\u201c\u773c\u4f1a\u624b\u4e0d\u4f1a\u201d\u3002<\/p>\n
\n
\u5b66\u5b8c\u4e4b\u540e\u638c\u63e1：CSS\u7684\u57fa\u672c\u8bed\u6cd5\u3001\u5f15\u5165\u65b9\u5f0f\u3001\u6ce8\u91ca，\u77e5\u9053CSS\u5982\u4f55\u4f5c\u7528\u4e8eHTML，\u80fd\u5199\u7b80\u5355\u7684\u6837\u5f0f\u3002<\/p>\n
\n
\u00a0 \u00a0 \u00a03. CSS\u6ce8\u91ca：\/* \u6ce8\u91ca\u5185\u5bb9 *\/<\/span>，\u5b66\u4f1a\u7ed9\u4ee3\u7801\u52a0\u6ce8\u91ca，\u63d0\u5347\u53ef\u8bfb\u6027；<\/p>\n \u00a0 \u00a0 \u00a04. \u7b2c\u4e00\u4e2a\u5b9e\u6218：\u7ed9HTML\u9875\u9762\u7684\u6807\u9898\u3001\u6bb5\u843d\u3001\u94fe\u63a5\u6dfb\u52a0\u7b80\u5355\u6837\u5f0f（\u6587\u5b57\u989c\u8272\u3001\u5927\u5c0f\u3001\u5bf9\u9f50）\u3002<\/p>\n \n \u6574\u4f53\u5b66\u4e60\u8282\u594f：\u6309\u300c\u77e5\u8bc6\u70b9\u8bb2\u89e3+\u5373\u65f6\u5b9e\u64cd+\u8bfe\u540e\u5c0f\u7ec3\u4e60\u300d\u63a8\u8fdb，\u6bcf\u4e2a\u77e5\u8bc6\u70b9\u914d\u59571-2\u4e2a\u5c0f\u5b9e\u64cd，\u5168\u7a0b\u624b\u5199\u4ee3\u7801，\u62d2\u7edd\u53ea\u770b\u4e0d\u52a8\u624b，\u5355\u77e5\u8bc6\u70b9\u8017\u65f6\u63a7\u5236\u572810-20\u5206\u949f，\u6bcf\u5929\u5b66\u4e60\u7ed3\u675f\u5b8c\u62101\u4e2a\u7efc\u5408\u5c0f\u6848\u4f8b\u3002<\/p>\n \u8bfe\u7a0b\u524d\u7f6e\u8bf4\u660e<\/p>\n \u7b2c1\u5929：CSS\u6838\u5fc3\u8ba4\u77e5 + \u57fa\u7840\u8bed\u6cd5 + 2\u79cd\u6838\u5fc3\u5f15\u5165\u65b9\u5f0f<\/p>\n \u6a21\u57571：CSS\u662f\u4ec0\u4e48？\u6838\u5fc3\u4f5c\u7528&\u8bbe\u8ba1\u7406\u5ff5（10\u5206\u949f，\u7406\u89e3\u4e3a\u4e3b）<\/p>\n 1.1 \u5b98\u65b9\u5b9a\u4e49<\/p>\n CSS（Cascading Style Sheets，\u5c42\u53e0\u6837\u5f0f\u8868）\u662f\u4e00\u79cd\u7528\u6765\u63cf\u8ff0HTML\u6587\u6863\u6837\u5f0f\u7684\u6807\u8bb0\u8bed\u8a00，\u5e76\u975e\u7f16\u7a0b\u8bed\u8a00，\u65e0\u903b\u8f91\u5224\u65ad\u3001\u5faa\u73af\u7b49\u529f\u80fd，\u4ec5\u8d1f\u8d23\u201c\u6837\u5f0f\u8bbe\u7f6e\u201d\u3002<\/p>\n 1.2 \u6838\u5fc3\u4f5c\u7528（3\u4e2a\u6838\u5fc3，\u8bb0\u6b7b）<\/p>\n 1.3 \u4e3a\u4ec0\u4e48\u8981\u5b66CSS？<\/p>\n \u6ca1\u6709CSS\u7684HTML\u9875\u9762\u662f\u201c\u7eaf\u6587\u5b57\u9aa8\u67b6\u201d，\u6742\u4e71\u65e0\u7ae0；\u6709CSS\u7684HTML\u9875\u9762\u80fd\u5b9e\u73b0\u89c6\u89c9\u7f8e\u5316\u3001\u5408\u7406\u5e03\u5c40，\u8fbe\u5230\u65e5\u5e38\u6d4f\u89c8\u7684\u7f51\u9875\u6548\u679c（\u6bd4\u5982\u767e\u5ea6\u3001\u6dd8\u5b9d\u7684\u89c6\u89c9\u6837\u5f0f）\u3002<\/p>\n \u5373\u65f6\u601d\u8003<\/p>\n \u89c2\u5bdf\u8eab\u8fb9\u7684\u7f51\u9875（\u6bd4\u5982\u6398\u91d1），\u533a\u5206\u201c\u54ea\u4e9b\u662fHTML\u7ed3\u6784\u201d（\u6807\u9898\u3001\u6587\u7ae0\u5217\u8868\u3001\u6309\u94ae），\u201c\u54ea\u4e9b\u662fCSS\u6837\u5f0f\u201d（\u6587\u5b57\u989c\u8272\u3001\u6309\u94ae\u5927\u5c0f\u3001\u5e03\u5c40\u6392\u5217）\u3002<\/p>\n \u6a21\u57572：CSS \u57fa\u672c\u8bed\u6cd5（20\u5206\u949f，\u91cd\u70b9\u8bb0\u5fc6+\u5b9e\u64cd，CSS\u7684\u201c\u9020\u53e5\u89c4\u5219\u201d）<\/p>\n 2.1 \u6838\u5fc3\u8bed\u6cd5\u7ed3\u6784（\u552f\u4e00\u89c4\u5219，\u5fc5\u987b\u8bb0\u6b7b，CSS\u6240\u6709\u4ee3\u7801\u90fd\u9075\u5faa\u6b64\u89c4\u5219）<\/p>\n \u9009\u62e9\u5668 + \u58f0\u660e\u5757，\u6574\u4f53\u7ed3\u6784\u5982\u4e0b：<\/p>\n CSS<\/span> 2.2 \u8bed\u6cd5\u4e09\u8981\u7d20\u8be6\u89e3（\u7ed3\u5408\u5b9e\u64cd\u7406\u89e3，\u65e0\u62bd\u8c61\u6982\u5ff5）<\/p>\n \u8981\u7d20<\/p>\n<\/td>\n \u4f5c\u7528<\/p>\n<\/td>\n \u793a\u4f8b<\/p>\n<\/td>\n \u6ce8\u610f\u4e8b\u9879<\/p>\n<\/td>\n<\/tr>\n \u9009\u62e9\u5668<\/p>\n<\/td>\n \u5339\u914d\u8981\u8bbe\u7f6e\u6837\u5f0f\u7684HTML\u5143\u7d20<\/p>\n<\/td>\n div\u3001.test\u3001#box<\/p>\n<\/td>\n \u5fc5\u987b\u6b63\u786e\u5339\u914d，\u5426\u5219\u6837\u5f0f\u4e0d\u751f\u6548<\/p>\n<\/td>\n<\/tr>\n \u5c5e\u6027<\/p>\n<\/td>\n \u8981\u8bbe\u7f6e\u7684\u6837\u5f0f\u7c7b\u578b<\/p>\n<\/td>\n color（\u989c\u8272）\u3001font-size（\u5b57\u53f7）<\/p>\n<\/td>\n \u4e3aCSS\u9884\u5b9a\u4e49\u5173\u952e\u5b57，\u4e0d\u80fd\u81ea\u5b9a\u4e49<\/p>\n<\/td>\n<\/tr>\n \u503c<\/p>\n<\/td>\n \u6837\u5f0f\u7684\u5177\u4f53\u8bbe\u7f6e<\/p>\n<\/td>\n red（\u7ea2\u8272）\u300124px（24\u50cf\u7d20）<\/p>\n<\/td>\n \u9700\u5339\u914d\u5c5e\u6027\u7684\u53d6\u503c\u89c4\u5219（\u6bd4\u5982color\u5c5e\u6027\u53ef\u8bbered，\u4e0d\u53ef\u8bbe24px）<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n 2.3 \u6838\u5fc3\u8bed\u6cd5\u89c4\u5219（3\u4e2a\u5fc5\u5b88\u89c4\u5219，\u8e29\u5751\u91cd\u707e\u533a）<\/p>\n 2.4 \u5373\u65f6\u5b9e\u64cd：\u5199\u7b2c\u4e00\u4e2aCSS\u57fa\u7840\u8bed\u6cd5\u4ee3\u7801（\u76f4\u63a5\u5728style.css\u4e2d\u7f16\u5199）<\/p>\n \u6b65\u9aa41：\u5728index.html\u7684body\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u57fa\u7840\u6807\u7b7e（\u6bd4\u5982h1）：<\/p>\n HTML<\/span> \u6b65\u9aa42：\u5728style.css\u4e2d\u7f16\u5199CSS\u4ee3\u7801，\u7ed9h1\u6807\u7b7e\u8bbe\u7f6e\u6837\u5f0f：<\/p>\n CSS<\/span> \u6b65\u9aa43：\u53f3\u952eindex.html \u2192 Open in Default Browser，\u6253\u5f00\u6d4f\u89c8\u5668\u67e5\u770b\u6548\u679c：h1\u6807\u9898\u53d8\u4e3a\u7ea2\u8272\u300130px\u5927\u5c0f，\u8bf4\u660e\u8bed\u6cd5\u6b63\u786e\u3001\u6837\u5f0f\u751f\u6548\u3002<\/p>\n 2.5 \u57fa\u7840\u6392\u9519：\u6837\u5f0f\u4e0d\u751f\u6548？\u5148\u67e5\u8fd93\u70b9<\/p>\n \u6a21\u57573：CSS \u6ce8\u91ca（10\u5206\u949f，\u5fc5\u4f1a，\u63d0\u5347\u4ee3\u7801\u53ef\u8bfb\u6027）<\/p>\n 3.1 \u6ce8\u91ca\u4f5c\u7528<\/p>\n \u5bf9CSS\u4ee3\u7801\u8fdb\u884c\u8bf4\u660e，\u65b9\u4fbf\u81ea\u5df1\/\u4ed6\u4eba\u7406\u89e3\u4ee3\u7801\u542b\u4e49（\u6bd4\u5982\u201c\u5bfc\u822a\u680f\u6807\u9898\u6837\u5f0f\u201d），\u6ce8\u91ca\u5185\u5bb9\u4e0d\u4f1a\u88ab\u6d4f\u89c8\u5668\u89e3\u6790，\u4e0d\u5f71\u54cd\u9875\u9762\u6837\u5f0f\u3002<\/p>\n 3.2 CSS\u6ce8\u91ca\u8bed\u6cd5（\u552f\u4e00\u8bed\u6cd5，\u548cHTML\u6ce8\u91ca\u533a\u5206\u5f00）<\/p>\n CSS<\/span> \/* 3.3 \u6ce8\u91ca\u89c4\u8303（\u5f00\u53d1\u5fc5\u5907，\u65e9\u671f\u517b\u6210\u4e60\u60ef）<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u7ed9\u4e4b\u524d\u5199\u7684h1\u6837\u5f0f\u6dfb\u52a0\u6ce8\u91ca（style.css\u4e2d\u4fee\u6539）<\/p>\n CSS<\/span> \u6a21\u57574：CSS 3\u79cd\u5f15\u5165\u65b9\u5f0f（30\u5206\u949f，\u91cd\u70b9\u638c\u63e12\u79cd，\u5f00\u53d1\u6838\u5fc3）<\/p>\n CSS\u8981\u4f5c\u7528\u4e8eHTML，\u5fc5\u987b\u901a\u8fc7\u201c\u5f15\u5165\u65b9\u5f0f\u201d\u5efa\u7acb\u5173\u8054，\u5171\u67093\u79cd\u5f15\u5165\u65b9\u5f0f，\u6309\u5f00\u53d1\u4f7f\u7528\u4f18\u5148\u7ea7\u6392\u5e8f：\u5916\u90e8\u6837\u5f0f（\u63a8\u8350）> \u5185\u90e8\u6837\u5f0f > \u884c\u5185\u6837\u5f0f，\u5404\u6709\u9002\u7528\u573a\u666f，\u9700\u5168\u90e8\u638c\u63e1\u5e76\u80fd\u533a\u5206\u5dee\u5f02\u3002<\/p>\n 4.1 \u5f15\u5165\u65b9\u5f0f1：\u5916\u90e8\u6837\u5f0f\u8868（link\u6807\u7b7e\u5f15\u5165，\u5f00\u53d1\u9996\u9009，\u91cd\u70b9\u4e2d\u7684\u91cd\u70b9）<\/p>\n 4.1.1 \u6838\u5fc3\u539f\u7406<\/p>\n \u5c06\u6240\u6709CSS\u4ee3\u7801\u5199\u5728\u72ec\u7acb\u7684.css\u6587\u4ef6\u4e2d（\u6bd4\u5982style.css），\u5728HTML\u7684<head><\/span>\u6807\u7b7e\u4e2d\u901a\u8fc7<link><\/span>\u6807\u7b7e\u5f15\u5165\u8be5\u6587\u4ef6，\u5b9e\u73b0HTML\u548cCSS\u7684\u5b8c\u5168\u5206\u79bb，\u662f\u4f01\u4e1a\u5f00\u53d1\u3001\u9879\u76ee\u5f00\u53d1\u7684\u552f\u4e00\u9009\u62e9\u3002<\/p>\n 4.1.2 \u8bed\u6cd5\u683c\u5f0f（\u8bb0\u6b7b，\u5b66\u524d\u51c6\u5907\u5df2\u7528，\u91cd\u65b0\u5f3a\u5316）<\/p>\n HTML<\/span> 4.1.3 \u5c5e\u6027\u8bf4\u660e<\/p>\n 4.1.4 \u9002\u7528\u573a\u666f<\/p>\n 4.1.5 \u5b9e\u64cd\u9a8c\u8bc1<\/p>\n \u76f4\u63a5\u4f7f\u7528\u5b66\u524d\u51c6\u5907\u7684index.html，<head><\/span>\u4e2d\u5df2\u5b58\u5728<link rel="stylesheet" href=".\/style.css"><\/span>，\u4fee\u6539style.css\u4e2d\u7684h1\u6837\u5f0f（\u6bd4\u5982\u628acolor\u6539\u4e3ablue），\u5237\u65b0\u6d4f\u89c8\u5668，\u6807\u9898\u989c\u8272\u53d8\u4e3a\u84dd\u8272，\u9a8c\u8bc1\u5916\u90e8\u6837\u5f0f\u751f\u6548\u3002<\/p>\n 4.2 \u5f15\u5165\u65b9\u5f0f2：\u5185\u90e8\u6837\u5f0f\u8868（style\u6807\u7b7e\u5f15\u5165，\u5c0f\u6848\u4f8b\/\u4e34\u65f6\u6d4b\u8bd5\u7528）<\/p>\n 4.2.1 \u6838\u5fc3\u539f\u7406<\/p>\n \u4e0d\u521b\u5efa\u72ec\u7acb\u7684CSS\u6587\u4ef6，\u76f4\u63a5\u5728HTML\u7684<head><\/span>\u6807\u7b7e\u4e2d\u6dfb\u52a0<style><\/span>\u6807\u7b7e，\u6240\u6709CSS\u4ee3\u7801\u5199\u5728<style><\/span>\u6807\u7b7e\u5185\u90e8，\u5b9e\u73b0HTML\u548cCSS\u7684\u90e8\u5206\u5206\u79bb（\u4ec5\u5728\u5f53\u524dHTML\u6587\u4ef6\u4e2d\u751f\u6548）\u3002<\/p>\n 4.2.2 \u8bed\u6cd5\u683c\u5f0f<\/p>\n HTML<\/span> 4.2.3 \u5173\u952e\u6ce8\u610f\u4e8b\u9879<\/p>\n 4.2.4 \u9002\u7528\u573a\u666f<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u5728index.html\u4e2d\u6dfb\u52a0\u5185\u90e8\u6837\u5f0f（\u8986\u76d6\u4e4b\u524d\u7684\u5916\u90e8\u6837\u5f0f，\u89c2\u5bdf\u6548\u679c）<\/p>\n 4.3 \u5f15\u5165\u65b9\u5f0f3：\u884c\u5185\u6837\u5f0f（style\u5c5e\u6027，\u4ec5\u4e34\u65f6\u6d4b\u8bd5\u7528，\u4e0d\u63a8\u8350\u5f00\u53d1）<\/p>\n 4.3.1 \u6838\u5fc3\u539f\u7406<\/p>\n \u4e0d\u4f7f\u7528CSS\u6587\u4ef6\u6216style\u6807\u7b7e，\u76f4\u63a5\u5728\u5355\u4e2aHTML\u6807\u7b7e\u4e0a\u6dfb\u52a0style<\/span>\u5c5e\u6027，\u5c06CSS\u6837\u5f0f\u5199\u5728style\u5c5e\u6027\u7684\u503c\u4e2d，\u5b9e\u73b0\u201c\u7ed9\u5355\u4e2a\u5143\u7d20\u5355\u72ec\u8bbe\u7f6e\u6837\u5f0f\u201d，\u5b8c\u5168\u6df7\u5408HTML\u548cCSS，\u7834\u574f\u5206\u79bb\u539f\u5219\u3002<\/p>\n 4.3.2 \u8bed\u6cd5\u683c\u5f0f<\/p>\n HTML<\/span> 4.3.3 \u5173\u952e\u6ce8\u610f\u4e8b\u9879<\/p>\n 4.3.4 \u9002\u7528\u573a\u666f<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u7ed9h1\u6807\u7b7e\u6dfb\u52a0\u884c\u5185\u6837\u5f0f（\u8986\u76d6\u5185\u90e8\u6837\u5f0f，\u89c2\u5bdf\u6548\u679c）<\/p>\n HTML<\/span> \u5237\u65b0\u6d4f\u89c8\u5668，h1\u6807\u9898\u53d8\u4e3a\u7d2b\u8272\u300135px，\u8bf4\u660e\u884c\u5185\u6837\u5f0f\u4f18\u5148\u7ea7\u9ad8\u4e8e\u5185\u90e8\u6837\u5f0f（\u6d45\u5c42\u8ba4\u77e5，\u540e\u7eed\u91cd\u70b9\u8bb2\u89e3\u4f18\u5148\u7ea7\u89c4\u5219）\u3002<\/p>\n 4.4 3\u79cd\u5f15\u5165\u65b9\u5f0f\u5bf9\u6bd4（\u8868\u683c\u603b\u7ed3，\u8bb0\u6b7b\u9002\u7528\u573a\u666f）<\/p>\n \u5f15\u5165\u65b9\u5f0f<\/p>\n<\/td>\n \u8bed\u6cd5\u5f62\u5f0f<\/p>\n<\/td>\n \u4f18\u70b9<\/p>\n<\/td>\n \u7f3a\u70b9<\/p>\n<\/td>\n \u9002\u7528\u573a\u666f<\/p>\n<\/td>\n<\/tr>\n \u5916\u90e8\u6837\u5f0f\u8868<\/p>\n<\/td>\n link\u6807\u7b7e\u5f15\u5165.css\u6587\u4ef6<\/p>\n<\/td>\n \u5b8c\u5168\u5206\u79bb\u3001\u591a\u9875\u9762\u590d\u7528\u3001\u6613\u7ef4\u62a4<\/p>\n<\/td>\n \u9700\u521b\u5efa\u72ec\u7acb\u6587\u4ef6，\u7565\u7e41\u7410<\/p>\n<\/td>\n \u4f01\u4e1a\u5f00\u53d1\u3001\u9879\u76ee\u5f00\u53d1\u3001\u591a\u9875\u9762\u5e94\u7528<\/p>\n<\/td>\n<\/tr>\n \u5185\u90e8\u6837\u5f0f\u8868<\/p>\n<\/td>\n head\u5185\u7684style\u6807\u7b7e<\/p>\n<\/td>\n \u5355\u9875\u9762\u590d\u7528\u3001\u65e0\u9700\u5207\u6362\u6587\u4ef6<\/p>\n<\/td>\n \u4ec5\u5355\u9875\u9762\u751f\u6548，\u65e0\u6cd5\u8de8\u9875\u9762\u590d\u7528<\/p>\n<\/td>\n \u5355\u9875\u9762\u5c0f\u6848\u4f8b\u3001\u4e34\u65f6\u6d4b\u8bd5<\/p>\n<\/td>\n<\/tr>\n \u884c\u5185\u6837\u5f0f<\/p>\n<\/td>\n HTML\u6807\u7b7e\u7684style\u5c5e\u6027<\/p>\n<\/td>\n \u5355\u4e2a\u5143\u7d20\u5feb\u901f\u8bbe\u7f6e\u3001\u65e0\u9700\u5199\u9009\u62e9\u5668<\/p>\n<\/td>\n \u6df7\u5408\u7ed3\u6784\u548c\u6837\u5f0f\u3001\u65e0\u6cd5\u590d\u7528\u3001\u7ef4\u62a4\u96be<\/p>\n<\/td>\n \u7d27\u6025\u4e34\u65f6\u6d4b\u8bd5\u3001\u4e2a\u522b\u5143\u7d20\u4e13\u5c5e\u6837\u5f0f<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n 4.5 \u5b9e\u64cd\u8981\u6c42<\/p>\n \u5c06index.html\u4e2d\u7684\u5185\u90e8\u6837\u5f0f（style\u6807\u7b7e）\u548c\u884c\u5185\u6837\u5f0f（style\u5c5e\u6027）\u5168\u90e8\u5220\u9664，\u6062\u590d\u5230\u4ec5\u7528\u5916\u90e8\u6837\u5f0f\u8868（link\u5f15\u5165style.css）\u00a0\u7684\u72b6\u6001，\u540e\u7eed\u6240\u6709\u5b66\u4e60\u5747\u4ee5\u5916\u90e8\u6837\u5f0f\u8868\u4e3a\u4e3b（\u7b26\u5408\u5f00\u53d1\u89c4\u8303）\u3002<\/p>\n \u6a21\u57575：\u7b2c1\u5929\u7efc\u5408\u5c0f\u6848\u4f8b（20\u5206\u949f，\u5de9\u56fa\u5f53\u5929\u6240\u6709\u77e5\u8bc6\u70b9）<\/p>\n \u6848\u4f8b\u8981\u6c42<\/p>\n \u57fa\u4e8eindex.html + style.css，\u7528\u5916\u90e8\u6837\u5f0f\u8868\u5b9e\u73b0\u4ee5\u4e0b\u6548\u679c，\u4e25\u683c\u9075\u5faaCSS\u57fa\u7840\u8bed\u6cd5，\u6dfb\u52a0\u5408\u7406\u6ce8\u91ca：<\/p>\n \u6848\u4f8b\u53c2\u8003\u4ee3\u7801<\/p>\n HTML<\/span> \n CSS<\/span> \u9a8c\u8bc1\u6807\u51c6<\/p>\n \u5237\u65b0\u6d4f\u89c8\u5668，\u80fd\u770b\u5230\u5bf9\u5e94\u5143\u7d20\u7684\u6837\u5f0f\u5168\u90e8\u751f\u6548，\u4ee3\u7801\u65e0\u8bed\u6cd5\u9519\u8bef，\u6ce8\u91ca\u89c4\u8303，\u4ec5\u4f7f\u7528\u5916\u90e8\u6837\u5f0f\u8868\u3002<\/p>\n \u7b2c2\u5929：CSS \u5c42\u53e0\u521d\u6b65\u8ba4\u77e5 + \u57fa\u7840\u6837\u5f0f\u5c5e\u6027\u5165\u95e8 + \u6837\u5f0f\u751f\u6548\u6392\u67e5<\/p>\n \u6a21\u57571：CSS \u201c\u5c42\u53e0\u201d\u7684\u6d45\u5c42\u8ba4\u77e5（20\u5206\u949f，\u7406\u89e3\u6838\u5fc3，\u4e3a\u540e\u7eed\u4f18\u5148\u7ea7\u6253\u57fa\u7840）<\/p>\n 1.1 \u201c\u5c42\u53e0\u201d\u7684\u6838\u5fc3\u542b\u4e49（\u5927\u767d\u8bdd\u89e3\u91ca，\u65e0\u62bd\u8c61\u6982\u5ff5）<\/p>\n \u201c\u5c42\u53e0\u201d\u662fCSS\u7684\u6838\u5fc3\u7279\u6027，\u7b80\u5355\u8bf4\u5c31\u662f：\u591a\u4e2aCSS\u6837\u5f0f\u89c4\u5219\u53ef\u4ee5\u540c\u65f6\u4f5c\u7528\u4e8e\u540c\u4e00\u4e2aHTML\u5143\u7d20，\u6d4f\u89c8\u5668\u4f1a\u6309\u4e00\u5b9a\u89c4\u5219\u5c06\u8fd9\u4e9b\u6837\u5f0f\u201c\u53e0\u52a0\u201d\u6216\u201c\u8986\u76d6\u201d，\u6700\u7ec8\u5448\u73b0\u4e00\u4e2a\u7efc\u5408\u6548\u679c\u3002<\/p>\n 1.2 \u5c42\u53e0\u76842\u79cd\u8868\u73b0\u5f62\u5f0f（\u7ed3\u5408\u5b9e\u64cd\u7406\u89e3，\u672c\u9636\u6bb5\u4ec5\u6d45\u5c42\u638c\u63e1）<\/p>\n \u5f62\u5f0f1：\u6837\u5f0f\u53e0\u52a0（\u591a\u4e2a\u6837\u5f0f\u4e0d\u51b2\u7a81，\u5171\u540c\u751f\u6548）<\/p>\n \u540c\u4e00\u4e2a\u5143\u7d20\u8bbe\u7f6e\u591a\u4e2a\u4e0d\u51b2\u7a81\u7684\u6837\u5f0f，\u6d4f\u89c8\u5668\u4f1a\u5c06\u6240\u6709\u6837\u5f0f\u53e0\u52a0，\u6700\u7ec8\u5143\u7d20\u62e5\u6709\u6240\u6709\u6837\u5f0f\u6548\u679c\u3002<\/p>\n \u5b9e\u64cd\u793a\u4f8b：\u7ed9h1\u6807\u7b7e\u540c\u65f6\u8bbe\u7f6ecolor（\u7ea2\u8272）\u3001font-size（30px）\u3001font-weight（\u52a0\u7c97），\u6548\u679c\u4e3a\u201c\u7ea2\u8272+30px+\u52a0\u7c97\u201d\u3002<\/p>\n CSS<\/span> \u5f62\u5f0f2：\u6837\u5f0f\u8986\u76d6（\u591a\u4e2a\u6837\u5f0f\u51b2\u7a81，\u6309\u89c4\u5219\u4fdd\u7559\u4e00\u4e2a）<\/p>\n \u540c\u4e00\u4e2a\u5143\u7d20\u8bbe\u7f6e\u591a\u4e2a\u51b2\u7a81\u7684\u6837\u5f0f（\u6bd4\u5982\u540c\u65f6\u8bbe\u7f6ecolor: red\u548ccolor: blue），\u6d4f\u89c8\u5668\u4f1a\u6309\u201c\u4f18\u5148\u7ea7\u89c4\u5219\u201d\u4fdd\u7559\u5176\u4e2d\u4e00\u4e2a，\u53e6\u4e00\u4e2a\u88ab\u8986\u76d6\u3002<\/p>\n \u5b9e\u64cd\u793a\u4f8b：\u7ed9h1\u6807\u7b7e\u540c\u65f6\u8bbe\u7f6ecolor: red\u548ccolor: blue，\u6700\u7ec8\u663e\u793a\u84dd\u8272（\u540e\u5199\u7684\u6837\u5f0f\u8986\u76d6\u5148\u5199\u7684\u6837\u5f0f，\u672c\u9636\u6bb5\u6838\u5fc3\u89c4\u5219）\u3002<\/p>\n CSS<\/span> 1.3 \u672c\u9636\u6bb5\u5fc5\u8bb0\u76842\u4e2a\u5c42\u53e0\u89c4\u5219（\u7b80\u5355\u89c4\u5219，\u540e\u7eed\u4f1a\u8865\u5145\u5b8c\u6574\u4f18\u5148\u7ea7）<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u9a8c\u8bc1\u5c42\u53e0\u89c4\u5219<\/p>\n \u6a21\u57572：CSS \u57fa\u7840\u6837\u5f0f\u5c5e\u6027\u5165\u95e8（30\u5206\u949f，\u638c\u63e15\u4e2a\u9ad8\u9891\u5c5e\u6027，\u4f1a\u7528\u5373\u53ef）<\/p>\n \u672c\u9636\u6bb5\u65e0\u9700\u8bb0\u5fc6\u6240\u6709\u6837\u5f0f\u5c5e\u6027，\u53ea\u9700\u638c\u63e15\u4e2a\u6700\u57fa\u7840\u3001\u6700\u9ad8\u9891\u7684\u6837\u5f0f\u5c5e\u6027，\u80fd\u5b9e\u73b0\u7b80\u5355\u7684\u6587\u5b57\u6837\u5f0f\u8bbe\u7f6e，\u540e\u7eed\u4f1a\u6309\u6a21\u5757\u7cfb\u7edf\u8bb2\u89e3\u6240\u6709\u5c5e\u6027\u3002<\/p>\n 2.1 \u6838\u5fc3\u8bf4\u660e<\/p>\n 2.2 5\u4e2a\u9ad8\u9891\u57fa\u7840\u6837\u5f0f\u5c5e\u6027（\u9010\u4e2a\u8bb2\u89e3+\u5b9e\u64cd）<\/p>\n \u5c5e\u6027\u540d<\/p>\n<\/td>\n \u4f5c\u7528<\/p>\n<\/td>\n \u5e38\u7528\u53d6\u503c<\/p>\n<\/td>\n \u793a\u4f8b<\/p>\n<\/td>\n<\/tr>\n color<\/p>\n<\/td>\n \u8bbe\u7f6e\u6587\u5b57\u989c\u8272<\/p>\n<\/td>\n \u82f1\u6587\u5355\u8bcd\/\u5341\u516d\u8fdb\u5236\/#RGB<\/p>\n<\/td>\n color: red; \/ color: #f00;<\/p>\n<\/td>\n<\/tr>\n font-size<\/p>\n<\/td>\n \u8bbe\u7f6e\u6587\u5b57\u5b57\u53f7<\/p>\n<\/td>\n \u6570\u5b57+px（\u50cf\u7d20，\u4e3b\u6d41）<\/p>\n<\/td>\n font-size: 20px;<\/p>\n<\/td>\n<\/tr>\n font-weight<\/p>\n<\/td>\n \u8bbe\u7f6e\u6587\u5b57\u7c97\u7ec6<\/p>\n<\/td>\n bold（\u52a0\u7c97）\/ normal（\u6b63\u5e38）\/ \u6570\u5b57（400=\u6b63\u5e38，700=\u52a0\u7c97）<\/p>\n<\/td>\n font-weight: bold;<\/p>\n<\/td>\n<\/tr>\n text-align<\/p>\n<\/td>\n \u8bbe\u7f6e\u6587\u5b57\u6c34\u5e73\u5bf9\u9f50<\/p>\n<\/td>\n center（\u5c45\u4e2d）\/ left（\u5de6\u5bf9\u9f50，\u9ed8\u8ba4）\/ right（\u53f3\u5bf9\u9f50）<\/p>\n<\/td>\n text-align: center;<\/p>\n<\/td>\n<\/tr>\n text-decoration<\/p>\n<\/td>\n \u8bbe\u7f6e\u6587\u5b57\u88c5\u9970\u7ebf<\/p>\n<\/td>\n none（\u65e0\u88c5\u9970\u7ebf）\/ underline（\u4e0b\u5212\u7ebf）\/ line-through（\u5220\u9664\u7ebf）<\/p>\n<\/td>\n text-decoration: none;<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n 2.3 \u5173\u952e\u6ce8\u610f\u4e8b\u9879（\u8e29\u5751\u91cd\u707e\u533a）<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u7ed9index.html\u7684\u6240\u6709\u5143\u7d20\u8bbe\u7f6e\u7efc\u5408\u6837\u5f0f<\/p>\n CSS<\/span> \u6548\u679c\u9a8c\u8bc1<\/p>\n \u5237\u65b0\u6d4f\u89c8\u5668，\u4e3b\u6807\u9898\u5c45\u4e2d\u3001\u7ea2\u8272\u52a0\u7c97，\u6bb5\u843d\u6df1\u7070\u8272，\u94fe\u63a5\u6a59\u8272\u65e0\u4e0b\u5212\u7ebf，\u5b9e\u73b0\u7b80\u5355\u7684\u89c6\u89c9\u7f8e\u5316\u3002<\/p>\n \u6a21\u57573：CSS \u6837\u5f0f\u4e0d\u751f\u6548\u7684\u57fa\u7840\u6392\u67e5\u65b9\u6cd5（20\u5206\u949f，\u6838\u5fc3\u80fd\u529b，\u5fc5\u987b\u638c\u63e1）<\/p>\n \u5b66\u4e60CSS\u521d\u671f，\u6700\u5e38\u89c1\u7684\u95ee\u9898\u662f\u201c\u5199\u4e86\u4ee3\u7801\u4f46\u6837\u5f0f\u4e0d\u751f\u6548\u201d，\u672c\u9636\u6bb5\u638c\u63e15\u4e2a\u57fa\u7840\u6392\u67e5\u65b9\u6cd5，\u80fd\u89e3\u51b390%\u7684\u5165\u95e8\u7ea7\u6837\u5f0f\u4e0d\u751f\u6548\u95ee\u9898，\u540e\u7eed\u4f1a\u8865\u5145\u9ad8\u7ea7\u6392\u67e5\u65b9\u6cd5\u3002<\/p>\n 3.1 \u6392\u67e5\u6b65\u9aa4（\u6309\u987a\u5e8f\u6392\u67e5，\u4ece\u7b80\u5355\u5230\u590d\u6742，\u8bb0\u6b7b）<\/p>\n \u6b65\u9aa41：\u68c0\u67e5CSS\u8bed\u6cd5\u9519\u8bef（\u6700\u5e38\u89c1）<\/p>\n \u6b65\u9aa42：\u68c0\u67e5\u9009\u62e9\u5668\u662f\u5426\u5339\u914dHTML\u5143\u7d20<\/p>\n \u6b65\u9aa43：\u68c0\u67e5CSS\u6587\u4ef6\u5f15\u5165\u8def\u5f84（\u5916\u90e8\u6837\u5f0f\u8868\u4e13\u5c5e）<\/p>\n \u6b65\u9aa44：\u68c0\u67e5\u6837\u5f0f\u662f\u5426\u88ab\u8986\u76d6（\u5c42\u53e0\u89c4\u5219）<\/p>\n \u6b65\u9aa45：\u68c0\u67e5\u6d4f\u89c8\u5668\u7f13\u5b58（\u6613\u5ffd\u7565）<\/p>\n 3.2 \u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u57fa\u7840\u6392\u67e5（\u6838\u5fc3\u5de5\u5177，\u63d0\u524d\u5165\u95e8）<\/p>\n Chrome\u7684\u300c\u68c0\u67e5\u300d\u5de5\u5177\u662fCSS\u8c03\u8bd5\u7684\u795e\u5668，\u672c\u9636\u6bb5\u638c\u63e12\u4e2a\u6838\u5fc3\u64cd\u4f5c：<\/p>\n \u5373\u65f6\u5b9e\u64cd：\u6545\u610f\u5236\u90201\u4e2a\u6837\u5f0f\u4e0d\u751f\u6548\u95ee\u9898，\u7528\u6392\u67e5\u65b9\u6cd5\u89e3\u51b3<\/p>\n \u6bd4\u5982：\u5c06style.css\u4e2d\u7684color\u5199\u6210coler，\u6253\u5f00\u5f00\u53d1\u8005\u5de5\u5177，\u67e5\u770bStyles\u9762\u677f\u7684\u7ea2\u8272\u611f\u53f9\u53f7，\u4fee\u6b63\u540e\u5237\u65b0，\u9a8c\u8bc1\u6837\u5f0f\u751f\u6548\u3002<\/p>\n \u6a21\u57574：\u7b2c2\u5929\u7efc\u5408\u5c0f\u6848\u4f8b（30\u5206\u949f，\u878d\u5408\u672c\u9636\u6bb5\u6240\u6709\u77e5\u8bc6\u70b9）<\/p>\n \u6848\u4f8b\u540d\u79f0<\/p>\n \u7b80\u5355\u4e2a\u4eba\u7b80\u4ecb\u9875\u9762（\u7eafHTML+CSS\u5916\u90e8\u6837\u5f0f，\u65e0\u590d\u6742\u5e03\u5c40）<\/p>\n \u6848\u4f8b\u8981\u6c42<\/p>\n \u6848\u4f8b\u53c2\u8003\u4ee3\u7801<\/p>\n HTML<\/span> \n CSS<\/span> \u9a8c\u8bc1\u6807\u51c6<\/p>\n \u672c\u9636\u6bb5\u5b66\u4e60\u76ee\u6807\u9a8c\u6536（\u5fc5\u505a，\u786e\u4fdd\u638c\u63e1\u6240\u6709\u6838\u5fc3\u5185\u5bb9）<\/p>\n \u57fa\u7840\u80fd\u529b\u9a8c\u6536（\u80fd\u72ec\u7acb\u5b8c\u6210\u4ee5\u4e0b\u6240\u6709\u64cd\u4f5c）<\/p>\n \u4ee3\u7801\u80fd\u529b\u9a8c\u6536（\u80fd\u72ec\u7acb\u5b8c\u6210\u201c\u7b80\u5355\u4e2a\u4eba\u7b80\u4ecb\u9875\u9762\u201d\u6848\u4f8b）<\/p>\n \u65e0\u9700\u53c2\u8003\u4ee3\u7801，\u80fd\u4ece\u96f6\u5f00\u59cb\u521b\u5efaHTML\u6587\u4ef6\u3001\u5173\u8054CSS\u6587\u4ef6，\u5199\u51fa\u7b26\u5408\u8981\u6c42\u7684HTML\u7ed3\u6784\u548cCSS\u6837\u5f0f，\u4ee3\u7801\u89c4\u8303\u3001\u6ce8\u91ca\u5b8c\u6574，\u6837\u5f0f\u5168\u90e8\u751f\u6548\u3002<\/p>\n \u672c\u9636\u6bb5\u8bfe\u540e\u62d3\u5c55（\u53ef\u9009，\u8017\u65f610-20\u5206\u949f，\u4e3a\u4e0b\u4e00\u9636\u6bb5\u94fa\u57ab）<\/p>\n \u672c\u9636\u6bb5\u6838\u5fc3\u77e5\u8bc6\u70b9\u603b\u7ed3（3\u53e5\u8bdd\u8bb0\u6b7b）<\/p>\n \n \u4f5c\u4e1a：\u7535\u8111\u5c4f\u5e55\u5c45\u4e2d\u7eff\u8272\u663e\u793a \u201c<\/span>CSS \u4f60\u597d！<\/span>\u201d<\/span><\/p>\n \n \u7b2c\u4e00\u6b65：\u65b0\u5efa\u4e00\u4e2a\u6587\u4ef6\u5939<\/span>（\u547d\u540d\u4e3a：CSS-Learn，\u82f1\u6587\u547d\u540d，\u907f\u514d\u4e2d\u6587\u8def\u5f84\u95ee\u9898）； \u7b2c\u4e8c\u6b65：\u7528\u8bb0\u4e8b\u672c\u6253\u5f00index.html\u6587\u4ef6\u52a0\u5165\u4ee5\u4e0b\u4ee3\u7801，\u4ee5\u521b\u5efa\u57fa\u7840HTML\u7ed3\u6784；<\/span><\/p>\n <!– index.html –> \u7b2c\u4e09\u6b65：\u7528\u8bb0\u4e8b\u672c，\u6253\u5f00style.css，\u52a0\u5165\u4ee5\u4e0b\u4ee3\u7801，\u4ee5\u521b\u5efaCSS\u683c\u5f0f<\/span><\/p>\n \/* style.css *\/ \u7b2c\u56db\u6b65：\u53cc\u51fb index.html \u8fd0\u884c，\u8bf7\u5c06\u6b63\u786e\u7ed3\u679c\u6253\u5728\u8bc4\u8bba\u533a\u3002<\/span><\/p><\/p>\n","protected":false},"excerpt":{"rendered":" \u672c\u9636\u6bb5\u6838\u5fc3\u76ee\u6807：\u638c\u63e1CSS\u7684\u6838\u5fc3\u8fd0\u884c\u903b\u8f91\u3001\u57fa\u7840\u8bed\u6cd5\u30013\u79cd\u5f15\u5165\u65b9\u5f0f，\u80fd\u8ba9CSS\u6210\u529f\u4f5c\u7528\u4e8eHTML\u5143\u7d20，\u72ec\u7acb\u5199\u51fa\u7b2c\u4e00\u4e2a\u53ef\u8fd0\u884c\u7684CSS\u6837\u5f0f，\u7406\u89e3\u201c\u5c42\u53e0\u6837\u5f0f\u8868\u201d\u7684\u6d45\u5c42\u542b\u4e49，\u4e3a\u540e\u7eed\u9009\u62e9\u5668\u3001\u5e03\u5c40\u5b66\u4e60\u6253\u7262\u6700\u5e95\u5c42\u57fa\u7840\u3002\u5b66\u4e60\u6838\u5fc3\u65b9\u6cd5：\u6bcf\u5b66\u4e00\u4e2a\u77e5\u8bc6\u70b9，\u7acb\u523b\u624b\u51993-5\u4e2a\u5c0f\u6848\u4f8b（\u6bd4\u5982\u5b66\u4e86\u6587\u5b57\u6837\u5f0f，\u5c31\u5199\u4e00\u4e2a\u6807\u9898\u6bb5\u843d\u7684\u6837\u5f0f；\u5b66\u4e86\u9009\u62e9\u5668，\u5c31\u7528\u4e0d\u540c\u9009\u62e9\u5668\u7ed9<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7214,7213,7217,7216,7218,7215,7219],"topic":[],"class_list":["post-68364","post","type-post","status-publish","format-standard","hentry","category-server","tag-css-"],"yoast_head":"\n\n
\n
\n
\n\n
\n \n
\n\/* \u9009\u62e9\u5668：\u544a\u8bc9\u6d4f\u89c8\u5668\u201c\u7ed9\u8c01\u52a0\u6837\u5f0f\u201d（\u5339\u914dHTML\u5143\u7d20） *\/
\n\u9009\u62e9\u5668 {
\n\u00a0\u00a0\/* \u58f0\u660e\u5757：\u5305\u88f9\u5728\u5927\u62ec\u53f7{}\u4e2d，\u544a\u8bc9\u6d4f\u89c8\u5668\u201c\u52a0\u4ec0\u4e48\u6837\u5f0f\u201d *\/
\n\u00a0\u00a0\u5c5e\u60271: \u503c1; \/* \u58f0\u660e：\u5c5e\u6027\u548c\u503c\u7528\u5192\u53f7:\u5206\u9694，\u7ed3\u5c3e\u5fc5\u987b\u52a0\u5206\u53f7;（\u6838\u5fc3\u6613\u9519\u70b9） *\/
\n\u00a0\u00a0\u5c5e\u60272: \u503c2; \/* \u591a\u4e2a\u58f0\u660e\u4e4b\u95f4\u6362\u884c\/\u7a7a\u683c\u5747\u53ef，\u63a8\u8350\u6362\u884c，\u4ee3\u7801\u66f4\u6574\u6d01 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n \n
\n<!– index.html –>
\n<body>
\n\u00a0\u00a0<h1>\u6211\u7684\u7b2c\u4e00\u4e2aCSS\u6837\u5f0f<\/h1>
\n<\/body><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n\/* style.css – \u5143\u7d20\u9009\u62e9\u5668：\u5339\u914d\u6240\u6709h1\u6807\u7b7e *\/
\nh1 {
\n\u00a0\u00a0color: red; \/* \u6587\u5b57\u989c\u8272：\u7ea2\u8272 *\/
\n\u00a0\u00a0font-size: 30px; \/* \u6587\u5b57\u5927\u5c0f：30\u50cf\u7d20 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n\/* \u5355\u884c\u6ce8\u91ca：\u6ce8\u91ca\u5185\u5bb9\u5305\u88f9\u5728\/* \u548c *\/ \u4e4b\u95f4 *\/
\nh1 {
\n\u00a0\u00a0color: red; \/* \u5355\u884c\u6ce8\u91ca：\u8bbe\u7f6e\u6587\u5b57\u4e3a\u7ea2\u8272（\u884c\u5185\u6ce8\u91ca，\u63a8\u8350） *\/
\n}<\/p>\n
\n\u00a0\u00a0\u591a\u884c\u6ce8\u91ca：\u9002\u5408\u6ce8\u91ca\u5927\u6bb5\u4ee3\u7801\/\u6a21\u5757\u8bf4\u660e
\n\u00a0\u00a0\u6bd4\u5982：\u9875\u9762\u57fa\u7840\u6837\u5f0f – \u6240\u6709\u6807\u9898\u7684\u901a\u7528\u6837\u5f0f
\n\u00a0\u00a0\u652f\u6301\u6362\u884c，\u540c\u6837\u5305\u88f9\u5728\/* \u548c *\/ \u4e4b\u95f4
\n*\/
\nh2 {
\n\u00a0\u00a0font-size: 24px;
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n\/* \u9875\u9762\u4e3b\u6807\u9898\u6837\u5f0f – \u7b2c\u4e00\u4e2aCSS\u6d4b\u8bd5\u6837\u5f0f *\/
\nh1 {
\n\u00a0\u00a0color: red; \/* \u6587\u5b57\u989c\u8272：\u7ea2\u8272 *\/
\n\u00a0\u00a0font-size: 30px; \/* \u6587\u5b57\u5b57\u53f7：30\u50cf\u7d20 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n<!– \u5199\u5728HTML\u7684<head>\u6807\u7b7e\u5185，\u5fc5\u987b\u8bbe\u7f6e3\u4e2a\u6838\u5fc3\u5c5e\u6027 –>
\n<link rel="stylesheet" href="CSS\u6587\u4ef6\u8def\u5f84" type="text\/css"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\n
\n
\n
\n
\n\n
\n \n
\n<!– \u5199\u5728HTML\u7684<head>\u6807\u7b7e\u5185，style\u6807\u7b7e\u53ef\u653e\u5728link\u6807\u7b7e\u4e0b\u65b9 –>
\n<head>
\n\u00a0\u00a0<meta charset="UTF-8">
\n\u00a0\u00a0<meta name="viewport" content="width=device-width, initial-scale=1.0">
\n\u00a0\u00a0<title>CSS\u6d4b\u8bd5<\/title>
\n\u00a0\u00a0<!– \u5185\u90e8\u6837\u5f0f\u8868：style\u6807\u7b7e –>
\n\u00a0\u00a0<style>
\n\u00a0\u00a0\u00a0\u00a0\/* \u6240\u6709CSS\u4ee3\u7801\u5199\u5728style\u6807\u7b7e\u5185，\u8bed\u6cd5\u548c\u5916\u90e8\u6837\u5f0f\u8868\u5b8c\u5168\u4e00\u81f4 *\/
\n\u00a0\u00a0\u00a0\u00a0h1 {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: green;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 30px;
\n\u00a0\u00a0\u00a0\u00a0}
\n\u00a0\u00a0\u00a0\u00a0p {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 16px;
\n\u00a0\u00a0\u00a0\u00a0}
\n\u00a0\u00a0<\/style>
\n<\/head><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\n
\n
\n
\n
\n
\n\n
\n \n
\n<!– \u76f4\u63a5\u5728HTML\u6807\u7b7e\u4e0a\u6dfb\u52a0style\u5c5e\u6027，\u5c5e\u6027\u503c\u4e3a\u201cCSS\u58f0\u660e\u201d –>
\n<\u6807\u7b7e\u540d style="\u5c5e\u60271: \u503c1; \u5c5e\u60272: \u503c2; …">\u5185\u5bb9<\/\u6807\u7b7e\u540d><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\n
\n
\n
\n
\n
\n\n
\n \n
\n<!– index.html\u4e2d\u4fee\u6539h1\u6807\u7b7e，\u6dfb\u52a0style\u5c5e\u6027 –>
\n<h1 style="color: purple; font-size: 35px;">\u6211\u7684\u7b2c\u4e00\u4e2aCSS\u6837\u5f0f<\/h1><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n \n
\n<!– index.html –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n\u00a0\u00a0\u00a0\u00a0<meta charset="UTF-8">
\n\u00a0\u00a0\u00a0\u00a0<meta name="viewport" content="width=device-width, initial-scale=1.0">
\n\u00a0\u00a0\u00a0\u00a0<title>CSS\u57fa\u7840\u5165\u95e8\u6848\u4f8b<\/title>
\n\u00a0\u00a0\u00a0\u00a0<!– \u5f15\u5165\u5916\u90e8\u6837\u5f0f\u8868 –>
\n\u00a0\u00a0\u00a0\u00a0<link rel="stylesheet" href=".\/style.css">
\n<\/head>
\n<body>
\n\u00a0\u00a0\u00a0\u00a0<h1>CSS\u57fa\u7840\u5165\u95e8<\/h1>
\n\u00a0\u00a0\u00a0\u00a0<p>\u4eca\u5929\u5b66\u4e60\u4e86CSS\u7684\u57fa\u7840\u8bed\u6cd5\u548c3\u79cd\u5f15\u5165\u65b9\u5f0f，\u91cd\u70b9\u638c\u63e1\u5916\u90e8\u6837\u5f0f\u8868！<\/p>
\n\u00a0\u00a0\u00a0\u00a0<a href="#">\u70b9\u51fb\u67e5\u770b\u5b66\u4e60\u7b14\u8bb0<\/a>
\n<\/body>
\n<\/html><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n\/* style.css – CSS\u57fa\u7840\u5165\u95e8\u6848\u4f8b：\u9875\u9762\u6240\u6709\u5143\u7d20\u6837\u5f0f *\/
\n\/* \u4e3b\u6807\u9898\u6837\u5f0f *\/
\nh1 {
\n\u00a0\u00a0color: blue; \/* \u6587\u5b57\u989c\u8272：\u84dd\u8272 *\/
\n\u00a0\u00a0font-size: 32px; \/* \u6587\u5b57\u5b57\u53f7：32\u50cf\u7d20 *\/
\n}
\n\/* \u6bb5\u843d\u6837\u5f0f *\/
\np {
\n\u00a0\u00a0color: black; \/* \u6587\u5b57\u989c\u8272：\u9ed1\u8272 *\/
\n\u00a0\u00a0font-size: 18px; \/* \u6587\u5b57\u5b57\u53f7：18\u50cf\u7d20 *\/
\n}
\n\/* \u94fe\u63a5\u6837\u5f0f *\/
\na {
\n\u00a0\u00a0color: red; \/* \u6587\u5b57\u989c\u8272：\u7ea2\u8272 *\/
\n\u00a0\u00a0font-size: 16px; \/* \u6587\u5b57\u5b57\u53f7：16\u50cf\u7d20 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\nh1 {
\n\u00a0\u00a0color: red; \/* \u989c\u8272 *\/
\n\u00a0\u00a0font-size: 30px; \/* \u5b57\u53f7 *\/
\n\u00a0\u00a0font-weight: bold; \/* \u52a0\u7c97 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\nh1 {
\n\u00a0\u00a0color: red; \/* \u88ab\u8986\u76d6，\u4e0d\u751f\u6548 *\/
\n\u00a0\u00a0color: blue; \/* \u751f\u6548，\u6700\u7ec8\u989c\u8272 *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n \n
\n\/* \u4e3b\u6807\u9898：\u7ea2\u8272+36px+\u52a0\u7c97+\u6c34\u5e73\u5c45\u4e2d *\/
\nh1 {
\n\u00a0\u00a0color: red;
\n\u00a0\u00a0font-size: 36px;
\n\u00a0\u00a0font-weight: bold;
\n\u00a0\u00a0text-align: center;
\n}
\n\/* \u6bb5\u843d：\u6df1\u7070\u8272+18px+\u6b63\u5e38\u7c97\u7ec6 *\/
\np {
\n\u00a0\u00a0color: #333;
\n\u00a0\u00a0font-size: 18px;
\n\u00a0\u00a0font-weight: normal;
\n}
\n\/* \u94fe\u63a5：\u6a59\u8272+16px+\u53bb\u6389\u4e0b\u5212\u7ebf+\u9f20\u6807\u60ac\u6d6e\u663e\u793a\u4e0b\u5212\u7ebf（\u7b80\u5355\u4f2a\u7c7b，\u63d0\u524d\u611f\u77e5） *\/
\na {
\n\u00a0\u00a0color: orange;
\n\u00a0\u00a0font-size: 16px;
\n\u00a0\u00a0text-decoration: none;
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n \n
\n<!– index.html –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n\u00a0\u00a0\u00a0\u00a0<meta charset="UTF-8">
\n\u00a0\u00a0\u00a0\u00a0<meta name="viewport" content="width=device-width, initial-scale=1.0">
\n\u00a0\u00a0\u00a0\u00a0<title>\u7b80\u5355\u4e2a\u4eba\u7b80\u4ecb<\/title>
\n\u00a0\u00a0\u00a0\u00a0<!– \u5f15\u5165\u5916\u90e8\u6837\u5f0f\u8868，\u8def\u5f84\u6b63\u786e –>
\n\u00a0\u00a0\u00a0\u00a0<link rel="stylesheet" href=".\/style.css">
\n<\/head>
\n<body>
\n\u00a0\u00a0\u00a0\u00a0<h1>\u4e2a\u4eba\u7b80\u4ecb<\/h1>
\n\u00a0\u00a0\u00a0\u00a0<h2>\u57fa\u672c\u4fe1\u606f<\/h2>
\n\u00a0\u00a0\u00a0\u00a0<p>\u59d3\u540d：\u5f20\u4e09<\/p>
\n\u00a0\u00a0\u00a0\u00a0<p>\u5e74\u9f84：25\u5c81<\/p>
\n\u00a0\u00a0\u00a0\u00a0<a href="#">\u6211\u7684\u6280\u672f\u535a\u5ba2<\/a>
\n<\/body>
\n<\/html><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n
\n \n
\n\/* style.css – \u7b80\u5355\u4e2a\u4eba\u7b80\u4ecb\u9875\u9762\u6837\u5f0f：\u6240\u6709\u5143\u7d20\u57fa\u7840\u6837\u5f0f *\/
\n\/* \u4e3b\u6807\u9898：\u4e2a\u4eba\u7b80\u4ecb *\/
\nh1 {
\n\u00a0\u00a0color: blue; \/* \u6587\u5b57\u989c\u8272：\u84dd\u8272 *\/
\n\u00a0\u00a0font-size: 36px; \/* \u6587\u5b57\u5b57\u53f7：36\u50cf\u7d20 *\/
\n\u00a0\u00a0font-weight: bold; \/* \u6587\u5b57\u7c97\u7ec6：\u52a0\u7c97 *\/
\n\u00a0\u00a0text-align: center; \/* \u6c34\u5e73\u5bf9\u9f50：\u5c45\u4e2d *\/
\n}
\n\/* \u4e8c\u7ea7\u6807\u9898：\u57fa\u672c\u4fe1\u606f（\u9a8c\u8bc1\u5c42\u53e0\u89c4\u5219：\u540e\u5199\u8986\u76d6\u5148\u5199） *\/
\nh2 {
\n\u00a0\u00a0color: gray; \/* \u88ab\u8986\u76d6，\u4e0d\u751f\u6548 *\/
\n\u00a0\u00a0color: #666; \/* \u751f\u6548，\u6700\u7ec8\u989c\u8272 *\/
\n\u00a0\u00a0font-size: 24px; \/* \u6587\u5b57\u5b57\u53f7：24\u50cf\u7d20 *\/
\n\u00a0\u00a0font-weight: normal; \/* \u6587\u5b57\u7c97\u7ec6：\u6b63\u5e38 *\/
\n}
\n\/* \u6bb5\u843d：\u4e2a\u4eba\u4fe1\u606f *\/
\np {
\n\u00a0\u00a0color: #333; \/* \u6587\u5b57\u989c\u8272：\u6df1\u7070\u8272 *\/
\n\u00a0\u00a0font-size: 18px; \/* \u6587\u5b57\u5b57\u53f7：18\u50cf\u7d20 *\/
\n\u00a0\u00a0line-height: 24px; \/* \u884c\u9ad8：24\u50cf\u7d20，\u62c9\u5f00\u884c\u95f4\u8ddd *\/
\n}
\n\/* \u94fe\u63a5：\u6211\u7684\u535a\u5ba2 *\/
\na {
\n\u00a0\u00a0color: red; \/* \u6587\u5b57\u989c\u8272：\u7ea2\u8272 *\/
\n\u00a0\u00a0font-size: 16px; \/* \u6587\u5b57\u5b57\u53f7：16\u50cf\u7d20 *\/
\n\u00a0\u00a0text-decoration: none; \/* \u53bb\u6389\u9ed8\u8ba4\u4e0b\u5212\u7ebf *\/
\n}
\n\/* \u9f20\u6807\u60ac\u6d6e\u5728\u94fe\u63a5\u4e0a：\u663e\u793a\u4e0b\u5212\u7ebf（\u7b80\u5355\u4f2a\u7c7b，\u63d0\u524d\u611f\u77e5） *\/
\na:hover {
\n\u00a0\u00a0text-decoration: underline; \/* \u663e\u793a\u4e0b\u5212\u7ebf *\/
\n}<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n\u5728\u6587\u4ef6\u5939\u5185\u65b0\u5efa\u4e24\u4e2a\u6587\u4ef6：index.html（HTML\u7ed3\u6784）\u3001style.css（CSS\u6837\u5f0f）；
\n\u6253\u5f00\u8fd9\u4e2a\u6587\u4ef6\u5939，<\/p>\n
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n\u00a0 \u00a0 <meta charset="UTF-8">
\n\u00a0 \u00a0 <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n\u00a0 \u00a0 <title>CSS\u6d4b\u8bd5<\/title>
\n\u00a0 \u00a0 <!– \u5f15\u5165CSS\u6587\u4ef6：\u6838\u5fc3\u5173\u8054\u4ee3\u7801 –>
\n\u00a0 \u00a0 <link rel="stylesheet" href=".\/style.css">
\n<\/head>
\n<body>
\n\u00a0 \u00a0 <div class="test">CSS\u5b66\u4e60\u5f00\u59cb\u5566！<\/div>
\n<\/body>
\n<\/html><\/p>\n
\n\/* \u7ed9class\u4e3atest\u7684div\u52a0\u6837\u5f0f *\/
\n.test {
\n\u00a0 \u00a0 color: red; \/* \u6587\u5b57\u7ea2\u8272 *\/
\n\u00a0 \u00a0 font-size: 24px; \/* \u6587\u5b57\u5927\u5c0f24\u50cf\u7d20 *\/
\n\u00a0 \u00a0 text-align: center; \/* \u6587\u5b57\u5c45\u4e2d *\/
\n\u00a0 \u00a0 margin-top: 50px; \/* \u4e0a\u8fb9\u8ddd50\u50cf\u7d20 *\/
\n}<\/p>\n