스타일시트 CSS 레이아웃 경험_CSS/HTML

시간이 지남에 따라 여기에 있는 내용이 추가되거나 수정될 예정이므로 다음 내용이 향후 표준 학습자에게 도움이 되거나 쓸모가 없기를 바랍니다.

주요 내용은 IE와 MOZILLA의 차이점과 쉽게 간과되는 세부 사항, 일부 클래식 애플리케이션의 최상의 구현 방법, 피해야 할 실수입니다.

저의 일상 경험의 축적이므로 잘못된 설명이 있을 수 있습니다. 운이 좋으면 전문가에게 지적해 주시기 바랍니다.

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

동일한 클래스 선택자는 문서에 반복적으로 나타날 수 있지만 ID 선택자는 CSS에서 레이블을 정의하기 위해 클래스와 ID를 모두 사용하면 유효합니다.

호환성을 조정하는 어리석은 방법(IE 및 Mozilla):

초보자라면 같은 라벨의 속성이 IE에서는 A로 설정하면 정상적으로 표시되지만, 모질라에서는 B로 설정해야 정상적으로 표시되거나, 둘이 반대가 되는 상황이 발생할 수 있습니다.

임시 해결 방법:

선택기 {속성 이름: B !important 속성 이름: A;}

중첩된 태그 그룹 사이에 약간의 간격이 필요한 경우 외부에 있는 태그의 패딩

을 정의하는 대신 내부에 있는 태그의 여백 속성에 두십시오.

li 태그 앞의 아이콘은 list-style-image 대신 background-image를 사용하는 것이 좋습니다

IE는 상속관계와 부자관계를 구분하지 못하며 모두 상속관계입니다.

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

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

링크의 네 가지 상태를 정의할 때 순서에 주의하세요: 방문한 링크 호버 활성

내용과 관계없는 사진은

배경

을 이용해 주세요.

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

로 축약할 수 있습니다.

테이블은 어떤 측면에서 다른 태그보다 성능이 훨씬 뛰어납니다. 열 정렬이 필요한 곳에 사용하세요