2016年5月24日 星期二

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">
@import"mystyle.css"; 此處要注意.css文件的路徑，必須放css第一行
</style>
比較：link引用和import引用區別是：link是html加載前就引用，而import是html加載後才引用。舉例，採用impor引用，會先顯示無樣式的頁面，然後再把樣式放進去。如果用JavaScript動態引用CSS，得使用link引用方式才可實現。

3、內聯css文件，直接在header 裡面寫css，如：
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
這種方法的使用情況要少的多，最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。與第一種方法比起來，優點突出，弊端也明顯。優點：速度 快，所有的CSS控制都是針對本頁面標籤的，沒有多餘的ＣＳＳ命令；再者不用外鏈ＣＳＳ文件。直接在ＨＴＭＬ文檔中讀取樣式。缺點就是改版麻煩些，單個頁 面顯得臃腫，ＣＳＳ不能被其他ＨＴＭＬ引用造成代碼量相對較多，維護也麻煩些。但是採用這種方法的公司大多有錢，對他們來說用戶量是關鍵，他們不缺人進 行複雜的維護工作。

4、直接在標籤裡面寫樣式
<div style="border:1px red solid;">測試信息</div>
不經常改的地方 。可以一用，，但是 還是 謹慎使用，很不符合大眾。

資料來源

二、CSS的聲明與優先順序方式
1、id 選擇器(selector) 使用：
  • 語法宣告法：#ID 選擇器名稱{   屬性：設定值；   ... }。
  • id 屬性只能在每個HTML 文檔中出現一次
例：
#red { color :red;}
#green { color :green;}
< p  id = "red" >這個段落是紅色。</ p >
< p  id = "green" >這個段落是綠色。</ p >
2、Class類選擇器：
  • 語法宣告法，.選擇器名稱{ 屬性：設定值；   ... }
例：
.navbar { color:#0000FF; }
<p class="navbar">這是用 Class 選擇器的例子。</p>
3、標韱選擇器：
  • 語法宣告法，標韱名稱 { ...}
  • 影響尚未指定之相同標韱
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 選擇器

三、盒模型的觀念：


















語法：
  1. Maring：上 右 下 左
    • 當只指定上與右，則未指定會對照另一邊
  2. Border：寬 形狀 顏色
    • 單獨設定：
      • 寬(border-width)
      • 形狀(border-style)
      • 顏色(border-color)
備註：
  1. 使用時機，文字與文字使用Padding，盒子與盒子之間用Margin。
  2. Padding的背景色就是 background 背景色。
  3. Padding 設定的尺寸會另外加入width 內。
  4. 一個盒子，有設定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 
  5.  Margin 相同階層或父子階層，當上下相鄰的普通元素，上下邊緣，並非簡單的相加，而是取其中較大的邊呲值這種現象叫做 Margin 重疊。
  6. 在文字行距內垂直設定Margin、padding 是不可以設置，故要設定文字變化，使用span標韱。
  7. 相同的元素，如 li，在不同的瀏覽器下，顯示的效果稍有不同，是因為而瀏覽器
四、塊狀元素與內聯元素的區別，詳細按此參加
獨占一行
能設寬高
是否可以設定垂直方向的 margin, padding
塊狀元素
是
是
是
內聯元素
否
否
否
值：
  • none ：將標韱穩藏
  • block：將標韱設成塊狀元素
  • inline：將標韱設成內聯元素
五、文字樣式
  1. 文字段落縮進：text-indent:20px;
  2. 文字對齊：text-align: left | center | right 
  3. 文字修飾線：text-decoration: upderline | overline | line-through
  4. 文字間距離：letter-spacing:20px;
  5. 文字顏色：color:blue;
  6. 文字型態：font-style: normal | italic | oblique
  7. 文字粗細：font-weight:bold | thin
  8. 文字大小：font-size:12px; 
  9. 文字行高：line-height;:46px; 註：如要文字垂直字中，只要設定與目前區塊一樣大即可
  10. 文字字型：font-family:'SimHei' |'微軟雅黑'
    • 字體可以設定載入順序 font-family："順序3",''順序2","順序1";
    • 字體可以設定有襯線 (serif) 與無襯線 (sans-serif)
  11. 複合文字設定：順序 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>  

七、表格

  1. 作用設置表格的邊線是合併或分離：border-collapse：separate | collapse
  • separate：邊框獨立
  • collapse：相鄰邊被合併



on
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)