YK Forum » 網頁製作 » CSS 基本語法


2007-9-18 04:00 PM 仁傑
CSS 基本語法

基本語法====================================
<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檔

2007-9-30 12:37 PM a0301875
color : #999999 /*文字色彩*/
???:L

2008-5-12 05:37 PM 非常天才
thsssssssssssssssssssssssssssssssssssss!!!!!!
我可以做網頁la

2009-2-26 07:31 AM totoro7735
恩恩~~~剩下的就剩好好運用了

2009-4-2 10:29 PM aaww12345
又有收穫了~~感謝分享

2009-5-4 10:42 PM aubeverly
thank you ar!!!!

2009-9-28 02:57 PM tsubasalily
感謝~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
:P :P :P :P :P
:D :D :D :D :D

2009-10-2 01:52 AM tracy714
哇~~~好嘢:P

2010-2-24 02:28 PM 鬼舷
thx呃.....借左- -

2010-4-16 07:24 AM Matthew417
Thanks for sharing !! :)

2010-8-16 04:27 PM a26776500
好正!than you la!

2010-10-30 03:03 PM royandken
呢家仲有人玩css咩-.-?

2010-12-4 09:13 PM williamyii77
辛苦唒你了....

2011-4-23 07:42 PM fedora11
多謝哂=]:D

2011-5-18 10:28 PM williamyii77
多謝壇主啊~~~~~~~~

2011-5-18 10:29 PM williamyii77
多謝壇主啊~~~~~~~~

2011-8-8 12:11 AM kid91a16
css 好深奧的一門學問

:smile2:

2011-8-14 07:55 AM 狐狸
謝謝,可以做無名小站背景了:lol

2011-8-14 10:03 PM kenlol
我想我都係寫HTML好D:L

頁: [1]
查看完整版本: CSS 基本語法


Powered by Discuz! Archiver 5.0.0  © 2001-2006 Comsenz Inc.