CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="zh" dir="ltr"> <head> <meta charset="UTF-8"> <title>CSS - 维基教科书，自由的教学读本</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )zhwikibooksmwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat": "zh","wgMonthNames":["","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"wgRequestId":"61c9ebf8-e4b8-4a74-88dd-6b1439297519","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"CSS","wgTitle":"CSS","wgCurRevisionId":168510,"wgRevisionId":168510,"wgArticleId":9938,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["含有受损文件链接的页面","需要分割的条目","电脑","CSS"],"wgPageViewLanguage":"zh","wgPageContentLanguage":"zh","wgPageContentModel":"wikitext","wgRelevantPageName":"CSS","wgRelevantArticleId":9938,"wgUserVariant":"zh","wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikibooks","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"zh", "pageLanguageDir":"ltr","pageVariantFallbacks":["zh-hans","zh-hant","zh-cn","zh-tw","zh-hk","zh-sg","zh-mo","zh-my"]},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q46441","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready", "ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.AdvancedSiteNotices","ext.gadget.noteTA","ext.gadget.internalLinkHelper-altcolor","ext.gadget.IRC","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=zh&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=zh&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=zh&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="CSS - 维基教科书，自由的教学读本"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//zh.m.wikibooks.org/wiki/CSS"> <link rel="alternate" type="application/x-wiki" title="编辑" href="/w/index.php?title=CSS&action=edit"> <link rel="icon" href="/static/favicon/wikibooks.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikibooks (zh)"> <link rel="EditURI" type="application/rsd+xml" href="//zh.wikibooks.org/w/api.php?action=rsd"> <link rel="canonical" href="https://zh.wikibooks.org/wiki/CSS"> <link rel="alternate" hreflang="zh" href="https://zh.wikibooks.org/wiki/CSS"> <link rel="alternate" hreflang="zh-Hans" href="https://zh.wikibooks.org/zh-hans/CSS"> <link rel="alternate" hreflang="zh-Hans-CN" href="https://zh.wikibooks.org/zh-cn/CSS"> <link rel="alternate" hreflang="zh-Hans-SG" href="https://zh.wikibooks.org/zh-sg/CSS"> <link rel="alternate" hreflang="zh-Hant" href="https://zh.wikibooks.org/zh-hant/CSS"> <link rel="alternate" hreflang="zh-Hant-HK" href="https://zh.wikibooks.org/zh-hk/CSS"> <link rel="alternate" hreflang="zh-Hant-TW" href="https://zh.wikibooks.org/zh-tw/CSS"> <link rel="alternate" hreflang="x-default" href="https://zh.wikibooks.org/wiki/CSS"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh"> <link rel="alternate" type="application/atom+xml" title="Wikibooks的Atom feed" href="/w/index.php?title=Special:%E6%9C%80%E8%BF%91%E6%9B%B4%E6%94%B9&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-CSS rootpage-CSS skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">跳转到内容</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="站点"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="主菜单" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">主菜单</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">主菜单</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">移至侧栏</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">隐藏</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> 导航 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpagedisplay" class="mw-list-item"><a href="/wiki/Wikibooks:%E9%A6%96%E9%A1%B5"><span>首页</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikibooks:%E7%A4%BE%E5%8C%BA%E4%B8%BB%E9%A1%B5" title="关于本计划，您可做的事，何处找到您所需"><span>社群首页</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:%E6%9C%80%E8%BF%91%E6%9B%B4%E6%94%B9" title="本wiki的最近更改列表[r]" accesskey="r"><span>最近更改</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2" title="随机加载页面[x]" accesskey="x"><span>随机页面</span></a></li><li id="n-wikilibrary" class="mw-list-item"><a href="/wiki/Subject:%E7%B4%A2%E5%BC%95"><span>图书馆</span></a></li><li id="n-wikijunior" class="mw-list-item"><a href="/wiki/Wikijunior:%E7%B6%AD%E5%9F%BA%E5%85%92%E7%AB%A5"><span>维基儿童</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikibooks:%E4%B8%8A%E4%BC%A0"><span>上传文件</span></a></li> </ul> </div> </div> <div id="p-help" class="vector-menu mw-portlet mw-portlet-help" > <div class="vector-menu-heading"> 帮助 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:%E7%9B%AE%E5%BD%95" title="查找帮助的地方"><span>帮助</span></a></li><li id="n-villagepump" class="mw-list-item"><a href="/wiki/Wikibooks:%E4%BA%92%E5%8A%A9%E5%AE%A2%E6%A3%A7"><span>互助客栈</span></a></li><li id="n-policy" class="mw-list-item"><a href="/wiki/Wikibooks:%E6%96%B9%E9%87%9D%E8%88%87%E6%8C%87%E5%BC%95"><span>方针与指引</span></a></li><li id="n-conversion" class="mw-list-item"><a href="/wiki/Wikibooks:%E5%AD%97%E8%AF%8D%E8%BD%AC%E6%8D%A2%E8%AF%B7%E6%B1%82%E6%88%96%E5%80%99%E9%80%89"><span>字词转换</span></a></li><li id="n-allpages" class="mw-list-item"><a href="/wiki/Special:%E6%89%80%E6%9C%89%E9%A1%B5%E9%9D%A2"><span>所有页面</span></a></li><li id="n-IRC" class="mw-list-item"><a href="/wiki/Wikibooks:IRC%E8%81%8A%E5%A4%A9%E9%A0%BB%E9%81%93"><span>IRC即時聊天</span></a></li><li id="n-contact" class="mw-list-item"><a href="/wiki/Wikibooks:%E8%81%94%E7%BB%9C%E6%88%91%E4%BB%AC"><span>联络我们</span></a></li><li id="n-about" class="mw-list-item"><a href="/wiki/Wikibooks:%E5%85%B3%E4%BA%8E"><span>关于维基教科书</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Wikibooks:%E9%A6%96%E9%A1%B5" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikibooks.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="维基教科书" src="/static/images/mobile/copyright/wikibooks-wordmark-zh.svg" style="width: 7.5em; height: 1.375em;"> <img class="mw-logo-tagline" alt="" src="/static/images/mobile/copyright/wikibooks-tagline-zh.svg" width="120" height="12" style="width: 7.5em; height: 0.75em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:%E6%90%9C%E7%B4%A2" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="搜索Wikibooks内容[f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>搜索</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="搜索维基教科书" aria-label="搜索维基教科书" autocapitalize="sentences" title="搜索Wikibooks内容[f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:搜索"> </div> <button class="cdx-button cdx-search-input__end-button">搜索</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="个人工具"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="外观"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="更改页面字体大小、宽度和颜色的外观" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="外观" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">外观</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_zh.wikibooks.org&uselang=zh" class=""><span>资助我们</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:%E5%88%9B%E5%BB%BA%E8%B4%A6%E6%88%B7&returnto=CSS" title="我们推荐您创建账号并登录，但这不是强制性的" class=""><span>创建账号</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95&returnto=CSS" title="我们推荐您登录，但这不是强制性的[o]" accesskey="o" class=""><span>登录</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="更多选项" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="个人工具" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">个人工具</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="用户菜单" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_zh.wikibooks.org&uselang=zh"><span>资助我们</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:%E5%88%9B%E5%BB%BA%E8%B4%A6%E6%88%B7&returnto=CSS" title="我们推荐您创建账号并登录，但这不是强制性的"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>创建账号</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95&returnto=CSS" title="我们推荐您登录，但这不是强制性的[o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>登录</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> 未登录编辑者的页面 <a href="/wiki/Help:%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" aria-label="了解有关编辑的更多信息"><span>了解详情</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:%E6%88%91%E7%9A%84%E8%B4%A1%E7%8C%AE" title="来自此IP地址的编辑列表[y]" accesskey="y"><span>贡献</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:%E6%88%91%E7%9A%84%E8%AE%A8%E8%AE%BA%E9%A1%B5" title="有关本IP地址编辑的讨论[n]" accesskey="n"><span>讨论</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="站点"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="目录" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">目录</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">移至侧栏</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">隐藏</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">序言</div> </a> </li> <li id="toc-狀態" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#狀態"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>狀態</span> </div> </a> <ul id="toc-狀態-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-本書的內容" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#本書的內容"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>本書的內容</span> </div> </a> <ul id="toc-本書的內容-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-先統一辭彙" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#先統一辭彙"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>先統一辭彙</span> </div> </a> <ul id="toc-先統一辭彙-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-前言：一個網頁的構成" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#前言：一個網頁的構成"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>前言：一個網頁的構成</span> </div> </a> <button aria-controls="toc-前言：一個網頁的構成-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>开关前言：一個網頁的構成子章节</span> </button> <ul id="toc-前言：一個網頁的構成-sublist" class="vector-toc-list"> <li id="toc-概述" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#概述"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>概述</span> </div> </a> <ul id="toc-概述-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-不同性質的內容" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#不同性質的內容"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>不同性質的內容</span> </div> </a> <ul id="toc-不同性質的內容-sublist" class="vector-toc-list"> <li id="toc-從瀏覽器看到的成品" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#從瀏覽器看到的成品"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.1</span> <span>從瀏覽器看到的成品</span> </div> </a> <ul id="toc-從瀏覽器看到的成品-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-反觀網頁原始碼" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#反觀網頁原始碼"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.2</span> <span>反觀網頁原始碼</span> </div> </a> <ul id="toc-反觀網頁原始碼-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-其他" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#其他"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.3</span> <span>其他</span> </div> </a> <ul id="toc-其他-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-HTML_與_CSS_的分工" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#HTML_與_CSS_的分工"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>HTML 與 CSS 的分工</span> </div> </a> <ul id="toc-HTML_與_CSS_的分工-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-HTML_簡單介紹（A_Brief_of_HTML）" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#HTML_簡單介紹（A_Brief_of_HTML）"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>HTML 簡單介紹（A Brief of HTML）</span> </div> </a> <button aria-controls="toc-HTML_簡單介紹（A_Brief_of_HTML）-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>开关HTML 簡單介紹（A Brief of HTML）子章节</span> </button> <ul id="toc-HTML_簡單介紹（A_Brief_of_HTML）-sublist" class="vector-toc-list"> <li id="toc-標籤與元素_(Tags_and_Elements)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#標籤與元素_(Tags_and_Elements)"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span> <span>標籤與元素 (Tags and Elements)</span> </div> </a> <ul id="toc-標籤與元素_(Tags_and_Elements)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-屬性_(Attribute)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#屬性_(Attribute)"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span> <span>屬性 (Attribute)</span> </div> </a> <ul id="toc-屬性_(Attribute)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-區塊標籤（Block-level_Tags）與同軸標籤（Inline_Tags）" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#區塊標籤（Block-level_Tags）與同軸標籤（Inline_Tags）"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.3</span> <span>區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）</span> </div> </a> <ul id="toc-區塊標籤（Block-level_Tags）與同軸標籤（Inline_Tags）-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-格式化表單的位置(Where_to_place_Style_Sheet?)" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#格式化表單的位置(Where_to_place_Style_Sheet?)"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>格式化表單的位置(Where to place Style Sheet?)</span> </div> </a> <button aria-controls="toc-格式化表單的位置(Where_to_place_Style_Sheet?)-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>开关格式化表單的位置(Where to place Style Sheet?)子章节</span> </button> <ul id="toc-格式化表單的位置(Where_to_place_Style_Sheet?)-sublist" class="vector-toc-list"> <li id="toc-內部格式化表單(Internal_Style_Sheet)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#內部格式化表單(Internal_Style_Sheet)"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.1</span> <span>內部格式化表單(Internal Style Sheet)</span> </div> </a> <ul id="toc-內部格式化表單(Internal_Style_Sheet)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-外部格式化表單(External_Style_Sheet)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#外部格式化表單(External_Style_Sheet)"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2</span> <span>外部格式化表單(External Style Sheet)</span> </div> </a> <ul id="toc-外部格式化表單(External_Style_Sheet)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-内联样式表_(Inline_Style_Sheet)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#内联样式表_(Inline_Style_Sheet)"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.3</span> <span>内联样式表 (Inline Style Sheet)</span> </div> </a> <ul id="toc-内联样式表_(Inline_Style_Sheet)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-CSS结构" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#CSS结构"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>CSS结构</span> </div> </a> <button aria-controls="toc-CSS结构-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>开关CSS结构子章节</span> </button> <ul id="toc-CSS结构-sublist" class="vector-toc-list"> <li id="toc-语法" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#语法"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span> <span>语法</span> </div> </a> <ul id="toc-语法-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-規則(Rules)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#規則(Rules)"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.2</span> <span>規則(Rules)</span> </div> </a> <ul id="toc-規則(Rules)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-长度和单位" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#长度和单位"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.3</span> <span>长度和单位</span> </div> </a> <ul id="toc-长度和单位-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-選取項(Selector)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#選取項(Selector)"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.4</span> <span>選取項(Selector)</span> </div> </a> <ul id="toc-選取項(Selector)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-繼承的問題(Inheritance)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#繼承的問題(Inheritance)"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.5</span> <span>繼承的問題(Inheritance)</span> </div> </a> <ul id="toc-繼承的問題(Inheritance)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-关键字Important" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#关键字Important"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.6</span> <span>关键字Important</span> </div> </a> <ul id="toc-关键字Important-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-註解符號_(Commenting)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#註解符號_(Commenting)"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.7</span> <span>註解符號 (Commenting)</span> </div> </a> <ul id="toc-註解符號_(Commenting)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-樣式的優先順序(Priority_rules)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#樣式的優先順序(Priority_rules)"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.8</span> <span>樣式的優先順序(Priority rules)</span> </div> </a> <ul id="toc-樣式的優先順序(Priority_rules)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-瀏覽器如何工作？(_How_browsers_work?)" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#瀏覽器如何工作？(_How_browsers_work?)"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>瀏覽器如何工作？( How browsers work?)</span> </div> </a> <ul id="toc-瀏覽器如何工作？(_How_browsers_work?)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-方框的基本介紹_(Introduce_to_Box)" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#方框的基本介紹_(Introduce_to_Box)"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>方框的基本介紹 (Introduce to Box)</span> </div> </a> <ul id="toc-方框的基本介紹_(Introduce_to_Box)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-幾個特別的性質(properties)" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#幾個特別的性質(properties)"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span> <span>幾個特別的性質(properties)</span> </div> </a> <ul id="toc-幾個特別的性質(properties)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-注意" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#注意"> <div class="vector-toc-text"> <span class="vector-toc-numb">11</span> <span>注意</span> </div> </a> <ul id="toc-注意-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-參考資料" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#參考資料"> <div class="vector-toc-text"> <span class="vector-toc-numb">12</span> <span>參考資料</span> </div> </a> <button aria-controls="toc-參考資料-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>开关參考資料子章节</span> </button> <ul id="toc-參考資料-sublist" class="vector-toc-list"> <li id="toc-文内引用" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#文内引用"> <div class="vector-toc-text"> <span class="vector-toc-numb">12.1</span> <span>文内引用</span> </div> </a> <ul id="toc-文内引用-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-补充来源" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#补充来源"> <div class="vector-toc-text"> <span class="vector-toc-numb">12.2</span> <span>补充来源</span> </div> </a> <ul id="toc-补充来源-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-其它资料" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#其它资料"> <div class="vector-toc-text"> <span class="vector-toc-numb">12.3</span> <span>其它资料</span> </div> </a> <ul id="toc-其它资料-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="目录" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="开关目录" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">开关目录</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">CSS</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="前往另一种语言写成的文章。22种语言可用" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-22" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">22种语言</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikibooks.org/wiki/%D8%A8%D8%B1%D9%85%D8%AC%D8%A9_%D8%B3%D9%8A_%D8%A7%D8%B3_%D8%A7%D8%B3" title="برمجة سي اس اس – 阿拉伯语" lang="ar" hreflang="ar" data-title="برمجة سي اس اس" data-language-autonym="العربية" data-language-local-name="阿拉伯语" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikibooks.org/wiki/CSS" title="CSS – 阿塞拜疆语" lang="az" hreflang="az" data-title="CSS" data-language-autonym="Azərbaycanca" data-language-local-name="阿塞拜疆语" class="interlanguage-link-target"><span>Azərbaycanca</span></a></li><li class="interlanguage-link interwiki-bn mw-list-item"><a href="https://bn.wikibooks.org/wiki/%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8" title="সিএসএস – 孟加拉语" lang="bn" hreflang="bn" data-title="সিএসএস" data-language-autonym="বাংলা" data-language-local-name="孟加拉语" class="interlanguage-link-target"><span>বাংলা</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikibooks.org/wiki/Websiteentwicklung:_CSS" title="Websiteentwicklung: CSS – 德语" lang="de" hreflang="de" data-title="Websiteentwicklung: CSS" data-language-autonym="Deutsch" data-language-local-name="德语" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-en mw-list-item"><a href="https://en.wikibooks.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets – 英语" lang="en" hreflang="en" data-title="Cascading Style Sheets" data-language-autonym="English" data-language-local-name="英语" class="interlanguage-link-target"><span>English</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikibooks.org/wiki/Hojas_de_estilo_CSS" title="Hojas de estilo CSS – 西班牙语" lang="es" hreflang="es" data-title="Hojas de estilo CSS" data-language-autonym="Español" data-language-local-name="西班牙语" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikibooks.org/wiki/CSS" title="CSS – 爱沙尼亚语" lang="et" hreflang="et" data-title="CSS" data-language-autonym="Eesti" data-language-local-name="爱沙尼亚语" class="interlanguage-link-target"><span>Eesti</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikibooks.org/wiki/Le_langage_CSS" title="Le langage CSS – 法语" lang="fr" hreflang="fr" data-title="Le langage CSS" data-language-autonym="Français" data-language-local-name="法语" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-gl mw-list-item"><a href="https://gl.wikibooks.org/wiki/CSS" title="CSS – 加利西亚语" lang="gl" hreflang="gl" data-title="CSS" data-language-autonym="Galego" data-language-local-name="加利西亚语" class="interlanguage-link-target"><span>Galego</span></a></li><li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikibooks.org/wiki/CSS" title="CSS – 希伯来语" lang="he" hreflang="he" data-title="CSS" data-language-autonym="עברית" data-language-local-name="希伯来语" class="interlanguage-link-target"><span>עברית</span></a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikibooks.org/wiki/Pemrograman_CSS" title="Pemrograman CSS – 印度尼西亚语" lang="id" hreflang="id" data-title="Pemrograman CSS" data-language-autonym="Bahasa Indonesia" data-language-local-name="印度尼西亚语" class="interlanguage-link-target"><span>Bahasa Indonesia</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikibooks.org/wiki/CSS" title="CSS – 意大利语" lang="it" hreflang="it" data-title="CSS" data-language-autonym="Italiano" data-language-local-name="意大利语" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikibooks.org/wiki/CSS" title="CSS – 日语" lang="ja" hreflang="ja" data-title="CSS" data-language-autonym="日本語" data-language-local-name="日语" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-ka mw-list-item"><a href="https://ka.wikibooks.org/wiki/CSS" title="CSS – 格鲁吉亚语" lang="ka" hreflang="ka" data-title="CSS" data-language-autonym="ქართული" data-language-local-name="格鲁吉亚语" class="interlanguage-link-target"><span>ქართული</span></a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikibooks.org/wiki/Lembaran_Gaya_Lata" title="Lembaran Gaya Lata – 马来语" lang="ms" hreflang="ms" data-title="Lembaran Gaya Lata" data-language-autonym="Bahasa Melayu" data-language-local-name="马来语" class="interlanguage-link-target"><span>Bahasa Melayu</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikibooks.org/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets – 荷兰语" lang="nl" hreflang="nl" data-title="Cascading Style Sheets" data-language-autonym="Nederlands" data-language-local-name="荷兰语" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikibooks.org/wiki/CSS" title="CSS – 挪威语" lang="no" hreflang="no" data-title="CSS" data-language-autonym="Norsk" data-language-local-name="挪威语" class="interlanguage-link-target"><span>Norsk</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikibooks.org/wiki/CSS" title="CSS – 波兰语" lang="pl" hreflang="pl" data-title="CSS" data-language-autonym="Polski" data-language-local-name="波兰语" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikibooks.org/wiki/CSS" title="CSS – 俄语" lang="ru" hreflang="ru" data-title="CSS" data-language-autonym="Русский" data-language-local-name="俄语" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikibooks.org/wiki/CSS" title="CSS – 瑞典语" lang="sv" hreflang="sv" data-title="CSS" data-language-autonym="Svenska" data-language-local-name="瑞典语" class="interlanguage-link-target"><span>Svenska</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikibooks.org/wiki/CSS" title="CSS – 土耳其语" lang="tr" hreflang="tr" data-title="CSS" data-language-autonym="Türkçe" data-language-local-name="土耳其语" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikibooks.org/wiki/CSS" title="CSS – 乌克兰语" lang="uk" hreflang="uk" data-title="CSS" data-language-autonym="Українська" data-language-local-name="乌克兰语" class="interlanguage-link-target"><span>Українська</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q46441#sitelinks-wikibooks" title="编辑跨语言链接" class="wbc-editpage">编辑链接</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="命名空间"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/CSS" title="查看内容页面[c]" accesskey="c"><span>页面</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:CSS" rel="discussion" title="有关内容页面的讨论[t]" accesskey="t"><span>讨论</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown " > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="更改语言变体" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">不转换</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-varlang-0" class="selected ca-variants-zh mw-list-item"><a href="/zh/CSS" lang="zh" hreflang="zh"><span>不转换</span></a></li><li id="ca-varlang-1" class="ca-variants-zh-Hans mw-list-item"><a href="/zh-hans/CSS" lang="zh-Hans" hreflang="zh-Hans"><span>简体</span></a></li><li id="ca-varlang-2" class="ca-variants-zh-Hant mw-list-item"><a href="/zh-hant/CSS" lang="zh-Hant" hreflang="zh-Hant"><span>繁體</span></a></li><li id="ca-varlang-3" class="ca-variants-zh-Hans-CN mw-list-item"><a href="/zh-cn/CSS" lang="zh-Hans-CN" hreflang="zh-Hans-CN"><span>大陆简体</span></a></li><li id="ca-varlang-4" class="ca-variants-zh-Hant-HK mw-list-item"><a href="/zh-hk/CSS" lang="zh-Hant-HK" hreflang="zh-Hant-HK"><span>港澳繁體</span></a></li><li id="ca-varlang-5" class="ca-variants-zh-Hans-SG mw-list-item"><a href="/zh-sg/CSS" lang="zh-Hans-SG" hreflang="zh-Hans-SG"><span>马新简体</span></a></li><li id="ca-varlang-6" class="ca-variants-zh-Hant-TW mw-list-item"><a href="/zh-tw/CSS" lang="zh-Hant-TW" hreflang="zh-Hant-TW"><span>臺灣正體</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="查看"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/CSS"><span>阅读</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=CSS&action=edit" title="编辑该页面[e]" accesskey="e"><span>编辑</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=CSS&action=history" title="该页面过去的修订[h]" accesskey="h"><span>查看历史</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="页面工具"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="工具" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">工具</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">工具</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">移至侧栏</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">隐藏</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="更多选项" > <div class="vector-menu-heading"> 操作 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/CSS"><span>阅读</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=CSS&action=edit" title="编辑该页面[e]" accesskey="e"><span>编辑</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=CSS&action=history"><span>查看历史</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> 常规 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:%E9%93%BE%E5%85%A5%E9%A1%B5%E9%9D%A2/CSS" title="所有链接至本页面的wiki页面列表[j]" accesskey="j"><span>链入页面</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:%E9%93%BE%E5%87%BA%E6%9B%B4%E6%94%B9/CSS" rel="nofollow" title="链自本页的页面的最近更改[k]" accesskey="k"><span>相关更改</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:%E7%89%B9%E6%AE%8A%E9%A1%B5%E9%9D%A2" title="所有特殊页面的列表[q]" accesskey="q"><span>特殊页面</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=CSS&oldid=168510" title="此页面该修订版本的固定链接"><span>固定链接</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=CSS&action=info" title="关于此页面的更多信息"><span>页面信息</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:%E5%BC%95%E7%94%A8%E6%AD%A4%E9%A1%B5%E9%9D%A2&page=CSS&id=168510&wpFormIdentifier=titleform" title="有关如何引用此页面的信息"><span>引用此页</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:URL%E7%BC%A9%E7%9F%AD%E7%A8%8B%E5%BA%8F&url=https%3A%2F%2Fzh.wikibooks.org%2Fwiki%2FCSS"><span>获取短链接</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fzh.wikibooks.org%2Fwiki%2FCSS"><span>下载二维码</span></a></li> </ul> </div> </div> <div id="p-electronpdfservice-sidebar-portlet-heading" class="vector-menu mw-portlet mw-portlet-electronpdfservice-sidebar-portlet-heading" > <div class="vector-menu-heading"> 打印/导出 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="electron-print_pdf" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=CSS&action=show-download-screen"><span>下载为PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="本页面的可打印版本[p]" accesskey="p"><span>打印版本</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> 在其他项目中 </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets" hreflang="en"><span>维基共享资源</span></a></li><li class="wb-otherproject-link wb-otherproject-mediawiki mw-list-item"><a href="https://www.mediawiki.org/wiki/Manual:CSS" hreflang="en"><span>MediaWiki</span></a></li><li class="wb-otherproject-link wb-otherproject-wikipedia mw-list-item"><a href="https://zh.wikipedia.org/wiki/CSS" hreflang="zh"><span>维基百科</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q46441" title="链接到连接的数据仓库项目[g]" accesskey="g"><span>维基数据项目</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="页面工具"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="外观"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">外观</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">移至侧栏</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">隐藏</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> <div id="mw-indicator-noteTA-652fc7e2" class="mw-indicator"><div class="mw-parser-output"><span typeof="mw:File"><span title="本页使用了标题或全文手工转换"><img alt="本页使用了标题或全文手工转换" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Zh_conversion_icon_m.svg/35px-Zh_conversion_icon_m.svg.png" decoding="async" width="35" height="22" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Zh_conversion_icon_m.svg/53px-Zh_conversion_icon_m.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Zh_conversion_icon_m.svg/70px-Zh_conversion_icon_m.svg.png 2x" data-file-width="32" data-file-height="20" /></span></span></div></div> </div> <div id="siteSub" class="noprint">维基教科书，自由的教学读本</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="zh" dir="ltr"><table class="metadata plainlinks ambox ambox-notice" role="presentation"><tbody><tr><td class="mbox-image"><div style="width:52px"><span typeof="mw:File"><a href="/wiki/File:Split-arrows.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Split-arrows.svg/50px-Split-arrows.svg.png" decoding="async" width="50" height="17" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Split-arrows.svg/75px-Split-arrows.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Split-arrows.svg/100px-Split-arrows.svg.png 2x" data-file-width="60" data-file-height="20" /></a></span></div></td><td class="mbox-text"><span class="mbox-text-span">此條目被建議分割為若干不同條目。（<a href="/wiki/Talk:CSS" title="Talk:CSS">討論</a>）<span class="hide-when-compact"></span><span class="hide-when-compact"></span></span></td></tr></tbody></table> <div id="noteTA-652fc7e2" class="noteTA"><div class="noteTA-local"><div data-noteta-code="zh-cn:块状元素; zh-tw:區塊標籤;"></div><div data-noteta-code="zh-cn:内联元素; zh-tw:同軸標籤;"></div></div></div> <table class="metadata plainlinks ambox ambox-notice" role="presentation"><tbody><tr><td class="mbox-image"><div style="width:52px"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_wide.svg/40px-No_image_wide.svg.png" decoding="async" width="40" height="5" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_wide.svg/60px-No_image_wide.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_wide.svg/80px-No_image_wide.svg.png 2x" data-file-width="8" data-file-height="1" /></span></span></div></td><td class="mbox-text"><span class="mbox-text-span">本页面存在草稿子页面<a href="/wiki/CSS/%E8%8D%89%E7%A8%BF" title="CSS/草稿">CSS/草稿</a>。<span class="hide-when-compact"></span><span class="hide-when-compact"></span></span></td></tr></tbody></table> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="狀態"><span id=".E7.8B.80.E6.85.8B"></span>狀態</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=1" title="编辑章节：狀態"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>備忘錄：正在寫書本的大綱階段。 </p> <div class="mw-heading mw-heading2"><h2 id="本書的內容"><span id=".E6.9C.AC.E6.9B.B8.E7.9A.84.E5.85.A7.E5.AE.B9"></span>本書的內容</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=2" title="编辑章节：本書的內容"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>這本書唯一的主題就是 <a href="https://en.wikipedia.org/wiki/CSS" class="extiw" title="wikipedia:CSS">CSS</a>，因此，這本書不會告訴你 CSS 的歷史，也不會著墨於 CSS 的好處與優點，因為在網路上已經有很豐富的資料。然而我鼓勵讀者若是時間許可，應該花些時間了解為什麼網頁技術怎麼從 <a href="https://en.wikipedia.org/wiki/HTML" class="extiw" title="wikipedia:HTML">HTML</a> 開始，後來衍生出 CSS，而最後又冒出 <a href="https://en.wikipedia.org/wiki/XHTML" class="extiw" title="wikipedia:XHTML">XHTML</a> 。關於 CSS 的歷史，你可參考 <a rel="nofollow" class="external text" href="http://virtuelvis.com/archives/2005/01/css-history">Who created CSS? CSS Early History</a>，至於 CSS 的好處與優點，用了你就會了解。 </p><p>雖然我會在適當的地方加入參考資料或是連結，但是基本上，沒有閱讀這些參考資料與連結並不會影響你學習 CSS。因此，除了自己動手作停下來之外，盡量別讓其他的事情中斷你的閱讀。 </p><p>CSS 3 增加了对圆角<sup id="cite_ref-莫振杰_进阶_p172_1-0" class="reference"><a href="#cite_note-莫振杰_进阶_p172-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>、阴影的直接支持，有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦，需要自己提前制作好图片，无法仅借助CSS直接实现<sup id="cite_ref-莫振杰_进阶_p172_1-1" class="reference"><a href="#cite_note-莫振杰_进阶_p172-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>。 </p> <div class="mw-heading mw-heading2"><h2 id="先統一辭彙"><span id=".E5.85.88.E7.B5.B1.E4.B8.80.E8.BE.AD.E5.BD.99"></span>先統一辭彙</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=3" title="编辑章节：先統一辭彙"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Cascading Style Sheet (CSS) 的中文翻譯一直沒有定調，有人稱他為「层叠样式表」，也有稱「串接樣式表」，我想，我在這裡不為 CSS 的中文譯名正名，往後的文章中，中文一律用「樣式表」來稱呼 CSS，不過我寧可多用英文，以免造成誤解。 </p><p>還有一個重要的詞彙「selector」，中文有「選擇器」與「選取項」兩種翻譯，本書我採用後者。 </p> <div class="mw-heading mw-heading2"><h2 id="前言：一個網頁的構成"><span id=".E5.89.8D.E8.A8.80.EF.BC.9A.E4.B8.80.E5.80.8B.E7.B6.B2.E9.A0.81.E7.9A.84.E6.A7.8B.E6.88.90"></span>前言：一個網頁的構成</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=4" title="编辑章节：前言：一個網頁的構成"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>底下的說明，對於任何數位的文件來說，都會成立，但是我仍然將數位文件侷限在網頁這個範圍，這樣會讓問題單純一些。 </p><p>從產生（或是製作）的過程來看，網頁可以區分為： </p> <ol><li>內容（contents）</li> <li>呈現（presentation）</li></ol> <p>兩大元素。簡單的說，我們會依照不同的重要性、不同的性質（屬性）與意圖，將網頁的內容結構化，之後，再依據這個架構，給予各個部份合適的呈現方式。這就是我們最後看到的網頁。 </p> <div class="mw-heading mw-heading3"><h3 id="概述"><span id=".E6.A6.82.E8.BF.B0"></span>概述</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=5" title="编辑章节：概述"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="不同性質的內容"><span id=".E4.B8.8D.E5.90.8C.E6.80.A7.E8.B3.AA.E7.9A.84.E5.85.A7.E5.AE.B9"></span>不同性質的內容</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=6" title="编辑章节：不同性質的內容"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>我們先試著從不同的角度來看一分網頁，先從瀏覽器呈現出來的畫面，再到原始碼，最後看看有沒有什麼遺漏的內容。 </p> <div class="mw-heading mw-heading4"><h4 id="從瀏覽器看到的成品"><span id=".E5.BE.9E.E7.80.8F.E8.A6.BD.E5.99.A8.E7.9C.8B.E5.88.B0.E7.9A.84.E6.88.90.E5.93.81"></span>從瀏覽器看到的成品</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=7" title="编辑章节：從瀏覽器看到的成品"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>大家可以回想一下你曾經看過或是作過的網頁，從瀏覽器前端看得到的組成元素不外乎底下的幾個要素： </p> <dl><dt>標題（heading）</dt> <dd>網頁的第一級標題、第二級標題、第三級 ... 標題。</dd> <dt>段落（paragraph）</dt> <dd>指的是一段意義完整的圖、文。</dd> <dt>表格（table）</dt> <dd>例如價目表、行事曆等等，由行、列組成的資料。</dd> <dt>清單（list）</dt> <dd>有序的清單、無序清單與定義式清單。</dd> <dt>圖片（image）</dt> <dd>各種可以被瀏覽器讀取的格式的圖檔。</dd> <dt>超連結（hyperlink）</dt> <dd>超連結是網頁有別於一般文件的一個很重大的分野，因此，我也把它當作是網頁的一個要素。</dd> <dt>表單（form）</dt> <dd>有按鈕、單選選項（raido）、複選選項（check box）、輸入欄位（text field）、輸入文字區塊（text area）等等。</dd> <dt>多媒體（multimedia）</dt> <dd>影片、音樂或是 flash。</dd></dl> <div class="mw-heading mw-heading4"><h4 id="反觀網頁原始碼"><span id=".E5.8F.8D.E8.A7.80.E7.B6.B2.E9.A0.81.E5.8E.9F.E5.A7.8B.E7.A2.BC"></span>反觀網頁原始碼</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=8" title="编辑章节：反觀網頁原始碼"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>若是你熟悉原始碼，上面我提到的每一個要素，你一定可以立刻對應到某個 HTML 的標籤（tag），但是在原始碼裡面，你會發現更多東西，例如： </p> <ul><li>Javascript</li> <li>meta 標籤</li> <li>style 標籤</li> <li>...</li></ul> <p>事實上，在原始碼裡面，我們還要提供許多很關鍵的資訊給瀏覽器或是搜尋引擎，這些資訊並不會呈現在使用者眼前，但是卻與網頁的呈現正確與否息息相關。這些資訊包括：利用 meta 標籤告訴瀏覽器你的網頁所使用的編碼，例如： </p> <pre><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </pre> <div class="mw-heading mw-heading4"><h4 id="其他"><span id=".E5.85.B6.E4.BB.96"></span>其他</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=9" title="编辑章节：其他"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>若是你細心一點，你一定會發現，一個網頁所包含的元素裡面，我們漏提了許多的東西，例如： </p> <dl><dt>關於整個版面的</dt></dl> <ul><li>前景、背景顏色</li> <li>邊界</li> <li>間距</li></ul> <dl><dt>關於字體的</dt></dl> <ul><li>字型、字級與顏色</li> <li>行高</li></ul> <div class="mw-heading mw-heading3"><h3 id="HTML_與_CSS_的分工"><span id="HTML_.E8.88.87_CSS_.E7.9A.84.E5.88.86.E5.B7.A5"></span>HTML 與 CSS 的分工</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=10" title="编辑章节：HTML 與 CSS 的分工"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>談到這裡，我想你一定感覺到了，原來所謂的「標記語言（markup language）」確實是要替文件的內容加上註記，讓一個文件的結構清晰、層次分明。熟悉 HTML 的人會說，HTML 的標籤裡面還是有一些用來作格式化（也就是定義呈現方式）的標籤，如：<b>、<i>，但是，總體來說，HTML 最大的用途乃是用來描述文件的架構，讓文件本身在結構上具有意義，甚至更進一步的讓文件具有語義。 </p><p>至於樣式表的角色呢？它是用來告訴瀏覽器，如何裝扮每一個 HTML 標籤所標示的內容。所以，任何談到樣式表與 HTML 的文章都會說：「藉由 CSS，我們讓文件的內容與呈現可以分離。」沒錯，這就是學習 CSS 的目的，你應該開始想像，在不更動任何 HTML 原始碼的狀況下，藉由修改樣式表，你的網頁將呈現各種風格迥異的面貌。 </p> <div class="mw-heading mw-heading2"><h2 id="HTML_簡單介紹（A_Brief_of_HTML）"><span id="HTML_.E7.B0.A1.E5.96.AE.E4.BB.8B.E7.B4.B9.EF.BC.88A_Brief_of_HTML.EF.BC.89"></span>HTML 簡單介紹（A Brief of HTML）</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=11" title="编辑章节：HTML 簡單介紹（A Brief of HTML）"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>在真正提到 CSS 之前，弄清楚下列幾個 HTML 的基本觀念，可以讓你更快掌握 CSS，也可以幫助你將來比較容易閱讀其他相關文件，另外，用合適的術語表達概念，有助於與其他設計師的溝通。 </p> <div class="mw-heading mw-heading3"><h3 id="標籤與元素_(Tags_and_Elements)"><span id=".E6.A8.99.E7.B1.A4.E8.88.87.E5.85.83.E7.B4.A0_.28Tags_and_Elements.29"></span>標籤與元素 (Tags and Elements)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=12" title="编辑章节：標籤與元素 (Tags and Elements)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:Error mw:File/Thumb"><a href="/w/index.php?title=Special:%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6&wpDestFile=Tag-n-element.png" class="new" title="File:Tag-n-element.png"><span class="mw-file-element mw-broken-media" data-width="180">File:Tag-n-element.png</span></a><figcaption>標籤與元素</figcaption></figure> <dl><dt>標籤（tag）</dt></dl> <ul><li>介於左右三角括弧 (angled brackets) 的文字，如：<body></li> <li>通常標籤是成對的，分別成為「起始標籤（opening tag）」與「結束標籤（closing tag）」，我們將內容在兩個標籤之中。</li> <li>一般而言，標籤用來告訴瀏覽器採取什麼處理方式：起始標籤告訴瀏覽器開始某個處理方式，結束標籤告訴瀏覽器終止該處理方式。</li></ul> <dl><dt>元素 (elements)</dt></dl> <ul><li>由起始標籤、結束標籤和其間的內容所構成，例如：<b><b>This is bold text</b></b></li></ul> <div class="mw-heading mw-heading3"><h3 id="屬性_(Attribute)"><span id=".E5.B1.AC.E6.80.A7_.28Attribute.29"></span>屬性 (Attribute)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=13" title="编辑章节：屬性 (Attribute)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>我們以實際的例子來說明： </p> <pre><img src="images/foo.gif" alt="範例" width="100" height="50" /> </pre> <p>這是一個 img 標籤，在原始碼中，標示這裡要放入一張圖，圖片來源（source, src）是 image/foo.gif 這個檔案，萬一圖片無法顯示時，替代的（alternative, alt）文字是 "範例"，而這張圖的寬度（width）是 100 像素（pixels），高度（height）是 50 像素。 </p><p>我們稱呼： </p> <ul><li>src</li> <li>alt</li> <li>width</li> <li>height</li></ul> <p>為 img 標籤的屬性，而等號（=）後面用雙引號括起來的稱為屬性的「值（value）」。 </p><p>不同的標籤有不同的屬性，數量也不一樣。 </p> <div class="mw-heading mw-heading3"><h3 id="區塊標籤（Block-level_Tags）與同軸標籤（Inline_Tags）"><span id=".E5.8D.80.E5.A1.8A.E6.A8.99.E7.B1.A4.EF.BC.88Block-level_Tags.EF.BC.89.E8.88.87.E5.90.8C.E8.BB.B8.E6.A8.99.E7.B1.A4.EF.BC.88Inline_Tags.EF.BC.89"></span>區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=14" title="编辑章节：區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>我們先看一個例子，再來解釋什麼是 block-level 什麼是 inline。 </p> <table border="1" width="90%" cellpadding="5"> <tbody><tr> <th width="50%">HTML 原始碼 </th> <th width="50%">呈現 </th></tr> <tr> <td> <pre><p> 這是用來說明 <b>區塊標籤（block-level tags）</b>與 <b>同軸標籤（inline tags）</b>的例子。 </p> <p> 你注意到例子中，兩個標籤一個會造成換行，一個卻沒有 </p> </pre> </td> <td> <p>這是用來說明<b>區塊標籤（block-level tags）</b>與<b>同軸標籤（inline tags）</b>的例子。</p> <p>你注意到例子中，兩個標籤一個會造成換行，一個卻沒有</p> </td></tr></tbody></table> <p>在上面的例子當中，<p> 標籤所形成的元素，會自成一個區塊（也就是會換行），<b> 標籤所形成的元素，並不會這樣，它僅在同一行裡作用。在 HTML 裡面，常看到的 block-level 的標籤有： </p> <ul><li>blockquote - 引用的區塊</li> <li>center - 區塊置中</li> <li>div - 通用的 block-level 標籤</li> <li>h1 - 第一級標題</li> <li>h2 - 第二級標題</li> <li>h3 - 第三級標題</li> <li>h4 - 第四級標題</li> <li>h5 - 第五級標題</li> <li>h6 - 第六級標題</li> <li>hr - 水平線</li> <li>p - 段落</li> <li>pre - 保留文字格式</li></ul> <p>而 inline 的標籤有： </p> <ul><li>a - 錨點（超連結標籤）</li> <li>br - 段行</li> <li>iframe - 同軸框架（Inline frame）</li> <li>img - 圖片</li> <li>q - 簡短的引用</li> <li>script - 用戶端 script</li> <li>span - 通用的 inline 標籤</li> <li>sub - 下標（subscript）</li> <li>sup - 上標（superscript）</li></ul> <div class="mw-heading mw-heading2"><h2 id="格式化表單的位置(Where_to_place_Style_Sheet?)"><span id=".E6.A0.BC.E5.BC.8F.E5.8C.96.E8.A1.A8.E5.96.AE.E7.9A.84.E4.BD.8D.E7.BD.AE.28Where_to_place_Style_Sheet.3F.29"></span>格式化表單的位置(Where to place Style Sheet?)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=15" title="编辑章节：格式化表單的位置(Where to place Style Sheet?)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/Applying_CSS_to_HTML_and_XHTML" title="CSS/Applying CSS to HTML and XHTML">把CSS应用到HTML</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="內部格式化表單(Internal_Style_Sheet)"><span id=".E5.85.A7.E9.83.A8.E6.A0.BC.E5.BC.8F.E5.8C.96.E8.A1.A8.E5.96.AE.28Internal_Style_Sheet.29"></span>內部格式化表單(Internal Style Sheet)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=16" title="编辑章节：內部格式化表單(Internal Style Sheet)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>又稱內嵌式格式化表單（Embedded style sheet）例如： </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span><span class="p">></span> <span class="c">/*CSS goes here...*/</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> </pre></div> <p>其中 <code>style</code> 标签内为放置 CSS 代码的地方。 </p> <div class="mw-heading mw-heading3"><h3 id="外部格式化表單(External_Style_Sheet)"><span id=".E5.A4.96.E9.83.A8.E6.A0.BC.E5.BC.8F.E5.8C.96.E8.A1.A8.E5.96.AE.28External_Style_Sheet.29"></span>外部格式化表單(External Style Sheet)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=17" title="编辑章节：外部格式化表單(External Style Sheet)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>CSS 内可用 <code>@import</code> 语句，在一个 CSS 内引入其它 CSS： </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="s2">"mystyle.css"</span><span class="o">)</span><span class="p">;</span> </pre></div> <p>在html文件中，引入样式表的方法可用 <code>link</code> 标签，如下所示。 </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"mystyle.css"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="p">/></span> </pre></div> <p>外部样式表的好处是令结构和表现完全分离。 </p> <div class="mw-heading mw-heading3"><h3 id="内联样式表_(Inline_Style_Sheet)"><span id=".E5.86.85.E8.81.94.E6.A0.B7.E5.BC.8F.E8.A1.A8_.28Inline_Style_Sheet.29"></span>内联样式表 (Inline Style Sheet)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=18" title="编辑章节：内联样式表 (Inline Style Sheet)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>如下所示是一个使用内联样式表的示例。通过 <code>style</code> <b>属性</b>，可以为元素添加样式。它无法做到结构与表现的分离，但在无法引入外部样式表或 <code>style</code> <b>标签</b>时（如<a href="/wiki/%E7%BB%B4%E5%9F%BA%E7%99%BE%E7%A7%91" title="维基百科">维基百科</a>）时仍然有用。 </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"color:red; background:yellow; font-weight:bold;"</span><span class="p">></span> 這個段落會被顯示為黃底紅字粗體。 <span class="p"></</span><span class="nt">div</span><span class="p">></span> </pre></div> <p>显示为 </p> <div style="color:red; background:yellow; font-weight:bold;"> <p>這個段落會被顯示為黃底紅字粗體。 </p> </div> <div class="mw-heading mw-heading2"><h2 id="CSS结构"><span id="CSS.E7.BB.93.E6.9E.84"></span>CSS结构</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=19" title="编辑章节：CSS结构"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="语法"><span id=".E8.AF.AD.E6.B3.95"></span>语法</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=20" title="编辑章节：语法"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/Syntax" title="CSS/Syntax">语法</a></span></dd></dl> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">rule</span><span class="w"> </span><span class="nt">argument</span><span class="o">(</span><span class="nt">s</span><span class="o">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">selector</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="n">property</span><span class="p">:</span><span class="w"> </span><span class="nf">argument</span><span class="p">(</span><span class="n">s</span><span class="p">);</span> <span class="w"> </span><span class="n">another-property</span><span class="p">:</span><span class="w"> </span><span class="nf">argument</span><span class="p">(</span><span class="n">s</span><span class="p">);</span> <span class="w"> </span><span class="n">property-the-third</span><span class="p">:</span><span class="w"> </span><span class="nf">argument</span><span class="p">(</span><span class="n">s</span><span class="p">);</span> <span class="w"> </span><span class="n">fourth-property</span><span class="p">:</span><span class="w"> </span><span class="nf">argument</span><span class="p">(</span><span class="n">s</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="規則(Rules)"><span id=".E8.A6.8F.E5.89.87.28Rules.29"></span>規則(Rules)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=21" title="编辑章节：規則(Rules)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/Rules" class="mw-redirect" title="CSS/Rules">定义样式规则</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="长度和单位"><span id=".E9.95.BF.E5.BA.A6.E5.92.8C.E5.8D.95.E4.BD.8D"></span>长度和单位</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=22" title="编辑章节：长度和单位"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/Lengths_and_Units" title="CSS/Lengths and Units">长度和单位</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="選取項(Selector)"><span id=".E9.81.B8.E5.8F.96.E9.A0.85.28Selector.29"></span>選取項(Selector)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=23" title="编辑章节：選取項(Selector)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/%E9%80%89%E6%8B%A9%E5%99%A8" title="CSS/选择器">CSS/选择器</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="繼承的問題(Inheritance)"><span id=".E7.B9.BC.E6.89.BF.E7.9A.84.E5.95.8F.E9.A1.8C.28Inheritance.29"></span>繼承的問題(Inheritance)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=24" title="编辑章节：繼承的問題(Inheritance)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/Inheritance_Rules" title="Inheritance Rules">继承规则</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="关键字Important"><span id=".E5.85.B3.E9.94.AE.E5.AD.97Important"></span>关键字Important</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=25" title="编辑章节：关键字Important"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dd><span class="noprint">主页面：<a href="/wiki/CSS/Important" title="CSS/Important">CSS/Important</a></span></dd></dl> <div class="mw-heading mw-heading3"><h3 id="註解符號_(Commenting)"><span id=".E8.A8.BB.E8.A7.A3.E7.AC.A6.E8.99.9F_.28Commenting.29"></span>註解符號 (Commenting)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=26" title="编辑章节：註解符號 (Commenting)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* comment contents */</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="樣式的優先順序(Priority_rules)"><span id=".E6.A8.A3.E5.BC.8F.E7.9A.84.E5.84.AA.E5.85.88.E9.A0.86.E5.BA.8F.28Priority_rules.29"></span>樣式的優先順序(Priority rules)</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=27" title="编辑章节：樣式的優先順序(Priority rules)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>CSS不同定义方式的样式，其优先级为：内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style </p><p>故得名Cascading </p> <div class="mw-heading mw-heading2"><h2 id="瀏覽器如何工作？(_How_browsers_work?)"><span id=".E7.80.8F.E8.A6.BD.E5.99.A8.E5.A6.82.E4.BD.95.E5.B7.A5.E4.BD.9C.EF.BC.9F.28_How_browsers_work.3F.29"></span>瀏覽器如何工作？( How browsers work?)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=28" title="编辑章节：瀏覽器如何工作？( How browsers work?)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading2"><h2 id="方框的基本介紹_(Introduce_to_Box)"><span id=".E6.96.B9.E6.A1.86.E7.9A.84.E5.9F.BA.E6.9C.AC.E4.BB.8B.E7.B4.B9_.28Introduce_to_Box.29"></span>方框的基本介紹 (Introduce to Box)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=29" title="编辑章节：方框的基本介紹 (Introduce to Box)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>在CSS中，瀏覽器將每個標籤用Box方式呈現，並分為行內Box以及區塊Box。每個Box區塊使用Box模式（Box model）呈現，以外距、邊線、內距、內容四種屬性（由外而內）的順序組成一個Box。 </p> <div class="mw-heading mw-heading2"><h2 id="幾個特別的性質(properties)"><span id=".E5.B9.BE.E5.80.8B.E7.89.B9.E5.88.A5.E7.9A.84.E6.80.A7.E8.B3.AA.28properties.29"></span>幾個特別的性質(properties)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=30" title="编辑章节：幾個特別的性質(properties)"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading2"><h2 id="注意"><span id=".E6.B3.A8.E6.84.8F"></span>注意</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=31" title="编辑章节：注意"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。 </p><p>CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的字節。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的字節應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是「emphasized」（強調），它描寫的是這個「class」的用意，而不是它是如何被顯示的。 </p><p>另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。） </p><p>HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div元素。 </p><p>另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式，這些樣式當然是為了除錯而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。常見的特別CSS樣式多是針對Internet Explorer（尤其IE 6、IE 7等舊版本）的顯示錯誤而額外編寫。 </p><p>有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對瀏覽者來說這可能會帶來不便。 </p><p>有些新的CSS3樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但于<a href="/w/index.php?title=Internet_Explorer_10&action=edit&redlink=1" class="new" title="Internet Explorer 10（页面不存在）">Internet Explorer 10</a> Release Preview起, transform, transition, <a href="/w/index.php?title=CSS_Animations&action=edit&redlink=1" class="new" title="CSS Animations（页面不存在）">animation</a>和gradient渐变等属性均可不加前缀。<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>例如使用transition時，需要額外撰寫四行編碼： </p> <div style="overflow-x:auto" class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">-webkit-transition</span><span class="o">:</span><span class="w"> </span><span class="nt">height</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2s</span><span class="w"> </span><span class="nt">linear</span><span class="o">;</span><span class="w">　</span><span class="c">/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */</span> <span class="nt">-moz-transition</span><span class="o">:</span><span class="w"> </span><span class="nt">height</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2s</span><span class="w"> </span><span class="nt">linear</span><span class="o">;</span><span class="w">　</span><span class="c">/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */</span> <span class="nt">-o-transition</span><span class="o">:</span><span class="w"> </span><span class="nt">height</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2s</span><span class="w"> </span><span class="nt">linear</span><span class="o">;</span><span class="w">　</span><span class="c">/* 針對使用Presto排版引擎的瀏覽器，如Opera */</span> <span class="nt">-ms-transition</span><span class="o">:</span><span class="w"> </span><span class="nt">height</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2s</span><span class="w"> </span><span class="nt">linear</span><span class="o">;</span><span class="w">　</span><span class="c">/* MSIE，但Release Preview起可以不用前缀*/</span> <span class="nt">transition</span><span class="o">:</span><span class="w"> </span><span class="nt">height</span><span class="w"> </span><span class="nt">0</span><span class="p">.</span><span class="nc">2s</span><span class="w"> </span><span class="nt">linear</span><span class="o">;</span><span class="w">　</span><span class="c">/* CSS3標準，放最後*/</span> </pre></div> <p>CSS的大小因此增大，到這些CSS樣式不需前綴時，又需要額外花時間把它們刪除。 </p> <div class="mw-heading mw-heading2"><h2 id="參考資料"><span id=".E5.8F.83.E8.80.83.E8.B3.87.E6.96.99"></span>參考資料</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=32" title="编辑章节：參考資料"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="文内引用"><span id=".E6.96.87.E5.86.85.E5.BC.95.E7.94.A8"></span>文内引用</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=33" title="编辑章节：文内引用"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <ol class="references"> <li id="cite_note-莫振杰_进阶_p172-1"><span class="mw-cite-backlink">↑ <sup><a href="#cite_ref-莫振杰_进阶_p172_1-0">1.0</a></sup> <sup><a href="#cite_ref-莫振杰_进阶_p172_1-1">1.1</a></sup></span> <span class="reference-text">见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。</span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx">Unprefixed CSS3 Gradients in IE10</a></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx">Moving the Stable Web Forward in IE10 Release Preview</a></span> </li> </ol> <div class="mw-heading mw-heading3"><h3 id="补充来源"><span id=".E8.A1.A5.E5.85.85.E6.9D.A5.E6.BA.90"></span>补充来源</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=34" title="编辑章节：补充来源"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><cite class="citation book">莫振杰. HTML与CSS进阶教程 1. 中国北京: 人民邮电出版社. 2016年. <a href="/wiki/Special:%E7%BD%91%E7%BB%9C%E4%B9%A6%E6%BA%90/978-7-115-43295-7" title="Special:网络书源/978-7-115-43295-7"><span title="国际标准书号">ISBN</span> 978-7-115-43295-7</a> <span style="font-family: sans-serif; cursor: default; color:#555; font-size: 0.8em; bottom: 0.1em; font-weight: bold;" title="连接到中文（中国大陆）网页">（中文（中国大陆））</span>.</cite><span title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fzh.wikibooks.org%3ACSS&rft.au=%E8%8E%AB%E6%8C%AF%E6%9D%B0&rft.btitle=HTML%E4%B8%8ECSS%E8%BF%9B%E9%98%B6%E6%95%99%E7%A8&rft.date=2016&rft.edition=1&rft.genre=book&rft.isbn=978-7-115-43295-7&rft.place=%E4%B8+%E5%9B%BD%E5%8C%97%E4%BA%AC&rft.pub=%E4%BA%BA%E6%B0%91%E9%82%AE%E7%94%B5%E5%87%BA%E7%89%88%E7%A4%BE&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" class="Z3988"><span style="display:none;"> </span></span></li></ul> <div class="mw-heading mw-heading3"><h3 id="其它资料"><span id=".E5.85.B6.E5.AE.83.E8.B5.84.E6.96.99"></span>其它资料</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=CSS&action=edit&section=35" title="编辑章节：其它资料"><span>编辑</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Cascading Style Sheets, Level 2</li> <li>Code Style Media monitor</li> <li>CSS - Cascading Style Sheets</li> <li>CSS Bugs and Workarounds</li> <li>CSS Panic Guide</li> <li>CSS Reference Table</li> <li>css-bug info</li> <li>glish.com CSS layout techniques</li> <li>glish.com</li> <li>Guide to Cascading Style Sheets</li> <li>Little Boxes</li> <li>Pixellated! DesignDevelopDeliver</li> <li>RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets</li> <li>Tableless layout HOWTO</li> <li>The Layout Reservoir - BlueRobot</li> <li>Web Nouveau Table-less sites list-1</li> <li>Webmonkey Reference Stylesheets Guide</li> <li>Working with CSS - Introduction to CSS Layout</li></ul> <div class="infobox sisterproject"><figure class="mw-halign-left" typeof="mw:File"><a href="/wiki/File:Wikipedia-logo.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/40px-Wikipedia-logo.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/60px-Wikipedia-logo.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/80px-Wikipedia-logo.png 2x" data-file-width="200" data-file-height="200" /></a><figcaption></figcaption></figure> <div style="margin-left: 40px;"><a href="https://zh.wikipedia.org/wiki/Wikipedia:%E9%A6%96%E9%A1%B5" class="extiw" title="w:Wikipedia:首页">维基百科</a>中的相关条目： <div class="plainlinks" style="margin-left: 10px;"><b><a href="https://zh.wikipedia.org/wiki/Special:Search/CSS" class="extiw" title="w:Special:Search/CSS">CSS</a></b></div> </div> </div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">检索自“<a dir="ltr" href="https://zh.wikibooks.org/w/index.php?title=CSS&oldid=168510">https://zh.wikibooks.org/w/index.php?title=CSS&oldid=168510</a>”</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:%E9%A1%B5%E9%9D%A2%E5%88%86%E7%B1%BB" title="Special:页面分类">分类</a>：<ul><li><a href="/w/index.php?title=Category:%E9%9C%80%E8%A6%81%E5%88%86%E5%89%B2%E7%9A%84%E6%9D%A1%E7%9B%AE&action=edit&redlink=1" class="new" title="Category:需要分割的条目（页面不存在）">需要分割的条目</a></li><li><a href="/wiki/Category:%E7%94%B5%E8%84%91" title="Category:电脑">电脑</a></li><li><a href="/wiki/Category:CSS" title="Category:CSS">CSS</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">隐藏分类：<ul><li><a href="/wiki/Category:%E5%90%AB%E6%9C%89%E5%8F%97%E6%8D%9F%E6%96%87%E4%BB%B6%E9%93%BE%E6%8E%A5%E7%9A%84%E9%A1%B5%E9%9D%A2" title="Category:含有受损文件链接的页面">含有受损文件链接的页面</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> 此页面最后编辑于2022年8月17日 (星期三) 12:38。</li> <li id="footer-info-copyright">本站的全部文字在<a rel="nofollow" class="external text" href="//creativecommons.org/licenses/by-sa/4.0/deed.zh">創用CC 姓名標示-相同方式分享 4.0 協議</a>之條款下提供，附加條款亦可能應用（請參閱<a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">使用條款</a>）。<br /> Wikibooks®和維基教科書標誌是<a rel="nofollow" class="external text" href="https://wikimediafoundation.org">維基媒體基金會</a>的註冊商標；維基™是維基媒體基金會的商標。<br /> 維基媒體基金會是在美國佛羅里達州登記的501(c)(3)<a class="external text" href="https://donate.wikimedia.org/wiki/Special:MyLanguage/Tax_deductibility">免稅</a>、非營利的慈善機構。<br /></li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">隐私政策</a></li> <li id="footer-places-about"><a href="/wiki/Wikibooks:%E5%85%B3%E4%BA%8E">关于维基教科书</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikibooks:%E5%85%8D%E8%B4%A3%E5%A3%B0%E6%98%8E">免责声明</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">行为准则</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">开发者</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/zh.wikibooks.org">统计</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie声明</a></li> <li id="footer-places-mobileview"><a href="//zh.m.wikibooks.org/w/index.php?title=CSS&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">手机版视图</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-57488d5c7d-6g8cw","wgBackendResponseTime":201,"wgPageParseReport":{"limitreport":{"cputime":"0.142","walltime":"0.206","ppvisitednodes":{"value":658,"limit":1000000},"postexpandincludesize":{"value":5703,"limit":2097152},"templateargumentsize":{"value":330,"limit":2097152},"expansiondepth":{"value":7,"limit":100},"expensivefunctioncount":{"value":7,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":7794,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 159.675 1 -total"," 41.25% 65.873 1 Template:Split"," 40.20% 64.191 2 Template:Ambox"," 19.28% 30.788 1 Template:NoteTA"," 17.89% 28.565 1 Template:Cite_book"," 5.13% 8.194 7 Template:Main"," 3.52% 5.625 1 Template:BookCat"," 1.41% 2.257 1 Template:FULLBOOKNAME"," 0.93% 1.479 1 Template:Wikipedia"]},"scribunto":{"limitreport-timeusage":{"value":"0.048","limit":"10.000"},"limitreport-memusage":{"value":1606938,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-64476968cd-qjb8m","timestamp":"20241102025136","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"CSS","url":"https:\/\/zh.wikibooks.org\/wiki\/CSS","sameAs":"http:\/\/www.wikidata.org\/entity\/Q46441","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q46441","author":{"@type":"Organization","name":"\u7ef4\u57fa\u5a92\u4f53\u9879\u76ee\u8d21\u732e\u8005"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2006-08-18T10:15:13Z","dateModified":"2022-08-17T12:38:14Z","headline":"\u7528\u4e8e\u8c03\u6574\u6587\u6863\u6837\u5f0f\u7684\u6807\u8bb0\u8bed\u8a00"}</script> </body> </html>