CSS_CSS/HTML 사용에 대한 20가지 팁

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>본문 .box
  {
  너비: 자동;
  높이: 자동;
  최소 너비: 80px;
  최소 높이: 35px;
  }
  

  모든 브라우저는 첫 번째 상자 설정을 사용할 수 있지만 IE는 하위 선택기 명령을 사용하기 때문에 설정의 두 번째 단락을 인식하지 못합니다. 두 번째 설정은 더 구체적이므로 첫 번째 설정을 재정의합니다.

  5. 변환 명령

  text-transform 명령은 유용합니다. 이 명령에는 3가지 값이 있습니다: text-transform: 대문자, text-transform: 소문자, text-transform: 대문자. 첫 번째는 텍스트를 모두 대문자로 변경하고, 두 번째는 모두 소문자로, 세 번째는 첫 글자를 대문자로 변경합니다. 이는 병음 텍스트에 매우 유용합니다. 입력할 때 대문자 사용 오류가 있어도 웹 페이지에는 표시되지 않습니다.

  16. IE 사진에서 텍스트가 사라지는 문제

  가끔 새로 고침 후 텍스트나 배경 이미지가 갑자기 사라졌다가 다시 나타나는 문제가 발생할 수 있습니다. 이는 플로팅 요소에 가까울 때 발생할 가능성이 더 높습니다(참고: 본 적이 없습니다). 이 시점에서 사라지는 요소에 대해 position:relative를 설정할 수 있습니다. 그래도 작동하지 않으면 이러한 요소의 너비를 지정하는 것이 좋습니다.

  17. 보이지 않는 텍스트

  인쇄나 작은 화면 등 일부 웹페이지 텍스트가 브라우저에 표시되지 않도록 하려면 display: none 을 사용할 수 있습니다. 이것은 매우 간단하지만 때때로 일부 사람들에게는 약간 쓸모가 없으므로 이 컨트롤을 제거한 다음 position:absolute:-9000px를 사용할 수 있습니다.

  실제로 페이지 외부에 표시할 텍스트를 지정합니다.

  18. 휴대용 기기를 위한 전문 CSS 디자인

  즉, 휴대폰/PDA 등 작은 화면을 사용하는 사용자는 웹페이지 표시를 더욱 편안하게 하기 위해 CSS를 특별히 디자인할 수 있습니다. 이렇게 하려면 브라우저 창을 150포인트 너비로 조정하여 효과를 확인할 수 있습니다. 휴대용 특정 CSS를 지정하는 구문은 다음과 같습니다.

  휴대기기 독점 사용 가능 여부도 확인할 수 있습니다.

  19.3D 효과 버튼

  과거에는 클릭하면 바뀌는 3D 효과가 있는 버튼을 만들려면 이미지 교체를 사용해야 했지만 이제는 CSS만으로 충분합니다.
  

  아
  {
  디스플레이: 블록;
  테두리: 1px 실선;
  테두리 색상: #aaa #000 #000 #aaa;
  너비: 8em;
  배경: #fc0;
  }

  a:호버
  {
  위치: 상대;
  상단: 1px;
  왼쪽: 1px;
  테두리 색상: #000 #aaa #aaa #000;
  }
  

  효과는 직접 조정할 수도 있습니다.

  20. 다른 페이지에서 동일한 탐색 코드를 사용하세요

  많은 웹페이지에는 탐색 메뉴가 있습니다. 특정 페이지에 들어가면 메뉴의 해당 항목이 회색으로 바뀌고 다른 페이지는 켜집니다. 일반적으로 이 효과를 얻으려면 각 페이지에 대해 특별히 프로그램이나 디자인을 작성해야 합니다. 이제 CSS를 사용하여 이 효과를 얻을 수 있습니다.

  먼저 탐색 코드에 CSS 클래스를 사용하세요.
  

  
  
  • 집
  
  
  • 회사 소개
  
  
  • 문의하기
  
  

  
  

  그런 다음 위 클래스와 동일한 이름을 가진 각 페이지의 본문 ID를 지정합니다. 예:

  그런 다음 CSS를 다음과 같이 디자인합니다.
  

  #home .home, #about .about, #about .about
  {
  강조 표시된 탐색 명령은 여기로 이동하세요
  }
  

  여기서 ID가 home으로 설정되면 .home이 적용됩니다. 즉, 클래스가 home으로 설정된 탐색 표시줄 행에 특수 효과가 표시됩니다. 다른 페이지도 마찬가지다.