網頁設計-CSS語法總整理
發表:2008-04-25 13:33
基本語法====================================
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 細明體 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>
文字屬性一覽================================
color : #999999 /*文字色彩*/
font-family : 細明體 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/
letter-spacing : 1pt/*字間距離*/
line-height : 200 /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
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 /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/
背景語法===================================
<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景圖片*/
background-repeat : no-repeat; /*不重複排列*/
background-position : 90 90; /*背景圖片x與y軸的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>
背景屬性一覽================================
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景圖片*/
background-attachment : fixed /*固定背景*/
background-repeat : repeat /*重複排列-網頁預設*/
background-repeat : no-repeat /*不重複排列*/
background-repeat : repeat-x /*在x軸重複排列*/
background-repeat : repeat-y /*在y軸重複排列*/
background-position : 90 90 /*背景圖片x與y軸的位置*/
連結語法====================================
<style type=text/css>
<!--
A:link/*超連結*/
{color : #999999 ; /*文字色彩*/}
A:visited/*瀏覽過的超連結*/
{color : #999999 ; /*文字色彩*/}
A:active/*按下連結*/
{color : #999999 ; /*文字色彩*/}
A:hover/*滑鼠移至連結*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗體*/
-->
</style>
連結屬性一覽==================================
A/*所有超連結*/
A:link/*超連結文字格式*/
A:visited/*瀏覽過的連結文字格式*/
A:active/*按下連結的格式*/
A:hover/*滑鼠移至連結*/
text-decoration:none;/*刪除連結線*/}
{cursor:s-resize;/*滑鼠指標樣式*/
font-weight:bold; /*文字粗體*/
border : 1px dotted #cc3300 ; /*文字框線*/}
滑鼠指標樣式一覽===============================
cursor:crosshair 十字型 cursor:s-resize 箭頭朝下
cursor:move 十字箭頭 cursor:e-resize 箭頭朝右
cursor:help 加一問號 cursor:w-resize 箭頭朝左
cursor:n-resize 箭頭朝上 cursor:ne-resize 箭頭朝右上
scursor:nw-resize 箭頭朝左上 cursor:text 文字I型
cursor:se-resize 箭頭斜右下 cursor:sw-resize 箭頭斜左下
cursor:wait 漏斗 cursor:nono 預設
彩色卷軸=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*卷軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*卷軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*卷軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*卷軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*卷軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*卷軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*卷軸底色*/
}
-->
</style>
刪除卷軸=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*刪除卷軸*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-x:hidden; /*刪除水平卷軸*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-y:hidden; /*刪除垂直卷軸*/}
-->
</style>
滑鼠移過連結位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
說明:
在a:hover 滑鼠移至連結的屬性做文字位置的變化
top:1px;left:1px 位移數值
right:1px;bottom:1px 可改變位移方向
表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
說明:
opacity=60 設定透明度(值越小越透明)
外部呼叫================================
<link rel=stylesheet type="text/css" href="檔名.css">
更改滑鼠================================
<style type="text/css">
<!--
body {cursor:url("滑鼠網址"),url("滑鼠網址"),text;}
-->
</style>
*須為ani檔及cur檔
【誠徵榮譽會員】溪流能夠匯成大海,小善可以成就大愛。我們向全球華人誠意徵集萬名榮譽會員:每位榮譽會員每年只需支付一份訂閱費用,成為《看中國》網站的榮譽會員,就可以助力我們突破審查與封鎖,向至少10000位中國大陸同胞奉上獨立真實的關鍵資訊, 在危難時刻向他們發出預警,救他們於大瘟疫與其它社會危難之中。
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 細明體 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>
文字屬性一覽================================
color : #999999 /*文字色彩*/
font-family : 細明體 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/
letter-spacing : 1pt/*字間距離*/
line-height : 200 /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
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 /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/
背景語法===================================
<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景圖片*/
background-repeat : no-repeat; /*不重複排列*/
background-position : 90 90; /*背景圖片x與y軸的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>
背景屬性一覽================================
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景圖片*/
background-attachment : fixed /*固定背景*/
background-repeat : repeat /*重複排列-網頁預設*/
background-repeat : no-repeat /*不重複排列*/
background-repeat : repeat-x /*在x軸重複排列*/
background-repeat : repeat-y /*在y軸重複排列*/
background-position : 90 90 /*背景圖片x與y軸的位置*/
連結語法====================================
<style type=text/css>
<!--
A:link/*超連結*/
{color : #999999 ; /*文字色彩*/}
A:visited/*瀏覽過的超連結*/
{color : #999999 ; /*文字色彩*/}
A:active/*按下連結*/
{color : #999999 ; /*文字色彩*/}
A:hover/*滑鼠移至連結*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗體*/
-->
</style>
連結屬性一覽==================================
A/*所有超連結*/
A:link/*超連結文字格式*/
A:visited/*瀏覽過的連結文字格式*/
A:active/*按下連結的格式*/
A:hover/*滑鼠移至連結*/
text-decoration:none;/*刪除連結線*/}
{cursor:s-resize;/*滑鼠指標樣式*/
font-weight:bold; /*文字粗體*/
border : 1px dotted #cc3300 ; /*文字框線*/}
滑鼠指標樣式一覽===============================
cursor:crosshair 十字型 cursor:s-resize 箭頭朝下
cursor:move 十字箭頭 cursor:e-resize 箭頭朝右
cursor:help 加一問號 cursor:w-resize 箭頭朝左
cursor:n-resize 箭頭朝上 cursor:ne-resize 箭頭朝右上
scursor:nw-resize 箭頭朝左上 cursor:text 文字I型
cursor:se-resize 箭頭斜右下 cursor:sw-resize 箭頭斜左下
cursor:wait 漏斗 cursor:nono 預設
彩色卷軸=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*卷軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*卷軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*卷軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*卷軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*卷軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*卷軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*卷軸底色*/
}
-->
</style>
刪除卷軸=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*刪除卷軸*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-x:hidden; /*刪除水平卷軸*/}
-->
</style>
<style type=text/css>
<!--
BODY{overflow-y:hidden; /*刪除垂直卷軸*/}
-->
</style>
滑鼠移過連結位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
說明:
在a:hover 滑鼠移至連結的屬性做文字位置的變化
top:1px;left:1px 位移數值
right:1px;bottom:1px 可改變位移方向
表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
說明:
opacity=60 設定透明度(值越小越透明)
外部呼叫================================
<link rel=stylesheet type="text/css" href="檔名.css">
更改滑鼠================================
<style type="text/css">
<!--
body {cursor:url("滑鼠網址"),url("滑鼠網址"),text;}
-->
</style>
*須為ani檔及cur檔
短网址: 版權所有,任何形式轉載需本站授權許可。 嚴禁建立鏡像網站。
【誠徵榮譽會員】溪流能夠匯成大海,小善可以成就大愛。我們向全球華人誠意徵集萬名榮譽會員:每位榮譽會員每年只需支付一份訂閱費用,成為《看中國》網站的榮譽會員,就可以助力我們突破審查與封鎖,向至少10000位中國大陸同胞奉上獨立真實的關鍵資訊, 在危難時刻向他們發出預警,救他們於大瘟疫與其它社會危難之中。
看完這篇文章您覺得
評論
- 江曾一政策藏汙納垢 老虎前仆後繼終南捷徑(組圖)
- 中國經濟舊模式大潰敗 注定一個時代已經結束(圖)
- 【貫明專欄】臺灣最美的海灣 人間仙境七星潭(視頻)
- 水果皇后——草莓(組圖)
- 戰火無情 造化弄人 那一代人的離合滄桑(組圖)
- 千年前的人類抵禦矮人「他」化為惡龍(圖)
今日重點文章
更多重點文章
72小時熱門排行
- 爆料:曾慶紅之子曾偉依靠合法勒索斂財(圖)
- 北京今夜大搜捕
- 北京奧火傳堪培拉 抗議不斷 黨旗遭焚(多圖)
- 這麼多的官員自殺,他們是真的自殺了嗎?
- 女子眉心中彈頭蓋骨竟碰碎子彈片(圖)
- 虎照事件:該到最後揭底牌的時候了
- 一生勞碌為了什麼?
- 何清漣:如何看透新聞
熱門標籤
- 中共肺炎(又称武漢肺炎)
- 病毒
- COVID-19
- 疫苗
- 台鐵
- 拜登
- 川普
- 特朗普
- 國安法
- 貿易戰
- 習近平
- 華為
- 三峽大壩
- 新疆棉
- 長江
- 洪水
- 袁弓夷
- 港版國安法
- 漢光演習
- 國民黨
- 退黨
- 弗洛伊德
- BLM
- 中共
- 閻麗夢
- 金正恩
- 王岐山
- 賴清德
- 孟晚舟
- 關稅
- 邊境牆
- 彭斯
- 美國
- 貿易談判
- 劉鶴
- 王滬寧
- 江澤民
- 崔永元
- 中南海
- 內幕
- 中共
- 反送中
- 貪官
- 情婦
- 腐敗
- 反腐
- 打虎
- 官場
- 看中國
- 一國兩制
- 法廣
- 社交媒體
- 往事微痕
- 出賣國土
- FB
- 六四
- 朝鮮
- 加拿大
- 脫歐
- 央行
- 債務
- 槓桿
- 美元
- 貨幣
- 人民幣
- 歐元
- 日元
- 港幣
- 房地產
- 樓市
- 財政
- 財富
- 中產
- 海參崴
- 台灣
- 蔡英文
- 北京
- 劉強東
- 大媽
- 房價
- 疫苗
- 非洲豬瘟
- 大陸
- P2P
- 霧霾
- 基因編輯
- 防火牆
- 維權
- 709律師
- 上訪
- 法輪功
- 網絡審查
- 活摘器官
- 江東六十四屯
- 唐努烏梁海
- 長白山
- 白龍尾島
- 江心坡
- SARS
- 新疆勞改營
- 言論自由
- 女主播
- 央視
- 華人
- 移民
- 華人
- 留學
- 海關
- 遣返
- 簽證
- 回國
- 入籍
- 綠卡
- 民生
- 海外
- 加拿大
- 澳洲
- 民國
- 桂軍
- 抗戰
- 孫中山
- 蔣介石
- 宋美齡
- 鄧小平
- 林彪
- 劉奇
- 中共
- 皇帝
- 諸葛亮
- 易經
- 幽默人生
- 智慧
- 感悟
- 手機
- 預言
- 奇聞
- UFO
- 外星人
- 壽命
- 文革
- 養生
- 紫鳳
- 貫明
- 李道真
- 軼飛
- 李雲飛
- 雲中君
- 辛思
- 夏聞
- 時代漫談
- 滄海
- 東方縱橫
- 唐柏橋
- 王尚一
- 江楓
- 黃清
- 李唐風
- 園丁
- 今濤拍暗
- 李青城
- 秦就石
- 中經研
- 秦天靖
- 江浩
- Eagle Vision
- 李子壬
- 馬新宇
- 馬來啟
- 紫君
- 秦山
- 陳破空
- 戴東尼
- 曹長青
- 邢仁濤
- 瑜正
- 簡易
- 肖川
- 伍凡
- 顧言
- 歸瑜
- 乙欣
- 陳泱潮
- 徐沛
最新文章
- 正負消息同出 如何解讀香港經濟怪現象?(圖)
- 又一名波音吹哨人突然死亡 兩個月內第二起(圖)
- 講好新聞自由故事 不如做好三件實事(圖)
- 美高官將訪臺參加總統就職 並密切關注中國行動(圖)
- 加大LA分校爆衝突遭清場 哥大被捕者近半不是學生(圖)