CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)
發(fā)布時(shí)間:2013-10-05 10:18:12 作者:佚名
我要評(píng)論

進(jìn)行css布局的同時(shí),沒有足夠的基礎(chǔ)知識(shí)是不可能的,本文為初學(xué)者整理了一些,經(jīng)常使用的css屬性,感興趣的朋友可以參考下,或許有所幫助
一.CSS基本介紹
級(jí)聯(lián)樣式表(Cascading Style Sheet)簡(jiǎn)稱“CSS”,通常又稱為“風(fēng)格樣式表(Style Sheet)”,它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如,如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的,當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線,這就是一種風(fēng)格。通過設(shè)立樣式表,可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表,可以擴(kuò)充精確指定網(wǎng)頁元素位置,外觀以及創(chuàng)建特殊效果的能力。
CSS是英語CascadingStyle Sheets(層疊樣式表單)的縮寫,它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS目前最新版本為CSS3,是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計(jì),是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力,簡(jiǎn)化或者優(yōu)化寫法,針對(duì)各類人群,有較強(qiáng)的易讀性。
二.CSS的使用方法
有三種方法可以在站點(diǎn)網(wǎng)頁上使用樣式表:
外部樣式:將網(wǎng)頁鏈接到外部樣式表。
內(nèi)頁樣式:在網(wǎng)頁上創(chuàng)建嵌入的樣式表。
行內(nèi)樣式:應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁元素。
每一種方法均有其優(yōu)缺點(diǎn):
當(dāng)要在站點(diǎn)上所有或部分網(wǎng)頁上一致地應(yīng)用相同樣式時(shí),可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式,并將它們鏈接到所有網(wǎng)頁,便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式,只需在外部樣式表中修改一次,而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴(kuò)展名,例如牛腩新聞發(fā)布系統(tǒng)中的公共樣式Common.css。然后在需要此樣式的頁面中將其鏈接進(jìn)來,如:
<link href="/css/Common.css"rel="stylesheet" type="text/css"/>
當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表,“嵌”在網(wǎng)頁的 <HEAD>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。 如:
<style type="text/css"><!-- /* 把聲明的樣式包含在一個(gè)html注釋中,這樣可以解決較老的瀏覽器不識(shí)別style的問題 */
body {background:grey;}
</style>
使用內(nèi)嵌樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁元素上。如:
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style屬性中使用@import -->
如果網(wǎng)頁鏈接到外部樣式表,為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。
要在網(wǎng)頁上使用外部樣式表的樣式,可將該網(wǎng)頁鏈接到樣式表,方法是使用位于 “格式” 菜單上的 “樣式表連接” 命令??梢枣溄右粋€(gè)或數(shù)個(gè)樣式表到網(wǎng)頁視圖模式下的當(dāng)前網(wǎng)頁,或到在文件夾列表中的所選網(wǎng)頁,或到站點(diǎn)上的全部網(wǎng)頁。
該“樣式” 框列出標(biāo)準(zhǔn) HTML 標(biāo)記符,例如標(biāo)題
1,還有嵌入的樣式表或鏈接到網(wǎng)頁的外部樣式表中所含的類或 ID 選擇器。要應(yīng)用樣式到網(wǎng)頁元素,請(qǐng)選定該樣式然后單擊 “樣式” 框中的樣式或選擇器。
在 Microsoft FrontPage 2000中,某些格式設(shè)置特性會(huì)作為內(nèi)嵌樣式自動(dòng)應(yīng)用。例如∶如果使用 “邊框與陰影” 命令(在 “格式” 菜單上)在普通段落周圍應(yīng)用框,F(xiàn)rontPage 會(huì)寫下格式設(shè)置信息,作為段落標(biāo)記符的內(nèi)嵌樣式屬性(例如∶ <pstyle="border-style: solid">)。然而某些屬性的應(yīng)用需要使用 CSS,其他則需要使用 HTML 。如果人們只想使用 CSS 應(yīng)用內(nèi)嵌樣式,可使用 “樣式”按鈕(位于網(wǎng)頁元素的 “屬性” 對(duì)話框里)應(yīng)用類或 ID 選擇器或嵌入式樣式。
三、CSS文字屬性:
color: #999999; /*文字顏色*/
font-family: 宋體,sans-serif; /*文字字體*/
font-size: 9pt; /*文字大小*/
font-style:itelic;/*文字斜體*/
font-variant:small-caps;/*小字體*/
letter-spacing: 1pt; /*字間距離*/
line-height: 200%; /*設(shè)置行高*/
font-weight:bold;/*文字粗體*/
vertical-align:sub;/*下標(biāo)字*/
vertical-align:super;/*上標(biāo)字*/
text-decoration:line-through;/*加刪除線*/
text-decoration:overline;/*加頂線*/
text-decoration:underline;/*加下劃線*/
text-decoration:none;/*刪除鏈接下劃線*/
text-transform: capitalize; /*首字大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
text-align:right;/*文字右對(duì)齊*/
text-align:left;/*文字左對(duì)齊*/
text-align:center;/*文字居中對(duì)齊*/
text-align:justify;/*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top;/*垂直向上對(duì)齊*/
vertical-align:bottom;/*垂直向下對(duì)齊*/
vertical-align:middle;/*垂直居中對(duì)齊*/
vertical-align:text-top;/*文字垂直向上對(duì)齊*/
vertical-align:text-bottom;/*文字垂直向下對(duì)齊*/
四、CSS符號(hào)屬性:
list-style-type:none;/*不編號(hào)*/
list-style-type:decimal;/*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman;/*小寫羅馬數(shù)字*/
list-style-type:upper-roman;/*大寫羅馬數(shù)字*/
list-style-type:lower-alpha;/*小寫英文字母*/
list-style-type:upper-alpha;/*大寫英文字母*/
list-style-type:disc;/*實(shí)心圓形符號(hào)*/
list-style-type:circle;/*空心圓形符號(hào)*/
list-style-type:square;/*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif);/*圖片式符號(hào)*/
list-style-position:outside;/*凸排*/
list-style-position:inside;/*縮進(jìn)*/
五、CSS背景樣式:
background-color:#F5E2EC;/*背景顏色*/
background:transparent;/*透視背景*/
background-image: url(/image/bg.gif); /*背景圖片*/
background-attachment: fixed; /*浮水印固定背景*/
background-repeat: repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/
background-repeat: no-repeat; /*不重復(fù)排列*/
background-repeat: repeat-x; /*在x軸重復(fù)排列*/
background-repeat: repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position: 90% 90%; /*背景圖片x與y軸的位置*/
background-position: top; /*向上對(duì)齊*/
background-position: buttom; /*向下對(duì)齊*/
background-position: left; /*向左對(duì)齊*/
background-position: right; /*向右對(duì)齊*/
background-position: center; /*居中對(duì)齊*/
六、CSS連接屬性:
a/*所有超鏈接*/
a:link/*超鏈接文字格式*/
a:visited/*瀏覽過的鏈接文字格式*/
a:active/*按下鏈接的格式*/
a:hover/*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式:
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號(hào) cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
七、CSS框線一覽表:
border-top: 1px solid #6699cc; /*上框線*/
border-bottom: 1px solid #6699cc; /*下框線*/
border-left: 1px solid #6699cc; /*左框線*/
border-right: 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color: #369 /*設(shè)置上框線top顏色*/
border-top-width:1px /*設(shè)置上框線top寬度*/
border-top-style: solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid/*實(shí)線框*/
dotted/*虛線框*/
double/*雙線框*/
groove/*立體內(nèi)凸框*/
ridge/*立體浮雕框*/
inset/*凹框*/
outset/*凸框*/
八、CSS表單運(yùn)用:
文字方塊 <input type="text" name="T1"size="15">
按鈕 <input type="submit" value="submit"name="B1">
復(fù)選框 <input type="checkbox" name="C1">
選擇鈕 <input type="radio" value="V1" checkedname="R1">
多行文字方塊 <textarea rows="1" name="S1"cols="15"></textarea>
下拉式菜單 <select size="1" name="D1"><option>選項(xiàng)1</option>
<option>選項(xiàng)2</option></select>
九、CSS邊界樣式:
margin-top:10px;/*上邊界*/
margin-right:10px;/*右邊界值*/
margin-bottom:10px;/*下邊界值*/
margin-left:10px;/*左邊界值*/
十、CSS邊框空白
padding-top:10px;/*上邊框留空白*/
padding-right:10px;/*右邊框留空白*/
padding-bottom:10px;/*下邊框留空白*/
padding-left:10px;/*左邊框留空白*/
十一、滾動(dòng)條樣式
Scrollbar-face-color:#f3f3f3;/*滾動(dòng)條凸出部分的顏色*/
Scrollbar-highlight-color:#f1f1f1/*滾動(dòng)條陰影部分的顏色*/
Scrollbar-shadow-color:#fcfcfc/*立體滾動(dòng)條陰影顏色*/
Scrollbar-3dlight-color:#fcfcfc/*滾動(dòng)條亮邊的顏色*/
Scrollbar-arrow-color:#34837/*上下按鈕上三角箭頭的顏色*/
Scrollbar-track-color:#fcfcfc/*滾動(dòng)條的背景顏色*/
Scrollbar-darkshadow-color:#66c0f4/*立體滾動(dòng)條強(qiáng)陰影顏色*/
Scrollbar-base-color:#fcfcfc/*滾動(dòng)條的基本顏色*/
以上是對(duì)CSS樣式的基礎(chǔ)學(xué)習(xí),如有出入,還請(qǐng)見諒。
級(jí)聯(lián)樣式表(Cascading Style Sheet)簡(jiǎn)稱“CSS”,通常又稱為“風(fēng)格樣式表(Style Sheet)”,它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如,如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的,當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線,這就是一種風(fēng)格。通過設(shè)立樣式表,可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表,可以擴(kuò)充精確指定網(wǎng)頁元素位置,外觀以及創(chuàng)建特殊效果的能力。
CSS是英語CascadingStyle Sheets(層疊樣式表單)的縮寫,它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS目前最新版本為CSS3,是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力,并能夠進(jìn)行初步交互設(shè)計(jì),是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力,簡(jiǎn)化或者優(yōu)化寫法,針對(duì)各類人群,有較強(qiáng)的易讀性。
二.CSS的使用方法
有三種方法可以在站點(diǎn)網(wǎng)頁上使用樣式表:
外部樣式:將網(wǎng)頁鏈接到外部樣式表。
內(nèi)頁樣式:在網(wǎng)頁上創(chuàng)建嵌入的樣式表。
行內(nèi)樣式:應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁元素。
每一種方法均有其優(yōu)缺點(diǎn):
當(dāng)要在站點(diǎn)上所有或部分網(wǎng)頁上一致地應(yīng)用相同樣式時(shí),可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式,并將它們鏈接到所有網(wǎng)頁,便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式,只需在外部樣式表中修改一次,而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴(kuò)展名,例如牛腩新聞發(fā)布系統(tǒng)中的公共樣式Common.css。然后在需要此樣式的頁面中將其鏈接進(jìn)來,如:
<link href="/css/Common.css"rel="stylesheet" type="text/css"/>
當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式,可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表,“嵌”在網(wǎng)頁的 <HEAD>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。 如:
<style type="text/css"><!-- /* 把聲明的樣式包含在一個(gè)html注釋中,這樣可以解決較老的瀏覽器不識(shí)別style的問題 */
body {background:grey;}
</style>
使用內(nèi)嵌樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁元素上。如:
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style屬性中使用@import -->
如果網(wǎng)頁鏈接到外部樣式表,為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。
要在網(wǎng)頁上使用外部樣式表的樣式,可將該網(wǎng)頁鏈接到樣式表,方法是使用位于 “格式” 菜單上的 “樣式表連接” 命令??梢枣溄右粋€(gè)或數(shù)個(gè)樣式表到網(wǎng)頁視圖模式下的當(dāng)前網(wǎng)頁,或到在文件夾列表中的所選網(wǎng)頁,或到站點(diǎn)上的全部網(wǎng)頁。
該“樣式” 框列出標(biāo)準(zhǔn) HTML 標(biāo)記符,例如標(biāo)題
1,還有嵌入的樣式表或鏈接到網(wǎng)頁的外部樣式表中所含的類或 ID 選擇器。要應(yīng)用樣式到網(wǎng)頁元素,請(qǐng)選定該樣式然后單擊 “樣式” 框中的樣式或選擇器。
在 Microsoft FrontPage 2000中,某些格式設(shè)置特性會(huì)作為內(nèi)嵌樣式自動(dòng)應(yīng)用。例如∶如果使用 “邊框與陰影” 命令(在 “格式” 菜單上)在普通段落周圍應(yīng)用框,F(xiàn)rontPage 會(huì)寫下格式設(shè)置信息,作為段落標(biāo)記符的內(nèi)嵌樣式屬性(例如∶ <pstyle="border-style: solid">)。然而某些屬性的應(yīng)用需要使用 CSS,其他則需要使用 HTML 。如果人們只想使用 CSS 應(yīng)用內(nèi)嵌樣式,可使用 “樣式”按鈕(位于網(wǎng)頁元素的 “屬性” 對(duì)話框里)應(yīng)用類或 ID 選擇器或嵌入式樣式。
三、CSS文字屬性:
color: #999999; /*文字顏色*/
font-family: 宋體,sans-serif; /*文字字體*/
font-size: 9pt; /*文字大小*/
font-style:itelic;/*文字斜體*/
font-variant:small-caps;/*小字體*/
letter-spacing: 1pt; /*字間距離*/
line-height: 200%; /*設(shè)置行高*/
font-weight:bold;/*文字粗體*/
vertical-align:sub;/*下標(biāo)字*/
vertical-align:super;/*上標(biāo)字*/
text-decoration:line-through;/*加刪除線*/
text-decoration:overline;/*加頂線*/
text-decoration:underline;/*加下劃線*/
text-decoration:none;/*刪除鏈接下劃線*/
text-transform: capitalize; /*首字大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
text-align:right;/*文字右對(duì)齊*/
text-align:left;/*文字左對(duì)齊*/
text-align:center;/*文字居中對(duì)齊*/
text-align:justify;/*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top;/*垂直向上對(duì)齊*/
vertical-align:bottom;/*垂直向下對(duì)齊*/
vertical-align:middle;/*垂直居中對(duì)齊*/
vertical-align:text-top;/*文字垂直向上對(duì)齊*/
vertical-align:text-bottom;/*文字垂直向下對(duì)齊*/
四、CSS符號(hào)屬性:
list-style-type:none;/*不編號(hào)*/
list-style-type:decimal;/*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman;/*小寫羅馬數(shù)字*/
list-style-type:upper-roman;/*大寫羅馬數(shù)字*/
list-style-type:lower-alpha;/*小寫英文字母*/
list-style-type:upper-alpha;/*大寫英文字母*/
list-style-type:disc;/*實(shí)心圓形符號(hào)*/
list-style-type:circle;/*空心圓形符號(hào)*/
list-style-type:square;/*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif);/*圖片式符號(hào)*/
list-style-position:outside;/*凸排*/
list-style-position:inside;/*縮進(jìn)*/
五、CSS背景樣式:
background-color:#F5E2EC;/*背景顏色*/
background:transparent;/*透視背景*/
background-image: url(/image/bg.gif); /*背景圖片*/
background-attachment: fixed; /*浮水印固定背景*/
background-repeat: repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/
background-repeat: no-repeat; /*不重復(fù)排列*/
background-repeat: repeat-x; /*在x軸重復(fù)排列*/
background-repeat: repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position: 90% 90%; /*背景圖片x與y軸的位置*/
background-position: top; /*向上對(duì)齊*/
background-position: buttom; /*向下對(duì)齊*/
background-position: left; /*向左對(duì)齊*/
background-position: right; /*向右對(duì)齊*/
background-position: center; /*居中對(duì)齊*/
六、CSS連接屬性:
a/*所有超鏈接*/
a:link/*超鏈接文字格式*/
a:visited/*瀏覽過的鏈接文字格式*/
a:active/*按下鏈接的格式*/
a:hover/*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式:
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號(hào) cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
七、CSS框線一覽表:
border-top: 1px solid #6699cc; /*上框線*/
border-bottom: 1px solid #6699cc; /*下框線*/
border-left: 1px solid #6699cc; /*左框線*/
border-right: 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color: #369 /*設(shè)置上框線top顏色*/
border-top-width:1px /*設(shè)置上框線top寬度*/
border-top-style: solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid/*實(shí)線框*/
dotted/*虛線框*/
double/*雙線框*/
groove/*立體內(nèi)凸框*/
ridge/*立體浮雕框*/
inset/*凹框*/
outset/*凸框*/
八、CSS表單運(yùn)用:
文字方塊 <input type="text" name="T1"size="15">
按鈕 <input type="submit" value="submit"name="B1">
復(fù)選框 <input type="checkbox" name="C1">
選擇鈕 <input type="radio" value="V1" checkedname="R1">
多行文字方塊 <textarea rows="1" name="S1"cols="15"></textarea>
下拉式菜單 <select size="1" name="D1"><option>選項(xiàng)1</option>
<option>選項(xiàng)2</option></select>
九、CSS邊界樣式:
margin-top:10px;/*上邊界*/
margin-right:10px;/*右邊界值*/
margin-bottom:10px;/*下邊界值*/
margin-left:10px;/*左邊界值*/
十、CSS邊框空白
padding-top:10px;/*上邊框留空白*/
padding-right:10px;/*右邊框留空白*/
padding-bottom:10px;/*下邊框留空白*/
padding-left:10px;/*左邊框留空白*/
十一、滾動(dòng)條樣式
Scrollbar-face-color:#f3f3f3;/*滾動(dòng)條凸出部分的顏色*/
Scrollbar-highlight-color:#f1f1f1/*滾動(dòng)條陰影部分的顏色*/
Scrollbar-shadow-color:#fcfcfc/*立體滾動(dòng)條陰影顏色*/
Scrollbar-3dlight-color:#fcfcfc/*滾動(dòng)條亮邊的顏色*/
Scrollbar-arrow-color:#34837/*上下按鈕上三角箭頭的顏色*/
Scrollbar-track-color:#fcfcfc/*滾動(dòng)條的背景顏色*/
Scrollbar-darkshadow-color:#66c0f4/*立體滾動(dòng)條強(qiáng)陰影顏色*/
Scrollbar-base-color:#fcfcfc/*滾動(dòng)條的基本顏色*/
以上是對(duì)CSS樣式的基礎(chǔ)學(xué)習(xí),如有出入,還請(qǐng)見諒。
相關(guān)文章
簡(jiǎn)要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)
這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-03- 這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開發(fā)者的共識(shí),樹立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下2015-06-29
- 在阿里云首頁看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請(qǐng)問這樣的意義是什么呢?研究了一番,原來是清除浮動(dòng)用的,下面來總結(jié)下清除浮動(dòng)2014-06-17
css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)
主要記錄本人調(diào)試過程中所終結(jié)的經(jīng)驗(yàn)與方法,css關(guān)系到界面的美觀,有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用,終歸還是一件失敗的產(chǎn)品2014-06-15CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端開發(fā)者需要考慮的重要問題之一,由于一直困擾著大家,因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下,看過之后感覺不錯(cuò)的可以收藏哦2013-10-30- 本篇文章是對(duì),CSS3中的動(dòng)畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-09
- 本文整理了ie中div的垂直居中問題、margin加倍的問題、ie6下頁面min-width/height與max-width/height問題、ie6 3px bug及ie6捉迷藏的問題等等,感興趣的朋友可以參考下哈2013-04-01
CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語總結(jié)
CSS(Cascading Style Sheet )級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來詳細(xì)為您介紹,需要了解的朋友可以參考下2013-01-03- 本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2022-09-29