20 Petua Menggunakan CSS_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
}

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

...

Jika anda ingin mencari 30 mata dari kiri dan 5 mata dari atas, apa yang anda boleh lakukan? #navigasi
{
jawatan: mutlak;
kiri: 30px;
atas: 5px
}

Sudah tentu, anda juga boleh melakukan ini:

margin: 5px 0 0 30px

Perhatikan bahawa susunan 4 nombor ialah: atas, kanan, bawah, kiri. Sudah tentu, kadangkala meletakkan kedudukan berbanding margin adalah lebih baik.

10. Warna latar belakang terus ke bahagian bawah skrin

Kawalan dalam arah menegak adalah di luar kemampuan CSS. Jika anda mahu bar navigasi pergi terus ke bahagian bawah halaman seperti bar kandungan, menggunakan jadual adalah sangat mudah, tetapi jika anda hanya menggunakan CSS seperti ini:

#navigasi

{
latar belakang: biru;
lebar: 150px
}

Bar navigasi yang lebih pendek tidak akan terus ke bawah, ia akan tamat apabila kandungan tamat separuh jalan. Apa yang perlu dilakukan?

Malangnya, satu-satunya cara untuk menipu ialah menambahkan imej latar belakang pada lajur yang lebih pendek, dengan lebar yang sama dengan lebar lajur, dan menjadikannya warna yang sama dengan warna latar belakang yang ditetapkan.

badan

{
latar belakang: url(blue-image.gif) 0 0 repeat-y
}

Anda tidak boleh menggunakan ia sebagai unit pada masa ini, kerana helah itu akan didedahkan sebaik sahaja pembaca menukar saiz fon, dan anda hanya boleh menggunakan px.

11. Perbandingan antara Blok dan elemen sebaris

Semua elemen HTML adalah sama ada blok atau sebaris. Ciri-ciri elemen blok ialah:
Sentiasa mulakan pada baris baharu; Ketinggian, ketinggian garisan dan jidar atas dan bawah semuanya boleh dikawal
Lebar lalai kepada 100% bekasnya melainkan lebar ditetapkan

,

,

,

,

dan
• Sebaliknya, ciri-ciri elemen sebaris ialah:
  dan elemen lain pada baris yang sama; Ketinggian, ketinggian garisan dan jidar atas dan bawah tidak boleh diubah
  Lebar ialah lebar teks atau imejnya dan tidak boleh diubah.
  , , , , , dan
  
  Gunakan kod class="inline">display: inline or display: block command untuk menukar ciri elemen ini. Bilakah anda perlu menukar atribut ini?
  Biarkan elemen sebaris bermula pada baris baharu; Simpan elemen blok pada satu baris dengan elemen lain

  
  Kawal lebar elemen sebaris (terutamanya berguna untuk bar navigasi

  ).

  Kawal ketinggian elemen sebaris;

  Anda boleh menetapkan warna latar belakang dengan lebar yang sama dengan teks untuk elemen blok tanpa menetapkan lebar.
  12. Satu lagi kaedah penggodaman kotak
  Sebab mengapa terdapat begitu banyak kaedah penggodaman kotak adalah kerana sebelum IE 6, pemahaman tentang kotak adalah berbeza daripada yang lain, lebarnya harus termasuk lebar tepi dan ruang putih. Untuk menjadikan IE5 konsisten dengan pelayar lain, anda boleh menggunakan CSS:
  lapik: 2em;

  sempadan: 1em hijau pepejal;

  lebar: 20em;

  lebar/**/:/**/ 14em;

  
  Lebar pertama dikenali oleh semua penyemak imbas, tetapi IE5 Gunakan 20 untuk menolak beberapa ruang putih, manakala penyemak imbas lain akan menggunakan lebar 14 kerana ia adalah baris 2 dan akan meliputi baris 1.
  
  13. Lebar minimum halaman
  

  min-width ialah arahan CSS yang sangat mudah. ​​Ia boleh menentukan bahawa lebar minimum elemen tidak boleh kurang daripada lebar tertentu, untuk memastikan reka letak sentiasa betul. Tetapi IE tidak mengenali ini, dan ia sebenarnya menganggap lebar sebagai lebar minimum. Untuk menjadikan perintah ini berfungsi pada IE, anda boleh meletakkan
  di bawah teg dan kemudian menentukan kelas untuk div:

  
  

  Kemudian CSS direka seperti ini:

  
  
  #bekas

  {

  lebar min: 600px;
  width:expression(document.body.clientWidth }

  
  
  Lebar min pertama adalah biasa; tetapi lebar dalam baris kedua menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan menjadikan dokumen HTML anda kurang formal. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript.
  
  Kaedah yang sama juga boleh digunakan untuk mencapai lebar maksimum untuk IE:
  

  #bekas

  {

  lebar min: 600px;
  lebar maks: 1200px;

  width:expression(document.body.clientWidth 1200? ”1200px“ : ”auto");

  }
  
  
  14. Masalah dengan IE dan lebar dan tinggi
  
  IE tidak mengenali definisi min-, tetapi sebenarnya ia menganggap lebar dan tinggi normal seolah-olah ada min. Ini adalah masalah besar. Jika anda hanya menggunakan lebar dan tinggi, kedua-dua nilai ini tidak akan berubah dalam penyemak imbas biasa Jika anda hanya menggunakan lebar dan ketinggian min, lebar dan tinggi tidak ditetapkan sama sekali di bawah IE.
  

  Sebagai contoh, jika anda ingin menetapkan imej latar belakang, lebar ini lebih penting. Untuk menyelesaikan masalah ini, anda boleh melakukan ini:

  .kotak

  {

  lebar: 80px;
  ketinggian: 35px;

  }

  html>body .box
  {
  Breite: automatisch;
  Höhe: automatisch;
  Mindestbreite: 80px;
  Mindesthöhe: 35px;
  }
  

  Alle Browser können die erste Box-Einstellung verwenden, aber der IE erkennt den zweiten Absatz der Einstellung nicht, da er einen Unterauswahlbefehl verwendet. Die zweite Einstellung ist spezifischer und überschreibt daher die erste Einstellung.

  5. Befehl zur Schriftarttransformation

  Der Texttransformationsbefehl ist nützlich, er hat drei Werte: Texttransformation: Großbuchstaben, Texttransformation: Kleinbuchstaben und Texttransformation: Großbuchstaben. Der erste ändert den Text in Großbuchstaben, der zweite in Kleinbuchstaben und der dritte in die Großschreibung des ersten Buchstabens. Dies ist sehr nützlich für Pinyin-Text. Auch wenn bei der Eingabe Fehler in der Groß- und Kleinschreibung auftreten, sind diese auf der Webseite nicht sichtbar.

  16. Das Problem des Verschwindens von Text in Bildern im IE

  Manchmal tritt das Problem auf, dass Text oder Hintergrundbilder nach der Aktualisierung plötzlich verschwinden und wieder auftauchen. Dies ist wahrscheinlicher, wenn Sie sich in der Nähe schwebender Elemente befinden (Hinweis: Ich habe das noch nie gesehen). An dieser Stelle können Sie Folgendes festlegen: position: relative für die verschwindenden Elemente. Wenn das nicht funktioniert, sollten Sie erwägen, eine Breite für diese Elemente anzugeben.

  17. Unsichtbarer Text

  Ganz gleich, warum Sie möchten, dass der Text einer Webseite nicht im Browser angezeigt wird, z. B. zum Drucken oder auf einem kleinen Bildschirm, Sie können display: none verwenden. Das ist sehr einfach, aber manchmal ist es für manche Leute etwas nutzlos, und sie können dieses Steuerelement entfernen und dann Folgendes verwenden: position: absolute left: -9000px .

  Dies gibt tatsächlich den Text an, der außerhalb der Seite angezeigt werden soll.

  18. Entwerfen Sie spezielles CSS für Handheld-Geräte

  Das heißt, Benutzer mit kleinen Bildschirmen wie Mobiltelefonen/PDAs können speziell ein CSS entwerfen, um die Anzeige der Webseite komfortabler zu gestalten. Dazu können Sie das Browserfenster auf eine Breite von 150 Punkten einstellen, um den Effekt zu sehen. Die Syntax zur Angabe von Handheld-spezifischem CSS lautet:

  Die Verfügbarkeit exklusiver Handheld-Geräte kann ebenfalls nachgelesen werden.

  19. 3D-Effekt-Taste

  Wenn Sie früher eine Schaltfläche mit einem 3D-Effekt erstellen wollten, der sich beim Klicken änderte, mussten Sie die Bildersetzung verwenden:
  

  ein
  {
  Anzeige: blockieren;
  Rand: 1 Pixel durchgehend;
  Rahmenfarbe: #aaa #000 #000 #aaa;
  Breite: 8em;
  Hintergrund: #fc0;
  }

  a:hover
  {
  Position: relativ;
  oben: 1px;
  links: 1px;
  Rahmenfarbe: #000 #aaa #aaa #000;
  }
  

  Was den Effekt betrifft, können Sie ihn auch selbst anpassen.

  20. Verwenden Sie den gleichen Navigationscode auf verschiedenen Seiten

  Viele Webseiten verfügen über Navigationsmenüs. Beim Aufrufen einer bestimmten Seite sollte das entsprechende Element im Menü grau werden, während andere Seiten aufleuchten sollten. Um diesen Effekt zu erzielen, müssen Sie im Allgemeinen ein Programm oder Design speziell für jede Seite schreiben. Jetzt können Sie diesen Effekt mit CSS erzielen.

  Verwenden Sie zunächst CSS-Klassen in Ihrem Navigationscode:
  

  
  
  • Home
  
  
  • Über uns
  
  
  • Kontaktieren Sie uns
  
  

  
  

  Geben Sie dann eine ID für den Hauptteil jeder Seite an, die denselben Namen wie die obige Klasse hat. Zum Beispiel

  .

  Dann entwerfen Sie das CSS wie folgt:
  

  #home .home, #about .about, #about .about
  {
  Befehle für die hervorgehobene Navigation finden Sie hier
  }
  

  Wenn hier die ID auf „Home“ gesetzt ist, wird .home wirksam, d. h. in der Zeile der Navigationsleiste mit der auf „Home“ eingestellten Klasse werden Spezialeffekte angezeigt. Das Gleiche gilt auch für andere Seiten.