CSS는 현재 웹 페이지 레이아웃의 주류 형식이자 52CSS.com에서 소개하는 핵심 콘텐츠이기도 합니다. CSS는 거의 모든 웹사이트에서 널리 사용되므로 시간을 들여 스타일 시트를 만들고 이를 충족하는지 확인하겠습니다. 좋은 기준. 다음 팁은 개발 과정에서 CSS 초보자에게 큰 도움이 될 것입니다. DivCSS 초보자가 알아야 할 10가지 기술과 웹 표준에 대한 이해를 배울 수 있습니다.
1. 색인 여기에 있는 정의는 귀하와 다른 개발자가 웹사이트와 CSS 파일을 이해하는 데 도움이 됩니다. 또한 CSS 파일의 내용을 이해하는 데도 도움이 됩니다. 색인 섹션에는 형식이 지정된 CSS 주석 단락이 포함되어 있습니다.
1. CSS 파일의 작성자 정보 제공 2. 웹 사이트 디자인 정의(열 수, 정적/동적) [열, 정적/유동]
3. 파일 버전을 지속적으로 추적합니다(파일 작성자가 여러 명이거나 나중에 업그레이드해야 하는 경우 매우 유용함)
2. 앵커 포인트 앵커는 동일한 CSS 파일 내의 북마크와 같습니다. 앵커를 사용하면 전체 CSS 파일을 명확하게 보고 정리된 상태로 유지할 수 있습니다.
앵커는 위에서 언급한 CSS의 인덱스에서 정의해야 하며 CSS에는 자체 앵커 시스템이 없기 때문에 간단한 방법을 사용하여 문서에서 앵커를 정의했습니다.
방법은 비교적 희귀한 문자를 이용하여 코멘트를 정의하는 것인데, 앵커 포인트를 찾고 싶을 때에는 인덱스에서 해당 앵커 포인트의 정의자를 복사해서 검색하여 앵커 포인트를 찾아보면 됩니다.
3. 재정의 재정의는 HTML의 기본 태그 스타일을 재정의하고 재정의하는 데 사용되는 방법입니다. 이와 같은 CSS 코드를 본 적이 있습니까? 특정 요소의 스타일을 지정하려는 것뿐입니다!
CSS에서 매우 아름다운 사용법은 상황별 선택기입니다. 사용해 보겠습니다.
4. 명명 규칙 핵심 요소는 요소에 정확하고 명확한 이름을 지정하는 것입니다. 이렇게 하면 혼동을 방지하고 CSS를 더 쉽고 빠르게 읽을 수 있습니다.
5. 약어 CSS의 약어 기능은 동일한 유형의 여러 속성을 하나로 결합할 수 있는 속성입니다.
CSS 약어는 개발 프로세스를 더 쉽게 만들고 CSS 파일을 깔끔하고 짧으며 읽기 쉽게 유지합니다. 다음은 몇 가지 예입니다.
6. 스프라이트 엘프로 번역한다고 해서 글의 지각적 이해가 깊어지는 것 같지는 않고 오히려 실제로 영어로 읽어보니 이해가 안 되서 그냥 번역을 안 한 것 같습니다. 모든 배경 이미지를 하나로 결합하고 배경 위치 지정을 사용하여 다른 부분을 표시하는 것을 CSS 스프라이트라고 합니다.
CSS Sprite는 HTTP 요청 수를 줄이고 대역폭을 절약하며 읽기 속도를 높일 수 있습니다. 동시에 이미지 불안정성을 피할 수도 있습니다. 예를 들어 마우스가 한 사진 위로 지나갈 때 다른 사진의 효과가 표시될 수 있으며 후자의 사진은 느린 인터넷 연결에서 반나절 동안 기다려야 나타납니다. .
CSS Sprites의 가장 훌륭하고 인기 있는 예는 Apple 웹사이트의 메뉴 시스템입니다.
7. 설명 선택기 명시는 동일한 요소에 대해 여러 규칙을 사용할 수 있는 경우 사용할 규칙의 우선순위를 지정하는 프로세스입니다.
간단히 말해서 모든 CSS 선택자에는 가중치가 있습니다. 선택기의 모든 가중치의 합에 따라 문서의 속성이 결정됩니다. 명시성은 CSS 문서가 너무 커서 어떤 요소의 가중치가 더 큰지 알 수 없을 때 큰 도움이 될 수 있습니다.
글쎄, 명확성은 CSS에서 너무 큰 영역이므로 단 몇 문장으로 설명하기가 어렵습니다. 예를 살펴보겠습니다.
8. 속성 재설정 전역 속성 재설정을 통해 웹 사이트가 모든 브라우저에서 거의 동일하게 표시됩니다. 각각의 경우, 다양한 브라우저는 모든 웹사이트에 대해 고유한 기본 스타일 설정을 사용하므로 당사 웹사이트가 브라우저마다 다르게 표시됩니다. 전역 속성 재설정을 통해 이러한 상황이 해결되고 절대적으로 일관된 기반에서 사이트를 구축할 수 있습니다.
CSS 프레임워크 사용을 항상 권장하지는 않지만 여전히 CSS 재설정을 사용해야 합니다. 간단한 것부터 복잡한 것까지 다양한 재설정 방법이 있습니다.
9. CSS 해킹 완벽한 CSS라고 해도 모든 브라우저에서 정확히 동일한 표시를 생성할 수는 없습니다. 브라우저마다 CSS를 해석하는 방법이 다릅니다. 전체적으로 웹사이트가 모든 브라우저에서 일관되게 유지되도록 하려면 CSS Hacks를 사용해야 합니다.
CSS Hacks를 사용하면 CSS 유효성 검사 시 오류가 줄어듭니다. 동의합니다. 이를 달성하는 또 다른 방법은 각 브라우저에 대해 서로 다른 단일 CSS 파일을 사용하고 HTML에 브라우저별 태그를 포함하여 어떤 특정 CSS를 사용해야 하는지 브라우저에 알려주는 것입니다. 저는 모든 프로젝트에서 항상 "fuck-ie.css"를 만듭니다 :) (역자 주: 여기서 저자는 IE에 대한 분노를 표현하기 위해 욕설을 사용합니다. "IE.css와 짝짓기"로 번역하면 세상은 그렇게 하지 않을 것입니다. 좀 더 조화롭지 않을까?)
이 방법을 사용하면 "기본 CSS 파일"이 동시에 확인되지만 "fuck-ie.css" 파일도 확인되지만 IE 브라우저에서는 "기본 CSS 파일"만 덮어쓰게 됩니다.
10. 검증 CSS를 생성할 때 항상 유효성을 검사하는 것이 중요합니다. 이렇게 하면 CSS에 오류가 없고 모든 브라우저에서 올바르게 해석될 수 있습니다.
W3C 유효성 검사기는 매우 인기 있는 온라인 CSS 유효성 검사 도구입니다.
