CSS smaill note

- 10月 01, 2015

使用方式

放style=""在標籤中

<head>

<style>

...

</style>

</head>

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

選標籤的差別

/* 為class為red的標籤設計style*/

.red {

}

 

/* 為id為red的標籤設計style*/

#red {

}

 

/* div裡的div裡的div裡的所有h3字都是紅色的。 */

div div div h3 {

  color: red;

}

 

/* div裡的所有p的字體都是紅色的(包含子標籤)*/

div p{

  color: red;

}

ex:

	<div>

		<p>test</p> /*此行是紅的*/

		<li>

			<p>test2</p> /*此行是紅的*/

		</li>

	</div>

 

 

/* div裡的p的字體都是紅色的(不包含子標籤)*/ 

div>p{

  color: red;

}

ex:

	<div>

		<p>test</p> /*此行是紅的*/

		<li>

			<p>test2</p> /*不是紅的*/

		</li>

	</div>

字體

font-family #字型

text-decoration:none; #不要底線

em 與 px

1px 是螢幕上一個像素的大小，1em則是預設字體的大小。

有可能被不同解析度的螢幕讀取的網頁，em顯然是比較好的選擇。

比較不會無法顯示的字體

serif

sans-serif

cursive #可愛

:pseudo-class_selector

a:link #沒去過的link

a:visited #去過的link

a:hover #滑鼠滑在link上面時

:first-child #所有兄弟標籤中的第一個。

:nth-child(N) #所有兄弟標籤中第N個。

The Box Model (Image courtesy of www.w3.org!)

Position

static:
- position的預設值。
- 無法用display: inline;

absolute:
- 他的postion將不在是預設的static而是absolute。
- 參考位置：父元素內容區邊界。他會再一次position(定位)相對於，他的第一個 position不是static的父元素(父容器)。
- 假如沒有父元素，將相對於整個<html>。

relative:
- 他的postion將不在是預設的static而是relative。
- 參考位置：原本應該在的位置。就算透過margin的位移之後，實際參考的位置還是在原來的位子。
- 無法用display: inline;

其他

border-radius #block四個角的弧度。

* 可以當做所有標籤。

標籤可以同時有id與class，id的樣式會蓋過class。

搜尋此網誌

NimoLife

CSS smaill note

使用方式

選標籤的差別

字體

em 與 px

比較不會無法顯示的字體

:pseudo-class_selector

The Box Model (Image courtesy of www.w3.org!)

Position

其他

留言

張貼留言

這個網誌中的熱門文章

成人剪舌繫帶聽過嗎？我剪了！！

Scp - ssh 的遠端檔案傳輸指令

睡覺使你更有效率