CSS

Lecturer: Windsor

我也不知道我是誰

S

C

S

Cascading Style Sheets

Sheets

Cascading

Style

階層式

樣式

表

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

大概長這樣

Cascading Style Sheets

階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言

- 維基百科

幫網頁加上視覺效果

醜死人

APPLICATION METHODS

Cascading Style Sheets

要讓HTML元素的外觀改變，首先要連結好 CSS。

Cascading Style Sheets

方法銥：在 <head> 裡加 <style>

<html>
    <head>
        <style>
          	body {
              	width: 400px;
          	}
            h1 {
			    color: red;
        	    background-color: cyan;
			}
        </style>
    </head>
    <body>
        <h1>
            Hello!
            Didn't see you there.
        </h1>
    </body>
</html>

Cascading Style Sheets

方法刵：在元素標籤上加 style 屬性

<html>
    <head></head>
    <body style="width: 400px;">
        <h1 style="background-color: cyan; color: red;">
            Hello!
            Didn't see you there.
        </h1>
    </body>
</html>

Cascading Style Sheets

方法毿：另外建一個 .css 檔再把它引入 HTML

/*Unnamed-30429.css*/
body {
	width: 400px;
}
h1 {
	color: red;
	background-color: cyan;
}

<html>
    <head>
      	<link rel="stylesheet" href="./Unnamed-30429.css">
    </head>
    <body>
        <h1>
            Hello!
            Didn't see you there.
        </h1>
    </body>
</html>

FORMAT

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

宣告塊 Declaration Block：

基本上就是你看到上面那些東西集合再一起就是一個宣告塊。

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

宣告 Declaration：

由「屬性」和「值」組成。

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

選擇器 Selector：

利用tag name、id、class等等過濾並選取特定的一個或是數個元素。

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

屬性名稱 Property：

可以是字體（顏色、大小、自行、粗體斜體⋯⋯）、背景顏色、匡線、元素大小⋯⋯

Cascading Style Sheets

h1 /*Selector*/ {
    color:            red;
  /*Property:         Value;*/
    background-color: cyan;
}

屬性的值 Value：

我中文不好，你們盡量感性理解。

Cascading Style Sheets

h1 {
    color:            red;
    background-color: cyan;
}

<h1>
    Hello!
    Didn't see you there.
</h1>

ID & CLASS

可以加在 HTML 元素上的屬性 (attribute)

/*style.css*/
#gray {
	color: gray;
}
.ugly {
	color: red;
	background-color: cyan;
}

<html>
    <head>
      	<link rel="stylesheet" href="./style.css">
    </head>
    <body>
      	<h1 class="ugly">Hello!</h1>
      	<h1 id="gray">Didn't see you there.</h1>
    </body>
</html>