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

出自不錯學群
跳至導覽 跳至搜尋
 
（未顯示同一使用者於中間所作的 5 次修訂）
行 5： 行 5：
 
第一階級直接在一行程式碼裡面進行定義，舉例：
 
第一階級直接在一行程式碼裡面進行定義，舉例：
  
−
      <p style='color:red'>紅字</p>
+
 
 +
    &lt;p style='color:red'>紅字&lt;/p>
 +
 
 +
呈現效果：
 +
 
 +
<p style='color:red'>紅字</p>
  
 
第二階級在檔案的最前端進行定義，並且給段落設定class，舉例：
 
第二階級在檔案的最前端進行定義，並且給段落設定class，舉例：
行 14： 行 19：
 
     }
 
     }
 
     </style>
 
     </style>
−
     <p class='color'>紅字</p>
+
     &lt;p class='color'>紅字&lt;/p>
 +
 
 +
呈現效果：
 +
 
 +
<p style='color:red'>紅字</p>
 +
 
 +
最終呈現的效果其實是一樣的，但有時，我們需要一個相同樣式出現在多個檔案中，所以我們就需要用到CSS。
  
 
===今日練習===
 
===今日練習===

於 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檔，不做任何樣式定義，但卻都不是預設的樣式。裡頭必須包含一個表格、一段落文字、一張照片、一個標題。 範例

取自「http://nice-learning.tw/nlWiki/index.php?title=2020/資訊基礎應用/CSS&oldid=2843」