CSS 스타일 시트에 대한 일반적인 팁 모음_경험 교환

· Mozilla에서는 ul 태그에 기본적으로 패딩 값이 있지만 IE에서는 margin에만 값이 있습니다.

· 동일한 클래스 선택기는 문서에 반복적으로 나타날 수 있지만 ID 선택기는 한 번만 나타날 수 있습니다. CSS에서 중복된 정의가 있는 경우에는 클래스와 ID를 모두 사용하세요. 기호에 의해 만들어진 정의는 유효합니다.

· 초보자라면 같은 라벨의 속성이 IE에서는 A로 설정하면 정상적으로 표시되지만, 모질라에서는 B로 설정해야 정상적으로 표시되거나 둘이 반대가 되는 경우가 있습니다. .
임시 해결 방법: 선택기 {속성 이름: B !important ; 속성 이름: A;} //IE7에서는 유효하지 않습니다.

· 중첩된 태그 그룹 사이에 공백이 필요한 경우 외부에 있는 라벨의 패딩을 정의하는 대신 내부에 있는 라벨의 margin 속성

· li 라벨 앞의 아이콘은 list-style-image 대신 background-image를 사용하는 것이 좋습니다. 🎜>
· IE는 상속관계와 부자관계를 구분하지 못하며 모두 상속관계입니다.

· 태그에 선택기를 추가할 때 CSS에서 선택기에 주석을 추가하는 것을 잊지 마세요. 나중에 CSS를 수정하면 왜 이렇게 하는지 알게 될 것입니다.

· 라벨에 어두운 배경 이미지와 밝은 텍스트 효과를 설정하는 경우. 이때 라벨의 배경색을 더 어둡게 설정하는 것이 좋습니다.

· 링크의 4가지 상태를 정의하는 순서에 주의하세요: 링크 방문 호버 활성

· 내용과 관련 없는 사진은 배경을 사용해주세요

· 정의된 색상은 #8899FF = #89F

· 테이블이 일부 측면에서 다른 태그보다 훨씬 더 나은 성능을 발휘할 수 있습니다. 컬럼 정렬이 필요한 곳에 사용하시기 바랍니다.

·
에는 언어 속성이 없습니다. <script> <script type="text/javascript"><br>· 제목은 제목, 제목의 내용은 다음과 같이 작성해야 합니다. 제목. 때로는 제목에 텍스트를 표시할 필요가 없으므로 <br>제목 콘텐츠<h1>가 <h1>제목 콘텐츠<span> <br>·완벽한 단일 픽셀 윤곽선으로 변경됩니다. 테이블(IE5.0, IE6.0 및 FF에서 테스트를 통과할 수 있으며 기타 테스트되지 않음) table {border-collapse:collapse;} td {border:#000 solid 1px;} <br><br>·margin 음수입니다. 레이블이 절대 위치 지정을 사용하는 경우 값은 상대 위치 지정에서 역할을 할 수 있습니다. 페이지가 중앙에 있을 때 left:XXpx 속성은 절대 위치 지정을 사용하는 레이어에 적합하지 않습니다. 상대적으로 배치하려는 레이블 옆에 이 레이어를 배치한 다음 여백에 음수 값을 사용하는 것이 좋습니다. <br><br>· 절대 위치 지정을 사용할 때 여백 값 위치 지정을 사용하면 창 가장자리를 기준으로 위쪽 및 왼쪽과 같은 속성의 위치 지정과 다른 자체 위치를 기준으로 위치 지정을 얻을 수 있습니다. 절대 위치 지정의 장점은 다른 요소가 자신의 존재를 무시할 수 있다는 것입니다. <br><br>일반적으로 사용되는 여러 CSS 스타일<br><br>· 1. 한자를 양쪽 끝으로 정렬: text-align:justify:inter-ideograph; <br><br>· 2 . 고정폭 한자 잘림: Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(단, 여러 줄이 아닌 한 줄의 텍스트 잘림만 처리할 수 있습니다.) (IE5 이상) <br> <br> · 3. 고정폭 한자(단어) 줄 바꿈: table-layout:fixed; word-break:break-all(IE5 이상) <br><br>· 4. <br> 텍스트 <acronym style="cursor: help" title="输入要提示的文字">를 마우스로 사용하면 이전 텍스트에 대한 효과를 볼 수 있습니다. 이러한 효과는 외국 사이트에서는 많이 볼 수 있지만 국내 사이트에서는 거의 볼 수 없습니다. <br>· 5. 이미지를 반투명으로 설정합니다. .halfalpha { background-color: #000000; filter: Alpha(Opacity=50)}는 IE6 및 IE5에서는 테스트를 통과했지만 FF에서는 실패했습니다.<br><br>· 6. FLASH-Transparenz: Wählen Sie swf aus, öffnen Sie das Originalcodefenster, geben Sie vor <param name="wmode" value="transparent"> ein. Wenn wir Webseiten erstellen, verwenden wir häufig den Effekt, die Maus auf das zu erstellende Bild zu platzieren das Bild heller. Sie können die Technik des Ersetzens von Bildern verwenden oder die folgenden Filter verwenden: <br><br>.pictures img { filter: alpha(opacity=45 } <BR> .pictures a:hover img { filter: alpha(opacity=90); } <br><br>· Wenn der Text zu lang ist, wird der lange Teil als Auslassungspunkte angezeigt: IE5 und FF sind ungültig, können es aber sein ausgeblendet, IE6 ist gültig <BR><div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <BR><NOBR>Zum Beispiel gibt es eine Textzeile, die sehr lang ist und nicht in einer Zeile in der Tabelle angezeigt werden kann. Der Kommentar wird geändert in: <br>Fügen Sie hier Ihren Kommentar ein... <br><!--[if !IE]> <BR><BR>· So verwenden Sie CSS zum Aufrufen externer Schriftarten Syntax: @font-face { Font-Family: Name: URL (URL ); sRules } Wert: <![endif]-->name: Schriftartname. Jeder mögliche Wert des Attributs „font-family“ <br>url ( url ): Geben Sie eine OpenType-Schriftartdatei mit einer absoluten oder relativen URL-Adresse an <br>sRules : Stylesheet-Definition <BR></script>