{"id":1141,"date":"2021-08-25T20:02:36","date_gmt":"2021-08-25T12:02:36","guid":{"rendered":"https:\/\/blog.odliken.top\/?p=1141"},"modified":"2023-08-12T17:24:35","modified_gmt":"2023-08-12T09:24:35","slug":"css%e5%85%a5%e9%97%a8","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=1141","title":{"rendered":"CSS\u5165\u95e8"},"content":{"rendered":"<h1>CSS\u30108.11\u300118.11\u3011<\/h1>\n<ul>\n<li>\n<p>\u5927\u540d: Cascading   Style      Sheets<\/p>\n<\/li>\n<li>\n<p>\u5bd3\u610f:     \u5c42\u53e0          \u6837\u5f0f         \u5217\u8868<\/p>\n<p>\u4f5c\u7528\uff1a<\/p>\n<\/li>\n<li>\n<p>\u7ed3\u6784\u4e0e\u6837\u5f0f\u5206\u79bb\u7684\u65b9\u5f0f,\u4fbf\u4e8e\u540e\u671f\u7ef4\u62a4\u4e0e\u6539\u7248<\/p>\n<\/li>\n<li>\n<p>\u53ef\u4ee5\u7528\u591a\u5957\u6837\u5f0f,\u4f7f\u7f51\u9875\u6709\u4efb\u610f\u6837\u5f0f\u5207\u6362\u7684\u6548\u679c<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u9875\u9762\u8f7d\u5165\u5f97\u66f4\u5feb\u3001\u964d\u4f4e\u670d\u52a1\u5668\u7684\u6210\u672c<\/p>\n<\/li>\n<\/ul>\n<h1>CSS \u4f7f\u7528<\/h1>\n<ul>\n<li>\n<p>\u6807\u7b7e\u9009\u62e9\u5668<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811183116864-1.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811183116864-1.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u5185\u90e8\u6837\u5f0f\u8bbe\u7f6e<\/h2>\n<pre class=\"prettyprint linenums\" ><code class=\"language-java\">index.html \u4e2d\u7528\n&lt;style type=&quot;text\/css&quot;&gt;\n    p{\n        background-color: red ;\n        font-size: 20px;\n    }\n    .p1{\n        font-family: \u96b6\u4e66;\n    }\n    body{\n        background:pink url(&quot;image\/1.jpg&quot;)no-repeat fixed 20px 30px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811193006861.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811193006861.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811193624181.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811193624181.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>background-attachment: scroll;  \u80cc\u666f\u548c\u6587\u5b57\u4e00\u8d77\u6eda\u52a8<\/p>\n<\/li>\n<li>\n<p>background-attachment: fixed; \u56fa\u5b9a\u80cc\u666f  \u6587\u5b57\u6eda\u52a8<\/p>\n<\/li>\n<li>\n<p>background-position: top center; \u80cc\u666f\u5c45\u4e2d<\/p>\n<\/li>\n<li>\n<p>background-position: 20px 30px;  \u80cc\u666f\u56fe\u7247\u4f4d\u7f6e<\/p>\n<\/li>\n<li>\n<p>\u6309\u987a\u5e8f\u5199\uff1abackground:pink url(&quot;image\/1.jpg&quot;)no-repeat fixed 20px 30px;<\/p>\n<\/li>\n<\/ul>\n<h3>\u5916\u90e8\u6837\u5f0f<\/h3>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811200053147.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811200053147.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u7528\u4e8e\u5b9a\u4e49\u6587\u6863\u4e0e\u5916\u90e8\u8d44\u6e90\u7684\u5173\u7cfb<\/li>\n<li>rel \u662f relationship \u7684\u82f1\u6587\u7f29\u5199\uff0c\u4e5f\u5c31\u662f\u201c\u5173\u7cfb\u201d<\/li>\n<li>\u5b9a\u4e49 css \u6837\u5f0f\u6587\u4ef6\u7684\u7c7b\u578b<\/li>\n<li>\u5f15\u7528\u7684\u5177\u4f53\u7684\u5916\u90e8\u6837\u5f0f\u7684\u6587\u4ef6\uff0c\u540d\u5b57\u8981\u671b\u6587\u751f\u4e49<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">index.css \u4e2d\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\np{\n            background-color: red ;\n            font-size: 20px;\n        }\n        .p1{\n            font-family: \u96b6\u4e66;\n        }\n        body{\n            \/*background-color: pink;\n            background-image: url(&quot;image\/1.jpg&quot;);\n            background-repeat: no-repeat;\n            background-attachment: fixed;\n            background-position: top center;*\/\n            background:pink url(&quot;image\/1.jpg&quot;)no-repeat fixed 20px 30px;\n        }\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\nindex.html \u4e2d\u7528\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;index.css&quot;&gt;\u53bb\u66ff\u4ee3\u4e0a\u9762\u7684<\/code><\/pre>\n<ul>\n<li>\u884c\u5185\u6837\u5f0f\u8bbe\u7f6e\uff1astyle=&quot;background-color: red;font-size:40px;&quot;<\/li>\n<li>\u4e09\u79cd\u65b9\u5f0f\u7684\u4f18\u5148\u7ea7\uff1a<\/li>\n<\/ul>\n<p>\u884c\u5185\u5143\u7d20\u6837\u5f0f\u8bbe\u7f6e&gt;\u5185\u90e8\u6837\u5f0f\u8bbe\u7f6e&gt;\u5916\u90e8\u6837\u5f0f\u8bbe\u7f6e<\/p>\n<h2>\u6587\u672c\u7c7b\u6837\u5f0f<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204105359.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204105359.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204247913.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204247913.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204300809.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811204300809.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>text-align: justify;  \u3010\u4e24\u7aef\u5bf9\u9f50\u3011<\/li>\n<li>direction: rtl; \u3010\u5bf9\u5b57\u6bcd\u6ca1\u7528\uff0c\u5bf9\u6570\u5b57\u53ef\u4ee5\u5012\u5e8f\u8f93\u51fa\u3011<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811205259799.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811205259799.png\" alt=\"\" \/><\/li><\/noscript>\n<li>\u200b text-shadow: 5px 5px 10px red; \u3010\u5750\u6807 \u9634\u5f71\u957f\u5ea6 \u989c\u8272\u3011<\/li>\n<li>\u200b text-transform: capitalize;\u3010\u9996\u5b57\u6bcd\u5927\u5199\u3011<\/li>\n<li>\u200b text-transform: uppercase;\u3010\u5b57\u6bcd\u5168\u5927\u5199\u3011<\/li>\n<\/ul>\n<h2>\u5b57\u4f53\u6837\u5f0f<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811210410134.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811210410134.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811210429984.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811210429984.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>oblique\uff1a\u503e\u659c\u663e\u793a<\/li>\n<li>italic\uff1a\u659c\u4f53\u5b57\u3010\u90e8\u5206\u3011<\/li>\n<\/ul>\n<h2>\u5217\u8868\u6837\u5f0f<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811211047989.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811211047989.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811211155502.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811211155502.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u4f2a\u7c7b\u6837\u5f0f<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811212428679.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811212428679.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811212546971.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811212546971.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code class=\"language-html\">index.html \u4e2d\n\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;index.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;p&gt;http:\/\/www.imooc.com&lt;\/p&gt;\n    &lt;p class=&quot;p1&quot;&gt;\u6155\u8bfe\u7f51&lt;\/p&gt;\n    &lt;a href=&quot;#&quot;&gt;\u4f2a\u7c7b&lt;\/a&gt;\n    &lt;label&gt;\u7528\u6237\u540d&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; &gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">index.css \u4e2d\n\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u3001\na: link{\n    color: lightpink;\n}\na:visited{\n    color: lightpink;\n}\na:hover{\n    color: yellow;\n    font-size: 30px;\n}\na:active{\n    color: blue;\n}\nlabel:hover{\n    color: red;\n}\ninput:hover{\n    background-color: red;\n}\ninput:active{\n    background-color: blue;\n}\ninput:focus{\n    background-color: yellow;\n}<\/code><\/pre>\n<h3>\u4f2a\u7c7b\u7684\u5206\u7c7b<\/h3>\n<ul>\n<li>\u72b6\u6001\u4f2a\u7c7b<\/li>\n<li>\u7ed3\u6784\u6027\u4f2a\u7c7b<\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811213959564.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811213959564.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u4f2a\u5143\u7d20\u9009\u62e9\u5668\u3010\u90e8\u5206\u5185\u5bb9\u64cd\u4f5c\u3011<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811214733543.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811214733543.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\n<p>p::before{ content: &quot;\u7ec8\u4e8e\u627e\u5230\u4f60\uff0c&quot;; }<\/p>\n<\/li>\n<li>\n<p>p::first-line{ background-color: pink; }<\/p>\n<\/li>\n<\/ul>\n<h3>CSS \u5176\u4ed6\u9009\u62e9\u5668<\/h3>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811215638907.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811215638907.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code class=\"language-html\">.html:\n&lt;p id=&quot;name1&quot;&gt;\u6155\u8bfe\u7f51&lt;\/p&gt;\n&lt;p id=&quot;name2&quot;&gt;\u6155\u8bfe\u7f51&lt;\/p&gt;\n.css:\n\u3001\u3001\u3001\u3001\u3001\u3001id\uff1a\n#name1{color: red;}\n#name2{color: blue;}\n\u3001\u3001\u3001\u3001\u3001\u3001\u9017\u53f7\u9009\u62e9\u5668\uff1a\n#name1,#name2{\n    color: red;\n    background-color: yellow;\n}\n\u3001\u3001\u3001\u3001\u3001\u3001\u3001\u5b50\u5b59\u9009\u62e9\u5668\uff1a\n#div1 p{\n    color: red;\n}\n\u3001\u3001\u3001\u3001\u3001\u3001&gt;\u9009\u62e9\u5668\n#div1 &gt;p{\n    color: red;\n}   &lt;p&gt;\u5b59\u83f2\u83f2\u5730\u65b9\u662f\u7684\u65e0\u7f1d\u7ba1\u4eba\u5de5\u8d39\u4e0d\u5751\u4f60\u4e86&lt;\/p&gt;\n\u3001\u3001\u3001\u3001\u3001\u3001+\u9009\u62e9\u5668\n#div1 +p{\n    color: red;\n}&lt;p&gt;\u6211\u5728 div1 \u7684\u5916\u9762&lt;\/p&gt;\n#div2 +div{\n    color: red;\n}&lt;div id=&quot;div3&quot;&gt;\n    &lt;p id=&quot;name1&quot;&gt;\u6155\u8bfe\u7f51&lt;\/p&gt;\n    &lt;p id=&quot;name2&quot;&gt;\u6155\u8bfe\u7f51&lt;\/p&gt;\n    &lt;\/div&gt;\n\u3001\u3001\u3001\u3001\u3001\u3001\u5c5e\u6027\u9009\u62e9\u5668\np[class=&quot;p1&quot;]{\n    color: red;\n}<\/code><\/pre>\n<h2>CSS \u9009\u62e9\u5668\u4f18\u5148\u7ea7<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811222534106.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210811222534106.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code class=\"language-html\">.html:\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;title&gt;css \u9009\u62e9\u5668\u4f18\u5148\u7ea7&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;index.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;div1&quot; id=&quot;div2&quot;&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n.css:\ndiv{\n    width: 200px;\n    height: 200px;\n    background-color: red;\n}\n.div1{\n    background-color: yellow !important;\n}&lt;!--!important \u5f3a\u5236\u4f18\u5148--&gt;\n#div2{\n    background-color: blue;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS\u30108.11\u300118.11\u3011 \u5927\u540d: Cascading Style Sheets \u5bd3\u610f: \u5c42\u53e0 \u6837\u5f0f \u5217\u8868 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1141","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1141"}],"version-history":[{"count":2,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1141\/revisions"}],"predecessor-version":[{"id":4340,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1141\/revisions\/4340"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}