잘 정리된 CSS 기법 24가지_경험교류

이 부분은 많은 문서에서 여러 번 언급되었지만 여전히 많은 친구들이 이러한 문제에 대해 실수를 하고 있습니다. 오늘은 이러한 CSS 기술을 자세히 살펴보겠습니다. 어쩌면 완전히 이해하지 못할 수도 있습니다. 원하는 지식을 검색하고 확장할 수 있을 것입니다.

1. Mozilla에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있습니다.
2. 동일한 클래스 선택자는 문서 내에서 반복해서 나타날 수 있지만 ID 선택자는 한 번만 나타날 수 있습니다. CSS에서 레이블을 정의하려면 class와 id를 모두 사용하십시오. 정의가 반복되면 id의 가중치가 class의 가중치보다 크기 때문에 id 선택기에 의해 정의된 정의가 유효합니다.
3. 호환성을 조정하는 어리석은 방법(IE 및 Mozilla):
초보자는 다음과 같은 상황에 직면할 수 있습니다. 동일한 레이블의 속성은 IE에서 A로 설정되면 정상이지만 Mozilla에서는 표시되어야 합니다. 정상적으로 표시하려면 B로 설정해야 합니다. 그렇지 않으면 두 가지가 반대로 표시됩니다.
임시 해결 방법: 선택기 {속성 이름: B !중요; 속성 이름: A}가 때때로 작동하지 않을 수 있습니다. jb51.net에서 더 많은 BUG 솔루션을 검색할 수 있습니다.
4. 중첩된 태그 그룹 사이에 간격이 필요한 경우 외부에 있는 태그의 패딩을 정의하는 대신 내부에 있는 태그의 margin 속성에 그대로 두세요
5. li 태그 사용을 권장합니다. 이전 아이콘의 경우 목록 스타일 이미지 대신 배경 이미지입니다.
6. IE는 상속관계와 부자관계를 구분하지 못합니다. 모두 상속관계입니다.
7. 태그에 선택기를 추가할 때 CSS의 선택기에 설명을 추가하는 것을 잊지 마세요. 나중에 CSS를 수정할 때 이 작업을 수행하는 이유를 알게 될 것입니다. 또한 주의 사항은 너무 미쳐버리지 마세요.
8. 라벨에 어두운 배경 이미지와 밝은 텍스트 효과를 설정하는 경우. 이때 라벨의 배경색을 더 어둡게 설정하는 것이 좋습니다. 이미지가 손실되므로 텍스트를 계속 읽을 수 있습니다.
9. 링크의 4가지 상태를 정의할 때 순서에 주의하세요. 링크 방문 호버 활성
10. 내용과 관련 없는 사진에는 배경을 사용하세요. 프레젠테이션과 콘텐츠를 분리하는 것을 항상 기억하세요.
11. 색상의 정의는 #8899FF=#89F로 축약될 수 있습니다.
12. 테이블은 어떤 측면에서는 여전히 유용합니다. 데이터 테이블을 접할 때, 싫어하지 마세요.
13. <script>에는 언어 속성이 없으므로 다음과 같이 작성해야 합니다. <script type="text/javascript"> 14. 완벽한 단일 픽셀 개요 테이블(IE5에서는 IE6, IE7 및 FF1.0.4 이상은 모두 테스트를 통과할 수 있습니다.) <BR> table{ border-collapse:collapse } <BR> td{ border:#000 solid 1px } <BR> 다음을 참조할 수도 있습니다. 🎜> 표 테두리 관련 CSS 구문 <BR> <BR> CSS는 표 td의 기본 간격을 제거하고 1px 가는 선 표를 생성합니다. <BR><BR> 웹 표준을 준수하는 가는 선 표를 구현합니다<br><br> 15. 여백 추출 레이블이 절대 위치 지정을 사용하는 경우 음수 값은 페이지가 중앙에 위치할 때 절대 위치 지정을 사용하는 레이어에 적합하지 않습니다. 상대적으로 위치를 지정해야 하는 라벨 옆에 이 레이어를 배치한 후 여백에 음수 값을 사용하는 것이 좋습니다. <br> 16. 절대 위치 지정을 사용할 때 여백 값 위치 지정을 사용하면 자체 위치를 기준으로 위치 지정이 가능하며 이는 창 가장자리를 기준으로 위쪽 및 왼쪽과 같은 속성의 위치 지정과 다릅니다. 절대 위치 지정의 장점은 다른 요소가 자신의 존재를 무시할 수 있다는 것입니다. <br> Seventeen. 텍스트가 너무 길면 긴 부분을 줄임표로 변경하여 표시합니다. IE5, FF는 유효하지 않지만 숨길 수 있으며 IE6은 유효합니다 <BR>　<DIV STYLE=”width:120px; height:50px; border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <BR>　<NOBR>예를 들어 한 줄에 표시할 수 없는 텍스트 줄이 있습니다. 테이블. <BR>　18 IE에서 댓글로 인해 텍스트 중복 문제가 있는 경우 댓글을 다음과 같이 변경할 수 있습니다. <BR>　<!–[if !IE]> 해설은 여기에…<![endif]–> <BR>　19. CSS를 사용하여 외부 글꼴을 호출하는 방법 <BR> 구문: <BR> @font-face{font-family:name;src:url(url );sRules} <BR> 값: <BR> 이름: 글꼴 이름. 글꼴 계열 속성의 가능한 모든 값 <BR> url(url): OpenType 글꼴 파일을 지정하려면 절대 또는 상대 URL 주소를 사용하십시오. <BR> sRules: 스타일 시트 정의 <BR> 20. 텍스트 상자를 만드는 방법 form 텍스트가 수직으로 중앙에 위치합니까? <BR> FF에서 행 높이 및 높이 그룹화를 사용해도 효과가 없는 경우, 원하는 효과를 얻기 위해 위쪽 및 아래쪽 패딩을 정의하는 방법이 있습니다.<BR> 21. A 태그 정의 시 주의할 사항: <BR> a{color:red;}를 정의하면 A의 4가지 상태를 나타냅니다. 마우스 위치를 정의하려면 위 상태에 대해 a:hover만 정의하면 됩니다. 다른 세 가지 상태는 A에 정의된 스타일입니다. a:link가 하나만 정의된 경우 다른 세 가지 상태를 정의해야 한다는 점을 기억하세요! <BR> 22. 모든 스타일을 축약할 필요는 없습니다. <BR> p{padding: 1px 2px 3px 4px}와 같이 스타일 시트가 정의되면 후속 프로젝트에 상단에 5px 패딩을 사용하여 다른 스타일이 추가됩니다. 하단에 5px의 패딩이 있습니다. 반드시 p.style1{padding:5px 6px 3px 4px}를 작성할 필요는 없습니다. p.style1{padding-top:5px;padding-right:6px;} 이렇게 쓰면 원본만큼 좋지 않다고 생각하실 수도 있는데, 혹시 생각해보신 적 있으신가요? 메소드는 스타일을 반복적으로 정의합니다. 또한 원래의 아래쪽 패딩 값과 왼쪽 패딩 값이 무엇인지 알 필요가 없습니다! 앞으로 이전 스타일 P가 변경되면 정의한 p.style1의 스타일도 변경됩니다. <BR> 스물셋. 웹사이트가 커질수록 CSS 스타일도 많아지기 전에 명명 규칙을 포함한 충분한 준비와 계획을 세워주세요. 페이지 블록 분할, 내부 스타일 분류 등 <BR> 24. 고정폭 한자 잘림: Overflow: hide; text-overflow: ellipsis: nowrap; (단, 여러 줄이 아닌 한 줄의 텍스트 잘림만 처리할 수 있습니다.) (IE5 이상) ) FF는 할 수 없으며 단지 숨을 뿐입니다. <br><br> 이해하지 못하는 내용이 많아도 상관없습니다. jb51.net에 자주 오셔서 알아가시면 됩니다. 왼쪽 검색창에 관심있는 콘텐츠를 입력하여 검색하실 수도 있습니다. 댓글을 남기고 CSS 팁을 추가하실 수 있습니다. <BR></script>