入門級桌面獨顯新成員，訊息稱英特爾將推銳炫 A310
CSS樣式表的樣式主要可以分為大小，背景，字型，對齊方式，邊界邊框，列表方塊，格式佈局等。
元素的大小：
#div1{
width:300px;
height:1000px;
}width:寬度，單位可以使用百分比或者畫素
height：高度，單位可以使用百分比或者畫素
如果沒有內容且不設定高度和寬度在頁面是看不到。
背景：
#div1{ width:300px; height:1000px; background-color:#0C0; background-image:url(preview.jpg); background-repeat:no-repeat; background-position:center; background-attachment:scroll; background-size:200px 250px; }
background-color：背景顏色
background-image：背景圖片，在頁面中背景圖在背景顏色上邊
background-repeat：背景圖片的平鋪方式
常用的有：
background-repeat:repeat;平鋪，預設選項
:no-repeat;不平鋪
:repeat-x;橫向平鋪
:repeat-y;縱向平鋪
background-position：背景圖的位置，圖片默認出現在左上角
常用的有：
background-position:top;上
:bottom;下
:left;左
:right;右
:center;居中
background-position還可以使用空格和畫素來達到靠右下角並且留有一定距離的效果
#div1{
background-position:bottom 20px right 20px;
}
background-attachment:背景圖是否隨著滾動條滾動
主要有：
background-attachment:fixed;不滾動
:scroll;滾動
background-size:背景圖的大小，可以自己設定畫素大小，也可以根據提示這隻自動等
文字：
#div1{
font-family:微軟雅黑;
font-size:.5em;
font-style:italic;
font-weight:bold;
text-decoration:line-through;
color:#666;
text-indent:-5em;
}font-size:字型大小，可以用畫素表示，普通正文一般用14px，頁尾一般用12px，也可以用百分比或者em表示，200%是預設字型的兩倍，.5是預設字型的0.5倍
font-family:字型樣式，原則上不能使用太過花哨特殊的字型，因為使用者電腦上可能沒有，特殊情況可以使用圖片代替
color:文字顏色
font-weight:bold;加粗
font-style:italic;傾斜
text-decoration:underline;下劃線
none;去掉下劃線
line-through;刪除線
text-indent：首行縮排，特殊情況可以使用負號
文字對齊方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
height:50px;
background-color:#9CC;
text-align:center;}
#div2{
height:50px;
background-color:#666;
text-align:right;
vertical-align:center;
line-height:50px;
}
</style>
</head>
<body>
<div id="div1">這是第一個div中的文字</div>
<div id="div2">這是第二個div中的文字</div>
</body>
</html>
text-align：水平對齊方式
center;居中
left;左
right;右
vertical-align：垂直對齊方式,單獨設定沒有效果，需要和行高配合使用
middle;居中
top;上
bottom;下
line-height:行高
邊界與邊框：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
height:100px;
width:100px;
border:1px #000033 solid;
margin:10px 20px 30px 40px;
padding:10px 20px 30px 40px;}
#div2{
height:30px;
width:20px;
border:1px #00FF00 solid;}
</style>
</head>
<body>
<div id="div1">
<div id="div2"> </div>
</div>
</body>
</html>
margin：外邊距，用畫素表示，順序依次為上右下左，順時針方向，也可以分別用margin-top/right/bottom/left來設定，如果只寫一個表示四個方向的距離均為此值。
padding：內邊距，和margin相同，都是用畫素，上右下左，也可以分別設定，如果使用了padding，該元素會相應變大
border：邊框，可以同時設定寬度，顏色，邊框線，用空格隔開，也可以單獨設定，border也可以單獨設定上/下/左/右邊框，邊框的大小也是包含元素裡面的
關於border，還有很多用法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
width:0px;
height:0px;
border-top:100px solid #000;
border-right:100px solid #FFF;
border-bottom:100px solid #FFF;
border-left:100px solid #FFF;}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
可以利用border的特性製作一些不規則的形狀。
列表與方塊：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#ol1{
list-style:none;}
#ol2{
list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)}
</style>
</head>
<body>
<ol id="ol1">
<li>第一項</li>
<li>第二襲</li>
<li>第三幕</li>
<li>第四部</li>
</ol>
<ol id="ol2">
<li>第一項</li>
<li>第二襲</li>
<li>第三幕</li>
<li>第四部</li>
</ol>
</body>
</html>
list-style:列表符號的樣式
inside 符號在元素裡面
outside 符號在元素外部
none 沒有符號
list-style-image：列表前面加圖片作為排序符號
格式與佈局：
格式與佈局比較複雜難以理解
position:
下面舉例來說明：
absolute; 絕對定位（相對於瀏覽器邊界）
選取其最近一個最有定位設定的父級物件進行絕對定位，如果物件的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。簡單來說，如果div中沒有設定定位，他裡面再套一個div設定絕對定位，裡面的div不會出現在外面div裡面。如果兩個div都設定absolute，裡面的div就是相對外div來進行定位的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
height:200px;
width:200px;
background-color:#006;
position:absolute;
top:20px;
right:30px;
}
.d1{
width:100px;
height:500px;}
</style>
</head>
<body>
<div id="div1">
</div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
拉動滾動條，位置隨之改變。
fixed 固定位置：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
height:200px;
width:200px;
background-color:#006;
position:fixed;
top:20px;
right:30px;
}
.d1{
width:100px;
height:500px;}
</style>
</head>
<body>
<div id="div1">
</div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
拉動滾動條，位置不變。
relative 相對定位，相對於該元素本該出現的位置：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
background-color:#0F0;
position:relative;
top:20px;
left:30px;
}
</style>
</head>
<body>
這是一段文字
<div>這是div中的文字</div>
<div id="div1">
這是相對定位div中的文字
</div>
</body>
</html>
在原本應該出現的位置偏移。
需注意的是，只要加了position，該元素就和其他元素不在同一層了，原本被擠下去下面的元素就會浮上來。
設定居中：margin：0px auto;
流式佈局：
做網頁佈局。可以讓元素流動。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
.div1{
margin:10px;
width:100px;
float:right;
background-color:#999;}
#nr{
height:300px;
width:100%;
background-color:#063;}
</style>
</head>
<body>
<div class="div1">首頁</div>
<div class="div1">產品介紹</div>
<div class="div1">發展歷史</div>
<div class="div1">個人中心</div>
<div class="div1">相關內容</div>
<div class="div1">聯絡我們</div>
<div style="clear:both"></div>
<ul style="list-style:none;">
<li class="div1">首頁</li>
<li class="div1">首頁</li>
<li class="div1">首頁</li>
<li class="div1">首頁</li>
<li class="div1">首頁</li>
<li class="div1">首頁</li>
</ul>
<div style="clear:both"></div>
<div id="nr"></div>
</body>
</html>
float:left/ight; 向左/右流，會隨著瀏覽器大小適應
截斷流：<div style="clear:both"></div>
z-index:給元素設定一個層級，數字越大越靠上
其他：
HTML和css使用的註釋不同，在HTML程式碼中使用<!-- -->，但是在css中該註釋無效，應使用/* */。
：hover滑鼠移上的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
#div1{
margin: 10px;
height:200px;
width:200px;
background-color:#333;
border-radius:15px;}
#div1:hover{
background-color:#030;
cursor:pointer;
box-shadow: 10px 10px 10px blue;
border-radius:15px;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div1"></div>
</body>
</html>
如圖，兩個方塊應用的是同樣的樣式，下面方塊是滑鼠移上去的效果。應用方法是在選擇器：hover，然後正常應用各種樣式就好。
cursor:pointer; 滑鼠的游標變成手
border-radius:5px;圓角，畫素的多少代表圓角的弧度
box-shadow:0 0 5px white; 陰影效果，每個方向陰影的大小以及顏色
display:none隱藏 block顯示 隱藏不佔位置
visibility:hidden 隱藏 visible 顯示 隱藏佔位置 overflow:hidden; 超出部分隱藏
需要注意的是，<sapn>標籤的大小是由內容決定的，單獨設定標籤的大小沒有意義，但是，如果給它display:block使它塊狀顯示，就可以，會達到和<div>相似的效果。
透明效果：
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);
這三種方式均可達到透明效果，是不同CSS標準的寫法，由於有些不同瀏覽器支援不同的標準，所以最好全部寫上。