CSS網頁設計筆記

CSS(Cascading Style Sheets)的中文稱為「串接樣式表」，CSS的特色: (1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化。

(2)它能只修正一個CSS ... CSS筆記 |  常見CSS選取器（Selector）種類簡介 |  CSS單位與色彩示意 |  常見CSS屬性表 CSS(CascadingStyleSheets)的中文稱為「串接樣式表」，CSS的特色: (1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化。

(2)它能只修正一個CSS文件，便可同時更新眾多的網頁版面外觀及格式。

(3)它可以使html的文件內碼更精簡，縮小檔案下載的速度。

(4)適用於各種作業平台。

撰寫的方式是在標籤後以大括號包覆屬性設定，詳寫法如下： h1{ font-size:20px; line-height:2em; color:#D7297A; } 常見CSS選取器（Selector）種類簡介 標籤：Typeselectors（型態選擇器，Dreamweaver稱為標籤選擇器，因為套用於HTML標籤。

設定於HTML的標籤上，網頁上所有的標籤都會套用。

ID：IDselectors（ID選擇器）。

「#」開頭，名稱可自訂，一頁網頁同一個ID屬性值只能套用一個地方，屬於獨一無二的屬性值。

類別：Classselectors（Class選擇器，Dreamweaver稱為類別選擇器）。

「.」開頭，名稱可自訂，一頁網頁可有多個class屬性值，且同一class屬性值可同時套用多處。

如： .class{      font-size:15px;} CSS單位與色彩示意 【長度/字體單位】 單位 單位說明 範例 px 大多數網站在文字的單位都是使用px，尤其在台灣多數使用者都是用windows系統，不管是什麼瀏覽器，在windows下都是以單數px是較為清楚的，如13xp．15px等，而px在建立網站時也是較為方便及準確的 font-size:10px; em 1em等於元素單位的字體尺寸。

2em等於當前字體尺寸的兩倍。

如某元素以12px顯示，那麼2em是24px。

在CSS中，它可以自動適應用戶所使用的字體。

line-height:2em;行間為兩倍字高 % 佔元素單位的百分之多少 font-size:120%; 【色彩示意】 色彩示意方式 意示說明 範例 #rrggbb 16進位碼簡寫為Hex，以(#000000)表示，如色碼表：可找到相應色碼 color:#feefc7; rgb(#,#,#) 用數字來表示紅色藍色以及綠色的混合。

Adobecolorcc以及 調色盤/色調產生器，可以找出16進位及ＲＧＢ顯色的各種轉換 color:rgb(135,255,124); 色彩名稱 用色彩的名稱來指定顏色，可參考顏色名。

color:red; 常見CSS屬性表 【background背景設定值】 背景設定值 設定說明 可能值 範例 background 背景設定 以下所有皆可使用 background:fixed; background-color 背景顏色 任何顏色表示方法 backgroun-color:red; background-image 背景圖片 連結至背景圖片檔名（注意連結路徑） background-image:url('p92.jpg'); background-attachment 背景圖是否固定 fixed(固定）,scroll（捲動） fbackground-attachment:fixed; background-position 背景圖位置 水平、垂直（座標值） background-position:135159; background-repeat 背景是否重複 預設為重複、repeat(重複)repeat-x(水平重複)、repeat-y(垂直重複)no-repeat(不重複) background-repeat:repeat; 【文字設定值】 文字設定值 設定說明 可能值 範例 font 文字設定 以下所有皆可使用 font:arial; font-family 字體設定 字體名稱 font-family:"NotoSansTC",sans-serif; font-size 文字大小設定 數字(單位)或百分比 font-size:18px; color 文字顏色設定 任何顏色表示方法 color:#eee; font-weight 文字粗細設定 normal(普通)、bold(粗體)、bolder(超粗體)、lighter(細體)、數字(預設值為400) font-weight:bolder; line-height 文字行列高度（行間） 任何數字單位表示方法 line-height:1em; letter-spacing 字元間距 normal(普通)，數字(預設為0) letter-spacing:5; text-decoration 字元樣式 none(普通)、underline(加底線)blink(閃爍)、line-through(加刪除線)overline(加頂線) text-decoration:underline; text-align 文字對齊屬性 left：向左對齊、right：向右對齊 center：置中對齊、justify：使左右對齊本文 inherit：繼承父元素的text-align屬性 text-align:center; 【a超連結設定值】 超連結設定值 設定說明 可能值 範例 a(a:link) 設定尚未點閱過的連結樣式顏色 文字顏色、文字樣式、文字大小、背景顏色等 a{color:#BB0000;text-decoration:none;} a:hover 設定當滑鼠移至超連結文字上面時的顯現方式 文字顏色、文字樣式、文字大小、背景顏色等 a:hover{color:#1100FF;background:#d0e4fe;} a:active 設定正被選取之超連結文字顯現方式 文字顏色、文字樣式、文字大小、背景顏色等 a:active{color:#0000BB;} a:visited 設定過去曾經閱過的連結顏色 文字顏色、文字樣式、文字大小、背景顏色等 a:visited{color:#0000BB;} 【border邊框設定值】 背景設定值 設定說明 可能值 範例 border 邊框設定(通常直接使用border設定三種屬性） 可能的值:border:寬度樣式顏色 border:2pxsolidblue; border-width 邊框寬度 像素px、字高em、百分比%、各種長寬單位 border-width:10px; border-style 邊框樣式 none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、groove(立體凹線)、ridge(立體凸線)、inset(立體嵌入線)、outset(立體隆起線) border-style:dotted; border-color 邊框顏色 任何顏色表示方法 border-color:#d0e4fe; 【padding內距設定值】 內距設定值 設定說明 可能值 範例 padding 區塊內容的內部距離 padding:長度單位數值;(上右下左的距離都一樣，寫一個數字) padding:上距離右距離下距離左距離;(四個方位的內距都不一樣，分開設定。

) padding:上方與下方距離左方與右方距離;(上下的內距相同，左右的內距相同。

) padding:上方距離左方與右方距離下方距離;(左右兩邊的內距相同，分別設定上方與下方的內距) padding:10px20px30px5px; padding-top 上方內部距離 各種長寬單位 padding-top:15px; padding-right 右邊內部距離 各種長寬單位 padding-left:10px; padding-bottom 下方內部距離 各種長寬單位 padding-bottom:10px; padding-left 左邊內部距離 各種長寬單位 padding-left:10px; 【margin外距設定值】 外距設定值 設定說明 可能值 範例 margin 區塊內容的外部距離 margin:長度單位數值;(上右下左的外部距離都一樣，寫一個數字) margin:上距離右距離下距離左距離;(四個方位的外距都不一樣，分開設定。

) margin:上方與下方距離左方與右方距離;(上下的外距相同，左右的外距相同。

) margin:上方距離左方與右方距離下方距離;(左右兩邊的外距相同，分別設定上方與下方的外距) margin:10px; margin-top 上方外部距離 像素px、字高em、百分比%、各種長寬單位 margin-top:15px; margin-right 右邊外部距離 各種長寬單位 margin-left:10px; margin-bottom 下方外部距離 各種長寬單位 margin-bottom:10px; margin-left 左邊外部距離 各種長寬單位 margin-left:10px; BOXModel盒子模型：元素與元素之間的關係 【項目清單設定值】 list-style-type，可以用來設定ulli（無排序項目）或olli（有排序項目）的項目符號 參數 定義 none 不顯示符號 disc 實心圓形 circle 空心圓形 square 實心正方形 lower-alpha 小寫英文字母 upper-alpha 大寫英文字母 decimal 阿拉伯數字 decimal-leading-zero 十進位制的阿拉伯數字，前方自動補零 armenian 亞美尼亞語 lower-greek 希臘語 lower-roman 小寫羅馬數字 upper-roman 大寫羅馬數字