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 < 600? "600px": "auto" );

  }

  
  
  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 < 600? "600px" : 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으로 설정된 탐색 표시줄 행에 특수 효과가 표시됩니다. 다른 페이지도 마찬가지다.
  

  본 웹사이트의 성명

  본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

2 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7494

15

Cakephp 튜토리얼

1377

52

Steam의 계정 이름 형식은 무엇입니까?

77

11

Win11 활성화 키 영구

52

19

NYT 연결 힌트와 답변

19

43

더보기

Related knowledge

GraphQL 캐싱 작업 Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다 Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축 Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

쇼, 말하지 마십시오 Mar 16, 2025 am 11:49 AM

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

CSS를 사용하여 텍스트 그림자 및 그라디언트와 같은 텍스트 효과를 만드는 방법은 무엇입니까? Mar 14, 2025 am 11:10 AM

이 기사에서는 그림자 및 그라디언트와 같은 텍스트 효과에 CSS를 사용하여 성능을 최적화하고 사용자 경험을 향상시킵니다. 초보자를위한 리소스도 나열됩니다. (159 자)

Leakenty와 함께 자신의 Bragdoc을 만듭니다 Mar 18, 2025 am 11:23 AM

개발자로서 어느 단계에 있든, 우리가 완료 한 작업은 크든 작든, 개인적이고 전문적인 성장에 큰 영향을 미칩니다.

NPM 명령은 무엇입니까? Mar 15, 2025 am 11:36 AM

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.

CI/CD에 약간 Apr 02, 2025 pm 06:21 PM

"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.

See all articles