CSS文字樣式介紹
HTML搭配CSS是網頁設計必備的技巧,在網頁中加入CSS可以有兩種方式,
一種是直接在頁面中建立樣式,另外一種是新增一個樣式表檔案,
然後再以連結外部檔案的方式使用,以下是這兩種方法的說明。
1、內部CSS樣式
內部樣式表是直接將CSS語言寫在HTML的<head> …</head>標籤中,
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHWrQeSNpE2nzbICV7K_vxZy-dktnu0RJxx4yPKmUXChLIUivMQn-tSX7_kEhQuqB6RqkDWYQElZgnb7y449SvpWDJEgEAi1vVNc8JnbXuBLZrVO4bCWwf1iQM1-qe31vXO26kcb5XDk/s1600/step1.jpg) |
在HTML的<head> <style>... </style></head>標籤中加入樣式 |
若是需要提供給其他網頁使用必須轉存到外部樣式表檔案,
日後其他頁面即可透過「連結樣式表檔」的方式就可以使用。
2、外部CSS樣式
外部樣式表檔案是一個獨立的(.CSS)檔案,該檔案可以寫入多個CSS樣式規則,
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiEbaNIEYJSB0jLAHX-KxQBW5RhGlgiZeSgRKLML3vQXJwPO33B87F-2ICTju3JwivjFtdEvJfgcdZ4xde7MrBPszC9fIQiK7VjQnZ4FsFBUxvUB7BMmWKMumJs6MZKWso3QapZm8uXJU/s1600/step2.jpg) |
將檔案儲存為 style.css |
網頁透過附加樣式表檔案連結外部樣式表後就可以使用樣式表全部的CSS樣式,
若是該CSS有更改HTML標籤的設定,那麼附加樣式表後該網頁也會馬上做變更。
外部樣式表的好處還不只如此,將來如過要更改CSS樣式表中某個設定,
只要更改外部樣式表檔案其他有附加的網頁也會跟著更新。
連結樣式表檔案
在HTML的<head> …</head>標籤中加入<link rel="stylesheet" href="style.css">
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7If6grDhhfdQhXz4uJTCsMt-LSIPtjd_IRr_PLZzMcTWKPFoWSUC-vDgBhfq25EDy1KUyDSo3XD2A3qFY7OtY1JTzayuDG2ldBeo6HnNSEvthvkCxhu8kaj5xEAz06Cw3a1dcaURrGtg/s1600/step3.jpg) |
在href中加入CSS樣式檔案的路徑即可 |
沒有留言:
張貼留言