Neil's Note

Table Borders      用 border 這個property可以指定邊界     範例 table, th, td {     border: 1px solid black; } 將table,th,td這三個HTML的元素設定其邊界為1px,實心黑線 原W3School的Demo

List      在HTML,List有兩種類型 沒有順序的lists(unordered lists) - the list items are marked with bullets 有順序的lists(ordered lists) - the list items are marked with numbers or letters The CSS list properties 可以讓你 .. 對ordered lists設定不同的list items 對unordered lists設定不同的list items 用圖片來設定list item

Links 可以用如color,font-family,background等來改變style Link有四種狀態 a:link           -  就普通正常的link,還沒被點擊過的    a normal, unvisited link  a:visited      -  一個被使用者點擊過的link             a link the user has visited a:hover       -  使用者滑鼠經過時的link                 a link when the user mouses over it a:active       -  正被點擊時的link                          a link the moment it is clicked 範例 a:link {color:#FF0000;}     /* unvisited link */ a:visited {color:#00FF00;}  /* visited link */ a:hover {color:#FF00FF;}    /* mouse over link */ a:active {color:#0000FF;}   /* selected link */ 原W3School的Demo 可以針對"This is a link"去測試上面說的四種狀態! 當要設定數種Link狀態的style時,有些順序要注意! a:hover必須在  a:link跟 a:visited   之後 a:active必須在a:hover之後 Text Decoration text-decoration 這個property最常用來去除超連結的底線 範例 a:link {text-decoration:none;}          /* 讓一般正常的link沒有底線 */ a:visited {text-decoration:none;}       /* 讓被點過的link沒有底線  */ a:hover {text-decoration:underline;}    /* 滑鼠移過去時會有底線*/ a:active {text-deco

CSS Font 的properties用來定義字的字型、粗細與字的style(例如:斜體)等 CSS Font Families 通常有兩種Font Families的type generic family -  一群字體看起來類似的font families (ex: "Serif" or "Monospace" ) font family -  一個特定的font family (ex:  "Times New Roman" or "Arial" ) Generic family Font family Description Serif Times New Roman Georgia Serif fonts  在某些字的尾端有 small lines  Sans-serif Arial Verdana "Sans" 意思是就是"沒有" - 與上面對比,在字體的尾端都不會有small line! Monospace Courier New Lucida Console 所有的monospace字元都有相同的寬度 Font Family 一段text的font family就是被font family的property所設定的 font-family property應該會有幾個叫做"fallback"的字型, 當瀏覽器不支援第一個字型的時候,瀏覽器會試試看下一個字型有沒有支援 開頭用自己想要的字型,結尾用generic family,如果都不支援,讓瀏覽器可以在generic family內選一個相似的字型 *注意 : 若那個字體的名稱超過一個英文單字,必須用雙引號包起來 範例  p{font-family: " Times New Roman " , Times, serif;} font family間必須用逗號隔開 原W3School的Demo 通常是font-family的第一個,若電腦無此字體則用下一個代替! Font Style font-style 這個property通常是拿來讓字

字體的顏色 value 同樣地是有以下三種表達方式 十六進位的值,如   "#ff0000" RGB的值,如   "rgb(255,0,0)" 顏色的名稱,如   "red" 在css內預設color的property就是代表 字體 的顏色哦! 範例: body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} 原W3School的Demo 文字的對齊 text-align property : 設定文字水平的對齊方式 置中 : center 靠左 : left 靠右 : right 讓每行有同樣的寬高與同樣的左右邊界 : justify 範例 h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 原W3School的Demo 複習 : p.data代表對於p這個HTML元素來說有個class="date",並定義date的文字對齊方式 文字的Decoration text-decoration property是用來設定文字有沒有裝飾(文字上加線,底線,刪除線等等) 最常拿來用是移除超連結的底線! 範例1 a {text-decoration:none;} (將a的文字裝飾拿掉) 原W3School的Demo 會發現超連結的W3School 範例2 h1 {text-decoration:overline;}      // h1文字上加線 h2 {text-decoration:line-through;}  // h2文字被線從中劃過 h3 {text-decoration:underline;}     // h3文字加上底線 h4 {text-decoration:blink;}         // 使h4的文字閃爍 IE,Chrome,Safari不支援 原W3School的Demo 文字的大小寫轉換  text-transform property是用來使定在元素內的大寫或是小寫

背景(Background)的部分 用於背景的properties有以下這些 background-color background-image background-repeat background-attachment background-position 背景顏色 Background Color background-color這個property是指定HTML一個元素的背景顏色 範例 : 對body這個選擇器的背景顏色做設定 body {background-color:#b0c4de;} 通常顏色的value會用以下幾點來表示 十六進位的值,如 "#ff0000" RGB的值,如   "rgb(255,0,0)" 顏色的名字,如 red 範例 : h1 {background-color:#6495ed;} (讓h1的背景顏色為   #6495ed p {background-color:#e0ffff;} div {background-color:#b0c4de;} 背景圖片 Background Image 直接舉例比較快 body { background-image :url('paper.gif');} body { background-image :url('bgdesert.jpg');} 可以讓圖片在x軸或y軸重複並列 body {     background-image:url('gradient2.png');      background-repeat : repeat-x ;   //向x軸並列 } 效果請看 讓圖片不會自己並排顯示 body {     background-image:url('img_tree.png');     background-repeat:no-repeat; } 請看原W3School的Demo 原本設定為背景的圖片會自動並排顯示,透過css的 no-repeat 設定,讓圖片只顯示一次 讓圖片不會並排顯示並指定顯示在右上(下)方(background-positi

CSS     C ascading  S tyle  S heets 的縮寫     用來定義HTML元素如何呈現 Selector (選擇器) : 正常來說是HTML內的元素 Property : 通常是元素內的屬性 每個宣告都有Property(?)+value(值) 範例 : p {     color:red;     text-align:center; } 除了可以設定HTML元素的呈現方式外,還可以個別的id或是class去做特定的宣告! In addition to setting a style for a HTML element,  CSS allows you to specify your own selectors called "id" and "class". id選擇器 對特定的,唯一的HTML元素去定義 id其實就是HTML元素的屬性,因此id選擇器被定義會加上#號 範例: <style type="text/css"> #para1           <-----配合下面的id="para1",且前面要多加上#號! { text-align:center; color:red; }  </style> /*HTML內*/ <body> <p  id="para1" >Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> class選擇器 對"一群"的HTML元素去定義,不像id選擇器只能定義一個 允許使用者對同樣的class設定特定的style class選擇器也是使用HTML元素的屬性(atrribute),且被"."定義 範例1: /*css的部分*/ <style type="text/css"> .center   <--定義一個class selector with "