標籤: css

CSS中link與import比較

參考文章：CSS中link與import比較

link使用範圍：
因為是HTML語法，所以只能用在HTML網頁中

import使用範圍：
屬於CSS語法，所以可用於網頁中的樣式定義，也可用於樣式檔案中

link瀏覽器載入樣式表時機：
讀到標籤時不會載入樣式檔，待讀到使用樣式的標籤時，才載入樣式檔內容

import瀏覽器載入樣式表時機：
讀到@import指令即立該載入樣式檔內容

參考資料：
最新PHP+MySQL+AJAX網頁程式設計(旗標出版)

CSS white-space 属性

參考文章：CSS white-space 属性

normal：（預設）多個半形空白只會顯示一個空白，一定要有br才會換行，遇到邊界會自動換行

pre：同<pre>標籤，保留多個半形空白、無br的換行（在段落裡只是換行但沒用br，顯示出來還是會有換行）、一段內容如果超過一行，遇到邊界不會自動折行，

nowrap：不保留多個空白（多個半形空白會只顯示1個半形空白）與無br的換行，一段內容如果超過一行遇到邊界不會自動折行。除非有br才會折行

pre-wrap：保留多個半形空白、無br的換行，但是一段內容如果超過一行，遇到邊界會換行

per-line：不保留多個空白，但是保留無br的換行，且一段內容超過一行，到邊界會換行

inherit：從父層元素繼承wite-space 屬性

PNG在IE6透明的方法

參考文章：PNG在IE6透明的方法、讓IE支持PNG透明的最好用的方法

重點整理

  1. 如果圖片是用img放在html內，使用css引入ie6png.htc的方式解。但是這方法不知道是我用的時候有問題還怎樣，用不太起來，不過我確實有在別的系統看過這樣的解法，而且好像是連用背景圖都可以這樣解。
  2. 所以如果同1的狀況，我使用的解法是在頁面導入pngfix.js。參考文章：
    PNG in Windows IE: How To Use，裡面有這個js可下載
  3. 內容圖、背景都可以用的修法是IE PNG fix，不過如果要修不同位置，要調整多個htc。參考文件：IE PNG Fix 2.0 Alpha 4
  4. 如果是css使用背景圖，在IE6底下可改用fliter，如下
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/test.png’, sizingMethod=’crop’);
  5. 但是在IE6底下用PNG背景會有另外一個問題：如果該元素內有放文字、放超連結，會無法選取，當然連結也無法點選，就好像有個透明的東西蓋住讓你不能按。原因不明，總之在png背景的物件上在加上position:relative;即可

inline與block的差異與用法

1. display:inline

  • 可解除float時，在IE6底下與float同邊的margin會變兩倍大的bug
  • 用li排橫排圖片連結的時候，設成inline就不需要使用float，可直接變成一排，此方法是只適用於圖片連結，且這時候li之間不能換行，否則會出現下列與圖片相同的有空格的問題。

2. display:blok

  • 當圖片放置出現莫名的空格的時候，原因來自於標籤換行後，在inline的狀態下瀏覽器會認為有空格，因此處理方法為把圖片設定成block即可解決
  • 上述問題通常也會出現在edm切版跟電子報切版。通常狀況是這樣：切版的時候<img>與後面的標籤是連在一起沒有換行、中間也沒任何空白的，這個時候顯示會正常。但是一旦<img>後面的標籤沒有直接接著、有換行，或是中間被加入空白（例如電子報寄出去的時候，有可能會自動換行或加入空白），這時候圖跟圖之間就會出現空格。實際排版時其實也很常遇到，只是通常圖片跟文字之間本來就會想要有距離，這時候這個問題就比較會被忽略。

圖片取代文字技巧（使用背景圖並隱藏box內文字的方法）

以下標籤是指屬於block的標籤，如果屬於inline，則先使用display:block做轉換

  • 方法一：
    如果文字只被一個標籤包住，則使用text-intent設定負值，讓字往左縮排，負值要夠大，例如-3000px
  • 方法二：方法一有個壞處，如果螢幕解析度很好的時候，總有一天還是會被看到字，所以後來我是用text-indent:-300px;搭配overflow:hidden;隱藏
  • 方法三：
    文字只被一個標籤包住的另外一種方式是設定很大的letter-spacing，例如100em，然後搭配指定height跟overflow:hidden;。
  • 方法四：
    如果文字被兩個標籤包住，裡面的標籤padding-top設定成跟外面標籤高度相同，外面的標籤設定overflow:hidden;這個方法我通常拿來用在網站標題要放logo的時候會這樣處理。

如何實現css圓角框

參考文章：css圖片圓角邊框實現方式 、7种CSS圆角框解决方案

不過考慮到跨瀏覽器，通常我還是用最笨的方法：分div去拼出來。如果只考慮垂直延伸。就是切成以下結構：
<div id=”all”>
<div id=”block-top”></div>
<div id=”block-center”></div>
<div id=”block-bottom”></div>
</div>

如果垂直延伸結構想要再省一點可以這樣切：
<div id=”all”>
<div id=”block-top”>
<div id=”block-bottom”></div>
</div>
</div>
但是這樣就要搭配無透明度的圓角背景圖。用透明png還是要切三塊，不然重疊的部份會有兩層png

解決子元素float而父元素高度無法自動撐高的問題

最佳解法：在父元素加上overflow:auto即可

其他解法

1.#C為父元素，使用:after

#C:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden; }

2.在float子元素最後加上一個div使用clear:both

3.在父元素加上float:left;（但如果不要底下的元素浮到旁邊，要搭配width:100%的設定，好處是子元素可使用負值的margin而不會被隱藏）

使用 CSS Sprites 設計網頁但不用 background-image 的技巧

參考文章：使用 CSS Sprites 設計網頁但不用 background-image 的技巧

CSS Sprites主要是使用在流量大的網站的一種技巧，因為太多圖片會造成太多的 HTTP Request，因此會使用一張大圖、然後使用background-image加上background-position的方式，來減少 HTTP Request ，一般小型網站其實用不太到。

但設定背景圖其實有一個比較明顯的問題是，列印的時候印不出來。如果背景圖只是用在純裝飾、文字都還有顯示那還好。但如果該背景圖很重要也希望被列印出來，那列印的人得去改印表機的預設設定、而一般人當然不可能會知道這個設定。

因此如果希望圖片是能夠被印的，就要改使用把大張圖片直接置入到html，然後 clip 的方式來設定。我舊的作品集網站上方主要連結有使用這樣的技巧。所以如果預覽列印時，上面煮選單的圖片是可以被印出來的。

但是，這個方法使用在主選單上也許還可以，但如果以中文字來說，要使用再圖片文字上的時候，個人是覺得就不太適用。另外思考一下「為甚麼要列印網頁」？列印網頁的重點應該還是在於要把內容印出來。因此只要對應的文字有被印出來，即使印出來不像螢幕上顯示的那麼漂亮，實際上也是無妨的，因為重要的是資訊。

而且個人是比較偏好純文字的結構，除非這張圖屬於內容的一部分，不然我不太喜歡用置入的方式放到html裡，因為這樣你還得再加上alt去標注，那好像不會比用background的設定好到哪裡去。

因此我自己認為比較好的解法應該是直接設定一組print的css，然後把印不出來圖片的部份的文字都讓他顯示出來，只要可以達到列印的可用性即可。