iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 04:人要衣著,佛要金裝!用CSS為網頁穿上衣服

如果說html是人,css就是衣服。
俗話說:人要衣著,佛要金裝。
穿搭得宜,宅男都會變型男無誤

首先我們先在css資料夾下建立一個style.css,
然後在html檔的內加入下列,
就可以讓html導入在css資料夾下的css檔,為網頁提供樣式。

  <link rel="stylesheet" href="css/style.css">

白話文:連結"stylesheet"屬性,在"css/style.css"路徑的css文件。
而在css內,我們就可以開始指定想要更改樣式的地方,
然後將樣式改變。

body{
  border:red 1px solid;
  height: 300px;
}

這樣我們的body就會被紅色的框框圈住。
其中body我們稱之為selector(選擇器)
接著我們要用{}將declartion包起來,方便瀏覽器判讀,
declartion分為propeerty(屬性)和value(數值),
以上面為例,我們將控制border,讓他為1px寬度的實線,顏色為紅色。
在寫完declartion後,加入 ";"做結尾,
才可再輸入下一個declartion。
最後一個declartion不加入";"一樣有效果,但是容易出問題,
寫完後記得加入";"養成好習慣。很重要很重要很重要,所以說三次。

第二個declartion則是高度300px的意思。
除了上述的指定方法,

我們還可以利用class或id來指定(通常是用class)
方法如下:

.box{
   border:red 1px solid;
   height: 300px;
}

這樣則會讓class name為box的標籤,
border為紅色1px的實線、高度為300px。

#box{
   border:red 1px solid;
   height: 300px;
}

這樣則會讓id name為box的標籤,
border為紅色1px的實線、高度為300px。

我們還可以用一些特殊符號來指定想要的element。
例如:

.box p

class name為box的標籤下的p段落

.box,.list

class name為box和class name為list

.box~.box

**~**是指「下一個」,也就是說
當遇到第一個.sidebar不會有影響,只影響下一個.sidebar

善用css為網頁穿上衣服吧!


尚未有邦友留言

立即登入留言