整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
· 內聯樣式- 在HTML元素中使用"style" 屬性
· 內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素 來包含CSS
· 外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件.
在本站的HTML教程中我們使用了內聯CSS樣式來介紹實例，這是為了簡化的例子，也使得你能更容易在線編輯代碼并在線運行實例。
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML樣式實例 - 背景顏色
背景色屬性（background-color）定義一個元素的背景顏色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
早期背景色屬性（background-color）是使用 bgcolor 屬性定義。
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
<h1 style="font-family:verdana;">一個標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標簽。
HTML 樣式實例 - 文本對齊方式
使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：
<h1 style="text-align:center;">居中對齊的標題</h1> <p>這是一個段落。</p>
文本對齊屬性 text-align取代了舊標簽 <center> 。
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:
00001.
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 樣式標簽
標簽
描述
<style>
定義文本樣式
<link>
定義資源引用地址
已棄用的標簽和屬性
在HTML 4, 原來支持定義HTML元素樣式的標簽和屬性已被棄用。這些標簽將不支持新版本的HTML標簽。
不建議使用的標簽有: <font>, <center>, <strike>
不建議使用的屬性: color 和 bgcolor.
需要具備的知識
在繼續學習之前，你需要對下面的知識有基本的了解：
HTML / XHTML
什么是 CSS?
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一
CSS 實例
一個HTML文檔可以顯示不同的樣式: 查看CSS是如何工作的
樣式解決了一個很大的問題
HTML 標簽原本被設計為用于定義文檔內容，如下實例：
<h1>這是一個標題</h1>
<p>這是一個段落.</p>
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
為了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，并在 HTML 4.0 之外創造出樣式（Style）。
當代瀏覽器都支持 CSS .
CSS 樣式表極大地提高了工作效率
樣式表定義如何顯示 HTML 元素
樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
Style 對象
Style 對象表示一個個別的樣式聲明。
訪問 Style 對象
Style 對象可以從文檔的頭部區域訪問，或者從指定的 HTML 元素訪問。
從文檔的頭部區域訪問 style 對象：
var x = document.getElementsByTagName("STYLE");嘗試一下
訪問一個指定元素的 style 對象：
var x = document.getElementById("myH1").style;
創建 Style 對象
您可以使用 document.createElement() 方法來創建 <style> 元素：
var x = document.createElement("STYLE");嘗試一下
您也可以設置一個已有元素的 style 屬性：
document.getElementById("myH1").style.color = "red";
Style 對象屬性
"CSS" 列表示該屬性是在哪一個 CSS 版本中定義的（CSS1、CSS2 或 CSS3）。
| 屬性 | 描述 | CSS |
|---|---|---|
| alignContent | 設置或返回當靈活容器內的各項沒有占用所有可用的空間時各項之間的對齊方式（水平）。 | 3 |
| alignItems | 設置或返回靈活容器內的各項的對齊方式。 | 3 |
| alignSelf | 設置或返回靈活容器內被選中項目的對齊方式。 | 3 |
| animation | 是下面除了 animationPlayState 屬性之外的其他屬性的速記屬性。 | 3 |
| animationDelay | 設置或返回動畫何時開始。 | 3 |
| animationDirection | 設置或返回是否循環交替反向播放動畫。 | 3 |
| animationDuration | 設置或返回動畫完成需花費的秒數或毫秒數。 | 3 |
| animationFillMode | 設置或返回當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 | 3 |
| animationIterationCount | 設置或返回動畫的播放次數。 | 3 |
| animationName | 設置或返回關鍵幀 @keyframes 動畫的名稱。 | 3 |
| animationTimingFunction | 設置或返回動畫的速度曲線。 | 3 |
| animationPlayState | 設置或返回動畫是運行的還是暫停的。 | 3 |
| background | 設置或返回在一個聲明中的所有背景屬性。 | 1 |
| backgroundAttachment | 設置或返回背景圖像是否固定或隨頁面滾動。 | 1 |
| backgroundColor | 設置或返回元素的背景色。 | 1 |
| backgroundImage | 設置或返回元素的背景圖像。 | 1 |
| backgroundPosition | 設置或返回的背景圖像的起始位置。 | 1 |
| backgroundRepeat | 設置或返回如何重復背景圖像。 | 1 |
| backgroundClip | 設置或返回背景的繪制區域。 | 3 |
| backgroundOrigin | 設置或返回背景圖像的定位區域。 | 3 |
| backgroundSize | 設置或返回背景圖像的大小。 | 3 |
| backfaceVisibility | 設置或返回當一個元素背對屏幕時是否可見。 | 3 |
| border | 設置或返回在一個聲明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
| borderBottom | 設置或返回在一個聲明中的所有 borderBottom* 屬性。 | 1 |
| borderBottomColor | 設置或返回下邊框的顏色。 | 1 |
| borderBottomLeftRadius | 設置或返回左下角邊框的形狀。 | 3 |
| borderBottomRightRadius | 設置或返回右下角邊框的形狀。 | 3 |
| borderBottomStyle | 設置或返回下邊框的樣式。 | 1 |
| borderBottomWidth | 設置或返回下邊框的寬度。 | 1 |
| borderCollapse | 設置或返回表格的邊框是否被折疊為一個單一的邊框。 | 2 |
| borderColor | 設置或返回元素邊框的顏色（最多可以有四個值）。 | 1 |
| borderImage | 一個用于設置或返回所有的 borderImage* 屬性的速記屬性。 | 3 |
| borderImageOutset | 設置或返回邊框圖像區域超出邊界框的量。 | 3 |
| borderImageRepeat | 設置或返回圖像邊框是重復拼接圖塊還是延伸圖塊。 | 3 |
| borderImageSlice | 設置或返回圖像邊框的向內偏移。 | 3 |
| borderImageSource | 設置或返回要作為邊框使用的圖像。 | 3 |
| borderImageWidth | 設置或返回圖像邊框的寬度。 | 3 |
| borderLeft | 設置或返回在一個聲明中的所有 borderLeft* 屬性。 | 1 |
| borderLeftColor | 設置或返回左邊框的顏色。 | 1 |
| borderLeftStyle | 設置或返回左邊框的樣式。 | 1 |
| borderLeftWidth | 設置或返回左邊框的寬度。 | 1 |
| borderRadius | 一個用于設置或返回四個 border*Radius 屬性的速記屬性。 | 3 |
| borderRight | 設置或返回在一個聲明中的所有 borderRight* 屬性。 | 1 |
| borderRightColor | 設置或返回右邊框的顏色。 | 1 |
| borderRightStyle | 設置或返回右邊框的樣式。 | 1 |
| borderRightWidth | 設置或返回右邊框的寬度。 | 1 |
| borderSpacing | 設置或返回表格中單元格之間的距離。 | 2 |
| borderStyle | 設置或返回元素邊框的樣式（最多可以有四個值）。 | 1 |
| borderTop | 設置或返回在一個聲明中的所有 borderTop* 屬性。 | 1 |
| borderTopColor | 設置或返回上邊框的顏色。 | 1 |
| borderTopLeftRadius | 設置或返回左上角邊框的形狀。 | 3 |
| borderTopRightRadius | 設置或返回右上角邊框的形狀。 | 3 |
| borderTopStyle | 設置或返回上邊框的樣式。 | 1 |
| borderTopWidth | 設置或返回上邊框的寬度。 | 1 |
| borderWidth | 設置或返回元素邊框的寬度（最多可以有四個值）。 | 1 |
| bottom | 設置或返回定位元素的底部位置。 | 2 |
| boxDecorationBreak | 設置或返回分頁處元素的背景和邊框行為，或者換行處內聯元素的背景和邊框行為。 | 3 |
| boxShadow | 設置或返回元素的下拉陰影。 | 3 |
| boxSizing | 允許您以特定的方式定義匹配某個區域的特定元素。 | 3 |
| captionSide | 設置或返回表格標題的位置。 | 2 |
| clear | 設置或返回元素相對浮動對象的位置。 | 1 |
| clip | 設置或返回定位元素的可見部分。 | 2 |
| color | 設置或返回文本的顏色。 | 1 |
| columnCount | 設置或返回元素應該被劃分的列數。 | 3 |
| columnFill | 設置或返回如何填充列。 | 3 |
| columnGap | 設置或返回列之間的間隔。 | 3 |
| columnRule | 一個用于設置或返回所有的 columnRule* 屬性的速記屬性。 | 3 |
| columnRuleColor | 設置或返回列之間的顏色規則。 | 3 |
| columnRuleStyle | 設置或返回列之間的樣式規則。 | 3 |
| columnRuleWidth | 設置或返回列之間的寬度規則。 | 3 |
| columns | 一個用于設置或返回 columnWidth 和 columnCount 的速記屬性。 | 3 |
| columnSpan | 設置或返回一個元素應橫跨多少列。 | 3 |
| columnWidth | 設置或返回列的寬度。 | 3 |
| content | 與 :before 和 :after 偽元素一起使用，來插入生成的內容。 | 2 |
| counterIncrement | 增加一個或多個計數器。 | 2 |
| counterReset | 創建或重置一個或多個計數器。 | 2 |
| cursor | 設置或返回鼠標指針顯示的光標類型。 | 2 |
| direction | 設置或返回文本的方向。 | 2 |
| display | 設置或返回元素的顯示類型。 | 1 |
| emptyCells | 設置或返回是否顯示表格中的空單元格的邊框和背景。 | 2 |
| filter | 設置或返回圖片濾鏡(可視效果，如：高斯模糊與飽和度) | 3 |
| flex | 相對于同一容器其他靈活的項目，設置或返回項目的長度。 | 3 |
| flexBasis | 設置或靈活項目的初始長度。 | 3 |
| flexDirection | 設置或返回靈活項目的方向。 | 3 |
| flexFlow | 是 flexDirection 和 flexWrap 屬性的速記屬性。 | 3 |
| flexGrow | 設置或返回項目將相對于同一容器內其他靈活的項目進行擴展的量。 | 3 |
| flexShrink | 設置或返回項目將相對于同一容器內其他靈活的項目進行收縮的量。 | 3 |
| flexWrap | 設置或返回靈活項目是否拆行或拆列。 | 3 |
| cssFloat | 設置或返回元素的水平對齊方式。 | 1 |
| font | 設置或返回一個聲明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
| fontFamily | 設置或返回文本的字體。 | 1 |
| fontSize | 設置或返回文本的字體尺寸。 | 1 |
| fontStyle | 設置或返回字體樣式是否是 normal（正常的）、italic（斜體）或 oblique（傾斜的）。 | 1 |
| fontVariant | 設置或返回是否以小型大寫字母顯示字體。 | 1 |
| fontWeight | 設置或返回字體的粗細。 | 1 |
| fontSizeAdjust | 當使用備用字體時，確保文本的可讀性。 | 3 |
| fontStretch | 從字體庫中選擇一種正常的、濃縮的或擴大的字體。 | 3 |
| hangingPunctuation | 規定一個標點符號是否可以放置在線框外。 | 3 |
| height | 設置或返回元素的高度。 | 1 |
| hyphens | 設置如何拆分單詞來提高段落布局。 | 3 |
| icon | 向作者提供為一個帶有等價于圖標的元素定義樣式的功能。 | 3 |
| imageOrientation | 規定一個用戶代理應用到圖像上的順時針方向的旋轉。 | 3 |
| justifyContent | 設置或返回當靈活容器內的各項沒有占用所有可用的空間時各項之間的對齊方式（垂直）。 | 3 |
| left | 設置或返回定位元素的左部位置。 | 2 |
| letterSpacing | 設置或返回文本中字符之間的空間。 | 1 |
| lineHeight | 設置或返回在文本中行之間的距離。 | 1 |
| listStyle | 設置或返回一個聲明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
| listStyleImage | 設置或返回作為列表項標記的圖像。 | 1 |
| listStylePosition | 設置或返回列表項標記的位置。 | 1 |
| listStyleType | 設置或返回列表項標記的類型。 | 1 |
| margin | 設置或返回元素的外邊距（最多可以有四個值）。 | 1 |
| marginBottom | 設置或返回元素的的下外邊距。 | 1 |
| marginLeft | 設置或返回元素的左外邊距。 | 1 |
| marginRight | 設置或返回元素的右外邊距。 | 1 |
| marginTop | 設置或返回元素的上外邊距。 | 1 |
| maxHeight | 設置或返回元素的最大高度。 | 2 |
| maxWidth | 設置或返回元素的最大寬度。 | 2 |
| minHeight | 設置或返回元素的最小高度。 | 2 |
| minWidth | 設置或返回元素的最小寬度。 | 2 |
| navDown | 設置或返回當使用向下箭頭導航鍵時要導航到哪里。 | 3 |
| navIndex | 設置或返回元素的顯示順序。 | 3 |
| navLeft | 設置或返回當使用向左箭頭導航鍵時要導航到哪里。 | 3 |
| navRight | 設置或返回當使用向右箭頭導航鍵時要導航到哪里。 | 3 |
| navUp | 設置或返回當使用向上箭頭導航鍵時要導航到哪里。 | 3 |
| opacity | 設置或返回元素的不透明度。 | 3 |
| order | 設置或返回一個靈活的項目相對于同一容器內其他靈活項目的順序。 | 3 |
| orphans | 設置或返回當元素內有分頁時，必須在頁面底部預留的最小行數。 | 2 |
| outline | 設置或返回在一個聲明中的所有 outline 屬性。 | 2 |
| outlineColor | 設置或返回一個元素周圍的輪廓顏色。 | 2 |
| outlineOffset | 對輪廓進行偏移，并在邊框邊緣進行繪制。 | 3 |
| outlineStyle | 設置或返回一個元素周圍的輪廓樣式。 | 2 |
| outlineWidth | 設置或返回一個元素周圍的輪廓寬度。 | 2 |
| overflow | 設置或返回如何處理呈現在元素框外面的內容。 | 2 |
| overflowX | 規定如果內容溢出元素的內容區域，是否對內容的左/右邊緣進行裁剪。 | 3 |
| overflowY | 規定如果內容溢出元素的內容區域，是否對內容的上/下邊緣進行裁剪。 | 3 |
| padding | 設置或返回元素的內邊距（最多可以有四個值）。 | 1 |
| paddingBottom | 設置或返回元素的下內邊距。 | 1 |
| paddingLeft | 設置或返回元素的左內邊距。 | 1 |
| paddingRight | 設置或返回元素的右內邊距。 | 1 |
| paddingTop | 設置或返回元素的上內邊距。 | 1 |
| pageBreakAfter | 設置或返回元素后的分頁行為。 | 2 |
| pageBreakBefore | 設置或返回元素前的分頁行為。 | 2 |
| pageBreakInside | 設置或返回元素內的分頁行為。 | 2 |
| perspective | 設置或返回 3D 元素被查看的視角。 | 3 |
| perspectiveOrigin | 設置或返回 3D 元素的底部位置。 | 3 |
| position | 設置或返回用于元素定位方法的類型（static、relative、absolute 或 fixed）。 | 2 |
| quotes | 設置或返回嵌入引用的引號類型。 | 2 |
| resize | 設置或返回是否可由用戶調整元素的尺寸大小。 | 3 |
| right | 設置或返回定位元素的右部位置。 | 2 |
| tableLayout | 設置或返回表格單元格、行、列的布局方式。 | 2 |
| tabSize | 設置或返回制表符（tab）字符的長度。 | 3 |
| textAlign | 設置或返回文本的水平對齊方式。 | 1 |
| textAlignLast | 設置或返回當 text-align 屬性設置為 "justify" 時，如何對齊一個強制換行符前的最后一行。 | 3 |
| textDecoration | 設置或返回文本的修飾。 | 1 |
| textDecorationColor | 設置或返回文本修飾的顏色。 | 3 |
| textDecorationLine | 設置或返回文本修飾要使用的線條類型。 | 3 |
| textDecorationStyle | 設置或返回文本修飾中的線條樣式。 | 3 |
| textIndent | 設置或返回文本第一行的縮進。 | 1 |
| textJustify | 設置或返回當 text-align 屬性設置為 "justify" 時，要使用的對齊方法。 | 3 |
| textOverflow | 設置或返回當文本溢出包含它的元素，應該發生什么。 | 3 |
| textShadow | 設置或返回文本的陰影效果。 | 3 |
| textTransform | 設置或返回文本的大小寫。 | 1 |
| top | 設置或返回定位元素的頂部位置。 | 2 |
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transformOrigin | 設置或返回被轉換元素的位置。 | 3 |
| transformStyle | 設置或返回被嵌套的元素如何呈現在 3D 空間中。 | 3 |
| transition | 一個用于設置或返回四個過渡屬性的速記屬性。 | 3 |
| transitionProperty | 應用過渡效果的 CSS 屬性的名稱。 | 3 |
| transitionDuration | 設置或返回完成過渡效果需要花費的時間（以秒或毫秒計）。 | 3 |
| transitionTimingFunction | 設置或返回過渡效果的速度曲線。 | 3 |
| transitionDelay | 設置或返回過渡效果何時開始。 | 3 |
| unicodeBidi | 設置或返回文本是否被重寫，以便在同一文檔中支持多種語言。 | 2 |
| verticalAlign | 設置或返回元素中內容的垂直對齊方式。 | 1 |
| visibility | 設置或返回元素是否應該是可見的。 | 2 |
| whiteSpace | 設置或返回如何處理文本中的制表符、換行符和空格符。 | 1 |
| width | 設置或返回元素的寬度。 | 1 |
| wordBreak | 設置或返回非 CJK 語言的換行規則。 | 3 |
| wordSpacing | 設置或返回文本中單詞之間的空間。 | 1 |
| wordWrap | 允許長單詞或 URL 地址換行到下一行。 | 3 |
| widows | 設置或返回一個元素必須在頁面頂部的可見行的最小數量。 | 2 |
| zIndex | 設置或返回定位元素的堆疊順序。 | 2 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
