「2020/資訊基礎應用/CSS」修訂間的差異

出自不錯學群
跳至導覽 跳至搜尋
 
(未顯示同一使用者於中間所作的 13 次修訂)
行 1: 行 1:
<table class=nicetable align=center style='width:70%'>
+
===主要架構===
<tr><th>項目</th><th>名  稱</th><th>數  量</th><th>規  格</th><th>備  註</th></tr>
+
在網頁的世界裡,最後呈現給觀眾看的會是HTML,無論是CSS、PHP還是javascript,在每一個網頁查看原始碼時,我們都能看見它們以HMTL呈現。
<tr><th rowspan=4>活動一<br/>及<br/>活動二</th><th>膠水</th><th>50mL</th><th>11~13%</th><th></th></tr>
+
HTML就像網頁的身體,而今日的主題CSS就是衣服,CSS不能單獨存在,它是為了HTML而生,每一行定義指令,都必須有個對應的身體,不然CSS就沒有存在的意義,即無法呈現給使用者。
<tr> <th>硼砂水溶液 </th><th>30mL </th><th>4% </th><th></th></tr>
+
===三層階級===
<tr> <th>硼砂 </th><th>3公克 </th><th> </th><th></th></tr>
+
第一階級直接在一行程式碼裡面進行定義,舉例:
<tr> <th>吸管 </th><th>4支 </th><th>直徑0.6cm × 長度23cm</th><th>可彎式</th></tr>
+
 
</table>
+
 
 +
    &lt;p style='color:red'>紅字&lt;/p>
 +
 
 +
呈現效果:
 +
 
 +
<p style='color:red'>紅字</p>
 +
 
 +
第二階級在檔案的最前端進行定義,並且給段落設定class,舉例:
 +
 
 +
    <style>
 +
    .color{
 +
    color:red;
 +
    }
 +
    </style>
 +
    &lt;p class='color'>紅字&lt;/p>
 +
 
 +
呈現效果:
 +
 
 +
<p style='color:red'>紅字</p>
 +
 
 +
最終呈現的效果其實是一樣的,但有時,我們需要一個相同樣式出現在多個檔案中,所以我們就需要用到CSS。
 +
 
 +
===今日練習===
 +
建立一個HTML與一個CSS,在這裡HTML不做任何樣式定義,但三段文字的樣式都不同。
 +
[http://nice-learning.tw/uploadFiles/全民科學平台/張又懿/main.html html範例]
 +
[http://nice-learning.tw/uploadFiles/全民科學平台/張又懿/style.css css範例]
 +
 
 +
===今日作業===
 +
製作一個HTML檔,不做任何樣式定義,但卻都不是預設的樣式。裡頭必須包含一個表格、一段落文字、一張照片、一個標題。
 +
[http://nice-learning.tw/uploadFiles/全民科學平台/張又懿/範例.html 範例]

於 2020年11月16日 (一) 09:13 的最新修訂

主要架構

在網頁的世界裡,最後呈現給觀眾看的會是HTML,無論是CSS、PHP還是javascript,在每一個網頁查看原始碼時,我們都能看見它們以HMTL呈現。 HTML就像網頁的身體,而今日的主題CSS就是衣服,CSS不能單獨存在,它是為了HTML而生,每一行定義指令,都必須有個對應的身體,不然CSS就沒有存在的意義,即無法呈現給使用者。

三層階級

第一階級直接在一行程式碼裡面進行定義,舉例:


   <p style='color:red'>紅字</p>

呈現效果:

紅字

第二階級在檔案的最前端進行定義,並且給段落設定class,舉例:

    <style>
   .color{
    color:red;
    }
    </style>
    <p class='color'>紅字</p>

呈現效果:

紅字

最終呈現的效果其實是一樣的,但有時,我們需要一個相同樣式出現在多個檔案中,所以我們就需要用到CSS。

今日練習

建立一個HTML與一個CSS,在這裡HTML不做任何樣式定義,但三段文字的樣式都不同。 html範例 css範例

今日作業

製作一個HTML檔,不做任何樣式定義,但卻都不是預設的樣式。裡頭必須包含一個表格、一段落文字、一張照片、一個標題。 範例