class與id還有常用屬性篇

.Class / #Id

簡單來說：

HTML
不同階層：style > #id > .class > 普通標籤

我是p

我是class="blue"

我是class="blue" id="red"的p

我是class="blue" id="red" style="color:green;"的p

同階層：後面 > 前面
/* html順序不影響結果，真正的戰場在css */

我是class="blue ivory underline"的p

我是class="ivory blue underline"的p

/* id只能有一個，所以這邊會顯示錯誤，往外層找最相關的 */

我是id="red pink的p

/* id只能有一個，但如果你拆開寫也他會過，但只會顯示第一個 */

我是class="blue" id="pink" id="red"的p

CSS
/* 普通標籤 */
p{ color:black; }

/* .class */
.ivory{ color:ivory;}
.blue{ color:blue; }
/* blue 比 ivory 還後面，所以會蓋掉前面的 */
/* 雖然同階層，但結果不衝突，所以會1+1=2 */
.underline{ text-decoration:underline; }

/* #id */
#red{ color:red; }
#pink{ color:pink; }

常用屬性

文字類

color：文字顏色;
font-size：文字大小;
text-decoration：文字裝飾;//bold,underline,italic

其中，顏色又有許多表現方式

a標籤class="a_demo"
a標籤class="a_demo"
a標籤class="a_demo"
a標籤class="a_demo"
  • <ul class="li_demo">
  • 清單也可以
  • 清單也可以
/*「:link」和「:visited」必須在最前面
/*接著依序才是「:hover」和「:active」*/
.a_demo:link{color:blue} /* :link（未點） */
.a_demo:visited{color:purple} /* :visited（點過） */
.a_demo:hover{color:red} /* :hover（懸浮） */
.a_demo:active{color:green} /* :active（正在被觸發） */
/*「:hover」和「:active」也可以用在 list */
.li_demo li:hover{color:red} /* :hover（懸浮） */
.li_demo li:active{color:green} /* :active（正在被觸發） */
/* 因為class放在ul，所以如果.li_demo後面沒有放li的話，他會整個清單都有反應，而不是一個一個顯示 */

背景

像下面這個parallax scrolling effect （詳見此）用起來感覺就很厲害

也可以在這加字啦


但其實超簡單，html只需要一行(加字要多兩行)，css只需要改兩個地方

HTML
<div class="fixed-bg">
<p class="bg_text" align="center">也可以在這加字啦</p>
/* 不加字就把<p>這行刪掉 */
</div>

CSS文字
.bg_text{
font-size: 4rem;
color:white;
}

如果這也無法滿足你，可以去（這裡看更多）

CSS圖片
.fixed-bg {
/* （改）這裡放圖片 */
background-image: url("../img/media_pic2.jpeg");
/* （改）設定要顯示的大小 */
min-height: 500px;
/* 下面照貼就好，不用動 */
/* 固定圖片位置 */
background-attachment: fixed;
/* 圖片置中 */
background-position: center;
/* 圖片不重複 */
background-repeat: no-repeat;
/* 縮放圖片至最大尺寸 */
background-size: cover;
/* p.s加文字的話，這裡缺了一部分，大家試著用F12去找看看^__^ */
}
回首頁