CSS 이름 지정 및 작성 표준화

CSS 명명 규칙

하나. 파일 명명 규칙

전역 스타일: global.css
프레임 레이아웃:layout.css
글꼴 스타일:font.css
링크 스타일: link.css
인쇄 스타일: print.css;

둘. 공통 클래스/ID 명명 규칙

헤더:헤더
내용 : 내용
컨테이너: 컨테이너
바닥글: 바닥글
저작권 : copyright　
탐색: 메뉴
기본 탐색: mainMenu
하위 탐색: 하위 메뉴
로고 : 로고
슬로건: 배너
제목: 제목
사이드바: 사이드바
아이콘: 아이콘
참고: 참고
검색: 검색
버튼 : btn
로그인: 로그인
링크: 링크
정보 상자: 관리
……

일반적으로 사용되는 클래스의 명명은 가능한 한 일반적인 영어단어를 바탕으로 이해하기 쉽도록 하고, 적절한 위치에 주석을 달아야 한다. 보조 클래스/ID 명명의 경우 결합 쓰기 모드가 채택되고 마지막 단어의 첫 글자는 대문자로 시작되어야 합니다. 예를 들어 "검색 상자"는 "searchInput"으로 명명되고 "검색 아이콘"은 "searchIcon"으로 명명되어야 합니다. "검색 버튼" ""searchBtn"이라는 이름...

CSS 작성 사양 및 방법

1. 기존의 글쓰기 기준과 방법

1. 문서 유형 선택:

XHTML 1.0은 선택할 수 있는 세 가지 DTD 선언을 제공합니다.

Transitional: HTML4.01 로고를 계속 사용할 수 있도록 허용하는 요구 사항이 매우 느슨한 DTD입니다(단, xhtml 작성 방법을 준수해야 함). 전체 코드는 다음과 같습니다.

엄격함: 엄격한 DTD의 경우
과 같은 표현 계층 식별자 및 속성을 사용할 수 없습니다. 전체 코드는 다음과 같습니다.

프레임세트: 프레임 페이지용으로 특별히 설계된 DTD입니다. 페이지에 프레임이 포함되어 있으면 이 DTD를 사용해야 합니다. 전체 코드는 다음과 같습니다.

물론 이상적인 상황은 엄격한 DTD이지만, 웹 표준을 처음 접하는 대부분의 디자이너에게는 현재 과도기 DTD(XHTML 1.0 Transitional)가 이상적인 선택입니다(이 사이트도 과도기 DTD를 사용합니다). 또한 이 DTD를 사용하면 프리젠테이션 계층 식별자, 요소 및 속성을 사용할 수 있으므로 W3C 코드 확인을 통과하는 것도 더 쉽습니다.

2. 언어 및 문자 집합 지정:

문서의 언어를 지정하세요:

브라우저에서 올바르게 해석되고 W3C 코드 확인을 통과하려면 모든 XHTML 문서는 다음과 같이 사용하는 인코딩 언어를 선언해야 합니다. 일반적으로 사용되는 언어 정의:

표준 XML 문서 언어 정의:

이전 브라우저의 언어 정의:

문자 집합을 개선하려면 "utf-8"을 사용하는 것이 좋습니다.

3. 통화 스타일 시트:

외부 스타일 시트 호출:

페이지 인라인 방식: 페이지 코드의 헤드 영역에 스타일시트를 직접 작성합니다. 예:

<스타일 유형=”텍스트/css”>/style>

외부 호출 방법: 독립적인 .css 파일에 스타일시트를 작성한 후, 페이지의 헤드 영역에 다음과 유사한 코드로 호출합니다.

웹 표준을 준수하는 디자인에서는 페이지 수정 없이 .css 파일만 수정하여 페이지 스타일을 변경할 수 있는 외부 호출 방식을 사용하는 것이 좋습니다. 모든 페이지가 동일한 스타일 시트 파일을 호출하는 경우 하나의 스타일 시트 파일을 변경하면 모든 파일의 스타일이 변경될 수 있습니다.

4. 적절한 요소 선택:

HTML 요소의 스타일이 아닌 문서 구조를 기반으로 HTML 요소를 선택하세요. 예를 들어 줄바꿈이 아닌 텍스트 단락을 포함하려면 P 요소를 사용하세요. 문서를 생성할 때 적절한 요소를 찾을 수 없다면 일반 p 또는 범위 사용을 고려해 보세요.

p와 범위를 과도하게 사용하지 마세요. p와span요소를적절하게사용하면문서구조가더명확하고합리적이며사용하기쉬운스타일을만들수있습니다. 태그와 구조적 중첩을 최대한 적게 사용하면 문서 구조가 명확해질 뿐만 아니라 파일 크기도 작아지는 동시에 브라우저에서 문서를 더 쉽게 해석하고 표시할 수 있습니다. >

5. 파생 선택자:

파생 선택기를 사용하여 요소 내의 하위 요소에 대한 스타일을 정의할 수 있습니다. 그러면 이름 지정이 단순화되고 구조가 더 명확해집니다. 예:

.mainMenu ul li {배경:url(images/bg.gif;)}

6. 보조 이미지에 후면 이미지 처리 사용:

여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 뒷면 이미지로 처리하고 페이지를 변경하지 않고도 CSS 스타일을 통해 변경할 수 있습니다. 예:

#logo {배경:url(images/logo.jpg) #FEFEFE 오른쪽 하단 반복 없음;}

7. 구조와 스타일의 분리:

페이지에는 문서의 구조만 작성되고, CSS 파일에는 스타일이 작성됩니다. 구조와 스타일의 분리는 CSS 스타일시트를 외부에서 호출하여 이루어집니다.

8. 문서의 구조화된 작성:

페이지의 CSS 문서는 구조화된 방식으로 작성되어야 하며 논리가 명확하고 읽기 쉬워야 합니다. 예:

• 홈페이지


• 소개


• 서비스

/*=====메인 네비게이션=====*/
#메인메뉴 {
너비:100%;
높이:30px;
배경:url(images/mainMenu_bg.jpg) 반복-x;
}
#mainMenu ul li {
부동:왼쪽;
줄 높이:30px;
여백 오른쪽:1px;
커서:포인터;
}
/*=====메인 탐색 끝=====*/

9. 마우스 제스처:

XHTML 표준에서 손은 IE에서만 인식됩니다. 마우스 동작을 "손 모양"으로 변환해야 하는 경우 "손"을 "포인터", 즉 "cursor:pointer;"로 바꾸세요.

위 내용은 CSS 이름 지정 및 작성 표준화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!