「2020/資訊基礎應用/CSS」修訂間的差異
跳至導覽
跳至搜尋
（→今日練習） |
（→三層關係） |
||
| 行 2： | 行 2： | ||
在網頁的世界裡，最後呈現給觀眾看的會是HTML，無論是CSS、PHP還是javascript，在每一個網頁查看原始碼時，我們都能看見它們以HMTL呈現。 | 在網頁的世界裡，最後呈現給觀眾看的會是HTML，無論是CSS、PHP還是javascript，在每一個網頁查看原始碼時，我們都能看見它們以HMTL呈現。 | ||
HTML就像網頁的身體，而今日的主題CSS就是衣服，CSS不能單獨存在，它是為了HTML而生，每一行定義指令，都必須有個對應的身體，不然CSS就沒有存在的意義，即無法呈現給使用者。 | HTML就像網頁的身體，而今日的主題CSS就是衣服，CSS不能單獨存在，它是為了HTML而生，每一行定義指令，都必須有個對應的身體，不然CSS就沒有存在的意義，即無法呈現給使用者。 | ||
| − | === | + | ===三層階級=== |
| + | 第一階級直接在一行程式碼裡面進行定義，舉例： | ||
| + | <p style='color:red'>紅字</p> | ||
| + | |||
| + | 第二階級在檔案的最前端進行定義，並且給段落設定class，舉例： | ||
| + | |||
| + | <style> | ||
| + | .color{ | ||
| + | color:red; | ||
| + | } | ||
| + | </style> | ||
| + | <p class='color'>紅字</p> | ||
===今日練習=== | ===今日練習=== | ||
於 2020年11月16日 (一) 09:10 的修訂
主要架構
在網頁的世界裡，最後呈現給觀眾看的會是HTML，無論是CSS、PHP還是javascript，在每一個網頁查看原始碼時，我們都能看見它們以HMTL呈現。 HTML就像網頁的身體，而今日的主題CSS就是衣服，CSS不能單獨存在，它是為了HTML而生，每一行定義指令，都必須有個對應的身體，不然CSS就沒有存在的意義，即無法呈現給使用者。
三層階級
第一階級直接在一行程式碼裡面進行定義，舉例：
紅字
第二階級在檔案的最前端進行定義，並且給段落設定class，舉例：
<style> .color{ color:red; } </style>
紅字
今日練習
建立一個HTML與一個CSS，在這裡HTML不做任何樣式定義，但三段文字的樣式都不同。 html範例 css範例
今日作業
製作一個HTML檔，不做任何樣式定義，但卻都不是預設的樣式。裡頭必須包含一個表格、一段落文字、一張照片、一個標題。 範例
