金魚都能懂的網頁設計入門-網頁裝潢師, 就是處理視覺的部份， 大部份情況下會使用CSS樣式表。

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第四天 - 網頁裝潢師 網頁裝潢師, 就是處理視覺的部份， 大部份情況下會使用CSS樣式表。

網頁裝潢師, 就是處理視覺的部份， 大部份情況下會使用CSS樣式表。

CSS「Cascading Style Sheets」 階層式樣式表 ，
處理 HTML 的美化視覺的部份。

下面為 inline style ，這種寫法彈性不夠，
大部份的情況下是用 javascript去控制

1
2
3
4
5
6
<p style="color:#f00">
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. At nemo, odio asperiores enim distinctio sequi beatae
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo tempore saepe doloribus quia nulla vitae, sapiente
    veritatis voluptatem deserunt vero quod doloremque neque inventore magnam aperiam atque labore aliquid quisquam!
</p>

如果希望網頁裹所有的段落都是同一個style, 則可以在 html 的 head 裹設定
維護性較高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        p{
            color:#f00;
            font-size: 20px;
            background-color: #ccc; /* 淺灰色 */
          
        }
    </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita culpa id debitis consequatur placeat est obcaecati cumque. Ducimus, fugit earum?</p>
  <p>Asperiores autem dolore, impedit facere quasi, ullam odit quos molestiae eligendi corrupti nihil illum iusto natus laboriosam, eaque expedita libero?</p>
  <p>Quis corrupti fugit ipsa porro voluptatum atque, laboriosam totam culpa. Nulla ex quo commodi provident eum adipisci magni porro quod.</p>
  <p>Voluptates ducimus in perspiciatis nisi facilis culpa velit labore praesentium, quae quos eius adipisci, hic, exercitationem magni! Nemo, perspiciatis alias?</p>
  <p>Architecto maiores, pariatur impedit velit eum nam ducimus animi, eos autem laborum, consectetur doloribus nihil provident quis! Pariatur, nihil labore?</p>
  <p>Doloremque incidunt repellendus nobis in iste dignissimos iusto itaque quam aut assumenda vel, doloribus temporibus cupiditate! Quos esse cumque voluptates?</p>
</body>
</html>

CSS樣式 有那些可以設定：
網頁文字，圖片 區塊：
文字色彩 文字粗細 文字斜體 字體
背景色彩 背景圖片 背景尺寸 背景圖片重覆性
背景圖片固定與否
網頁版塊: 寬度 、高度

1
2
3
4
p 選取器{
    屬性： 屬性值；
    color:  red;
}

如果每個段落要設定不一樣的style,
可以在 標籤裹設定 class

1
2
3
.special{
    color: #f00;
}
1
2
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita culpa id debitis consequatur placeat est obcaecati cumque. Ducimus, fugit earum?</p>
<p class="special">Asperiores autem dolore, impedit facere quasi, ullam odit quos molestiae eligendi corrupti nihil illum iusto natus laboriosam, eaque expedita libero?</p>

參考網站：
w3school: https://www.w3schools.com/css/default.asp
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS

文獻連結:
第五天
https://www.youtube.com/watch?v=PN6pV_ZLHqc&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=4 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos