Day5 - CSS基礎(一) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 5

Python

Django - 製作網頁一點通系列第 5 篇

Day5 - CSS基礎(一)

16th鐵人賽

telescope

2024-09-19 23:43:53

22 瀏覽

分享至

這篇也將透過5個實例來說明CSS的標籤與應用。

CSS使用行內樣式套用到HTML
CSS使內部樣式表套用到HTML
CSS使外部樣式表套用到HTML
class選擇器
font-size字型大小

將以下程式保存為01.html，使用瀏覽器開啟

CSS使用行內樣式套用到HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 05</title>
    </head>
    <body bgcolor="#e9d44a">
        <h1 style="color:#232fb5; text-align: center;">大家早安</h1>
    </body>
</html>

這樣就能夠改變文字的顏色了

將以下程式保存為02.html，使用瀏覽器開啟

CSS使內部樣式表套用到HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 05</title>
        <style>
            h1 {color: #8b0000; text-align: center;}
        </style>
    </head>
    <body bgcolor="#62959e">
        <h1><strong>I want to sleep.</strong></h1>
    </body>
</html>

這樣就能夠改變文字的顏色了

將以下程式保存為03.html，使用瀏覽器開啟

CSS使外部樣式表套用到HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 05</title>
        <style>
            @import url(03.css);
        </style>
    </head>
    <body bgcolor="#942d1e">
        <h1>LAZY DAY</h1>
    </body>
</html>

將以下程式保存為03.css，使用瀏覽器開啟

h1 {color: #72cedc; text-align: center; font-weight:900; background-color: #942d1e; font-size: 2cm;}

這樣就能夠改變文字的顏色了

將以下程式保存為04.html，使用瀏覽器開啟

class選擇器
font-size字型大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 05</title>
        <style>
            p.font_small{font-size: small;}
            p.font_medium{font-size:medium;}
            p.font_large{font-size: large;}
        </style>
    </head>
    <body>
        <p class="font_small">小小的字</p>
        <p class="font_medium">中中的字</p>
        <p class="font_large">大大的字</p>
    </body>
</html>

可以觀察到字體大小確實改變了

將以下程式保存為05.html，使用瀏覽器開啟

font-weight 字體粗細

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DAY 05</title>
        <style>
            p.font_100{font-weight: 100;}
            p.font_500{font-weight:500;}
            p.font_900{font-weight: 900;}
        </style>
    </head>
    <body>
        <p class="font_100">較細的字</p>
        <p class="font_500">中中的字</p>
        <p class="font_900">較粗的字</p>
    </body>
</html>

可以觀察到字體粗細確實改變了