Raie's Blog

[網頁程式/CSS] 的文章列表 ....

9 篇文章

CSS，縮排

為了方便寫作以及資料應用的便利，縮排在網路上幾乎是一項被遺忘的編排技術，這裡介紹 CSS 在縮排上使用的語法。在這之前先來個一般的句子以作為比較。

無縮排

這篇文章的縮排，
不是一般的縮排，
而是沒有縮排。

1. margin-left 整段縮排

文

整段文章都需要縮排的時候可以使用 margin-left

這篇文章的縮排，
不是一般的縮排，
而是整段縮排。

2. text-indent 首行縮排

文

首行縮排應用於所有正式文章的排版上，使用 text-indent 即可實現。

這篇文章的縮排，
不是一般的縮排，而是
首行縮排。

3. margin-left & text-indent 除首行皆縮排(首行凸排)

文

除首行皆縮排可應用於項目符號等需突顯首行文字的情況，margin-left 和負數的 text-indent 併用。

一、這篇文章的縮排，
不是一般的縮排，
而是除首行皆縮排。

2010/07/23 10:12　

引用 0 : 回覆 0

網頁程式/CSS

CSS，隱藏捲軸

有時候因設計需求必須要隱藏瀏覽器捲軸，這個時候 CSS 就派上用場了。捲軸又可分為 X 軸和 Y 軸兩種，如右圖，你可以個別控制這兩個捲軸，這裡介紹的是同時隱藏兩個捲軸的方式。

隱藏捲軸的 CSS 語法如下：

overflow-x:hidden;
overflow-y:hidden;

你可以用以下兩種方式將這個語法加入 Html 的 Body 標籤中：
1.CSS

<style type="text/css">
body {
  overflow-x:hidden;
  overflow-y:hidden;
}
</style>

2.HTML

<body style="overflow-x:hidden; overflow-y:hidden;">

以上可作用於 IE6 和 Firefox 1.5，已測試過沒有效果的是 Firefox 1.07

2006/07/27 11:35　

引用 0 : 回覆 13

網頁程式/CSS

CSS 的雙重樣式與共用樣式

雙重樣式
自訂樣式和標籤樣式（如 table、span、a、div ... 等等）同時使用，就是這裡提到的雙重樣式了。正確的設定方法如下，兩種不同的樣式同時設定時，只要在中間空一格即可。以下語法單獨將 T1 連結樣式設定為紅色。

<style type="text/css">
<!--
a:link{color:green}
.T1{color:blue}
.T1 a:link{color:red}
-->
</style>

一般的樣式　<a href="a">一般的連結樣式</a>　<span class="T1">T1的樣式　<a href="b">T1的連結樣式</a></span>

（P.S. 自訂樣式前面需多加一個點，標籤樣式不用）
Demo

一般的樣式　一般的連結樣式　T1的樣式　T1的連結樣式

共用樣式
所謂共用樣式，就是讓兩種樣式共用一個樣式表。正確的設定方法如下，共用兩種樣式，只要在中間加逗號即可。以下語法讓 T1 和 T2 共用樣式表。

<style type="text/css">
<!--
.T1,.T2{color:blue}
-->
</style>

一般的樣式　<span class="T1">T1的樣式</span>　<span class="T2">T2的樣式</span>

Demo

一般的樣式　T1的樣式　T2的樣式

共用雙重樣式
以上介紹的兩種同時出現的時候，就叫作共用雙重樣式。若你對上面沒有充份理解，請不要繼續往下看。

T1 的樣式和 T2 的連結樣式共用

<style type="text/css"> 
<!-- 
.T1,.T2 a:link{color:red}
--> 
</style>

T1 的連結樣式和 T2 的連結樣式共用

<style type="text/css"> 
<!-- 
.T1 a:link,T2 a:link{color:red} 
--> 
</style>

（P.S. 以上兩種請不要弄錯.... ）

這裡就不再 Demo 了。

2006/03/01 15:10　

引用 0 : 回覆 2

網頁程式/CSS

CSS，防止文字過長造成版面破壞

你是否也和我一樣遇過文字過長把版面撐壞的情形呢? 如果是動態網頁可以寫程式碼截斷文字，靜態網頁怎麼辦呢? 最近在 Google 搜尋這個問題大有嶄獲，沒錯，一般的 CSS 就有解決方案了，可惜原作者的網站已經不在了。用 CSS 截斷文字在字尾還會出現" ... "，相當地人性化。

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<div style="width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> ABCDEFGHIJKLMNOPQRSTUVWXYZ </div>

這個方法同樣適用於 DIV 以外的標籤。

2008/2/29　另加入 white-space:nowrap 限制換行。

2005/10/09 20:06　

引用 0 : 回覆 4

網頁程式/CSS

CSS，讓你成為邊框達人

這篇預計是 border 的最後一篇了，更複雜的 border 用法我並不打算研究。不過，學會了這一篇 border 應用，保證讓你成為邊框達人。( = = 不喜歡的話可以叫 Border Master )

首先，在開始之前，先複習邊框的用法。

Double Border

<div style="border:double; border-width:7px; border-color:orange;"> Double Border </div>

構成要素：
border:double;
border-width:7px;
border-color:orange;

那麼，準備好了嗎? 這一篇主題是 border 的進階用法，也就是邊框的突變種...
首先要把 border 的規則「上右下左」記下來，再由 border 構成要素來進行突變。

突變!! 構成要素：
border-style:double double double double; (請注意由 border 變成 border-style)
border-width:7px 7px 7px 7px;
border-color:orange orange orange orange;

突變!!

Double Border

<div style="border-style:double double double double; border-width:7px 7px 7px 7px; border-color:orange orange orange orange;"> Double Border </div>

看起來一樣，結果也一樣，但實際上已經突變過了喔，剛才構成要素在突變後每一項都分裂成 4 份應該有注意到吧，那 4 份代表的就是你剛剛記的「上右下左」，也就是說，你可以改變其中一項來調整上、下、左、右邊框，那麼就來個應用看看吧！

DIV 版本

New Border

<div style="border-style:dotted solid dashed double; border-width: 2px 2px 3px 4px; border-color: green red blue orange;"> New Border </div>

Font 版本
New Border

<font style="border-style:dotted solid dashed double; border-width: 2px 2px 2px 4px; border-color: green red blue orange; line-height:20pt;"> New Border </font>

如何，有沒有發現任意調整邊框並不難啊，有的話，恭喜你成為邊框達人了。

注意事項：1. 有些 border 種類厚度設太小會無法顯示，(例：Double)
　　　　　2. 如果不要"上邊框"的話，在第一個數字設 0px 就可以了，其他類推。
　　　　　3. 用在 Font 標籤上時，如果發現上下邊框不見，只要再加上增加行距語法即可。
　　　　　　(例：line-height:20pt;)
　　　　　4. border 的順序「上右下左」和 margin 的順序「下左上右」不太一樣。

2005/10/05 23:32　

引用 0 : 回覆 0

網頁程式/CSS

CSS，表格造金字塔實驗

<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="0" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td>
<table cellpadding="1" cellspacing="0" style="border: inset; border-color: #BD9509 #F8D970 #BD9509 #8A6C06; border-width:2px 9px 13px 6px;"><tr><td bgcolor=black>
</td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>
</td></tr></table></td></tr></table>

以上語法內容只是 12 個 Table .. 只有最裡面的 Table 結構不太一樣。用 ASP 或 PHP 寫的話，只要抓一個 Table 迴圈 12 次就搞定了。

P.S. 本語法在部落格某次改版時已無法正確顯示，請見諒。

2005/10/05 02:06　

引用 0 : 回覆 0

網頁程式/CSS

CSS，用 border 裝飾你的表格

border 可以說是邊框吧，CSS 的 border 相關用法實在太複雜了，為了讓正常人也能看得懂，在這裡只介紹 border 的種類。因為主題是「用 border 裝飾你的表格」，所以也要順便學邊框上色 border-color 和邊框厚度 border-width 這兩種語法。

有三種樣式無法在黑色邊框上顯示，因此用橘色邊框表示。

Solid Border

Double Border

Dotted Border

Dashed Border

Inset Border

Outset Border

Ridge Border

Hidden Border

Table 版本

<table style="border: solid; border-color: black;">
<tr><td>Solid Border</td></tr>
</table><br/>

<table style="border: double; border-color: black;">
<tr><td>Double Border</td></tr>
</table><br/>

<table style="border: dotted; border-color: black;">
<tr><td>Dotted Border</td></tr>
</table><br/>

<table style="border: dashed; border-color: black;">
<tr><td>Dashed Border</td></tr>
</table><br/>

<table style="border: inset; border-color: orange; border-width:6px;">
<tr><td>Inset Border</td></tr>
</table><br/>

<table style="border: outset; border-color: orange; border-width:6px;">
<tr><td>Outset Border</td></tr>
</table><br/>

<table style="border: ridge; border-color: orange; border-width:6px;">
<tr><td>Ridge Border</td></tr>
</table><br/>

<table style="border: hidden;">
<tr><td>Hidden Border</td></tr>
</table>

看傻眼的人可以先從這個比較簡單的 DIV 版本入門，會比較容易瞭解上面在搞什麼飛機。

Solid Border

Double Border

Dotted Border

Dashed Border

Inset Border

Outset Border

Ridge Border

Hidden Border

DIV 版本

<div style="border: solid;">Solid Border</div><br/>
<div style="border: double;">Double Border</div><br/>
<div style="border: dotted;">Dotted Border</div><br/>
<div style="border: dashed;">Dashed Border</div><br/>
<div style="border: inset; border-color: orange; border-width:6px;">Inset Border</div><br/>
<div style="border: outset; border-color: orange; border-width:6px;">Outset Border</div><br/>
<div style="border: ridge; border-color: orange; border-width:6px;">Ridge Border</div><br/>
<div style="border: hidden;">Hidden Border</div>

差別在於，套用在 DIV 標籤上，邊框顏色會自動指定為黑色。你可以在其他 border style 設定不同顏色 border-color 和厚度 border-width 作變化。

P.S. 請慢慢拉捲軸以免出現眼睛不適等症狀... = =

2005/10/05 00:40　

引用 0 : 回覆 0

網頁程式/CSS

CSS，margin:0 0 0 0 專橋 Html 所不能橋

在編輯網頁時總會遇到一些奇怪的問題，「那張圖為什麼不能再移過來一點！」，如果你也曾經這樣鬼叫過，那麼倒是可以試試看神奇的 CSS margin:0 0 0 0，因為後面四個數字很重要，所以要連帶出現，四個 0 依序代表下、左、上、右。

CSS margin:0 0 0 0 使用在 DIV 標籤上最不會有問題，它也可以用在其他 Html 標籤上，不過都還要再試就是了，我曾經將它使用在 FONT 標籤上，不過只能左右調整，上下調整的功能就不能用了。總之它是個微調的好方法，不過它的微調範圍還是建立在 Html 規範之下。也就是說，有空間才可以用它來微調，別忘了。

margin:0 0 0 0 的四個 0 各代表數字，為方便辨識我將它歸零了。單位是 Pixel，以下表格可以看出位移 20 Pixel 的效果，當然也可以綜合使用（方向相反會相互抵銷掉，例: margin:0 50 0 50，這樣跟沒設定一樣喔），另附上此表格的原始碼。

正常	下 20 0 0 0	左 0 20 0 0	上 0 0 20 0	右 0 0 0 20
字	字	字	字	字

<table width="300" height="120" border="1" align="center">
<tr align="center">
<td width="50">正常</td>
<td>下<br/>20 0 0 0</td>
<td>左<br/>0 20 0 0</td>
<td>上<br/>0 0 20 0</td>
<td>右<br/>0 0 0 20</td>
</tr>
<tr align="center">
<td width="50">字</td>
<td><div style="margin:20 0 0 0">字</div></td>
<td><div style="margin:0 20 0 0">字</div></td>
<td><div style="margin:0 0 20 0">字</div></td>
<td><div style="margin:0 0 0 20">字</div></td>
</tr>
</table>

P.S. 經測試在 W3C Web 標準之下無法使用本語法.. Dreamweaver 預設的 Html 皆為 W3C 標準網頁，將 Dreamweaver 開頭的 Doctype 標籤移除就可以了。

2005/09/26 13:29　

引用 0 : 回覆 0

網頁程式/CSS

簡單的水平虛線作法

這個 CSS 單元將採最直接的網頁標籤嵌入方式來介紹 CSS 所作出的特殊效果，這個單元介紹簡單的水平虛線作法。

<hr style="border:1px dashed black; height:1px">

其中，可以將 black 修改為其他顏色。

2005/09/21 17:16　

引用 0 : 回覆 0

網頁程式/CSS

[◀ PREV] ‧ [1]‧ [NEXT ▶]

[網頁程式/CSS] 的文章列表 ....

9 篇文章

CSS，縮排

CSS，隱藏捲軸

CSS 的雙重樣式與共用樣式

CSS，防止文字過長造成版面破壞

CSS，讓你成為邊框達人

CSS，表格造金字塔實驗

CSS，用 border 裝飾你的表格

CSS，margin:0 0 0 0 專橋 Html 所不能橋

簡單的水平虛線作法

目錄

最近文章

最近回覆

網站流量