Html5 JumpStart學習筆記2：CSS Selectors and Style Properties

Module Agenda（模組列表）

　　Selectors

　　Combinators

　　Color properties

　　Text properties

　　Box properties

 

1. Selectors

　　type selectors

　　.class selectors

　　#id selecors

　　[attribute] selectors

　　　　eg:

[data-author=psmith]{color:red;}[data-author$='smith']{color:red;} /*data-author屬性以smith結尾*/

　　:pseudo-class and ::pseudo-element selectors

　　　　eg:

/*::和:的區別我不是很理解，還望有人指點*/p::first-line{color:red;}p:hover{color:red;}li:nth-child(2n+3){color:red;}/*第3、5、7...變紅，注意這裡是從1開始，不是從0開始*/

　　the universal selector

 

2. Combinators

　　descendant combinator （後代選取器） eg: #Div1 div{color:red;}

　　child > combinator (子選取器)  eg: #Div > p{color:red;}

　　　　注意：後代選取器與子選取器的區別：後代包括子項目、孫元素，子僅指子項目。

　　general ~ sibling （兄弟選取器） eg: ul ~ div{color:red;}

　　adjacent + sibling （相鄰選取器） eg: li + li{color:red;} /*這樣可以在不能定位ul的情況下選到ul下的所有li*/

 

3. Color properties

　　color

　　　　named color  eg: p{color:goldenred;}

　　　　hex(#) eg: p{color:#0000ff;}

　　　　rgb()/rgba()  eg: p{color:rgb(0,255,0);} p{color:rgba(0,255,0,0.5);} /*a是透明度*/

　　　　hsl()/hsla  eg: p{color:hsl(0,50%,90%);} /* H: hue,色調， S: saturation 飽和度 L: lum 亮度*/

　　opacity

 

4. Basic text properties

　　text-decoration:overline | underline | line-through

　　text-transform:none | lowercase | uppercase | capitalize

　　text-shadow(i.e.,2px 2px gray)

/*text-shadow屬性的值可以有多個*/table{text-shadow:-4px -4px 4px red; 0 0 10px blue;font-size:24pt;}

　　　　效果如下：

Font properties

　　font-style:normal | italic（斜體）| oblique

　　font-varant:normal | small-caps

　　font-weight:normal | bold | bolder | light | lighter | #

　　font-size:{length}

　　line-height:{length}

　　font-family:{font}

　　font shorthand property（忘了什麼意思了，知道的提醒下）

　　@font-face:defines a font to be used elsewhere in your css

　　　　eg:

/*CSS snippet*/@font-face{    font-family:"niftyfont";    src:url("/type/nifty_n.woff") format(woff)}.nifty{    font-family:niftyfont}

 

5. Border, margin and padding

eg:#lorem{border:2px solid black;}

　　Sizing

　　　　width

　　　　height

　　　　min/max perfixes

　　　　box-sizing(content-box | border-box) 規定box的大小按content算還是按border算

　　Visibility

　　　　display(inline | block | inline-block | none | ...)

　　　　visibility(visible | hidden)  

　　　　　　其中，display:none和visibility:hidden的區別：當visibility被設定為"hidden"的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置。

　　　　white-space(normal | pre | nowarp | pre-wrap | pre-line)

　　　　overflow(visible | hidden | scroll | auto)

　　box-shadow and border-radius

　　　　box-shadow(i.e.,10px 10px 5px #888888)

　　　　border-radius(i.e., 5px)

　　Gradients（漸層）

/*linear gradient*/background-image:linear-gradient(to right,black 0%,white 100%)/*radial gradient*/background-image:radial-gradient(circle at 50% 50%,black 0%,white 100%)