常用 CSS 屬性 - 映美集企業

頁面的所有樣式會根據下面的規則層疊於一個新的虛擬樣式表中，優先權如下：
內聯樣式(在HTML元素內部style屬性) ＞ 內部樣式表(位於<head>標籤內部<style>) ＞ 外部樣式表(<link>標籤鏈接到 xx.css檔) ＞ 瀏覽器預設。
　CSS ( Cascading Style Sheets) 套用方式，請看最下方說明： CSS套用方式

CSS 屬性

屬性 (寫法)	值 (說明)
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-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：將元素向下移動以清除左右兩側浮動。

<a> 連結的狀態 :
a: link- 正常時，未訪問的連結、 a: visited- 使用者存取過的連結、 a: hover- 使用者將滑鼠懸停在連結上時、 a: active- 鏈接被點擊時。

CSS 套用方式

可以用以下三種方式，將 CSS 套用入 HTML 文件中：

套用方式	說明
行內套用 (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>

CSS Selectors (選擇器)

CSS 選擇器用於 "尋找"（或選擇）您想要設定樣式的 HTML 元素。
簡單選擇器根據(element-name)元素名稱、id 和( class)類別選擇元素。此外，還有通用選擇器（*）。

Selector	例子	說明
HTML元素	p h1	選擇所有 <p> 元素選擇所有 <h1> 元素
#id	#firstname	選擇 id="firstname" 的元素
.class	.intro p.intro	選擇所有帶有 class="intro" 的元素選擇所有帶有 class="intro" 的 <p> 元素
*	*	選擇頁面上的所有 HTML 元素

選擇器組合	例子	說明
,	div, p	所有 <div> 元素和所有 <p> 元素具有相同的樣式定義
(單空格)	div p	選擇 <div> 元素內的所有 <p> 元素
>	div > p	選擇 <div> 元素的每個直接子元素 <p>
+	div + p	選擇緊接在<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>

瀏覽器網頁呈現：
(樣式 style 嵌入於 HTML 文件中的 <head> 內)。

元素選擇器 Demo

p 標籤定義 一個段落

使用 style 設置 font size 為 10px

class是intro 的 span標籤內容
class是intro 的 b標籤內容

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>

瀏覽器網頁呈現：
(樣式 style 嵌入於 HTML 文件中的 <head> 內)。

在演示左側代碼前，先行說明區塊的盒子模型 :

文字是div的內容( 淡藍色的背景，寬度 200px，內邊距 padding: 50px )。
外邊距-四邊 margin: 38px、邊寬 border:15px 的淡綠色邊框。

左側代碼顯示結果如下 : ( 此行文字距離上面的淡綠色邊框 38px )

class="color_A"

background-color: 淺黃色背景

位於class="myBox"的div 內之 div

class="color_B"

background-color: 粉紅色背景

位於class="myBox"的div 內之 div

class="color_C"

background-color: 淺綠色背景

位於class="myBox"的div 內之 div

class="myBox color_C"

沒有位於 div class="myBox"內的div
本身只是 class="myBox 與 color_C"的 div

JavaScript 語法 常用 CSS 屬性

CSS 屬性

CSS 套用方式

CSS Selectors (選擇器)

元素選擇器 Demo

class="color_A"

class="color_B"

class="color_C"

class="myBox color_C"

JavaScript 語法常用 CSS 屬性