網頁

▼

2019/7/23

CSS 練習 更改文字顏色與大小

請建立一份HTML文件，檔名為text.html。請用VS Code編輯。

text.html的原始HTML如下。

text.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>標題一 文字:紅色(red)</h1>

  <h2>標題二 文字:橘色(orange)，背景:深紅色(darkred)</h2>

  <h3>標提三 文字:黃色(yellow)，背景:綠色(green)</h3>

  <p>段落 文字:藍色(blue)，字體大小:32像素(32px)</p>

</body>
</html>

請依照下列規則套用CSS於text.html，然後在瀏覽器開啟的效果如下。

標題一(<h1>)及標題二(<h2>)請用CSS外部樣式表(External style sheet)修改。
標題三(<h3>)請用內部樣式表(Internal style sheet)修改。
段落文字(<p>)請用行內樣式(Inline style)修改。




提示：

修改字體大小的CSS屬性為font-size，像素單位為px。



解答

text.html

<!DOCTYPE html>
<html>
<head>
　<link rel="stylesheet" type="text/css" href="mystyle.css"/>
  <style>
    h3 {
        color:yellow;
        background-color: green;
    }  
  </style>


</head>
<body>

  <h1>標題一 文字:紅色(red)</h1>

  <h2>標題二 文字:橘色(orange)，背景:深紅色(darkred)</h2>

  <h3>標提三 文字:黃色(yellow)，背景:綠色(green)</h3>

  <p style="color:blue; font-size:32px;">段落 文字:藍色(blue)，字體大小:32像素(32px)</p>

</body>
</html>

mystyle.css

h1 {
    color:red;
}
h2 {
    color:orange;
    background-color: darkred;
}

沒有留言:

張貼留言