Skip to content

week3.md

stereomp3 edited this page May 10, 2021 · 14 revisions

Please download 網頁設計第三次上課.docx to see the content picture of homework, thanks.



如果要使用CC (creative commons)
將以下HTML碼貼到你的網頁上,讓使用者知道你的授權方式

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="創用 CC 授權條款" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本著作係採用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">創用 CC 姓名標示 4.0 國際 授權條款</a>授權.

CSS

CSS Introduction

CSS是一種排版語言,可以讓網頁呈現比較美的感覺。內容和格式分開,網頁好維護。

error


## CSS Syntax(語法)

error


## CSS Selectors(選擇器)*

error

選擇器一共有3種
第一種無:  可以把指定的東西都加上屬性, 第二次上課有提過

第二種id :  id具有唯一性, 一個詞在一份文件只能出現一次 .

error

第三種class :  class可以指一整群, 只要有class標籤 .

error

下面是組合用法

error
error
error


## CSS How to Add

error
error
error
error


## CSS Comments
CSS註解表示方式 : /*…*/ , 不能使用//在CSS
Html註解表示方式 : <!--…-->

## CSS Color

error

顏色不只可以用文字表示,也可以用RGB表示(第2次上課有提到)
表示背景顏色用"background-color:...", 而文字顏色用”color:…”

也可以設邊(border)的顏色

error
error

a是表示透明度

## CSS Background

error

Opacity 是設置透明度, div是指區塊(會換行) EX:
<body>
 <h1>這裡是網頁標題</h1>
 <div>這裡是網頁第一個區塊的內容</div>
 <div>這裡是網頁第二個區塊的內容</div>
 ...
</body>

error

Background-repeat: 

error
error


## CSS Box Model

error


## CSS Borders

berror

Width:

error
error

甚麼類型直接一次寫(最常用)

## CSS Margins
Margin collapse

error

margin : 下左上右,也可以 margin : ..px

## CSS Padding

error

Padding也可以上下左右不同大小(較少用)

## CSS Height/Width

error


## CSS Outline

error

用法和Box model 差不多

## CSS Text

error

字體顏色和字左右對齊

error
error
error
error

設置陰影

error


## CSS Fonts
自行一般都不會設,因為作業系統會有不一樣的設定

## CSS Icons
可以先去網站找icon再用原始碼把它進去

error
error


## CSS Links

error

: 繼承

## CSS Lists
<ul>代表unorder list(點點)
<ol>代表order list(1.2.3….)
<li>代表list item

error

可以在文字的前面加一張圖

error


## CSS Table

error


## CSS Display
顯示的形式

不顯示直接影藏error

一個接一個不換行error

會換行error


## CSS Max-width
到達最大寬度就不再變化,通常用在電腦網頁和手機網頁共用的網站原始碼

error


## CSS Position
static

error

relative

error

fixed

error

absolute

error

Sticky(別人往下它不會往下)

error

CSS Overflow

error


## CSS Combinator

error


## CSS Perview

error

Clone this wiki locally