基礎語法

1.選擇器分組

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

2.繼承以及子問題

通過CSS繼承，子元素會繼承最高的元素元素所擁有的屬性

這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd

不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字型，子元素的子元素也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。

id選擇器

#red {color:red;}
#green {color:green;}

派生選擇器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
 

類選擇器

.center {text-align: center}

屬性選擇器

只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇

[title]
{
color:red;
}

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

css背景

背景重複

background-repeat：
repeat-x
repeat-y
norepeat
 

背景定位

background-position:center;

center top botton right left

background-position:66% 33%;

放置在2/3 1/3

水平對齊

text-align 文字水平對齊方式

white-space處理文字裡面的空白

超連結

a:link {color:#FF0000;}		/* 未被訪問的連結 */
a:visited {color:#00FF00;}	/* 已被訪問的連結 */
a:hover {color:#FF00FF;}	/* 滑鼠指標移動到連結上 */
a:active {color:#0000FF;}	/* 正在被點選的連結 */

text-decoration:none;

去除文字的下劃線

border: 1px solid blue;

設定邊框的大小 粗細 顏色

border-collapse 屬性設定是否將表格邊框摺疊為單一邊框：

color是設定文字中的顏色

您還可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

相對定位

移動後位置還保留著

相對定位

絕對定位

css浮動的概念

CSS高階

margin auto 平等的均分就是居中

display:inline 設定成行內元素

list-style-type:none;

filter可以設定透明影象