顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2011年5月26日 星期四

[CSS]去除超連結框的虛線

  1. a{
  2.  outline: none; /* for Firefox Google Chrome  */
  3.  behavior:expression(this.onFocus=this.blur()); /* for IE */
  4. }
張貼者： 於 沒有留言:
標籤：

2011年5月8日 星期日

[CSS]CSS筆記

瀏覽器會出現的問題
IE下浮動元素雙倍邊距時的解決辦法
將浮動元素後再加設display屬性設為inline。

Example Source Code

.spacer {float:left; display:inline; margin-left:20px;}
列表加上浮動在各瀏覽器中的解決
CSS總是出人意表，而IE卻總是讓人意外。
IE下的留白是由 margin引起的，非IE的留白是由padding引起的（margin和padding大概為40px）。
只要對清單元素進行了浮動，在IE 中，列表前的默認序號（圓點或阿拉伯數字，即list-style-type）就會消失無形；而在非IE中卻是正常的。 原因就是margin和padding。
因為預設情況下的序號位置list-style-position為outside，這就要求必須為序號 出現預留位置，或margin或padding。 而要解決這個問題，就得想辦法讓序號出現不需要預留位置，預設outside是需要留白才能顯示的，所以就更換為inside。 

Example Source Code

ul { list-style-position:inside; float:left; }

區分IE6，IE7，firefox
只能辨別*，不能辨別 ，支援_
能辨別*，能辨別 !important，支援_
不能辨別*，能辨別 !important，不支援_
 *_(下底線)!important
IE6oox
IE7oxo
firefoxxxo
所以寫法為firefox，IE7，IE6(順序都是firefox的寫在最前面，IE7的在中間，IE6的在最後面)|

Example Source Code

background:orange; *background:green; _background:blue;


CSS裡定義hr，解決ie與ff會出現重覆線段問題

Example Source Code

hr{ height:1px;border:none;border-top:1px dashed #000;}

hr預設高度即為1px;
先 將border設為取消，再從新對border下樣式!
比較常用的
ie中如何讓超出寬度的文字顯示為省略號？
定義：overflow:hidden; width:xxx; white-space:nowrap; text-overflow:ellipsis;
如何讓min-height兼容ie6?
.min-height{min-height:100px; _height:100px;}
區別display:none與visibility:hidden? 
相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位元空 間仍然保留。
CSS的滑鼠為手指形狀
IE，設置CSS的滑鼠為手形，通 常用：cursor：hand; 但這在Firefox下是無效的。
cursor：pointer; 這在IE和Firefox下都是通用的。
超鏈接訪問過後hover樣式就不出現
被點擊訪問過的超鏈接樣式不在具有hover和active了, 解決方法是改變CSS屬性的排列順序: L-V-H-A ps：好在自己一開始書寫時就沒有把這四種樣式寫全過，我只寫 a:link ，a:hover ，一直也沒出現什麼問題，後來發現ie6下a:visited 和 ff下的顏色不一致。
IE6的雙倍邊距BUG
例如:

Example Source Code

<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>
浮動後本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline
ps：剛開始接觸這一工作的時候真的是不知道怎麼回事，還以為是各個瀏覽器之間的解釋不同，製作的時候只能小心意義的以ie6的寬度來定義，可惜ff 和ie經常預覽效果不一致，好在現在解決了。
FF下文本無法撐開DIV的高度
標準瀏覽器中固定高度值的容器是不會像IE6那樣被撐開的,那我又想固定高度，去掉he ight設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義：

Example Source Code

div { height:auto!important; height:200px; min-height:200px; }
web標準中IE設置滾動條顏色了

Example Source Code

<style type="text/css">
html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
讓層顯示在FLASH之上
解決的辦法是給FLASH設置透明:

Example Source Code

<param name="wmode" value="transparent" />
DIV垂直居中於瀏覽器中

Example Source Code

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
這裡使用百分比絕對定位，margin的值就是div寬度的1/2;
firefox嵌套div標籤的居中問題的解決方法
假定有如下情況：

Example Source Code

<div id="a">
<div id="b"> </div>
</div>
如果要實現b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE裡看起來一切正常；但是在 Firefox中b卻會是居左的。
解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin: 0 auto;。
基本的觀念
理解塊元素(block element)與內聯元素(inline element)元素
塊元素(block element)與內聯元素(inline element)元素對於web製作是很重要的。
依據元素顯示(display)時的表現，可以看出，所有可見元素中，不是塊元素的就是內聯元 素。
可以這樣想像一下，塊元素是一個大的框架，用於搭建大體結構，而內聯元素，就是用來組成細節和更具體的部分了。
開始web製作時，通 常都會用塊元素先搭出一個架子，確定大框架的結構，然後往裡面添加內聯元素，作為細節的構造。

塊元素和內聯元素的表現有什麼不同呢？ 嘗試寫一點代碼就可以看出來區別了
<div>我是塊元素div</div>
<div>我是塊元素div</div>
<p>我是塊元素p,<span>我是內聯元素span</span>,<span>我也是內聯元素 span</span>,<em>我是內聯元素em</em></p>
<ul>
<li>ul,li 都是塊元素哦</li>
<li>ul,li 都是塊元素哦</li>
</ul>
結果如下↓

我是塊元素div
我是塊元素div
我是塊元素p,我是內聯元素span,我也是內聯元素span,我是內聯元素em
  • ul,li 都是塊元素哦
  • ul,li 都是塊元素哦

區別就可以看出來了：一個塊元素占了一行，兩個塊元素不會在同一行，而內聯元素就不一樣了，它們在同一行上依次排開，遇到邊界才會換行。
 
<div>,<p>,<h1>,...<h6>,<blockquote>都是塊元 素，<q>,<a>,<em>,<img>都是內聯元素。
另外， 像<meta>,<head>...這些不可見元素不在它們的範圍之內，這些不可見元素我們稱為頂級元素(top element)。

在書寫CSS的時候，內聯元素的高度寬度都是不可以設置的，其寬度就是自身文字或者圖片的寬度。

張貼者： 於 沒有留言:
標籤：

[css] css的建議命名規則

一、常用的CSS命名規則

頭：header內容：content導覽：nav側欄：sidebar專欄：column
頁底：footer左：left右：right中：center登入條：loginbar
標誌：logo橫幅：banner頁面主體：main熱門：hot新聞：news
下載：download子導覽：subnav項目：menu子項目：submenu搜尋：search
友站連結：friendlink版權：copyright滾動：scroll標籤頁：tab文章列表：list
提示信息：msg小技巧：tips欄目標題：title加入：joinus指南：guild
服務：service註冊：regsiter狀態：status投票：vote合作夥伴：partner
內部：inner區域：area/region   


二、註釋的寫法：
/* Footer */
內容區
/* End Footer */ 

三、class的命名： (1) 顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3) 對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4) 標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項：
1.一律小寫；
2.儘量用英文；
3.不加中槓和下劃線；
4.儘量不縮寫，除非一看就明白的單詞。
一些CSS樣式表檔案命名：
主要的 master.css
模塊 module.css
基本共用 base.css
佈局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css







引用自設計×生活.web
張貼者： 於 沒有留言:
標籤：

2011年4月19日 星期二

[CSS]img 絕對中間

將圖片與文字放在同一行會出現圖片凸出一點的情形
這時候使用此CSS語法可讓圖片與文字固定在正中間

img{
vertical-align:middle;
}
張貼者： 於 沒有留言:
標籤：

2011年4月14日 星期四

[CSS]修改超連結文字狀態

改變超連結（在一般、滑鼠滑入、點選瞬間、已使用過連結）的顏色、形式CSS程式碼（以下為範例）：









<style type="text/css">
    A:link {COLOR: #3300ff; text-decoration: none}   顏色藍、無底線（一般狀態）
    A:hover {COLOR: #ff0033; text-decoration: underline}  顏色紅、有底線（滑鼠滑入狀態）
    A:active {COLOR: #000000; text-decoration: underline}  顏色黑、有底線（按滑鼠左鍵點選時）
    A:visited {COLOR: #ffff00; text-decoration: none}  顏色黃、無底線（點選過的超連結）
</style>
張貼者： 於 沒有留言:
標籤：

2011年4月6日 星期三

[CSS]使用 CSS 設定文字或圖片在垂直方向的對齊方式

CSS 的 vertical-align 屬性是用來設定文字或圖片在垂直方向的對齊方式, 其語法如下： 

vertical-align：屬性值

常用的屬性值如下表：
屬性值 說明
top 緊靠顯示區域之上緣對齊
text-top 緊靠上一層標籤所包含的文字之上緣對齊
bottom 緊靠顯示區域之下緣對齊
text-bottom 緊靠上一層標籤所包含的文字之下緣對齊
middle 緊靠上一層標籤所包含的文字之中線對齊 super 將文字設為上標字
sub 將文字設為下標字
TIP..在上表的 6 個屬性值, 只有『top』與『bottom』適用於表格內的儲存格, 其它都不適用於表格內的儲存格。

(more)
張貼者： 於 沒有留言:
標籤：

2011年2月17日 星期四

[CSS]IE6, IE7, 或Firefox做CSS的個別設定

IE6(及以下版本): 前方加底線(_)和星號(*), 例如: _height:30px.
IE7:前方加星號(*), 例如: *height:30px.
IE6及IE7: 前方加加號(+)或星號(*), 表示IE就會認得, 則firefox則不理會.

b.每個property的設定前後順序有關, 例子如下:
  1. div{  
  2. 　　 background:green; /* for firefox */  
  3. 　　 *background:red; /* for IE6 */  
  4. }  
在IE6中看到是红色的，在firefox中看到是绿色的
建議書寫的順序:firefox->IE7->IE6

如何針對IE6, IE7, 或Firefox做CSS的個別設定

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)