| 屬性 (寫法) | 值 (說明) |
|---|---|
| color: red; color: #0000ff; | 有效的顏色名稱-例如"red"，十六進制值: 如"#0000ff"，適用於 所有 元素 和 文字。 |
| background-color: yellow; | 背景有效的顏色名稱-例如“yellow”， 十六進制值: 如“#ffff00” |
| background-image: url("paper.gif"); | 默認情況下，圖像會重複，因此它會覆蓋整個元素 |
| background-repeat: no-repeat; | no-repeat; repeat-x; repeat-y; |
| background-position: right top; | right center top bottom; left top; x% y%; 50px 150px; . . . |
| background-size:80px 60px; | 80px 60px; auto; 100% 100%; |
| background 簡寫 : | background: #f00 url("tree.png") no-repeat right top; |
| border-style: solid; | solid實線 dotted點線 dashed虛線 double雙邊框 none無邊框 hidden隱藏邊框 |
| border-width: 5px; | 2px | medium | thin | thick; |
| border-color: red; | color | transparent |
| border-radius: 3px; border-radius: 3px 9px; border-radius: 50% 15%; border-radius: 50% 9px 30% 0; |
圓角邊框:3px 圓角邊框:3px 9px; border-radius:50%; border-radius:50% 15%; border-radius:50% 9px 30% 0; |
| border-collapse: collapse; | 設定"表格"的每個cell邊框 : separate 分開獨自邊框(預設) | collapse 單一邊框; |
| border 簡寫 : | border: 5px solid red; |
| margin: auto; | 使元素在其容器中水平居中。並且剩餘空間將在左右邊界之間平均分配。 |
| margin: 10px; | 四個邊的 外邊距皆設置為 10 像素 |
| margin-top: 25px; | margin-right: 50px; | margin-bottom: 75px; | margin-left: 100px; |
| margin 簡寫 : | margin: 25px 50px 75px 100px; | (上 右 下 左 )外邊距 |
| padding: 10px; | 四個邊的 內邊距皆設置為 10 像素 |
| padding-top: 25px; | padding-right: 50px; | padding-bottom: 75px; | padding-left: 100px; |
| padding 簡寫 : | padding: 25px 50px 75px 100px; | (上 右 下 左 )內邊距 |
| height: 200px; | auto | 像素 | 百分比; 元素的高度 不包括內邊距、邊框或邊距！ |
| width: 50%; | auto | 像素 | 百分比; 元素的寬度 不包括內邊距、邊框或邊距！ |
| 文字 | font: font-style font-variant font-weight font-siz line-height font-family; |
| font-style: normal; | normal | italic |
| font-weight: normal; | normal |
bold |
bolder |
lighter |
font-weight:900; 通常數字 thin (100), normal (400), bold (700), and heavy (900) |
| font-size: 20px; | medium | 像素 | large | small | smaller | larger . . . |
| line-height: 16px; line-height:90% | normal | 像素 | number | %(以百分比計的行高) |
| font-family: verdana; | 字體 | 注意：若字體名稱包含空格,則必須用引號引起來,如: "Times New Roman" 在 HTML 中使用“style”屬性時必須使用單引號,如: 'Times New Roman' Times New Roman 字體 | verdana 字體 | sans-serif 字體 |
| font 簡寫 : | font: italic small-caps bold 12px/30px Georgia, serif ; |
| text-align: center; | left | right | center (文字的水平) |
| vertical-align: middle; | top | middle | bottom (元素的垂直對齊方式) |
| text-decoration: none; text-decoration: underline; text-decoration: underline red; |
none |
underline |
overline |
line-through |
underline dotted |
wavy underline | underline red |
| text-transform: uppercase; | uppercase;轉換為大寫 | lowercase;轉換為小寫 | capitalize;每個單詞的首字母大寫 |
| text-shadow: 2px 2px orange; | 文字添加陰影 |
| text-shadow: #f00 1px 0 10px; | 文字添加暈染陰影 |
| visibility: hidden; | visible | hidden ; 指定元素是否可見。 |
| box-sizing: content-box|border-box; | content-box : (預設值)width 和 height 屬性 僅包含內容。不包括 border 和 padding。 border-box : 寬度 和 高度屬性 包括內容、padding填充 和 border邊框。 例如 : .div1 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}如果你想要兩個有邊框的盒子並排顯示，可以透過將 boxSizing 設定為 "border-box" 來實現。這將強制瀏覽器以指定的寬度和高度渲染盒子，並將邊框和填充放置在盒子內部。 應用在兩個 <div> 可輕鬆實現並排顯示(有 float: left 的效果) |
| box-shadow: 0px 0px 8px rgba(255,0,255,0.5) inset; |
設定元素的「容器陰影」: 第一個數值(必填)為陰影的 x位移，第二個數值(必填)為陰影的 y位移，
第三個數值為陰影的模糊半徑，第四個數值為陰影的縮放半徑， color 陰影顏色，inset (可選)陰影變成內陰影。 <button type="button" style="box-shadow:2px 2px 3px #aaf"> 外陰影</button> 呈現 <button type="button" style="box-shadow: -5px -9px 6px -3px #aaf inset"> 內陰影</button> 如下 |
| display: inline | none | block; |
inline: (預設值) 此元素會被顯示為 內聯元素，元素前後 沒有換行符。 none: 此元素不會被顯示。 block: 此元素將顯示為 塊級元素，此元素前後會 帶有換行符。 |
| position: static | absolute | fixed | relative; |
static: 靜態 (預設值)。 absolute: 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 fixed: 生成絕對定位的元素，相對於瀏覽器窗口定位。即使頁面滾動，也始終停留同一位置。 relative: 生成相對定位的元素，相對於其正常位置進行定位。 |
| z-index: auto | number; |
設置元素的堆疊順序。
auto: (預設值)。可省略。
[box2] z-index: 2;
[box1] z-index: 1;
number: (整數) 具有較高堆疊順序的元素始終位於具有較低堆疊順序的元素的上面。
|
| opacity: number; |
opacity 屬性 指定了一個元素的不透明度。 如上之 [box2] 設定了 opacity: 0.6; 注意：當使用該opacity屬性為元素的背景添加透明度時，其所有子元素也會變得透明。 number: (預設值 為 1 ) 範圍 [0.0 至 1.0]。 |
| float: none | left | right ; |
float 屬性 將元素放置在其容器的左側或右側，允許文字和內聯元素環繞它。 none：該元素不浮動。(預設值)。 left ：此元素必須浮動在其包含區塊的左側。 right：該元素必須浮動在其包含區塊的右側。 |
| clear: left | right | both; |
clear 屬性 設定元素 移動到其前的浮動元素下方（清除浮動）。適用於浮動和非浮動元素。 left ：將元素向下移動以清除過去的 左浮動。 right：將元素向下移動以清除 右側浮動。 both：將元素向下移動以清除 左右 兩側浮動。 |
| 屬性 (寫法) | 說明 |
|---|---|
|
語法 : clip-path: clip-source | basic-shape ; 參數 : clip-source (可選)定義 SVG 元素的 URL basic-shape 將元素剪輯的基本形狀 : circle(), ellipse(), polygon() 或 inset() |
將元素剪輯為 基本形狀 或 SVG 來源。 |
|
|
id="demoAA" id="demoBB" (原樣) See how different clip-path values will affect this DIV element.
看看不同的 clip-path 值將如何影響這個 DIV 元素 See how different clip-path values will affect this DIV element.
看看不同的 clip-path 值將如何影響這個 DIV 元素 style="clip-path: ;" |
檔案代碼：
<input type="button" id="q1" onClick="shape(this)" value="clip-path: circle(50%);">
<input type="button" id="q2" onclick="shape(this)" value="clip-path: circle(20%);">
: //以 this(代表此元素物件本身) 當參數 傳入 shape( )
<input type="button" id="q7" onclick="shape(this)" value="clip-path: inset(5% 20% 15% 10%);">
<div id="demoAA"> See how different . . . 影響這個 DIV 元素 </div>
<br>style="clip-path: <span id="demoWord"> </span> ;"
<script>
function shape(xx) { // xx 參數 即 (this 點擊時的元素物件本身) 傳入 shape( )
var selectID = xx.getAttribute('id'); // selectID = 取得元素物件的 id
var yy = "";
document.getElementById('demoWord').style.color = 'blue'; // 設定 元素物件 style的color
switch (selectID) {
case 'q1':
yy = "circle(50%)"; // circle圓形 圓形的半徑:長度 或 百分比
break;
case 'q2':
yy = "circle(50% at 100% 50%)"; // circle圓形 半徑, at 指定圓心位置: 預設值為中心
break; 圓心 可為 長度或百分比 或left,right,top,or bottom
case 'q3':
yy = "ellipse(25% 50%)"; // ellipse橢圓形 (x和y)的半徑: 長度 或 百分比
break;
case 'q4':
yy = "ellipse(25% 50% at 75% 50%)"; // ellipse橢圓形 (x和y)的半徑, at 指定橢圓的中心
break;
case 'q5':
yy = "polygon(50% 0%, 0% 100%, 100% 100%)"; // polygon多邊形 3 組點(x 和 y)座標
break;
case 'q6':
yy = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"; // polygon多邊形 點的(x 和 y) 座標
break;
case 'q7':
yy = "polygon(50% 0,50% 0%,100% 50%,50% 100%,0% 50%)";
break;
case 'q8':
yy = "inset(10% 5% 50% 20%)"; // inset(上 右 下 左) 向內偏移量
break;
}
document.getElementById('demoAA').style.clipPath = yy; // 設定 demoAA元素物件 style的clipPath
document.getElementById('demoWord').innerText = yy;
}
</script>
|
|
| 套用方式 | 說明 |
|---|---|
| 行內套用 (Inline) |
我們可以在 HTML 文件內直接宣告樣式。 style='xxx: ooo;'。 舉例來說 :
<p style='font-family:verdana; font-size:16px'> This is font size 16px. </p>
|
| 嵌入套用 (Embed) |
樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。 舉例來說 :
<html>
<head>
<style type="text/css">
div { background-color:#FF0000; }
</style>
</head>
<body>
<div>
背景顏色是紅色
</div>
</body>
</html>
|
| 外部連接套用 (External Link) |
所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案名稱的 副檔名 通常為 .css。 在 HTML 文件的 <header< .. >/header> 之中，我們將用以下的程式碼將這個 ext-sheet.css 檔案 連接進入：
<head>
<link rel=stylesheet type="text/css" href="ext-sheet.css">
</head>
|
| Selector | 例子 | 說明 |
|---|---|---|
| HTML元素 | p h1 | 選擇所有 <p> 元素 選擇所有 <h1> 元素 |
| #id | #firstname | 選擇 id="firstname" 的元素 |
| .class | .intro p.intro class="intro bk" | 選擇所有帶有 class="intro" 的元素 選擇所有帶有 class="intro" 的 <p> 元素 元素將根據 class="intro" 和 class="bk" 進行樣式設定 |
| * | * | 選擇頁面上的所有 HTML 元素 |
| 選擇器組合 | 例子 | 說明 |
|---|---|---|
| , | div, p | 所有 <div> 元素 和 所有 <p> 元素 具有相同的樣式定義 |
| (單空格) | div p | 選擇 <div> 元素內 的所有 <p> 元素 |
| > | div > p | 選擇 <div> 元素的 每個直接子元素 <p> |
| + | div + p | 選擇緊接在<div>元素之後的第一個<p>元素（而非內部）是在<div> ... </div> 之後緊接的<p>元素 |
Class 及 ID 都是使用者設定的 選擇器 (selector)。 Class名稱 和 id名稱不能以數字開頭！ Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。 id 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。 這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，因元素的 id 在頁面內是唯一的， 而 Class 選擇器在一個 HTML 文件中可以被使用多次。 第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用， 而 Class 選擇器無法被 Javascript 運用到。 Div 這個標籤目的是將內容分為不同的區域， Div 是一個 區塊級容器 (block-level container)，這代表在 </div> 標籤後 會換行。 Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。 所以，我們甚至可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並 不會換行。
檔案代碼： ( 樣式表 與 選擇器 的範例 )
<html>
<head>
<title> CSS Selectors (選擇器) </title>
<style>
h4 {border: 2px solid green;} // 所有 <h4> 元素
p {color: blue;} // 所有 <p>
i {color:#0f0;background-color:tomato;} // 所有 <i>
.intro { color: orange; } // 所有 class="intro"的元素
p.intro { color: red; } // <p>標籤 class="intro"的元素
p span { color: green; } // <p>標籤內的 <span> 元素
#onlyone { color: brown; } // id="onlyone" 的元素
</style>
</head>
<body>
<h4> 元素選擇器 Demo </h4>
<p> p 標籤定義 <i>一個段落</i></p>
<p style="font-size:10px"> 使用 style 設置 font size 為 10px</p>
<span class="intro"> class是intro 的 span標籤內容 </span><br>
<b class="intro"> class是intro 的 b標籤內容 </b>
<p class="intro"> p 標籤 class是intro 一個段落</p>
<p><span> p 標籤內的 span 內容 </span></p>
<span id="onlyone"> id是onlyone 的 span標籤內容 </span>
</body>
</html>
p 標籤定義 一個段落
使用 style 設置 font size 為 10px
class是intro 的 span標籤內容p 標籤 class是intro 一個段落
p 標籤內的 span 內容
id是onlyone 的 span標籤內容
檔案代碼： ( 樣式表 與 選擇器 的範例 )
<html>
<head>
<title> CSS Selectors (選擇器) </title>
<style>
div.myBox {width:100%; overflow:auto;
color:darkgreen;}
div.myBox div {width:33%; float:left;}
.color_A {background-color:#FFF4A3;}
.color_B {background-color:pink;}
.color_C {background-color:#D9EEE1;
border: 1px solid grey;}
</style>
</head>
<body>
<div class="myBox">
<div class="color_A">
<h3>class="color_A"</h3>
<p>background-color: 淺黃色 背景</p>
位於class="myBox"的div 內之 div
</div>
<div class="color_B">
<h3>class="color_B"</h3>
<p>background-color: 粉紅色 背景</p>
位於class="myBox"的div 內之 div
</div>
<div class="color_C">
<h3>class="color_C"</h3>
<p>background-color: 淺綠色 背景</p>
位於class="myBox"的div 內之 div
</div>
</div>
<div class="myBox color_C">
<h3>class="myBox color_C"</h3>
沒有位於 div class="myBox"內的div <br>
本身只是 class="myBox 與 color_C"的 div
</div>
</body>
</html>
background-color: 淺黃色 背景
位於class="myBox"的div 內之 divbackground-color: 粉紅色 背景
位於class="myBox"的div 內之 divbackground-color: 淺綠色 背景
位於class="myBox"的div 內之 div