{"id":4794,"date":"2022-03-27T21:20:30","date_gmt":"2022-03-27T13:20:30","guid":{"rendered":"https:\/\/egonlin.com\/?p=4794"},"modified":"2022-03-27T21:20:30","modified_gmt":"2022-03-27T13:20:30","slug":"%e7%ac%ac%e4%b8%89%e8%8a%82%ef%bc%9acss%e5%9f%ba%e7%a1%80","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4794","title":{"rendered":"\u7b2c\u4e09\u8282\uff1acss\u57fa\u7840"},"content":{"rendered":"

CSS3<\/h1>\n

1\u3001CSS3\u662f\u4ec0\u4e48<\/h2>\n

CSS3\u5c31\u662fcss\u8bed\u8a00\uff0c\u6570\u5b573\u662f\u8be5\u8bed\u8a00\u7684\u7248\u672c\u53f7\uff1bcss\u8bed\u8a00\u5f00\u53d1\u7684\u6587\u4ef6\u662f\u4ee5.css\u4e3a\u540e\u7f00\uff0c\u901a\u8fc7\u5728html\u6587\u4ef6\u4e2d\u5f15\u5165\u8be5css\u6587\u4ef6\u6765\u63a7\u5236html\u4ee3\u7801\u7684\u6837\u5f0f\uff08css\u8bed\u8a00\u4ee3\u7801\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5199\u5728html\u6587\u4ef6\u4e2d\uff09\uff0c\u91c7\u7528\u7684\u8bed\u8a00\u662f\u7ea7\u8054\u6837\u5f0f\u8868 \uff08Cascading Style Sheet\uff09\uff0c\u4e5f\u5c5e\u4e8e\u6807\u8bb0\u8bed\u8a00\u3002<\/p>\n

2\u3001CSS3\u5982\u4f55\u5b66\u4e60<\/h2>\n

\u5b66\u4e60\u65b9\u5411\uff1a\u4ececss\u4ee3\u7801\u4e66\u5199\u4f4d\u7f6e\u3001css\u9009\u62e9\u5668\u548ccss\u5177\u4f53\u6837\u5f0f\u8bbe\u7f6e\u4e09\u90e8\u5206\u8fdb\u884c\u5b66\u4e60<\/p>\n

\u5b66\u4e60\u76ee\u7684\uff1a\u5b8c\u6210\u9875\u9762\u6837\u5f0f\u5e03\u5c40\u548c\u4f4d\u7f6e\u5e03\u5c40<\/p>\n

3\u3001css\u4ee3\u7801\u4e66\u5199\u4f4d\u7f6e<\/h2>\n

css\u662f\u6765\u63a7\u5236\u9875\u9762\u6807\u7b7e\u7684\u6837\u5f0f\uff0c\u4f46\u662f\u53ef\u4ee5\u6839\u636e\u5b9e\u9645\u60c5\u51b5\u4e66\u5199\u5728\u4e0d\u540c\u7684\u4f4d\u7f6e\uff0c\u653e\u5728\u4e0d\u540c\u4f4d\u7f6e\u6709\u4e0d\u540c\u7684\u4e13\u4e1a\u53eb\u6cd5\uff0c\u53ef\u4ee5\u5206\u4e3a\u884c\u95f4\u5f0f\u3001\u5185\u8054\u5f0f\u548c\u5916\u8054\u5f0f\u4e09\u79cd\u3002<\/p>\n

3-1 \u884c\u95f4\u5f0f<\/h3>\n

css\u6837\u5f0f\u4e66\u5199\u5728\u6807\u7b7e\u7684style\u5168\u5c40\u5c5e\u6027\u4e2d\uff0c\u4e00\u6761\u6837\u5f0f\u683c\u5f0f\u4e3a \u6837\u5f0f\u540d: \u6837\u5f0f\u503c \u5355\u4f4d;\uff0c\u53ef\u4ee5\u540c\u65f6\u51fa\u73b0\u591a\u6761\u6837\u5f0f<\/p>\n

<!-- \u5173\u952e\u4ee3\u7801 -->\n<!-- \u7ed9div\u6807\u7b7e\u8bbe\u7f6e\u5bbd\u9ad8\u80cc\u666f\u989c\u8272 -->\n<div style="width: 200px; height: 200px; background-color: orange;"><\/div><\/code><\/pre>\n
3-2 \u5185\u8054\u5f0f<\/h3>\n
css\u6837\u5f0f\u4e66\u5199\u5728head\u6807\u7b7e\u5185\u7684style\u6807\u7b7e\u4e2d\uff0c\u6837\u5f0f\u683c\u5f0f\u4e3a css\u9009\u62e9\u5668 { \u6837\u5f0f\u5757 }\uff0c\u6837\u5f0f\u5757\u7531\u4e00\u6761\u6761\u6837\u5f0f\u7ec4\u6210<\/p>\n
<!-- \u5173\u952e\u4ee3\u7801 -->\n<head>\n    <style>\n        \/* css\u8bed\u6cd5\u4e0b\u7684\u6ce8\u91ca\u8bed\u6cd5 *\/\n        \/* \u8bbe\u7f6e\u9875\u9762\u4e2d\u6240\u6709h2\u6807\u7b7e\u5bbd\u9ad8\u80cc\u666f\u989c\u8272 *\/\n        h2 {\n            width: 50px; \n            height: 50px; \n            background-color: orange;\n        }\n        \/* \u8bbe\u7f6e\u9875\u9762\u4e2d\u6240\u6709h3\u6807\u7b7e\u5bbd\u9ad8\u80cc\u666f\u989c\u8272 *\/\n        h3 {\n            width: 100px; \n            height: 100px; \n            background-color: red;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2><\/h2>\n    <h2><\/h2>\n    <h3><\/h3>\n    <h3><\/h3>\n<\/body><\/code><\/pre>\n
3-3 \u5916\u8054\u5f0f<\/h3>\n
css\u6837\u5f0f\u7684\u5199\u6cd5\u540c\u5185\u8054\u5f0f\uff0c\u4f46\u6837\u5f0f\u4e66\u5199\u5728css\u6587\u4ef6\u4e2d\uff0c\u5728html\u9875\u9762\u4e2d\u7528link\u6807\u7b7e\u5f15\u5165css\u6587\u4ef6\uff08\u5efa\u8bae\u5728head\u6807\u7b7e\u4e2d\u5f15\u5165\uff09<\/p>\n
    \n
  • css\u6587\u4ef6\u5939\u4e0b\u7684my.css<\/li>\n<\/ul>\n
    \/* html\u6587\u4ef6\u4f1a\u5f15\u5165\u8be5css\u6587\u4ef6\uff0c\u8bbe\u7f6e\u6240\u6709\u5f15\u5165\u4e86html\u6587\u4ef6\u4e2d\u7684\u6240\u6709p\u6807\u7b7e\u5bbd\u9ad8\u80cc\u666f\u989c\u8272 *\/\np {\n    width: 50px; \n    height: 50px; \n    background-color: orange;\n}<\/code><\/pre>\n
      \n
    • \u6839\u76ee\u5f55\u4e0b\u7684first.html<\/li>\n<\/ul>\n
      <!-- \u5173\u952e\u4ee3\u7801 -->\n<head>\n    <!--\n    rel="stylesheet"\uff1a\u5f15\u5165\u7684\u662f\u5c42\u7ea7\u6837\u5f0f\u8868\uff0c\u4e5f\u5c31\u662fcss\u6587\u4ef6\n    type="text\/css"\uff1a\u5f15\u5165\u6587\u4ef6\u91c7\u7528\u7684\u662fcss\u8bed\u6cd5\u4e66\u5199\u6587\u672c\u7c7b\u578b\u4ee3\u7801\n    href="css\/my.css"\uff1a\u91c7\u7528\u76f8\u5f53\u8def\u5f84\u5f15\u5165\u76ee\u6807css\u6587\u4ef6\n    -->\n    <link rel="stylesheet" type="text\/css" href="css\/my.css">\n<\/head>\n<body>\n    <!-- \u8be5\u9875\u9762\u4e2d\u7684p\u6807\u7b7e\u6837\u5f0f\u90fd\u88abmy.css\u6587\u4ef6\u63a7\u5236 -->\n    <p><\/p>\n    <p><\/p>\n<\/body><\/code><\/pre>\n
        \n
      • \u6839\u76ee\u5f55\u4e0b\u7684second.html<\/li>\n<\/ul>\n
        <head>\n    <link rel="stylesheet" type="text\/css" href="css\/my.css">\n<\/head>\n<body>\n    <!-- \u8be5\u9875\u9762\u4e2d\u7684p\u6807\u7b7e\u6837\u5f0f\u4e5f\u90fd\u88abmy.css\u6587\u4ef6\u63a7\u5236 -->\n    <p><\/p>\n    <p><\/p>\n<\/body><\/code><\/pre>\n
        \u603b\u7ed3\uff1a<\/h5>\n
        \u884c\u95f4\u5f0f\u63a7\u5236\u6837\u5f0f\u6700\u76f4\u63a5\uff0c\u4f46\u662f\u6837\u5f0f\u591a\u4e86\u76f4\u63a5\u5bfc\u81f4\u9875\u9762\u53ef\u8bfb\u6027\u53d8\u5dee\uff0c\u4e14\u6837\u5f0f\u76f8\u540c\u7684\u6807\u7b7e\u6837\u5f0f\u4e5f\u9700\u8981\u5404\u81ea\u8bbe\u7f6e\uff0c\u590d\u7528\u6027\u5dee\uff1b<\/p>\n
        \u5185\u8054\u5f0f\u53ef\u4ee5\u7528\u4e00\u5957\u6837\u5f0f\u5757\u540c\u65f6\u63a7\u5236\u591a\u4e2a\u6807\u7b7e\uff0c\u5177\u6709\u6837\u5f0f\u7684\u590d\u7528\u6027\uff0c\u4f46\u662fcss\u6837\u5f0f\u4ee3\u7801\u8fd8\u662f\u5199\u5728html\u6587\u4ef6\u4e2d\uff0c\u5728\u9879\u76ee\u5f00\u53d1\u4e0b\uff0c\u4ee3\u7801\u91cf\u5267\u589e\uff0c\u5bfc\u81f4html\u6587\u4ef6\u53d8\u5f97\u81c3\u80bf\uff0c\u4e0d\u5229\u4e8e\u4ee3\u7801\u7ef4\u62a4\uff1b<\/p>\n
        \u5916\u8054\u5f0f\u5c06css\u6837\u5f0f\u79fb\u5230\u5916\u90e8css\u6587\u4ef6\u4e2d\uff0c\u4e0d\u4ec5\u907f\u514d\u9879\u76ee\u5f00\u53d1\u4e0bhtml\u6587\u4ef6\u7684\u81c3\u80bf\u95ee\u9898\uff0c\u540c\u65f6\u5177\u6709\u4e00\u5957\u4ee3\u7801\u5757\u63a7\u5236\u591a\u4e2a\u6807\u7b7e\uff0c\u4e00\u4e2acss\u6837\u5f0f\u6587\u4ef6\u670d\u52a1\u4e8e\u591a\u4e2ahtml\u4e24\u79cd\u590d\u7528\u6027\u7684\u597d\u5904\uff0c\u4f46\u662f\u5728\u5b66\u4e60\u9636\u6bb5\u4ee3\u7801\u91cf\u4e0d\u5927\u65f6\uff0c\u6837\u5f0f\u4e0d\u9700\u8981\u670d\u52a1\u4e8e\u591a\u4e2ahtml\u9875\u9762\u65f6\uff0c\u524d\u9762\u4e24\u79cd\u65b9\u5f0f\u663e\u7136\u663e\u5f97\u66f4\u4fbf\u5229\u3002<\/p>\n
        \u5728\u884c\u95f4\u5f0f\u4e2d\uff0c\u5199\u5728\u6807\u7b7e\u5185\u90e8\u7684\u6837\u5f0f\u81ea\u7136\u662f\u7528\u6765\u63a7\u5236\u8be5\u6807\u7b7e\u7684\u6837\u5f0f\uff0c\u90a3\u5199\u5728\u5185\u8054\u5f0f\u548c\u5916\u8054\u5f0f\u4e2d\u7684\u6837\u5f0f\u53c8\u662f\u901a\u8fc7\u4ec0\u4e48\u6837\u7684\u8054\u7cfb\u6765\u63a7\u5236\u5bf9\u5e94\u9875\u9762\u4e2d\u6807\u7b7e\u7684\u6837\u5f0f\u5462\uff1f\u7b54\u6848\u5c31\u662f\u7528\u4e8e\u5efa\u7acbcss\u4e0ehtml\u4e4b\u95f4\u8054\u7cfb\u7684css\u9009\u62e9\u5668\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
        CSS3 1\u3001CSS3\u662f\u4ec0\u4e48 CSS3\u5c31\u662fcss\u8bed\u8a00\uff0c\u6570\u5b573\u662f\u8be5\u8bed\u8a00\u7684\u7248\u672c\u53f7\uff1bcss\u8bed\u8a00\u5f00\u53d1\u7684\u6587\u4ef6\u662f\u4ee5.css […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[361,368],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4794"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4794"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4794\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}