CSS簡介及基本知識
(CSS)cascading style sheets:層疊樣式表。級聯式樣式表，簡稱：樣式表。
Sheets :就是一個樣式文件，它的擴展名為.css
Style:外觀，個性化
樣式表的位置
為了學習方便，先用內嵌式樣式(內部樣式表)
位置：<head></head>之間。
標記：<style type=”text/css” >樣式寫在這裏</style>
CSS語法格式
聲明方法
選擇器{屬性1：值1;屬性2：值2;屬性n：值n;}
什麽是選擇器？
就是通過名稱指定對哪些標簽進行樣式設置
CSS註釋
HTML註釋：<!--註釋內容-->
CSS註釋：/*註釋內容*/，不管是單行還是多行只有這一種方法。
CSS基本選擇器：
基本選擇器：
style屬性(行內樣式)
直接寫在標簽內
如：<p style=”font-size:12px; color:red;” >文字內容</p>
標簽
針對HTML的標簽直接設置樣式。
ID
語法：
以“#”開頭，
命名方法：建議全小寫，以字母開頭
使用方法：<p id=”id的名稱”></p>
類
語法：
定義的方法：用“.”開頭,後跟類名。
類名書寫規範，以小寫字母開始。
使用方法：
<p class=“類名”>內容</p>
通配符選擇器
*{CSS規則}
意思：針對當前頁面所用的標簽應用同樣的樣式（對標簽的初始化）
如：*{margin:0;padding:0;border:0;}
專家建議對標簽初始化時采用下面的方法
body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}
標簽和類結合
如：p.test{color:red}
針對p標簽應用類名為test1的樣式。
組合選擇器
多元素選擇器
多個標簽或選擇器同時聲明
如：h1,h2,ul,li{margin:0;padding:0;}
定義的方法註意思：
選擇器之間用逗號隔開。
後代選擇器
p空格span{color:red;}
含義：針對p標簽中的span標簽定義樣式。
註意：選擇器之間用空格隔開。
子元素選擇器
定義的方法
P>span {CSS規則}
只針會p標簽中的span一級有效。
偽類選擇器
鏈接<a href=”#”></a>
a:link 鏈接的正常狀態
a:visited 鼠標單擊過的鏈接狀態
a:hover 鼠標放在鏈接上面的（懸停）狀態
a:active 當前正在訪問的鏈接狀態
當有多種鏈接樣式時，通常配合類來設置
CSS尺寸屬性
px,em ,%（相對單位）
font-size:25不加單位的數字毫無意思
px像素，相對單位。和屏幕的分辨率有關。
em：一個字體高（1倍字體高）,2em(當前默認字體的2倍)
%,百分比。相對單位。相對於當前默認值的百分比。
瀏覽器的默認字體大小為16px.
CSS字體屬性
font-family: 設置字體,建議英文的中文字體，黑體=>simhei
如：Font-family:simhei;
font-size: 設置字體的大小單位，(註意：一定加上單位)
如：font-size:24px;
font-weight:設置字體的加粗方式，100－900，bold,normal(取消加粗)
如：font-weight:100; font-weight:bold; font-weight:normal;
font-style：設置字體樣式，italic
Font-style:italic; 設置字體為斜體。
CSS文本屬性
color ：設置文本的顏色 用單詞或16進制（建議#RRGGBB）
可以簡寫：如：#669900; 也可成：#690;
text-align
文本的對齊方式
left ,center right
line-height 行高
垂直方向居中，所在容器，所在元素的高度與line-height保持一致。
text-indent 文本的縮進
letter-spacing 字間距
text-decoration
文本的描述，修飾
underline,overline,line-through,none;
CSS列表屬性
List-style:none;
List-style-type:none;
列表項前面的項目符號去掉。
ul,li{List-style-type:none;}
CSS細線表格
<table rules=”all”>
<table bgcolor=”” cellspacing=”2” >
<td bgcolor=”white” >
<table style=”border-collapse:collapse”
CSS邊框屬性table,td
CSS邊框屬性
border:線寬像素 線型 紅色。
Border:1px solid red; 同時設置四條邊
Border-方向（top,right,bottom,left）:1px solid red; 設置一條邊的情況。
Border-方向（top,right,bottom,left）:none 不要某條邊的設置方法。
案例 新聞案例，排版
案例 新聞列表
<style type="text/css">
.title,.content{ /*多元素組合聲明*/
width:500px; /*設置div的寬度*/
border:1px solid green;/*設置div的邊框*/
}
.title{
height:45px; /*設置div的高度*/
line-height:45px; /*設置div的行高*/
background:green; /*設置div的背景色*/
font-size:25px;/*設置字體的大小*/
font-weight:200;/*設置字體的加粗*/
}
.content a:link,.content a:visited{color:gray; text-decoration:none;}/*同時聲明鏈接默認樣式及鼠標單擊過後的樣式*/
.content a:hover{color:red; text-decoration:none;}/*設置鼠標放上面的樣式*/
.content li{
border-bottom:1px dashed gray; /*設置li的底邊的線的樣式*/
width: 450px; height:25px; /*設置li的寬和高*/
line-height:25px;/*設置li行高*/
}
</style>
Body中的內容：
<div class="title"> 新聞中心</div>
<div class="content">
<ul>
<li><a href="#">長春供暖首日遇重度“煙霾“ 市民:以為誰家著火了</a></li>
<li><a href="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
<li><a href="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
<li><a href="#">年內5次降息為買房人減負 百萬房貸可省17萬</a></li>
<li><a href="#">臺灣太平島燈塔完工 可照射越南所占島礁</a></li>
<li><a href="#">解放軍允許智能手機進軍營安裝部隊自研軟件</a></li>
<li><a href="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
</ul>
</div>
最後效果如下：
CSS簡介及基本知識