slider

網頁設計筆記

Web Design

首頁/網頁設計講義

初探CSS筆記

CSS的特色

CSS(Cascading Style Sheets)的中文稱為「串接樣式表」
CSS的特色
(1)它能讓我們更精確的控制網頁版面的文字、背景、字型等網頁外觀及美化。
(2)它能只修正一個 CSS 文件，便可同時更新眾多的網頁版面外觀及格式。
(3)它可以使 html 的文件內碼更精簡，縮小檔案下載的速度。
(4)適用於各種作業平台。

撰寫的方式是在標籤後以大括號包覆屬性設定，詳寫法如下：

                            h1{
                            	font-size:20px;
                            	line-height:2em;
                            	color:#D7297A;
                             }

常見CSS選取器（Selector）種類簡介

標籤：Type selectors（型態選擇器，Dreamweaver稱為標籤選擇器，因為套用於HTML標籤。 設定於HTML的標籤上，網頁上所有的標籤都會套用。

h1{
      font-size:15px;
}
ID：ID selectors（ID選擇器）。 「#」開頭，名稱可自訂，一頁網頁同一個ID屬性值只能套用一個地方，屬於獨一無二的屬性值。

#id{
      font-size:15px;
}
類別：Class selectors
（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(#,#,#) 用數字來表示紅色藍色以及綠色的混合。
Adobe color cc以及 調色盤/色調產生器，可以找出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:135 159;
background-repeat 背景是否重複 預設為重複、repeat(重複)
repeat-x(水平重複)、repeat-y(垂直重複)
no-repeat(不重複)		 background-repeat:repeat;
【文字設定值】
文字設定值 設定說明 可能值 範例
font 文字設定 以下所有皆可使用 font:arial;
font-family 字體設定 字體名稱 font-family:"Noto Sans TC", 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:2px solid blue;
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:10px 20px 30px 5px;
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;
BOX Model盒子模型：元素與元素之間的關係
【項目清單設定值】
list-style-type，可以用來設定 ul li （無排序項目）或 ol li（有排序項目） 的項目符號
參數 定義
none 不顯示符號
disc 實心圓形
circle 空心圓形
square 實心正方形
lower-alpha 小寫英文字母
upper-alpha 大寫英文字母
decimal 阿拉伯數字
decimal-leading-zero 十進位制的阿拉伯數字，前方自動補零
armenian 亞美尼亞語
lower-greek 希臘語
lower-roman 小寫羅馬數字
upper-roman 大寫羅馬數字