CSS 應用實務=====3

狼族メ绝佳人 · 发表于 2008-5-21 02:30:04

<

>CSS(Cascading Style Sheets 串接樣式表） 什麼是CSS CSS的全名是Cascading Style Sheets（串接樣式表）。它是由許多樣式名稱和樣式指定值所組成的字串，我們可以利用設定好的樣式表，指定給某一種HTML標籤，或某一群組HTML標籤來使用。而被套用的HTML標籤，將會依據所套用的CSS來顯式它的外觀。 CSS可說是JavaScript物件模型的一個重要部份，因為在CSS設定之後，我們還可以利用JavaScript重新指定不同的值給元件，而達成動態改變的效果（JavaScript動態改變的功能IE已完全支援，但NC只支援極少部份）。試想我們利用CSS將一段文字設為紅色，再利用JavaScript將它改變為籃色，這就是一種動態網頁效果啦（NC目前做不到）！ css是用來延伸html而非取代htnl,是用來補html的不足 IE4.0及Netscape支援CSS1.0版,而IE5.0則支援到部分CSS2.0 CSS利用各式的排版樣式來輔助HTML，其簡潔的語法可以很容易的控制HTML標記，而且最大的功能是可以將資料與顯示格式分開處理 ( 以 . CSS 為副檔名儲存成一個獨立的文字檔 ) 。 CSS的特點 減少圖檔的使用,便可以達到文字變化的需求,加快網頁傳輸的速度 集中管理樣式,當修改時只需針對樣式修改即可 共享樣式設定,CSS可另外存檔,供每一個網頁取用共享 使用CSS有什麼好處 CSS的最大好處是提供了HTML所不支援的屬性。例如中只可設定文字前景顏色，但CSS可指定背景顏色、背景圖形甚至幫它畫個外框！所以CSS的出現，將使我們可以運用更多不同的屬性，當然網頁也會更漂亮啦！ 用CSS將會使網頁設計速度增快。我們常常會用到許多參數完全相同的標籤，如可能用到好幾次參數設定一樣的標籤，而還是得每次都重新指定所用的參數。但如果用CSS，就大不相同了！我們可以指定一群的標籤都套用某個CSS，這樣設定一次全部OK，不是很方便嗎？ 讓許多網頁用同一份CSS，可減少網頁體積。CSS可獨立寫成一個檔案，再由瀏覽器於需要時讀入。如果數個檔案共用一份CSS，將可達到減小網頁體積的功效，而且也可以減低網路傳輸的負荷，可謂一舉多得！ 串接 讓HTML文件可同時套用數個樣式表,每個樣式表描述不同的物件 將這些樣式串接同一網頁上,在維護上比較方便 CSS基本語法 HTML標記可為任何標記，多個HTML標記間以逗號 ( , ) 分隔 ; 屬性定義為大括弧部份，多個屬性定義間以分號 ( ; ) 分隔。 HTML標記 { 屬性名稱 : 屬性設定值 } 如 : H1 , H3 { COLOR : RED ; FONT-WEIGHT : BOLD } CSS種類 CSS為甚麼稱為串聯式排版樣式呢 ? 是因為可以混合使用以下Style Sheets種類，其優先執行順序依編號排列。 Inline (同列) : 使用HTML標記的STYLE屬性，只於定義的區段有效。 如 : &lt

STYLE=COLOR:RED> Embedding (內嵌) : 使用 <STYLE>...</STYLE>標記 ( 置於BODY本文區之前 )，定義HTML標記供整個網頁使用。可使用多個<STYLE>...</STYLE>標記 如 : <HTML> 文件開始 <STYLE TYPE=text/css> 排版樣式區開始 <！-- 排版樣式區內容 --> </STYLE> 排版樣式區結束 <BODY> 本文區開始 本文區內容 </BODY> 本文區結束 </HTML> 文件結束 Linking (連結) : 使用 <LINK>標記 ( 用於HEAD區 )，即將排版樣式分開處理 ( 以 . CSS 為副檔名儲存成一個獨立的文字檔 ) ，再連結使用。可使用多個<LINK>標記。 如 : <HTML> 文件開始 <HEAD> 標頭區開始 <LINK TYPE=text/css REL=stylesheet HREF=s1.css> 連結CSS檔 </HEAD> 標頭區結束 <BODY> 本文區開始 本文區內容 </BODY> 本文區結束 </HTML> 文件結束 CSS 相關的 HTML 標記、屬性 CSS 相關的 HTML 標記 : <STYLE>...</STYLE> 設定 Style Sheet 格式 <LINK> 連結指令 <DIV>...</DIV> 分離區段 ( 允許重疊顯示 ) ... 小區段範圍 CSS 相關的 HTML 標記屬性 : STYLE = cssl-properties 樣式 ID = value 代號 CLASS = classname 種類 
<

> 
<DIV class=tpc_content id=read_24639>CSS可使用長度單位 pt Point，就像是Word裡面的Point一樣大小 font-size:10pt px Pixels，依您螢幕解析度而決定大小 font-size:10px pc Pica，6個Pica是一英吋 font-size:10pc mm 公厘，用過尺...這個設定值完全不會因為**設定而改變 font-size:10mm cm 公分，不會因為使用者設定而改變 font-size:10cm % 百分比，大部分是指所在位置寬度或者長度百分比 font-size:10% CSS可用顏色表示方式 表示方式表示方式說明範例 #rrggbb 可以用Windows色彩選擇工具找到 color:#feefc7 rgb(#,#,#) 用數字來表示紅色藍色以及綠色的混合...也可以用Windows色彩選擇工具找 color:rgb(135,255,124) rgb(%,%,%) 用百分比來代表紅色藍色以及綠色的強度來混合顏色 color:rgb(70%,35%,41%) 顏色名稱用顏色的名稱來指定顏色 color:brown -------------------------------------------------------------------------------- 【背景可用值】 CSS可用背景值 名稱說明可能值範例 background 背景下面的背景設定值皆適用 background:fixed background-attachment 背景圖性是否固定 fixed, scroll background-attachment:fixed background-color 背景顏色顏色 transparent(透空) backgroun-color:yellow background-image 背景圖片 none(無背景圖) url(****)(圖片位置) background-image:url(test.jpg) background-position 背景圖位置水平垂直 background-position:135 159 background-repeat 背景是否重複 repeat(重複) repeat-x(水平重複) repeat-y(垂直重複) no-repeat(不重複) background-repeat:repeat -------------------------------------------------------------------------------- 【屬性可用值】 CSS可用屬性值 名稱說明可能值範例 visibility 顯示或是隱藏 inherit(父元件決定) hidden(隱藏) visible(顯示) 　 visibility:hidden width 寬度 auto(自動決定) 數字 width:135 height 高度 auto(自動決定) 數字 height:100 z-index Z軸高度(立體，是否在另一個元件之上) auto(自動決定) 數字 z-index:135 position 定位方式 absolute (絕對定位-依視窗座標，原點為父視窗左上角) relative (相對定位-以一般網頁排列[right.center.left]後再根據座標定位，原點為定位後的位置) static (靜態定位-以一般網頁排列) position:absolute top(物件的position屬性須為absolute或relative) 物件的Y座標(原點根據postion屬性有所不同) 數字　 left(物件的position屬性須為absolute或relative) 物件的X座標(原點根據postion屬性有所不同) 數字　 -------------------------------------------------------------------------------- 【文字設定可用值】 CSS可用文字設定值 名稱說明可能值範例 font 文字設定以下所有皆可使用 　 font:arial font-family 字體字體名稱 font-family:arial font-size 字體大小百分比或是數字(單位) font-size:12px font-style 字型樣式 normal(普通) italic(斜體) oblique(斜體) font-style:italic font-variant 字型特別樣式 normal(普通) small-caps(大小英文字母) font-variant:small-caps font-weight 字型粗細 normal(普通) bold(粗體) bolder(超粗體) lighter(細體) 數字(400=normal 700=bold ) font-weight:bolder letter-spacing 字元相距 normal(普通) 數字(預設為0) letter-spacing:5 text-align 字元對齊 left(左邊) right(右邊) center(中間) justify(左右平分) text-align:justify text-decoration 字元樣式 none(普通) underline(加底線) no-underline(不加底線) blink(閃爍) no-blink(不閃爍) line-through(加刪除線) no-line-through(不加刪除線) overline(加頂線) no-overline(不加頂線) text-decoration:underline -------------------------------------------------------------------------------- 【表格設定】 CSS可用表格設定值框線位置：(上-top.下-bottom.左-left.右-right) 名稱說明可能值範例 border 表格邊框設定以下所有皆可使用 　 border:green border-color border-(框線位置)-color 邊框顏色任何顏色表示方法 border-color:blue border-style border-(框線位置)-style 邊框樣式 none(無邊框) dotted(點線) dashed(虛線) solid(實線) double(雙線) groove(立體凹線) ridge(立體凸線) inset(立體嵌入線) outset(立體隆起線) border-style:dotted border-width border-(框線位置)-width 邊框寬度數字 border-width:5 padding 邊框補白數字 padding:5 -------------------------------------------------------------------------------- 【滑鼠設定】 CSS可用滑鼠游標設定值 名稱說明可能值範例 cursor 游標圖示 auto(自動決定) default(預設值) crosshair(十字) hand(手形) move(移動時的游標) help(有問號的游標) text(文字編輯的游標) wait(忙碌中的游標) w-resize(向左箭頭) e-resize(向右箭頭) n-resize(向上箭頭) ne-resize{向右上箭頭) nw-resize(向左上箭頭) s-resize(向下箭頭) se-resize(向右下箭頭) sw-resize(向左下箭頭) 　 cursor:hand -------------------------------------------------------------------------------- 【捲軸設定】 CSS可用捲軸列設定值 名稱說明可能值範例 scrollbar-base-color 捲軸列主色調顏色 scrollbar-base-color:#aaaaaa scrollbar-arrow-color 按鈕箭頭的顏色顏色 　 scrollbar-arrow-color:#000000 scrollbar-face-color 移動棒的顏色顏色 scrollbar-face-color:#ffee99 scrollbar-highlight-color 按鈕邊框內層左邊與上面的顏色及捲軸底部軌道網狀顏色(與track同時使用網狀會消失) 顏色 scrollbar-highlight-color: #000000 scrollbar-3dlight-color 按鈕邊框外層左邊與上面的顏色顏色 scrollbar-3dlight-color:#000000 scrollbar-darkshadow-color 按鈕邊框外層右邊與下面的顏色顏色 scrollbar-darkshadow-color:#000000 scrollbar-shadow-color 按鈕邊框內層右邊與下面的顏色顏色 scrollbar-track-color: #cccccc scrollbar-track-color 底部軌道顏色顏色 scrollbar-track-color: #cccccc</DIV>

[ 本帖最后由狼族メ绝佳人于 2008-5-27 02:13 编辑 ]

狼族メ藍棋ル · 发表于 2008-5-21 02:30:52

美女

狼族メ绝佳人 · 发表于 2008-5-21 02:31:52

<DIV class=tpc_content id=read_11025><TABLE height=550 cellSpacing=0 cellPadding=0 width=600 background=http://shaaf.ru/uploads/limage01.jpg border=0> <TR><TD><MARQUEE scrollAmount=2 scrollDelay=100 direction=up behavior=slide loop=30 height=363><TABLE style=\"FILTER: Alpha(Opacity=10)\" height=550 cellSpacing=0 cellPadding=0 width=600 background=http://shaaf.ru/uploads/limage01.jpg border=0></TABLE></MARQUEE></TD></TR></TABLE></div> <A href=\"http://hexun.com/langzu520/default.html\" target=_blank>狼族メ绝佳人</A> <?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animateColor id=color1 attributeName = \"color\" calcMode = \"paced\" targetElement = \"font1\" values = \"#00FF00;;#FFFF00;;#FF00FF;;#0000FF;\" autoReverse = \"true\" begin = \"0;b4.click\" dur = \"12\" repeatCount = \"100\"></t:animateColor></DIV>

狼族メ藍棋ル · 发表于 2008-5-21 02:32:17

额会认真学的

狼族メ小龍 · 发表于 2008-5-22 16:34:34

狼族メ小龍 · 发表于 2008-5-22 16:36:56

<DIV></DIV> 转载请注明出自 <A href=\"http://www.lang4.com/\" target=_blank>www.lang4.com</A>,本贴地址：<A href=\"http://www.lang4.com/viewthread.php?tid=156549\" target=_blank>http://www.lang4.com/viewthread.php?tid=156549</A> <?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animateColor id=color1 attributeName = \"color\" calcMode = \"paced\" targetElement = \"font1\" values = \"#00FF00;;#FFFF00;;#FF00FF;;#0000FF;\" autoReverse = \"true\" begin = \"0;b4.click\" dur = \"12\" repeatCount = \"100\"></t:animateColor></MARQUEE></TR></TBODY></TABLE>

[ 本帖最后由狼族メ小龍于 2008-5-22 16:39 编辑 ]

狼族メ小龍 · 发表于 2008-5-22 16:42:02

<TABLE height=550 cellSpacing=0 cellPadding=0 width=600 background=http://shaaf.ru/uploads/limage01.jpg border=0>
<MARQUEE scrollAmount=2 scrollDelay=100 direction=up behavior=slide loop=30 height=30></MARQUEE>
<TBODY></TBODY>
<TABLE style=\"FILTER: Alpha(Opacity=10)\" height=300 cellSpacing=0 cellPadding=0 width=600 background=http://shaaf.ru/uploads/limage01.jpg border=0></TD></TR>
<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE>

[ 本帖最后由狼族メ小龍于 2008-5-22 16:49 编辑 ]

狼族メ小龍 · 发表于 2008-5-22 16:52:17

<DIV></DIV> 好累啊，还要继续学习<?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animateColor id=color1 attributeName = \"color\" calcMode = \"paced\" targetElement = \"font1\" values = \"#00FF00;;#FFFF00;;#FF00FF;;#0000FF;\" autoReverse = \"true\" begin = \"0;b4.click\" dur = \"12\" repeatCount = \"100\"></t:animateColor></MARQUEE></TR></TBODY></TABLE>

[ 本帖最后由狼族メ小龍于 2008-5-22 17:03 编辑 ]

狼族メ小振 · 发表于 2008-5-22 17:39:46

o(∩_∩)o...哈哈··大家努力学习中·····

狼族メ小龍 · 发表于 2008-5-22 22:18:24

CSS 應用實務=====3

浏览过的版块