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