小屋創作

日誌2008-01-09 07:02

教大家認識CSS，概念、構造、背景_(進度1)

作者：Aquarius楓


今天所要介紹的是！CSS落落長~
看太多字會頭暈的人..分隔線以前的【勿看】！但是分隔線以後的【必看】！

何謂【CSS】呢?
CSS英文全名即為【Cascading Style Sheets】，中譯為【串接式樣式表】。

CSS主要的特色就是在於排版的效果，可以讓我們更精確的控制網頁的顏色、文字、框線、圖片等等；且在語法中的一些顏色、文字、框線、圖片等等這一類的標籤，CSS更增加了許多的變化，致使網頁看起來更生動活潑。

也更可將CSS形容為【網頁的美容師】也不為過！且現今許多網站都有支援CSS系統，並經由CSS將網頁進行美化，也能隨意設定顏色種類、文字大小、框線粗細、圖片連結等等。

簡單的說CSS就是在原有的網頁中，加上一些語法，藉由這些語法達到控制網頁外觀格式的目的，相信這是很簡單的，且比直接撰寫HTML簡單上好幾倍(大家可參考『檢視』→『原始檔』，就知道有多難了xd)。

大家都睡著了吧..(讀書時最討厭的就是老師講的概念原理了，都會聽到睡著xd)

相信各位大大看到這邊應該也是似懂非懂吧...?

前兩天1口氣發了3篇透明版的製作，發現很多巴友都有著同樣的困擾-有了透明版卻沒有很炫的背景襯托，今天先跟各位講CSS概念、CSS構造、背景實裝(進度1)。

嗯！寫太多大家也看不下去吧，廢話不多說..我用#%~!@#$%^&*(的方式跟大家講吧！

_______________________________________________________________________________________________________


在此講這麼多..就拿背景的實裝來當做範例吧！
在看這個網頁的同時再開1個網頁並按下【小屋首頁】→【自訂面板】，大家應該都有看到1大串的英文字母及標點符號吧！如下↓
body
{border:10px solid #708090;
background-position:center;
background-image: url(http://???);
background-attachment:fixed;
background-repeat:repeat;}
大家請先看到body、{}、;，這3種東西。
body在於這段語法的首行，而{}在於整段語法的頭與尾，;位於每行的末端。
正常形容：body這代表需要改變該網頁的body部份{}這框出了要改變body的範圍，;為區別每種變化的分號。
ＸＤ講法：body這代表這間巴哈雞排店的名稱，{}這代表這間雞排店的大小，;這代表菜籃並區分著每樣食物。


border:10px solid #708090
background-position:center
background-image:url(http://???)
background-attachment:fixed
background-repeat:repeat
大家可以看到每行的中間都有個:
正常形容：:前面是形容詞，:後面是動詞。
ＸＤ講法：:前面是賣的東西，:後面是賣的價錢。


這樣子形容完，想必大家對小屋的設計都有更深一步的瞭解了吧，講到這邊相信有的巴友一定會很納悶：
為什麼我的語法整段都沒這種中文解釋呢?　　/*勇者小屋*/
其實這種東西只是要避免在繁雜的語法中搞混才設置的，可以選擇填寫、不填寫，都是隨個人的，當然裡面的中文也是可以隨大家的喜好更改的！更改完如下↓
BODY
/*網頁外框(10為外框大小、#708090為外框顏色)*/
{border:10px solid #708090;
/*置中*/
background-position:center;
/*連結背景的網址(???輸入格式jpg或gif格式的連結)*/
background-image: url(http://???);
/*浮水印-就是背景固定不會跟著滑鼠滾動*/
background-attachment:fixed;
/*不重覆*/
background-repeat:repeat;}


今天早上忘記打這一段，上面這個綠色http://???部份，即為jpg或gif連結輸入的地方。
那一定會有人認為說，那這些jpg或gif檔案的網址那來呢?
在此分享個上傳的空間，這個是小青蛙的^^"

大家猜猜這次講完背景，下次會講什麼呢?

9

27

LINE 分享

相關創作

關於栗原さくら老師的作品

Windows10 KB5037768 (系統組建 1904x.4412) 安全性更新

24.0514大型更新

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】