CSS 語法備忘錄
索引：
一、文件引入方式
二、CSS的聲明與優先順序方式
三、盒模型的觀念
四、塊狀元素與內聯元素的區別
五、文字樣式
六、背景
七、表格
一、文件引入方式
1、連結式 ： 在網頁的<head></head>標籤對中使用<link>標記來引入外部樣式表文件，使用html規則引入外部css (用得比較多) :
<link href="./mystyle.css" rel="stylesheet" type="text/css"/>2、導入式 ： 將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">比較：link引用和import引用區別是：link是html加載前就引用，而import是html加載後才引用。舉例，採用impor引用，會先顯示無樣式的頁面，然後再把樣式放進去。如果用JavaScript動態引用CSS，得使用link引用方式才可實現。
@import"mystyle.css"; 此處要注意.css文件的路徑，必須放css第一行</style>
3、內聯css文件，直接在header 裡面寫css，如：
<style type="text/css">這種方法的使用情況要少的多，最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。與第一種方法比起來，優點突出，弊端也明顯。優點：速度 快，所有的CSS控制都是針對本頁面標籤的，沒有多餘的ＣＳＳ命令；再者不用外鏈ＣＳＳ文件。直接在ＨＴＭＬ文檔中讀取樣式。缺點就是改版麻煩些，單個頁 面顯得臃腫，ＣＳＳ不能被其他ＨＴＭＬ引用造成代碼量相對較多，維護也麻煩些。但是採用這種方法的公司大多有錢，對他們來說用戶量是關鍵，他們不缺人進 行複雜的維護工作。
div{margin: 0;padding: 0;border:1px red solid;}</style>
4、直接在標籤裡面寫樣式
<div style="border:1px red solid;">測試信息</div>不經常改的地方 。可以一用，，但是 還是 謹慎使用，很不符合大眾。
資料來源
二、CSS的聲明與優先順序方式
1、id 選擇器(selector) 使用：
- 語法宣告法：#ID 選擇器名稱{ 屬性：設定值； ... }。
- id 屬性只能在每個HTML 文檔中出現一次
例：2、Class類選擇器：
#red { color :red;}
#green { color :green;}
< p id = "red" >這個段落是紅色。</ p >
< p id = "green" >這個段落是綠色。</ p >
- 語法宣告法，.選擇器名稱{ 屬性：設定值； ... }
例：3、標韱選擇器：
.navbar { color:#0000FF; }
<p class="navbar">這是用 Class 選擇器的例子。</p>
- 語法宣告法，標韱名稱 { ...}
- 影響尚未指定之相同標韱
4、標韱繼承選擇器：
- 語法宣告法：標韱名稱 空格 標韱名稱 空格 標韱名稱 空格... { ...}
- 影響父標韱下子標韱
5、組合選擇器：
- 語法宣告法：.標韱名稱 , #標韱名稱 , ... { ...}
6、子選擇器
- 語法宣告法：標韱選擇器名稱>子標韱選擇器名稱 , ... { ...}
- 例：div>ul
7、標韱下第一層標韱
- 語法宣告法：標韱選擇器名稱+標韱選擇器名稱 , ... { ...}
- 例：div+p
8、標韱下相同等級標韱
- 語法宣告法：標韱選擇器名稱~標韱選擇器名稱 , ... { ...}
- 例：div~p
- id選擇器→class選擇器→標韱選擇器
- 大原則指定區域愈小愈優先
<style>
/*組合選擇器*/
#test1 , .test2 {
width:300px;
height:100px;
}
/*id選擇器*/
#test1{
background:gray;
}
/*class選擇器*/
.test2{
background:lightblue;
}
/*繼承選擇器*/
div p {
width:100px;
height:50px;
background:indianred;
}
p {
background:lawngreen;
}
/*標韱選擇器*/
div {
width:50px;
height:50px;
background:yellow;
}
</style>
...
<div id="test1">id test1</div>
<br>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<br/>
<div>
<pre> <p>div下子標韱</p></pre>
</div>
...
其他選擇器參考此鏈結
Class 跟 ID 的比較
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。
並沒有什麼固定的規則，來決定什麼時候要用 ID 及什麼時候要用 Class。我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外，是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下，你就應該要用 ID。
Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器
三、盒模型的觀念：
語法：
- Maring：上 右 下 左
- 當只指定上與右，則未指定會對照另一邊
- Border：寬 形狀 顏色
- 單獨設定：
- 寬(border-width)
- 形狀(border-style)
- 顏色(border-color)
- 使用時機，文字與文字使用Padding，盒子與盒子之間用Margin。
- Padding的背景色就是 background 背景色。
- Padding 設定的尺寸會另外加入width 內。
- 一個盒子，有設定maring , border ,padding等，實佔多少空間：
- 堅直大小：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
- 水平大小：width + padding-left + padding-right + border-left + border-right + margin-left + margin-bottom
- Margin 相同階層或父子階層，當上下相鄰的普通元素，上下邊緣，並非簡單的相加，而是取其中較大的邊呲值這種現象叫做 Margin 重疊。
- 在文字行距內垂直設定Margin、padding 是不可以設置，故要設定文字變化，使用span標韱。
- 相同的元素，如 li，在不同的瀏覽器下，顯示的效果稍有不同，是因為而瀏覽器
獨占一行
|
能設寬高
|
是否可以設定垂直方向的 margin, padding
| |
塊狀元素
|
是
|
是
|
是
|
內聯元素
|
否
|
否
|
否
|
- none ：將標韱穩藏
- block：將標韱設成塊狀元素
- inline：將標韱設成內聯元素
- 文字段落縮進：text-indent:20px;
- 文字對齊：text-align: left | center | right
- 文字修飾線：text-decoration: upderline | overline | line-through
- 文字間距離：letter-spacing:20px;
- 文字顏色：color:blue;
- 文字型態：font-style: normal | italic | oblique
- 文字粗細：font-weight:bold | thin
- 文字大小：font-size:12px;
- 文字行高：line-height;:46px; 註：如要文字垂直字中，只要設定與目前區塊一樣大即可
- 文字字型：font-family:'SimHei' |'微軟雅黑'
- 字體可以設定載入順序 font-family："順序3",''順序2","順序1";
- 字體可以設定有襯線 (serif) 與無襯線 (sans-serif)
- 複合文字設定：順序 font-style → font-weight → font-size / line-height → font-famly
- 例如：font:italic bold 20px/46px "微軟正黑體"; (要照順序)
六、背景
< background-image >： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
< background-position >： 指定对象的背景图像位置，例如圖形置中 background-position:left center;。
< background-size >： 指定对象的背景图像的尺寸大小。
< background-repeat >： 指定对象的背景图像如何铺排填充。
< background-attachment >： 指定对象的背景图像是随对象内容滚动还是固定的。
< background-origin >： 指定对象的背景图像显示的原点。
< background-clip >： 指定对象的背景图像向外裁剪的区域。
< background-color >： 指定对象的背景颜色。
複合元素設定：background:<color> || <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment>
- 作用設置表格的邊線是合併或分離：border-collapse：separate | collapse
- separate：邊框獨立
- collapse：相鄰邊被合併
留言