單元課程02：HTML CSS 設計應用

一、CSS 基本介紹

1.CSS 線上課程參考: https://www.w3schools.com/css/default.asp

2.CSS是「Cascading Style Sheets」的縮寫，Cascading是串接;Style是樣式；Sheets則是列表，通常稱為「串接樣式表」。主要功能是可以針對HTML網頁內的元件，設定呈現的樣式，以為網頁執行的顯現參考。

3.CSS 的語法：

選擇器(網頁內的變數設定) {
屬性：設定值；
...
}

(1)選擇器是網頁內HTML的元素標籤

如：

     p {
     text-align: center;
     color: red;
    }

(2)選擇器是自訂的ID，以【# + ID名稱】定義

     #ID名稱{
      屬性：設定值；
      ...
   }

如：

       #footer {
      color:#FF00FF;
     }

(3)選擇器是自訂的 Class，以【.+ class名稱】定義

     .Class名稱{
    屬性：設定值；
     ...
    }

如：

       .navbar {
       color:#0000FF;
      }

4.CSS 套用方式
(1)直接在指令行內套用 (Inline)

如：

(2)在網頁的宣告部分嵌入套用 (Embed)

A.在HTML文件的 <head> ...</head> 之中，以 <style> CSS語法 </style> 進行CSS格式套用。

B.如：

      <head>
     <style type="text/css">
        div {
              background-color:#FF0000;
           }
     </style>
</head>

(3)存成外部檔案，連接套用 (External Link)
A.將所有CSS樣式宣告都存一個檔案中，該檔案通常名稱為 .css。

B.在HTML文件的 <head> ... </head> 之中，加入連結到 .css 檔案的語法，如：
<link rel=stylesheet type="text/css" href="new01.css">
　

二、CSS基本功能設計應用

(一)顏色(color)

1.color 屬性的語法：{color:設定值;}

(1) 十六進位值:以六碼 (如果前兩碼、中間兩碼、以及最後兩碼都一樣的話，那也可以以三碼的形式表現。舉例來說，#FFF 及 #FFFFFF 都是代表白色) 來設定顏色。十六進位碼顏色表主要數值從 0 到 9，以及 A 到 F。
{color:#XXXXXX;}

(2)RGB:介於 0 和 255 之間的數字
{color:rgb(X,Y,Z); }

(3)顏色名稱: red 、black 、yellow
{color:[顏色名稱];}

2. 案例參考

CSS 樣式	顯現結果
p {color:#FF0000;}	FF0000 代表紅色。
p {color:rgb (255,0,255);}	rgb(255,0,255) 是粉紅色。
p {color:green;}	這是綠色。

(二)背景(background)

1.background 屬性的語法

* background-color:用來指定背景的顏色

如： p {background-color: red;}

* background-image:用來指定圖案當做背景

如：p {background-image:url(yp.jpg);}

* background-repeat:用來指定背景圖案是否重複， "repeat"，代表在 x- 及 y-方向都會重覆，

x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。

    如：p {background-image:url(yp.jpg);
         background-repeat: no-repeat;
        }

* background-attachment:用來指定背景圖案是否在螢幕上固定，fixed:固定，scroll:滾動。

    如：body {background-attachment: fixed;
            background-image: url("yp.jpg");
            background-repeat: no-repeat;
      }
* background-position:用來指定背景圖案的位置，屬性值則以

(1)兩個文字：第一個文字為 [top,center,bottom] 上中下擇一，第二個文字由 [left,center,right] 左中右擇一。

如：{background-position: center center;}

(2)兩個% ：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。

如：{background-position: 20% 20%; }

(3)兩個數字：第一個數字為 x-軸的位置，第二個數字為 y-軸的位置。

如：如：{background-position: 10 10; }

2. 案例參考

CSS 樣式	顯現結果
body {background-color: red;}	背景紅色
body {background-image:url(yp.jpg); background-repeat: no-repeat; }	背景圖形不重複
body {background-position: center center;}	背景圖形置中

(三)字體(color)

1.字體屬性的語法

* font-family:用來設定字體的類別

如： p {font-family: verdana;}

* font-size: 用來設定字體的大小。可以數字，或是"xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。

如：p {font-size:9px;}

p {font-size:large;}

* font-weight:用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。

亦可設為 bold (厚)、bolder (更厚)、及 normal (正常)。

    如：p {font-weight: 100;}
      p {font-weight: bold;}

* font-style:用來設定字體是否為斜體字 (italic 或 oblique)。

如：p {font-style: italic;}
　

* font-variant: 用來設定文字是不是要以小型大寫 (small caps) 字體顯現。

在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。

如：span { font-variant:small-caps; }

2. 案例參考

CSS 樣式	顯現結果
p {font-family: impact;}	Font Family Impact.
p {font-size:150%;}	字體大小為 150%。
p {font-weight: 900;}	這是厚度 900。

(四)CSS Div 與 CSS Span

1.Div :是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。

Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。

2. Span: 也是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。

可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並不會換行。

3. 案例參考

CSS 樣式

顯現結果

<style>

.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}

</style>

</body>

這是 DIV 範例。

<style>

.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}

</style>

<body>
Span 不是<span class="largefont">區塊級的</span>.

</body>

Span 不是區塊級的.