{"id":67457,"date":"2016-02-15T03:23:14","date_gmt":"2016-02-14T19:23:14","guid":{"rendered":"http:\/\/www.xiaoyebailong.com\/?p=67457"},"modified":"2016-02-15T03:23:14","modified_gmt":"2016-02-14T19:23:14","slug":"10%e4%b8%aacss%e7%ae%80%e5%86%99%e4%bc%98%e5%8c%96%e6%8a%80%e5%b7%a7","status":"publish","type":"post","link":"http:\/\/www.xiaoyebailong.com\/index.php\/2016\/02\/15\/67457.htm","title":{"rendered":"10\u4e2aCSS\u7b80\u5199\/\u4f18\u5316\u6280\u5de7"},"content":{"rendered":"

CSS\u7b80\u5199\u5c31\u662f\u6307\u5c06\u591a\u884c\u7684CSS\u5c5e\u6027\u7b80\u5199\u6210\u4e00\u884c\uff0c\u53c8\u79f0\u4e3aCSS\u4ee3\u7801\u4f18\u5316\u6216CSS\u7f29\u5199\u3002CSS\u7b80\u5199\u7684\u6700\u5927\u597d\u5904\u5c31\u662f\u80fd\u591f\u663e\u8457\u51cf\u5c11CSS\u6587\u4ef6\u7684\u5927\u5c0f\uff0c\u4f18\u5316\u7f51\u7ad9\u6574\u4f53\u6027\u80fd\uff0c\u66f4\u52a0\u5bb9\u6613\u9605\u8bfb\u3002<\/p>\n

\u4e0b\u9762\u4ecb\u7ecd\u5e38\u89c1\u7684CSS\u7b80\u5199\u89c4\u5219\uff1a<\/p>\n

\u4e00\u3001\u76d2\u5b50\u5927\u5c0f
\n\u8fd9\u91cc\u4e3b\u8981\u7528\u4e8e\u4e24\u4e2a\u5c5e\u6027\uff1amargin\u548cpadding\uff0c\u6211\u4eec\u4ee5margin\u4e3a\u4f8b\uff0cpadding\u4e0e\u4e4b\u76f8\u540c\u3002\u76d2\u5b50\u6709\u4e0a\u4e0b\u5de6\u53f3\u56db\u4e2a\u65b9\u5411\uff0c\u6bcf\u4e2a\u65b9\u5411\u90fd\u6709\u4e2a\u5916\u8fb9\u8ddd\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
margin-top<\/code>:<\/code>1px<\/code>;<\/code><\/div>\n
margin-right<\/code>:<\/code>2px<\/code>;<\/code><\/div>\n
margin-bottom<\/code>:<\/code>3px<\/code>;<\/code><\/div>\n
margin-left<\/code>:<\/code>4px<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4f60\u53ef\u4ee5\u7b80\u5199\u6210\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
margin<\/code>:<\/code>1px<\/code> 2px<\/code> 3px<\/code> 4px<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u8bed\u6cd5 margin:top right bottom left;<\/p>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n<\/td>\n
\n
\n
\/\/\u56db\u4e2a\u65b9\u5411\u7684\u8fb9\u8ddd\u76f8\u540c\uff0c\u7b49\u540c\u4e8e<\/code>margin<\/code>:<\/code>1px<\/code> 1px<\/code> 1px<\/code> 1px<\/code>;<\/code><\/div>\n
margin<\/code>:<\/code>1px<\/code>;<\/code><\/div>\n
\/\/\u4e0a\u4e0b\u8fb9\u8ddd\u90fd\u4e3a<\/code>1px<\/code>\uff0c\u5de6\u53f3\u8fb9\u8ddd\u5747\u4e3a<\/code>2px<\/code>\uff0c\u7b49\u540c\u4e8e<\/code>margin<\/code>:<\/code>1px<\/code> 2px<\/code> 1px<\/code> 2px<\/code>;<\/code><\/div>\n
margin<\/code>:<\/code>1px<\/code> 2px<\/code>;<\/code><\/div>\n
\/\/\u53f3\u8fb9\u8ddd\u548c\u5de6\u8fb9\u8ddd\u76f8\u540c\uff0c\u7b49\u540c\u4e8e<\/code>margin<\/code>:<\/code>1px<\/code> 2px<\/code> 3px<\/code> 2px<\/code>;<\/code><\/div>\n
margin<\/code>:<\/code>1px<\/code> 2px<\/code> 3px<\/code>;<\/code><\/div>\n
\/\/\u6ce8\u610f\uff0c\u8fd9\u91cc\u867d\u7136\u4e0a\u4e0b\u8fb9\u8ddd\u90fd\u4e3a<\/code>1px<\/code>\uff0c\u4f46\u662f\u8fd9\u91cc\u4e0d\u80fd\u7f29\u5199\u3002<\/code><\/div>\n
margin<\/code>:<\/code>1px<\/code> 2px<\/code> 1px<\/code> 3px<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e8c\u3001\u8fb9\u6846(border)<\/strong><\/p>\n

\u8fb9\u6846\u7684\u5c5e\u6027\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n<\/td>\n
\n
\n
border-width<\/code>:<\/code>1px<\/code>;<\/code><\/div>\n
border-style<\/code>:<\/code>solid<\/code>;<\/code><\/div>\n
border-color<\/code>:<\/code>#000<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u53ef\u4ee5\u7f29\u5199\u4e3a\u4e00\u53e5\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
border<\/code>:<\/code>1px<\/code> solid<\/code> #000<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u8bed\u6cd5 border:width style color;<\/p>\n

\u4e09\u3001\u80cc\u666f(Backgrounds)<\/h4>\n

\u80cc\u666f\u7684\u5c5e\u6027\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
background-color<\/code>:<\/code>#f00<\/code>;<\/code><\/div>\n
background-image<\/code>:<\/code>url<\/code>(background.gif);<\/code><\/div>\n
background-repeat<\/code>:<\/code>no-repeat<\/code>;<\/code><\/div>\n
background-attachment<\/code>:<\/code>fixed<\/code>;<\/code><\/div>\n
background-position<\/code>:<\/code>00<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u53ef\u4ee5\u7f29\u5199\u4e3a\u4e00\u53e5\uff1a<\/p>\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
background<\/code>:<\/code>#f00<\/code> url<\/code>(background.gif) <\/code>no-repeat<\/code> fixed<\/code> 0<\/code> 0<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u8bed\u6cd5\u662fbackground:color image repeat attachment position;
\n\u4f60\u53ef\u4ee5\u7701\u7565\u5176\u4e2d\u4e00\u4e2a\u6216\u591a\u4e2a\u5c5e\u6027\u503c\uff0c\u5982\u679c\u7701\u7565\uff0c\u8be5\u5c5e\u6027\u503c\u5c06\u7528\u6d4f\u89c8\u5668\u9ed8\u8ba4\u503c\uff0c\u9ed8\u8ba4\u503c\u4e3a\uff1a<\/p>\n

    \n
  • color: transparent<\/li>\n
  • image: none<\/li>\n
  • repeat: repeat<\/li>\n
  • attachment: scroll<\/li>\n
  • position: 0% 0%<\/li>\n<\/ul>\n

    \u56db\u3001\u5b57\u4f53(fonts)<\/h4>\n

    \u5b57\u4f53\u7684\u5c5e\u6027\u5982\u4e0b\uff1a<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n<\/td>\n
    		\n
    \n
    font-style<\/code>:<\/code>italic<\/code>;<\/code><\/div>\n
    font-variant<\/code>:<\/code>small-caps<\/code>;<\/code><\/div>\n
    font-weight<\/code>:<\/code>bold<\/code>;<\/code>font-size<\/code>:<\/code>1em<\/code>;<\/code><\/div>\n
    line-height<\/code>:<\/code>140%<\/code>;<\/code><\/div>\n
    font-family<\/code>:<\/code>\"Lucida Grande\"<\/code>,<\/code>sans-serif<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53ef\u4ee5\u7f29\u5199\u4e3a\u4e00\u53e5\uff1a<\/p>\n\n\n\n
    \n
    1<\/div>\n<\/td>\n
    		\n
    \n
    font<\/code>:<\/code>italic<\/code> small-caps<\/code> bold<\/code> 1em<\/code>\/<\/code>140%<\/code>\"Lucida Grande\"<\/code>,<\/code>sans-serif<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u6ce8\u610f\uff0c\u5982\u679c\u4f60\u7f29\u5199\u5b57\u4f53\u5b9a\u4e49\uff0c\u81f3\u5c11\u8981\u5b9a\u4e49font-size\u548cfont-family\u4e24\u4e2a\u503c\u3002<\/p>\n

    \u4e94\u3001\u5217\u8868(lists)<\/h4>\n

    \u53d6\u6d88\u9ed8\u8ba4\u7684\u5706\u70b9\u548c\u5e8f\u53f7\u53ef\u4ee5\u8fd9\u6837\u5199list-style:none;,
    \nlist\u7684\u5c5e\u6027\u5982\u4e0b:<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n<\/td>\n
    		\n
    \n
    list-style-type<\/code>:<\/code>square<\/code>;<\/code><\/div>\n
    list-style-position<\/code>:<\/code>inside<\/code>;<\/code><\/div>\n
    list-style-image<\/code>:<\/code>url<\/code>(image.gif);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53ef\u4ee5\u7f29\u5199\u4e3a\u4e00\u53e5\uff1a<\/p>\n\n\n\n
    \n
    1<\/div>\n<\/td>\n
    		\n
    \n
    list-style<\/code>:<\/code>square<\/code> inside<\/code> url<\/code>(image.gif);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u516d\u3001\u989c\u8272(Color)<\/strong><\/p>\n

    16\u8fdb\u5236\u7684\u8272\u5f69\u503c\uff0c\u5982\u679c\u6bcf\u4e24\u4f4d\u7684\u503c\u76f8\u540c\uff0c\u53ef\u4ee5\u7f29\u5199\u4e00\u534a\u3002\u4f8b\u5982\uff1a<\/p>\n

    Aqua: #00ffff \u2014\u2014#0ff
    \nBlack: #000000 \u2014\u2014#000
    \nBlue: #0000ff \u2014\u2014#00f
    \nDark Grey: #666666 \u2014\u2014#666
    \nFuchsia:#ff00ff \u2014\u2014#f0f
    \nLight Grey: #cccccc \u2014\u2014#ccc
    \nLime: #00ff00 \u2014\u2014#0f0
    \nOrange: #ff6600 \u2014\u2014#f60
    \nRed: #ff0000 \u2014\u2014#f00
    \nWhite: #ffffff \u2014\u2014#fff
    \nYellow: #ffff00 \u2014\u2014#ff0<\/p>\n

    \u4e03\u3001\u5c5e\u6027\u503c\u4e3a0<\/h4>\n

    \u4e66\u5199\u539f\u5219\u662f\u5982\u679cCSS\u5c5e\u6027\u503c\u4e3a0\uff0c\u90a3\u4e48\u4f60\u4e0d\u5fc5\u4e3a\u5176\u6dfb\u52a0\u5355\u4f4d(\u5982:px\/em)\uff0c\u4f60\u53ef\u80fd\u4f1a\u8fd9\u6837\u5199:<\/p>\n\n\n\n
    \n
    1<\/div>\n<\/td>\n
    		\n
    \n
    padding<\/code>:<\/code>10px<\/code> 5px<\/code> 0px<\/code> 0px<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u8bd5\u8bd5\u8fd9\u6837\u5427:<\/p>\n\n\n\n
    \n
    1<\/div>\n<\/td>\n
    		\n
    \n
    padding<\/code>:<\/code>10px<\/code> 5px<\/code> 00<\/code> ;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u516b\u3001\u6700\u540e\u4e00\u4e2a\u5206\u53f7<\/strong><\/p>\n

    \u6700\u540e\u4e00\u4e2a\u5c5e\u6027\u503c\u540e\u9762\u5206\u53f7\u53ef\u4ee5\u4e0d\u5199\uff0c\u5982\uff1a<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n<\/td>\n
    		\n
    \n
    #nav{<\/code><\/div>\n
    border-top<\/code>:<\/code>4px<\/code> solid<\/code> #333<\/code>;<\/code><\/div>\n
    font-style<\/code>: <\/code>normal<\/code>;<\/code><\/div>\n
    font-variant<\/code>:<\/code>normal<\/code>;<\/code><\/div>\n
    font-weight<\/code>: <\/code>normal<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53ef\u4ee5\u7b80\u5199\u6210:<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n<\/td>\n
    		\n
    \n
    #nav{<\/code><\/div>\n
    border-top<\/code>:<\/code>4px<\/code> solid<\/code> #333<\/code>;<\/code><\/div>\n
    font-style<\/code>: <\/code>normal<\/code>;<\/code><\/div>\n
    font-variant<\/code>:<\/code>normal<\/code>;<\/code><\/div>\n
    font-weight<\/code>: <\/code>normal<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u4e5d\u3001\u5b57\u4f53\u7c97\u7ec6(font-weight)<\/strong><\/p>\n

    \u4f60\u53ef\u80fd\u4f1a\u8fd9\u6837\u5199:<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n<\/td>\n
    		\n
    \n
    h<\/code>1<\/code>{<\/code><\/div>\n
    font-weight<\/code>:<\/code>bold<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    p{<\/code><\/div>\n
    font-weight<\/code>:<\/code>normal<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53ef\u4ee5\u7b80\u5199\u6210:<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n<\/td>\n
    		\n
    \n
    h<\/code>1<\/code>{<\/code><\/div>\n
    font-weight<\/code>:<\/code>700<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    p{<\/code><\/div>\n
    font-weight<\/code>:<\/code>400<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u5341\u3001\u5706\u89d2\u534a\u5f84(border-radius)<\/h4>\n

    border-radius\u662fcss3\u4e2d\u65b0\u52a0\u5165\u7684\u5c5e\u6027\uff0c\u7528\u6765\u5b9e\u73b0\u5706\u89d2\u8fb9\u6846\u3002<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n
    7<\/div>\n
    8<\/div>\n
    9<\/div>\n<\/td>\n
    		\n
    \n
    -moz-border-radius-bottomleft:<\/code>6px<\/code>;<\/code><\/div>\n
    -moz-border-radius-topleft:<\/code>6px<\/code>;<\/code><\/div>\n
    -moz-border-radius-topright:<\/code>6px<\/code>;<\/code><\/div>\n
    -webkit-border-bottom-left-radius:<\/code>6px<\/code>;<\/code><\/div>\n
    -webkit-border-top-left-radius:<\/code>6px<\/code>;<\/code><\/div>\n
    -webkit-border-top-right-radius:<\/code>6px<\/code>;<\/code><\/div>\n
    border-bottom-left-radius:<\/code>6px<\/code>;<\/code><\/div>\n
    border-top-left-radius:<\/code>6px<\/code>;<\/code><\/div>\n
    border-top-right-radius:<\/code>6px<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u53ef\u4ee5\u7b80\u5199\u6210:<\/p>\n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n<\/td>\n
    		\n
    \n
    -moz-border-radius:<\/code>6px<\/code> 6px<\/code> 0<\/code>;<\/code><\/div>\n
    -webkit-border-radius:<\/code>6px<\/code> 6px<\/code> 0<\/code>;<\/code><\/div>\n
    border-radius:<\/code>6px<\/code> 6px<\/code> 0<\/code>;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u8bed\u6cd5 border-radius:topleft topright bottomright bottomleft<\/p>\n","protected":false},"excerpt":{"rendered":"

    CSS\u7b80\u5199\u5c31\u662f\u6307\u5c06\u591a\u884c\u7684CSS\u5c5e\u6027\u7b80\u5199\u6210\u4e00\u884c\uff0c\u53c8\u79f0\u4e3aCSS\u4ee3\u7801\u4f18\u5316\u6216CSS\u7f29\u5199\u3002CSS\u7b80\u5199\u7684\u6700\u5927\u597d\u5904\u5c31\u662f\u80fd\u591f\u663e\u8457\u51cf\u5c11CSS\u6587\u4ef6\u7684\u5927\u5c0f\uff0c\u4f18\u5316\u7f51\u7ad9\u6574\u4f53\u6027\u80fd\uff0c\u66f4\u52a0\u5bb9\u6613\u9605\u8bfb\u3002 \u4e0b\u9762\u4ecb\u7ecd\u5e38\u89c1\u7684CSS\u7b80\u5199\u89c4\u5219\uff1a \u4e00\u3001\u76d2\u5b50\u5927\u5c0f \u8fd9\u91cc\u4e3b\u8981\u7528\u4e8e\u4e24\u4e2a\u5c5e\u6027\uff1ama…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1],"tags":[21],"topic":[],"class_list":["post-67457","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-technology","tag-css"],"_links":{"self":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/comments?post=67457"}],"version-history":[{"count":1,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67457\/revisions"}],"predecessor-version":[{"id":67458,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67457\/revisions\/67458"}],"wp:attachment":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/media?parent=67457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/categories?post=67457"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/tags?post=67457"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/topic?post=67457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}