CSS样式表
CSS 指層疊樣式表 (Cascading Style Sheets),為了美化Html界面,提高工作效率.
語法結構:
例:
基本分3種形式,其中 內聯樣式 有最高優先執行權.
外部樣式表
內部樣式表（位于 <head> 標簽內部）
內聯樣式（在 HTML 元素內部）
1,內聯樣式表
在每一個 標簽<>內寫入, " "內寫內容,雖然控制精準,但是重用性差如果大量使用會給多寫很多代碼
2,內部樣式表
必須位于<head> 內,當瀏覽器加在首先加載CSS樣式表.
3,外部樣式表
也必須位于<head>內,就是把 內部樣式表在Html頁面外建了一個.CSS結尾的文件,在head里面寫一個<link>連接 把這個CSS文件連接進來,比起內部樣式表來系統多執行了一步尋找文件,這里href路徑必須寫對,一般這個CSS文件要放在Html文件夾里. 這樣寫的好處就是在Html頁面不會看到CSS過多代碼,顯得整齊.
__________________________________________________分割線__________________________________________________________
選擇器:
因為一個Html頁面里面會有多個<div>,<p>等標簽,如果我們一味的 用div{} 來寫樣式的話那么所有的div都是千篇一律的,如果用內聯樣式再改個別div那么CSS就不好使了. 所以這里我們在標簽里面也分類 class 和 id 如: <div class="div1">一</div> <div id="id1">二</div>
如果我們要改 一的 div樣式的話就可以 .div1{樣式} 選擇 class使用 . id不允許重復.
如果要改 二的 div樣式的話就可以 #id1{樣式} 選擇 id使用 #
id選擇器優先級高于class選擇器優先級高于標簽名選擇器，優先級高的會覆蓋掉優先級低的樣式，樣式表優先級高于屬性的
復合選擇器
以逗號隔開；并列關系，同時起作用如：#xx,#dd{ 樣式 }
以空格隔開，后代關系，如果p在div里面，則用 div p { 樣式 }
以點隔開的，篩選關系，p.qd { }對p進行class篩選，p里class為qd的執行樣式
__________________________________________________分割線__________________________________________________________
引用:
（二）樣式：
一：背景與前景
background-color:#eeeeff;背景顏色
background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg)；背景圖片（默認平鋪）：
background-attachment:fixed; 背景固定
background-attachment:scroll;背景和字一起滾動，默認是一起
background-repeat:repeat;對齊方式，默認平鋪repeat
background-repeat:no-repeat;不平鋪
background-repeat:repeat-x;橫向平鋪
background-repeat:repeat-y;縱向平鋪
background-position:center;不平鋪的情況下位置放到中間
background-position:right bottom;右下角
background-position:right 100px bottom 100px;離右邊100，離下面100，可以是負的值
前景
font-family:"隸書";字體名稱（微軟雅黑，宋體）
font-size:12px; 字體大小，像素（12px,14px,18px）8em默認字體的8倍還可以用百分比
font-weight:100; bold,normal 是否加粗
font-style:inherit; italic,normal是否傾斜
color:#09F;顏色
文本對齊修飾
text-decoration:underline;下劃線，overline上劃線，line-through刪除線，none是去掉下劃線，可以去掉超鏈接的下劃線
text-align:center;橫向對齊方式
vertical-align:middle;縱向對齊方式top.middle,bottom
text-indent:首行縮進量，如果字體是14px,則縮進兩個位28px
line-height:行高 一般是1.5到2倍的字體大小
二：邊界與邊框
1.border類：邊框
border: 5px solid blue ；5個像素的粗細，樣式是實線，顏色是blue；
border-5px; border-style:double;border-color:red;這是分開設置粗細，樣式和顏色
border-top:5px solid red;設置上面的 border-bottom:5px solid red;設置下面的
2.margin類：外邊距
margin:10px;四個邊距都是10px； margin-top:10px; right,left,bottom;上右左下
margin:10px 0px 10px 0px;順序是順時針：上右下左。
3.padding類：內邊距
padding:10px 0px 10px 0px;順時針，上右下左
三：列表與方塊
默認布局方式，流式布局，上到下，左到右，相對流式布局
width,height, 只有在絕對定位布局時可用（left,top,right,bottom）
對ol列表：
list-style:none;去掉有序數字 circle;是圓圈，disc圓點
list-style-image：url(images/8.jpg);列表圖片
list-style-position:outside; 符號在邊距上，inside符號在邊距之內
margin padding 默認是有邊距和間距
list-style-type:disc 類型
四：格式與布局
布局的時候一般最上面寫上：
*
{
margin:0px auto;
padding:0px;
}
讓所有的外距和內距為0，加了auto居中。
1.position：
obsolute; 絕對定位，放在頁面首屏的那個位置，跟著滾動
外層沒有position=absolute或relative它按照瀏覽器邊框定位
如果外層有position=absolute或relative它按照外層的那個元素的邊框進行定位
fixed； 固定在頁面的一個位置上，滾動屏幕，它不動，針對瀏覽器邊框定位
正常一個div默認占一行，確定它本來應該在的位置， 如果不設置position，則left,right,top,bottom不管用
relative;相當于之前應當在的位置進行移動，之前的位置應該是左上角
2.z-index:9; z軸，控制誰在上層，大的壓小的
3.溢出overflow:超出范圍
hidden隱藏 scroll出現滾動條
4.float:浮動方向，原本默認占一行，float之后可以在一行內放多個
float:left 從左邊浮
5.clear:both 截斷流 加一行<div>截斷浮動流
6.cursor:pointer鼠標放到上面變形狀，pointer為手
7.margin:auto 頁面居中
8.顯示方式：dispaly:none不顯示/block 塊換行/inline在一行上，寬和高都不可用/inline-block在一行上顯示，可以設置寬和高 不顯示也不占地方
9.visibility:可視性，hidden隱藏,visible顯示。不顯示但是占地方
10.超鏈接的：
a:link 沒訪問過的效果
{
text-decoration:none;
color:
}
a:visited 訪問過的效果
{
color:
}
a:hover 鼠標放上去時候的效果
{
color:
}
11.特殊符號：© 版權符號
12.半透明效果
<div class="box">透明區域</div>
樣式表中
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}
總結
- 上一篇： 《C++代码设计与重用》——1.7 参考
- 下一篇： cdp协议简介