>  기사  >  웹 프론트엔드  >  잘 정리된 CSS 기법 24가지_경험교류

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

WBOY
WBOY원래의
2016-05-16 12:05:001159검색

이 부분은 많은 문서에서 여러 번 언급되었지만 여전히 많은 친구들이 이러한 문제에 대해 실수를 하고 있습니다. 오늘은 이러한 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.