關於 CSS
CSS 筆記
很好用的 UI 調適技巧
只要加上以下程式碼
body *{
outline: 1px solid red
}
能幫助我們在開發中迅速了解元素所在的位置，還能幫助我們方便地查看任意網站的布局。
參考資料
CSS 指定編碼
@charset "UTF-8";
為 css 檔案指定編碼為 UTF-8
CSS 選擇器語法
Selector 選擇器 {
Attributes 屬性 : Value 設定值
}
Select 選擇器共有三種選擇，分別是 Type 類型選擇器、Class 選擇器和 ID 選擇器，以下是選擇器所對應的 HTML 元素與 Class 標籤
選擇器 元素與標籤
Type h1 div、p
Class .box、.header
ID #top、#move
若需要將多個選擇器使用同一個樣式可以這樣寫:
h1,h2,h3 {
Attributes : Value
}
#head,.box,div{
Attributes : Value
}
若限定 A 選擇器裡面的 B 選擇器使用樣式可以這樣寫:
[ 父選擇器 ] [ 子選擇器 ] {
Attributes 屬性 : Value 設定值
}
li a {
Attributes : Value
}
限定 li 元素下的所有 a 元素套用樣式
CSS套用在HTML文件中的方式
1.行內套用
2.嵌入套用
3.外部連接套用
4.匯入套用
1.行內套用 我們可以在HTML文件中直接宣告樣式如
<p style="font-family:verdana;font-size:16;>This is font size 16.</p>
2.嵌入套用
樣式可以嵌入於HTML文件中(通常是在<head>內)
<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
背景顏色是紅色
</div>
</body>
3.外部連接套用
CSS樣式宣告來自另一個檔案中。該檔案通常名稱為.css。在HTML中以下方的程式碼將這個.css檔案連接進來。
<link rel="stylesheet" type="text/css" href="檔案網址.css">
4.匯入套用
外部的CSS樣式也可以匯入進HTML文件。匯入的做法為利用 @import 這個指令。
<style type="text/css">
<!--
@import url(網址位置);
-->
</style>
CSS樣式從最高優先權到最低優先權的排名如下
1.內行套用的樣式表
2.嵌入套用的樣式表
3.匯入套用的樣式表
4.外部連接到用的樣式表
5.瀏覽器本身的樣式表
CSS的繼承關係
在一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，<title> 這個標籤一定都是在 <head> 這個標籤之內，所以我們就說 <title> 是 <head> 的子標籤。繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式。
<head>
<title></title>
</head>
Class 選擇器與 ID 選擇器的比較
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，
而 Class 選擇器在一個 HTML 文件中可以被使用多次。
建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。
長度單位
相對單位包括：
px: pixels
em: em
ex: x 字母的高度
絕對單位包括：
in: 吋
cm: 公分
mm: 公厘
pt: points, 1 pt = 1/72 吋
pc: picas, 1 pc = 12 pt
如果沒有註明單位，那預設的單位是 px。
盒子模式 (box model)
在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白(padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
邊界 margin
如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定：
1. margin-top (上邊界)
2. margin-right (右邊界)
3. margin-bottom (下邊界)
4. margin-left (左邊界)
#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}
<div id="container"></div> //這是邊界的例子。
一個元素的四個邊邊界可以同時由 margin 屬性設定。它的語法如下：
margin: [ 上面邊界值 ] [右邊界值 ] [下面邊界值 ] [ 左邊界值 ]
邊框 border
1.border-style
2.border-width
3.border-color
4.border-top-, border-left-, border-bottom-, border-right-
5.border
1. border-style:設定值
指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。
設定值 solid 實線
dashed 虛線
double 雙線
dotted 點線
groove 凹線
ridge 凸線
inset 嵌入線
outset 浮出線
2. border-width:設定值 設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。
3. border-color:設定值 設定邊寬的顏色。
4. border-top-,border-right-,border-bottom-,border-left-
我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。
p {border-top-style:solid; border-bottom-style:dotted;} //上邊框為實線，下邊框為點線
5. border 若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。
另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。
p {
border:#0000FF 5px solid;
}
<p>用一行來宣佈所有邊框的屬性</p>
留白 padding
我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。
一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：
1. padding-top (上)
2. padding-right (右)
3. padding-bottom (下)
4. padding-left (左)
#container {
padding-top:15px;
padding-right:10px;
padding-bottom:30px;
padding-left:40px;
border: 1px solid 000000;
}
<div id="containar"></div> //空間都有設定
所有四個邊的留白可以同時由 padding 屬性設定。它的語法如下：
padding: [ 上面留白值 ] [ 右邊留白值 ] [ 下面留白值 ] [ 左邊留白值 ]
CSS中最常見的背景(background)屬性有以下幾種
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1.background-color 用來指定背景的顏色。
p {background-color:00FF00;} 綠色背景
p {background-color:rad;} 紅色背景
2.background-image用來指定用什麼圖案來當做背景。
p {background-images:url(yp.jpg);} 檔案來源 yp.jpg
3.background-repeat:設定值 是用來指定背景圖案重不重複。預設值是 "repeat"
設定值 no-repeat 背景圖案不重複
repeat-x 背景圖案在 x-方向重複
repeat-y 背景圖案在 y-方向重複
repeat 背景圖案在 x- 及 y-方向重複
4.background-attachment:設定值 是用來指定背景圖案是否在螢幕上固定。
設定值 fixed (當網頁捲動時，背景圖案固定不動)
scroll (當網頁捲動時，背景圖案會跟著移動)
5.background-position:設定值 用來指定背景圖案的位置。它的值可以是：
˙兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
˙兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
˙兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。
CSS中設定元素的顏色
1. 十六進位值
2. RGB 碼
3. 顏色名稱
1.十六進位值:
{color:#XXXXXX;} //X 為十六進位碼 (從 0 到 9，以及 A 到 F)。
2.RGB:
{color:rgb(X,Y,Z); } //X、Y、和 Z 都是介於 0 和 255 之間的數字。
{color:rgb(X%,Y%,Z%); } //X、Y、和 Z 都是介於 0 和 100 之間的數字。
3.顏色名稱:
{color:[顏色名稱];} //十六進位值是一個以六碼 (如果前兩碼、中間兩碼、以及最後兩碼都一樣的話，那也可以以三碼的形式表現。
舉例來說，#FFF 及 #FFFFFF 都是代表白色) 來設定顏色。
CSS中設定自體(font)
1. font-family
2. font-size
3. font-weight
4. font-style
5. font-variant
1.font-family(字體類型)
p {font-family:標楷體;}
p {font-family:arial;}
2.font-size(字體大小)
下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。
p {font-size:small;}
p {font-size:9px;}
3.font-width(字體厚度)
厚度的設定值可以從 100 到 900 (900 是最厚的)。另外，我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。
p {font-width:100;}
p {font-width:bold;}
4.font-style(字體是否斜體)
是用來設定字體是否為斜體字 (italic 或 oblique)。
5.font-variant
用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。來看下面的例子：
span {
font-variant:small-caps;
}
<span>initial in small caps</span>AND LATER IN LARGE CAPS.
CSS的鏈結設定
連接的預設樣式是藍色，且有下劃線。可是，有的時候，我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成：
a:link: 設定當連接過去的網頁尚未被看過時，該連接的樣式。
a:visited: 設定當連接過去的網頁已經看過時，該連接的樣式。
a:hover: 設定當滑鼠蓋在連接上面時，該連接的樣式。
a:active: 設定當連接被點擊時，該連接的樣式。
a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}
以上樣式的意思為：
1) 一開始時，連接文字的顏色是紅色。
2) 一但被連接的頁面有被看過，連接文字顏色就變為藍色。
3) 當滑鼠蓋在連接上面時，文字大小變為 20，文字顏色變為綠色，而且下劃線會出現。
4) 當連接被點擊時，文字顏色變為粉紅色，而且下劃線不會消失。
CSS中常見的清單
1. list-style-type(設定符號) (行內設定)
2. list-style-position (行內設定)
3. list-style-image
4. list-style
1.list-style-type
設定在清單中，每一條之前的記號要用什麼。最常見的 list-style-type 設定值為：
設定值: none (沒有)
disc (全黑圓圈)
circle (空心圓圈)
square (正方形)
upper-latin (大寫拉丁文)
lower-latin (小寫拉丁文)
upper-roman (大寫羅馬文)
lower-roman (小寫羅馬文)
upper-alpha (大寫希臘文 )
lower-alpha (小寫希臘文 )
<ul style="list-style-type:upper-roman;">
<li>項目 1</li>
<li>項目 2</li>
</ul>
2.list-style-position 讓我們可以決定記號是否應該被視為是文字的一部份，並且由此而決定記號的位置。
這個屬性可能的設定值為 "inside" 及 "outside"。預定值為 "outside"。
<ul style="list-style-position:inside;">
<li>第一項<br>第一項第二行</li>
<li>第二行</li>
</ul>
3.list-style-image
用來將某個圖案設定為記號。這個屬性的用法為
list-style-image:url([image_url]);
ul {
list-style-image:url("檔案網址");
}
<ui>
<li>第一項利用我自己設定的記號</li>
<li>第二項利用我自己設定的記號</li>
</ul>
4.list-style
以上提到的這三個屬性可以被簡化為一個 list-style 屬性。在這裡，屬性的順序並不重要。
ul {
list-style:url("檔案網址"); none inside;
}
<ul>
<li>第一項以捷徑方式列出的清單</li> <li>
第二項以捷徑方式列出的清單</li>
</ul>
CSS表格的設定(table)
table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性，例如 文字、字體、邊框、顏色、以及 背景。
1.border-collapse 基本上，這個屬性可以直接代替 cellspacing=0 的宣告。功能就是無間隙的連接前一個<th>與後一個<th>。
CSS常見的位置設定
1. position
2. top
right
left
bottom
3. overflow
4. z-index
1.position
制定出要用哪一類的位置，設定值可以是一下種類:
static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
relative:這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
fixed:這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。
2.top, right, bottom, left
位置值可以是長度、百分比、或是 auto。
div {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
top:10px;
left:50px;
}
<div>
<p>舉例文字</p>
</div>
3.overflow
是用來設定當內容放不下時的處理方式。可能的值包括：
設定值 visible: 內容完全呈現，不管放得下放不下。
hidden: 放不下的內容就不顯示出來。
scroll: 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
auto: 當內容放不下時，加上捲軸的功能。
4.z-index
用來決定元素重疊的順序。換言之，當兩個元素有重疊的情況時，
z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。
例如: #radblock { <div id="redblock"></div>
z-index:1; <div id="pinkblock"></div>
position:absolute; 可見，粉紅色方塊 (pinkblock) 的 z-index
weidth:80px; 值 (2) 比紅色方塊 (redblock) 的 z-index
height:100px; 值 (1) 高，因此粉紅色方塊在上面。
top:20px;
left:20px;
border:1px solid #FFF;
background-color:#FF00FF;
}
#pinkblock {
z-index:2;
position:absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border:1px solid #FFF;
background-color:#FF00FF;
}
CSS的文字樣式設定
1. direction
2. letter-spacing
3. line-height
4. text-align
5. text-decoration
6. text-indent
7. text-transform
8. word-spacing
1.direction
是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。
p {
direction:ltr;
}
<p>LTR方向</p> //左邊對齊
p {
direction:rtl;
}
<p>RTL方向</p> //右邊對齊
2.letter-spacing 設定每一個字母之間的空間。
p {
letter-spacing:8px;
}
<p>8px between letters</p>
3.line-height
是用來設定每一行之間的間距。
p {
line-height:40px;
}
<p>第一行和第二行之間<br>相隔40px。</p>
4.text-align
設定文字是如何對齊。
設定值 left： 靠左對齊
right： 靠右對齊
center： 向中間對齊
justified： 左右對齊
5.text-decoration
設定文字上有什麼裝飾。可能的值包括：
設定值 underline: 文字下加上一條線。
overline: 文字上加上一條線。
line-through: 文字中間加上一條線劃過去。
blink: 讓文字閃爍。
6.text-index
設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。
p {
text-indent:15px; 之後的行數就沒有留任和空間了。
}
<p>這一段第一行的最前面會留 15px 的空間。</p>
7.text-transform
用來控制大小寫是如何展現的。
設定值 capitalize：每一個字的第一個字母都以大寫顯現，其他的字母則不改變。
uppercase：所有的字母都以大寫顯現。
lowercase：所有的字母都以小寫顯現。
none：大小寫不做任何改變。
8.word-spacing
設定每個字與每個字之間的距離。
CSS浮動一個在大型網站常見的格式，就是將文字繞著一個圖案顯現。
float 屬性有三個可能的值：left、right、和 none。來看看以下的例子：
#leftfloat {
float:left;
}
<span id="leftfloat">
<img src="yp.jpg">
</span>
這個例子是用來顯示 float:left 會如何影響整個頁面的呈現。在這裡，圖案浮動於左邊。
CSS清除
用來抵銷 float 屬性的作用。
設定值 left： 消除左邊的浮動。
right： 消除右邊的浮動。
both： 消除左邊及右邊的浮動。
none： 不消除任何一邊的浮動。
#leftfloat {
float:left;
}
#clearleft {
clear:left;
}
這個例子<span id="clearleft">展現出 clear:left 能夠抵銷 float 屬性的值。
<span id="leftfloat"><img src="yp.jpg"></span>
在上面的例子中，一但 clear:left 的樣式被用上，float:left 就不再有作用。也就因為這樣，在 clear:left 樣式後的所有文字都是在圖案之下。
CSS滑鼠游標圖案
{ cursor: crosshair; } 十字游標
我們也可以自定游標圖案。自定圖案的語法是：
{ cursor: url(圖案網址); }