CSS使用技巧20則_CSS/HTML

1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

...

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

...

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

...

如果想定位到距左30點，距上5悖梢哉庋?BR>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}

當然，你還可以這樣：

margin: 5px 0 0 30px

注意4個數字的順序是：上、右、下、左。當然，有時候定位的方法而不是邊距的方法比較好。

10. 直通到螢幕底部的背景色

在垂直方向是進行控制是CSS所不能的。如果你想讓導覽列和內容列一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：

#navigation
{
background: blue;
width: 150px
}

較短的導航條是不會直通到底部的，半路內容結束時它就結束了。怎麼辦呢？

不幸的是，只能採用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，並讓它的顏色和設定的背景色一樣。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

此時不能用em做單位，因為那樣的話，一旦讀者改變了字體大小，這個花招就會露餡，只能使用px。

11. Block與inline元素對比
所有的HTML元素都屬於block和inline之一。 block元素的特點是：
總是在新行開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度

,

,

,

,

和
• 是區塊元素的例子。相反地​​，inline元素的特徵是：
  和其他元素都在一行上；
  高，行高及頂和底邊距不可改變；
  寬度就是它的文字或圖片的寬度，不可改變。
  , , , , , 和是inline元素的例子。

  用code class="inline">display: inline 或display: block指令就可以改變一個元素的這個特性。什麼時候需要改變這個屬性呢？
  讓一個inline元素從新行開始；

  讓塊元素和其他元素保持在一行上；

  控制inline元素的寬度（對導航條特別有用）；

  控制inline元素的高度；

  無須設定寬度即可為一個區塊元素設定與文字同寬的背景色。

   

  12. 再來一個box駭客方法

  之所以有這麼多box駭客方法，是因為IE在6之前對box的理解跟別人都不一樣，它的寬度要包含邊線寬和空白。要讓IE5等同其他瀏覽器保持一致，可以用CSS的方法：

  padding: 2em;
  border: 1em solid green;
  width: 20em;
  width/**/:/**/ 14em;
  

  第一個寬度所有瀏覽器都認得，但IE5.x不認得第2行的寬度設置，只因為那一行上有空白的註釋符號（多麼愚蠢的語法分析！），所以IE5.x就用20減掉一些空白，而其他瀏覽器會用14這個寬度，因為它是第2行，會覆蓋掉第1行。

  13. 頁的最小寬度

  min-width是個非常方便的CSS指令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。為了讓這項指令在IE上也能用，可以把一個

  放到 標籤下，再為div指定一個類別：
  

  
  

  }
  

  第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上透過Javascript的判斷來實現最小寬度。

  同樣的辦法也可以為IE達到最大寬度：
  

  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth 1200? ”1200px“ : ”auto");
  }
  

  14. IE與寬度與高度的問題

  IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。

  例如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
  

  .box
  {
  width: 80px;
  height: 35px;
  }

  html>body .box
  {
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
  }
  

  所有的瀏覽器都可以使用第一個box設置，但IE不認得第2段設置，因為其中用到了子選擇器指令。第2個設定更特殊些，所以它會覆蓋掉第1個設定。

  5. 字型變形指令

  text-transform 指令很有用，它有3個值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1個會把文字變成全大寫，第2個變成全小寫，第3個變成首字母大寫。這對拼音文字非常有用，即使輸入時有大小寫錯誤，在網頁上也看不到。

  16. IE中圖片文字消失的問題

  有時會遇到文字或背景圖突然消失的問題，刷新一下又出現了，這在靠近漂浮元素時更容易發生（註：沒見過）。此時，可以為消失的元素設定： position: relative ，如果不行，再考慮為這些元素指定一個寬度試試。

  17. 不可見文字

  不論因為何種原因希望某些網頁文字不在瀏覽器中顯示，例如為了列印或為了小螢幕而讓某些文字不顯示，都可以用 display: none 。這非常簡單，但有時對某些人這有點沒用，他們能去掉這個控制，這時就要用到： position: absolute; left: -9000px 。

  這其實是把文字指定在頁面以外顯示。

  18. 為手持設備設計專門的CSS

  也就是手機/PDA等小螢幕用戶，可以專門設計一個CSS來讓網頁顯示更舒服。為此，可以把瀏覽器視窗調整到150點寬來看效果。指定專門的手持裝置的CSS的語法是：

  也可以閱讀專門的手持設備可用性。

  19. 3D效果的按鈕

  以前要想製作帶有3D效果，並且點擊下去還會變化的按鈕，就得用圖片替換的方法，現在CSS就可以了：
  

  a
  {
  display: block;
  border: 1px solid;
  border-color: #aaa #000 #000 #aaa;
  width: 8em;
  background: #fc0;
  }

  a:hover
  {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #000 #aaa #aaa #000;
  }
  

  至於效果，還可以自己調整了。

  20. 在不同頁面上使用相同的導航程式碼

  許多網頁上都有導覽選單，當進入某頁時，選單上相應這一項就應該變灰，而其他頁亮起來。一般要達到這個效果，需要寫程式或專門為每一頁做設計，現在靠CSS就可以達到這個效果。

  首先，在導航程式碼中使用CSS類別：
  

  
  
  • Home
  
  
  • About us
  
  
  • Contact us
  
  

  
  

  然後分別為每一頁的Body指定一個id，和上面類別同名。如

  。

  然後設計CSS如下：
  

  #home .home, #about .about, #about .about
  {
  commands for highlighted navigation go here
  }
  

  這裡，當id設為home時，.home就會起作用，也就是class設為home的那一行導航條就會顯示出特殊效果來。其他頁也是如此。
  

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn