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