HTML style 屬性用於向元素添加樣式，例如顏色、字體、大小等。

    <p>這是正常的字元</p>
    <p style="color:red;">這是紅色的字</p>
    <p style="color:blue;">這是藍色的字</p>

    <p style="font-size: 50px;">這是50px大小的字</p>

The HTML Style Attribute  | HTML 樣式屬性

在制定HTML的樣式時，可以用<style>來達成

完整的<style>屬性的語法如下：

<tagname style="property:value;">

注意：這邊的 property ： 是一種 CSS property(屬性)，而 value 是一種 CSS 的 值

後面會繼續介紹CSS

Background Color 背景顏色

CSS background-color 屬性定義了 HTML 元素的背景顏色。 使用方式有兩種：

  1. 添加在body中，讓整個版面都變換。

    <!DOCTYPE html>
<html>
<body style="background-color: lightgreen;">
    <p>這是正常的字元</p>
    <p style="color:red;">這是紅色的字</p>
    <p style="color:blue;">這是藍色的字</p>

    <p style="font-size: 50px;">這是50px大小的字</p>
</body>

  2. 單獨在元素內放置，使其能夠單獨替換。

    <p>這是正常的字元</p>
    <p style="background-color:red;">這是紅色底的字</p>
    <p style="background-color:blue;">這是藍色底的字</p>

最後顯示的樣子像這樣

image.png

Text Color 文字顏色

前面有說過了，在元素內使用 CSS 屬性的 color 功能來變更顏色

    <p>這是正常的字元</p>
    <p style="color:red;">這是紅色的字</p>
    <p style="color:blue;">這是藍色的字</p>

    <p style="font-size: 50px;">這是50px大小的字</p>

Fonts 字體

至於如果要變換字體，

則需要使用 CSS 的 font-family 屬性 來定義HTML元素的字。

<h1 style="font-family: fantasy;">
    HI 你好 這是FANTASY字體，
    Hello there! this is fantasy font.
</h1>
<p style="font-family: cursive;">
    這是CURISE字體，用作測試。
    This is cursive font.only for testing.</p>
</p>