{"id":162,"date":"2020-09-03T02:44:15","date_gmt":"2020-09-02T18:44:15","guid":{"rendered":"http:\/\/www.hyh0.com\/?p=162"},"modified":"2020-09-03T11:16:04","modified_gmt":"2020-09-03T03:16:04","slug":"%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b02-css-%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/www.hyh0.com\/?p=162","title":{"rendered":"\u524d\u7aef\u5f00\u53d1\u5b66\u4e60\u7b14\u8bb0(2) \u2013 CSS \u57fa\u7840"},"content":{"rendered":"

\u5c42\u53e0\u6837\u5f0f\u8868 (Cascading Style Sheets\uff0c\u7f29\u5199\u4e3a CSS\uff09\uff0c\u662f\u4e00\u79cd \u6837\u5f0f\u8868 \u8bed\u8a00\uff0c\u7528\u6765\u63cf\u8ff0 HTML \u6216 XML\uff08\u5305\u62ec\u5982 SVG\u3001MathML\u3001XHTML \u4e4b\u7c7b\u7684 XML \u5206\u652f\u8bed\u8a00\uff09\u6587\u6863\u7684\u5448\u73b0\u3002CSS \u63cf\u8ff0\u4e86\u5728\u5c4f\u5e55\u3001\u7eb8\u8d28\u3001\u97f3\u9891\u7b49\u5176\u5b83\u5a92\u4f53\u4e0a\u7684\u5143\u7d20\u5e94\u8be5\u5982\u4f55\u88ab\u6e32\u67d3\u7684\u95ee\u9898\u3002<\/p>\n

<\/p>\n

CSS \u52a0\u8f7d\u65b9\u5f0f<\/h2>\n

\u5916\u90e8\u6837\u5f0f\u8868<\/h3>\n

\u5916\u90e8\u6837\u5f0f\u8868\u662f\u6307\u5c06 CSS \u7f16\u5199\u5728\u6269\u5c55\u540d\u4e3a.css<\/code>\u7684\u5355\u72ec\u6587\u4ef6\u4e2d\uff0c\u5e76\u4ece HTML <link><\/code> \u5143\u7d20\u5f15\u7528\u5b83\u7684\u60c5\u51b5\u3002\u8fd9\u662f\u5c06css\u9644\u52a0\u5230\u6587\u6863\u4e2d\u7684\u6700\u5e38\u7684\u65b9\u6cd5\u3002<\/p>\n

<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>My CSS experiment<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n  <\/head>\n  <body>\n    <h1>Hello World!<\/h1>\n    <p>This is my first CSS example<\/p>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
\u5185\u90e8\u6837\u5f0f\u8868 (\u5728<style><\/code>\u6807\u7b7e\u4e2d\u52a0\u8f7d)<\/h3>\n
\u5185\u90e8\u6837\u5f0f\u8868\u662f\u6307\u4e0d\u4f7f\u7528\u5916\u90e8CSS\u6587\u4ef6\uff0c\u800c\u662f\u5c06CSS\u653e\u5728HTML\u6587\u4ef6<head><\/code>\u6807\u7b7e\u91cc\u7684<style><\/code>\u6807\u7b7e\u4e4b\u4e2d\u3002<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>My CSS experiment<\/title>\n    <style>\n      h1 {\n        color: blue;\n        background-color: yellow;\n        border: 1px solid black;\n      }\n\n      p {\n        color: red;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <h1>Hello World!<\/h1>\n    <p>This is my first CSS example<\/p>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
\u5185\u8054\u6837\u5f0f\uff08\u4f7f\u7528style<\/code>\u5c5e\u6027\u52a0\u8f7d\uff09<\/h3>\n
\u5185\u8054\u6837\u5f0f\u8868\u5b58\u5728\u4e8eHTML\u5143\u7d20\u7684style\u5c5e\u6027\u4e4b\u4e2d\u3002\u5176\u7279\u70b9\u662f\u6bcf\u4e2aCSS\u8868\u53ea\u5f71\u54cd\u4e00\u4e2a\u5143\u7d20\u3002\u9664\u975e\u7279\u6b8a\u60c5\u51b5\uff08\u5982\u90ae\u4ef6\uff09\uff0c\u4e00\u822c\u4e0d\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u3002<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>My CSS experiment<\/title>\n  <\/head>\n  <body>\n    <h1 style=\"color: blue;background-color: yellow;border: 1px solid black;\">Hello World!<\/h1>\n    <p style=\"color:red;\">This is my first CSS example<\/p>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
CSS \u8bed\u6cd5<\/h2>\n
CSS \u7528\u4e8e\u5b9a\u4e49\u7f51\u9875\u4e2d\u7279\u5b9a\u5143\u7d20\u6837\u5f0f\u7684\u4e00\u7ec4\u89c4\u5219\u3002\u6bd4\u5982\u201c\u6211\u5e0c\u671b\u9875\u9762\u4e2d\u7684\u4e3b\u6807\u9898\u662f\u7ea2\u8272\u7684\u5927\u5b57\u201d\u5728 CSS \u4e2d\u5199\u6210:<\/p>\n
h1 {\n    color: red;\n    font-size: 5em;\n}\n<\/code><\/pre>\n
\u4e00\u4e2a\u89c4\u5219\u7531\u4e00\u4e2a\u9009\u62e9\u5668(selector)\u8d77\u5934\u3002\u5b83\u88ab\u7528\u4e8e\u9009\u62e9\u8981\u88ab\u6dfb\u52a0\u6837\u5f0f\u7684 HTML \u5143\u7d20\u3002\u5982\u4e0a\u9762\u4f8b\u5b50\u4e2d\u7684h1<\/code>\u5c31\u9009\u5b9a\u4e86\u4e3a\u4e00\u7ea7\u6807\u9898\u6dfb\u52a0\u6837\u5f0f\u3002<\/p>\n
\u5728\u9009\u62e9\u5668\u4e4b\u540e\u662f\u4e00\u5bf9\u5927\u62ec\u53f7\uff0c\u5176\u4e2d\u5305\u542b\u4e86\u4e00\u4e2a\u6216\u591a\u4e2a\u5f62\u5f0f\u4e3a \u5c5e\u6027(property): \u503c(value);<\/code> \u7684\u58f0\u660e(decalaration)\u3002\u6bcf\u6761\u58f0\u660e\u5b9a\u4e49\u4e86\u6240\u9009\u5143\u7d20\u7684\u4e00\u4e2a\u5c5e\u6027\u3002<\/p>\n
\u4e00\u4e2a CSS \u6837\u5f0f\u8868\u5305\u542b\u4e86\u4e00\u4e2a\u6216\u8005\u591a\u4e2a\u89c4\u5219\u3002<\/p>\n
CSS \u9009\u62e9\u5668<\/h2>\n
\u9009\u62e9\u5668\u662f CSS \u89c4\u5219\u7684\u7b2c\u4e00\u90e8\u5206\uff0c\u88ab\u7528\u4e8e\u9009\u62e9\u8981\u88ab\u6dfb\u52a0\u6837\u5f0f\u7684 HTML \u5143\u7d20\u3002\u9009\u62e9\u5668\u6240\u9009\u62e9\u7684\u5143\u7d20\uff0c\u88ab\u79f0\u4e3a\u9009\u62e9\u5668\u7684\u5bf9\u8c61(subject of the selector)\u3002<\/p>\n
\u7c7b\u578b\u9009\u62e9\u5668 (type selector)<\/h3>\n
\u7c7b\u578b\u9009\u62e9\u5668\u901a\u8fc7node\u8282\u70b9\u540d\u79f0\u6765\u5339\u914d\u5143\u7d20\uff0c\u5355\u72ec\u4f7f\u7528\u65f6\u4f1a\u5339\u914d\u6240\u6709\u6b64\u7c7b\u578b\u7684\u5143\u7d20\u3002<\/p>\n
\u5176\u8bed\u6cd5\u4e3a:<\/p>\n
element { style properties }\n<\/code><\/pre>\n
\u5982:<\/p>\n
span {\n  background-color: skyblue;\n}\n<\/code><\/pre>\n
\u7c7b\u9009\u62e9\u5668 (class selector)<\/h3>\n
\u5728\u4e00\u4e2aHTML\u6587\u6863\u4e2d\uff0cCSS\u7c7b\u9009\u62e9\u5668\u4f1a\u6839\u636e\u5143\u7d20\u7684\u7c7b\u5c5e\u6027\u4e2d\u7684\u5185\u5bb9\u5339\u914d\u5143\u7d20\u3002\u7c7b\u5c5e\u6027\u88ab\u5b9a\u4e49\u4e3a\u4e00\u4e2a\u4ee5\u7a7a\u683c\u5206\u9694\u7684\u5217\u8868\u9879\uff0c\u5728\u8fd9\u7ec4\u7c7b\u540d\u4e2d\uff0c\u5fc5\u987b\u6709\u4e00\u9879\u4e0e\u7c7b\u9009\u62e9\u5668\u4e2d\u7684\u7c7b\u540d\u5b8c\u5168\u5339\u914d\uff0c\u6b64\u6761\u6837\u5f0f\u58f0\u660e\u624d\u4f1a\u751f\u6548\u3002<\/p>\n
\u5176\u8bed\u6cd5\u4e3a:<\/p>\n
.class_name { style properties }\n<\/code><\/pre>\n
\uff08\u7b49\u6548\u4e8e[class~=class_name] { style properties }<\/code>\uff0c\u89c1\u6807\u7b7e\u5c5e\u6027\u5339\u914d\u5668)<\/p>\n
\u5982:<\/p>\n
.red {\n  color: #f33;\n}\n\n.yellow-bg {\n  background: #ffa;\n}\n<\/code><\/pre>\n
\u4f5c\u7528\u4e8e\u5982\u4e0b HTML:<\/p>\n
<p class=\"red\">This paragraph has red text.<\/p>\n<p class=\"red yellow-bg\">This paragraph has red text and a yellow background.<\/p>\n<\/code><\/pre>\n
ID\u9009\u62e9\u5668 (ID selector)<\/h3>\n
\u5728\u4e00\u4e2aHTML\u6587\u6863\u4e2d,CSS ID \u9009\u62e9\u5668\u4f1a\u6839\u636e\u8be5\u5143\u7d20\u7684 ID \u5c5e\u6027\u4e2d\u7684\u5185\u5bb9\u5339\u914d\u5143\u7d20,\u5143\u7d20 ID \u5c5e\u6027\u540d\u5fc5\u987b\u4e0e\u9009\u62e9\u5668\u4e2d\u7684 ID \u5c5e\u6027\u540d\u5b8c\u5168\u5339\u914d\uff0c\u6b64\u6761\u6837\u5f0f\u58f0\u660e\u624d\u4f1a\u751f\u6548\u3002<\/p>\n
\u8bed\u6cd5:<\/p>\n
#id_value { style properties }\n<\/code><\/pre>\n
\u7b49\u6548\u4e8e:<\/p>\n
[id=id_value] { style properties }\n<\/code><\/pre>\n
\u793a\u4f8b:<\/p>\n
#demo {\n  background-color: DodgerBlue;\n}\n<\/code><\/pre>\n
<p id=\"identified\">Here's a span with some text.<\/p>\n<\/code><\/pre>\n
\u901a\u914d\u9009\u62e9\u5668 (universal selector)<\/h3>\n
\u5728CSS\u4e2d,\u4e00\u4e2a\u661f\u53f7(*<\/code>)\u5c31\u662f\u4e00\u4e2a\u901a\u914d\u9009\u62e9\u5668.\u5b83\u53ef\u4ee5\u5339\u914d\u4efb\u610f\u7c7b\u578b\u7684HTML\u5143\u7d20\u3002\uff08\u901a\u5e38\u4e0d\u4f7f\u7528\u901a\u914d\u9009\u62e9\u5668\u56e0\u4e3a\u5b83\u662f\u6027\u80fd\u6700\u4f4e\u7684\u9009\u62e9\u5668\u3002\uff09<\/p>\n
\u793a\u4f8b:<\/p>\n
* {color:red;}\n<\/code><\/pre>\n
\u6807\u7b7e\u5c5e\u6027\u5339\u914d\u5668 (attribute selector)<\/h3>\n
CSS \u6807\u7b7e\u5c5e\u6027\u5339\u914d\u5668\u901a\u8fc7\u5339\u914d\u5143\u7d20\u7684\u7279\u5b9a\u5c5e\u6027\u503c\u6765\u9009\u62e9\u5143\u7d20\u3002<\/p>\n
\/* \u5b58\u5728title\u5c5e\u6027\u7684<a> \u5143\u7d20 *\/\na[title] {\n  color: purple;\n}\n\n\/* \u5b58\u5728href\u5c5e\u6027\u5e76\u4e14\u5c5e\u6027\u503c\u5339\u914d\"https:\/\/example.org\"\u7684<a> \u5143\u7d20 *\/\na[href=\"https:\/\/example.org\"] {\n  color: green;\n}\n\n\/* \u5b58\u5728href\u5c5e\u6027\u5e76\u4e14\u5c5e\u6027\u503c\u5305\u542b\"example\"\u7684<a> \u5143\u7d20 *\/\na[href*=\"example\"] {\n  font-size: 2em;\n}\n\n\/* \u5b58\u5728href\u5c5e\u6027\u5e76\u4e14\u5c5e\u6027\u503c\u7ed3\u5c3e\u662f\".org\"\u7684<a> \u5143\u7d20 *\/\na[href$=\".org\"] {\n  font-style: italic;\n}\n\n\/* \u5b58\u5728class\u5c5e\u6027\u5e76\u4e14\u5c5e\u6027\u503c\u5305\u542b\"logo\"\u7684<a>\u5143\u7d20 *\/\na[class~=\"logo\"] {\n  padding: 2px;\n}\n<\/code><\/pre>\n
attribute \u4e0e value \u95f4\u7684\u8fd0\u7b97\u7b26\u6709:<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u8fd0\u7b97\u7b26<\/th>\n\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n
=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\uff0c\u4e14\u5c5e\u6027\u503c\u4e3a value \u7684\u5143\u7d20<\/td>\n<\/tr>\n
~=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\u7684\u5143\u7d20\uff0c\u5e76\u4e14\u8be5\u5c5e\u6027\u662f\u4e00\u4e2a\u4ee5\u7a7a\u683c\u4f5c\u4e3a\u5206\u9694\u7684\u503c\u5217\u8868\uff0c\u5176\u4e2d\u81f3\u5c11\u6709\u4e00\u4e2a\u503c\u4e3a value<\/td>\n<\/tr>\n
|=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\u7684\u5143\u7d20\uff0c\u5c5e\u6027\u503c\u4e3a\u201cvalue\u201d\u6216\u662f\u4ee5\u201cvalue-\u201d\u4e3a\u524d\u7f00 (\u5e38\u7528\u4e8e\u5339\u914d\u8bed\u8a00\uff0c\u5982 zh-CN\uff0czh-TW \u53ef\u4ee5\u7528 zh \u4f5c\u4e3a value)<\/td>\n<\/tr>\n
^=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\uff0c\u4e14\u5c5e\u6027\u503c\u662f\u4ee5 value \u5f00\u5934\u7684\u5143\u7d20\u3002<\/td>\n<\/tr>\n
$=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\uff0c\u4e14\u5c5e\u6027\u503c\u662f\u4ee5 value \u7ed3\u5c3e\u7684\u5143\u7d20<\/td>\n<\/tr>\n
*=<\/td>\n\u6709\u4ee5 attr \u547d\u540d\u7684\u5c5e\u6027\uff0c\u4e14\u5c5e\u6027\u503c\u5305\u542b\u6709 value \u7684\u5143\u7d20\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u4f2a\u7c7b (pseudo-classes) \u4e0e \u4f2a\u5143\u7d20 (pseudo-elements)<\/h3>\n
CSS \u4f2a\u7c7b \u662f\u6dfb\u52a0\u5230\u9009\u62e9\u5668\u7684\u5173\u952e\u5b57\uff0c\u6307\u5b9a\u8981\u9009\u62e9\u7684\u5143\u7d20\u7684\u7279\u6b8a\u72b6\u6001\u3002\u4f8b\u5982\uff0c:hover \u53ef\u88ab\u7528\u4e8e\u5728\u7528\u6237\u5c06\u9f20\u6807\u60ac\u505c\u5728\u6309\u94ae\u4e0a\u65f6\u6539\u53d8\u6309\u94ae\u7684\u989c\u8272\u3002<\/p>\n
\/* \u6240\u6709\u7528\u6237\u6307\u9488\u60ac\u505c\u7684\u6309\u94ae *\/\nbutton:hover {\n  color: blue;\n}\n<\/code><\/pre>\n
\u4f2a\u5143\u7d20 \u662f\u4e00\u4e2a\u9644\u52a0\u81f3\u9009\u62e9\u5668\u672b\u7684\u5173\u952e\u8bcd\uff0c\u5141\u8bb8\u4f60\u5bf9\u88ab\u9009\u62e9\u5143\u7d20\u7684\u7279\u5b9a\u90e8\u5206<\/em>\u4fee\u6539\u6837\u5f0f\u3002\u4e0b\u4f8b\u4e2d\u7684 ::first-line \u4f2a\u5143\u7d20\u53ef\u6539\u53d8\u6bb5\u843d\u9996\u884c\u6587\u5b57\u7684\u6837\u5f0f\u3002<\/p>\n
\/* \u6bcf\u4e00\u4e2a <p> \u5143\u7d20\u7684\u7b2c\u4e00\u884c\u3002 *\/\np::first-line {\n  color: blue;\n  text-transform: uppercase;\n}\n<\/code><\/pre>\n
\u5b8c\u6574\u7684\u4f2a\u7c7b\u4e0e\u4f2a\u5143\u7d20\u5217\u8868\u53ef\u53c2\u89c1:<\/p>\n
MDN\u6587\u6863-\u4f2a\u7c7b<\/a><\/p>\n
MDN\u6587\u6863-\u4f2a\u5143\u7d20<\/a><\/p>\n
\u9009\u62e9\u5668\u7684\u7ec4\u5408<\/h3>\n
\u53ef\u4ee5\u4f7f\u7528\u8fd0\u7b97\u7b26\u6765\u5c06\u591a\u4e2a\u9009\u62e9\u5668\u7ec4\u5408\u8d77\u6765\uff0c\u6765\u7528\u66f4\u590d\u6742\u7684\u89c4\u5219\u9009\u62e9\u5143\u7d20\u3002\u4e0b\u9762\u7684\u793a\u4f8b\u7528\u8fd0\u7b97\u7b26\uff08>\uff09\u9009\u62e9\u4e86<article><\/code>\u5143\u7d20\u7684\u521d\u4ee3<p><\/code>\u5b50\u5143\u7d20\u3002<\/p>\n
article > p { }\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
\u9009\u62e9\u5668<\/th>\n\u793a\u4f8b<\/th>\n\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n
\u540e\u4ee3\u9009\u62e9\u5668<\/td>\narticle p<\/code><\/td>\n\u6ee1\u8db3\u7b2c\u4e8c\u4e2a\u9009\u62e9\u5668\u4e14\u6709\u4e00\u4e2a\u7956\u5148(\u7236\u4eb2\uff0c\u7236\u4eb2\u7684\u7236\u4eb2…)\u6ee1\u8db3\u7b2c\u4e00\u4e2a\u9009\u62e9\u5668\u7684\u5143\u7d20<\/td>\n<\/tr>\n
\u5b50\u4ee3\u9009\u62e9\u5668<\/td>\narticle > p<\/code><\/td>\n\u6ee1\u8db3\u7b2c\u4e8c\u4e2a\u9009\u62e9\u5668\u4e14\u7236\u7956\u5148\u5143\u7d20\u6ee1\u8db3\u7b2c\u4e00\u4e2a\u9009\u62e9\u5668\u7684\u5143\u7d20<\/td>\n<\/tr>\n
\u76f8\u90bb\u5144\u5f1f\u9009\u62e9\u5668<\/td>\nh1 + p<\/code><\/td>\n\u9009\u4e2d\u4e00\u4e2a\u5143\u7d20\u76f8\u90bb\u7684\u5144\u5f1f\u5143\u7d20\u3002\u4f8b\u5982\uff0cp + img<\/code>\u9009\u4e2d\u6240\u6709\u7d27\u968f<p><\/code>\u5143\u7d20\u4e4b\u540e\u7684<img><\/code>\u5143\u7d20<\/td>\n<\/tr>\n
\u901a\u7528\u5144\u5f1f\u9009\u62e9\u5668<\/td>\nh1 ~ p<\/code><\/td>\n\u9009\u4e2d\u4e00\u4e2a\u5143\u7d20\u7684\u5144\u5f1f\u5143\u7d20\uff0c\u5373\u4f7f\u5b83\u4eec\u4e0d\u76f4\u63a5\u76f8\u90bb\u3002\u4f8b\u5982\uff0cp ~ img<\/code>\u9009\u4e2d\u6240\u6709\u7684<p><\/code>\u5143\u7d20\u540e\u4efb\u4f55\u5730\u65b9\u7684<img><\/code>\u5143\u7d20<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u9009\u62e9\u5668\u5217\u8868<\/h3>\n
\u5982\u679c\u6709\u591a\u4e2a\u4f7f\u7528\u76f8\u540c\u6837\u5f0f\u7684CSS\u9009\u62e9\u5668\uff0c\u90a3\u4e48\u8fd9\u4e9b\u5355\u72ec\u7684\u9009\u62e9\u5668\u53ef\u4ee5\u88ab\u6df7\u7f16\u4e3a\u4e00\u4e2a\u9009\u62e9\u5668\u5217\u8868<\/em>\u3002\u591a\u4e2a\u9009\u62e9\u5668\u95f4\u4f7f\u7528\u9017\u53f7\u5206\u9694\u3002\u4f8b\u5982\u5982\u4e0b\u7684\u89c4\u5219<\/p>\n
h1 {\n  color: blue;\n}\n\n.special {\n  color: blue;\n}\n<\/code><\/pre>\n
\u53ef\u4ee5\u5199\u4e3a (\u6362\u884c\u662f\u53ef\u9009\u7684):<\/p>\n
h1,\n.special {\n  color: blue;\n}\n<\/code><\/pre>\n
CSS \u5c42\u53e0\u4e0e\u4f18\u5148\u7ea7<\/h2>\n
\u5f53 CSS \u7684\u591a\u6761\u89c4\u5219\u53d1\u751f\u51b2\u7a81\u65f6\uff0c\u6d4f\u89c8\u5668\u9700\u8981\u51b3\u5b9a\u5e94\u7528\u54ea\u4e2a\u89c4\u5219\uff0c\u800c\u8fd9\u5957\u673a\u5236\u88ab\u79f0\u4e3a \u5c42\u53e0 (cascade) \u4e0e \u4f18\u5148\u7ea7 (specificity)\u3002<\/p>\n
\u5c42\u53e0<\/h3>\n
\u5c42\u53e0 (cascade) \u7b80\u5355\u6765\u8bf4\u5c31\u662f\u5f53\u4e24\u6761\u540c\u7ea7\u522b\u7684\u89c4\u5219\u5e94\u7528\u5230\u540c\u4e00\u4e2a\u5143\u7d20\u65f6\uff0c\u4f1a\u91c7\u7528\u5199\u5728\u540e\u9762\u7684\u89c4\u5219\u3002\u4f8b\u5982\u4e0b\u9762\u7684\u4f8b\u5b50\u4e2d\u6709\u4e24\u6761\u5173\u4e8eh1<\/code>\u7684\u89c4\u5219\uff0c\u800ch1<\/code>\u6700\u7ec8\u5448\u84dd\u8272\u2014\u2014\u4e5f\u5c31\u662f\u5199\u5728\u540e\u9762\u7684\u89c4\u5219\u3002<\/p>\n
h1 {\n    color: red;\n}\nh1 {\n    color: blue;\n}\n\n<\/code><\/pre>\n
<h1>This is my heading.<\/h1>\n<\/code><\/pre>\n
\u4f18\u5148\u7ea7<\/h3>\n
\u6d4f\u89c8\u5668\u662f\u6839\u636e\u4f18\u5148\u7ea7\u6765\u51b3\u5b9a\u5f53 \u591a\u4e2a\u89c4\u5219 \u6709\u4e0d\u540c\u9009\u62e9\u5668 \u5bf9\u5e94\u76f8\u540c\u7684\u5143\u7d20 \u7684\u65f6\u5019\u9700\u8981\u4f7f\u7528\u54ea\u4e2a\u89c4\u5219\u3002\u5b83\u603b\u4f53\u6765\u8bf4\u53d6\u51b3\u4e8e\u9009\u62e9\u5668\u7684\u5177\u4f53\u7a0b\u5ea6\uff0c\u5982:<\/p>\n