초보자 css: CSS 페이지 레이아웃에 대 한 일반적인 사양

CSS 명명 규칙

1. 파일 명명 규칙

글로벌 스타일: GLOBAL.CSS;
프레임 레이아웃: layout.css;
글꼴 스타일: Font.css;
스타일 링크: link.css;
인쇄 스타일: print.css;

2. 일반적인 클래스/ID 코드를 명명

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

일반적으로 사용 되는 클래스의 이름을 가능한 만큼, 일반적인 영어 단어에 기반 해야 되며 쉽게 이해 하 고 적절 한 장소에서 주석을. 클래스 2 클래스/id 라는 조합을 쓰기 모드, 다음 단어의 첫 글자 대문자로 해야 합니다: "검색 버튼" 라는 "Searchbtn와 같은"검색 상자""Searchinput","검색 아이콘 "이"Searchicon"라는 명명 해야

CSS 사양 및 방법 작성

I. 일반 사양 및 방법 작성

1. 문서 종류를 선택 합니다.

XHTML 1.0 DTD 선언에서 선택의 세 가지 종류를 제공 합니다.

전환 (과도 적): HTML4.01의 id 사용 하 여 계속 (하지만 XHTML 표기법 준수) 수 있도록 매우 느슨한 DTD. 전체 코드는 다음과 같습니다.

엄격한 (Strict): 엄격한 DTD를 필요로 사용할 수 있습니다 하지의 정체성과 특성, 성능 계층의 같은
。 전체 코드는 다음과 같습니다.

프레임 워크 (프레임): A DTD 위해 설계 된 프레임 페이지 디자인, 페이지 프레임을 포함 하는 경우, 당신은이 DTD를 사용 해야 합니다. 전체 코드는 다음과 같습니다.

이상적으로, 물론, 엄격한 DTD 하지만 웹 표준 접촉 그냥가지고 온 우리의 대부분을 위해, DTD (XHTML 1.0 Transitional) 전환 (를 포함 하 여이 사이트 및 전환 DTD) 이상적인 선택입니다. DTD는 또한 id, 요소, 및 프레 젠 테이 션 계층의 특성을 사용 하 수 있습니다, 때문에 컨소시엄의 코드 체크섬을 통과 하기가 이기도 합니다.

2. 언어 및 문자 집합을 지정 합니다.

문서에 대 한 언어를 지정 합니다.

제대로 해석 하 고 브라우저에서 확인 될, 모든 XHTML 문서 인코딩 언어 그들이 사용 되는;를 선언 해야 합니다.
공통 언어 정의:

표준 XML 문서 언어 정의:

이전 버전의 브라우저에 대 한 언어 정의:

문자 집합을 개선, "Utf-8"를 사용 하는 것이 좋습니다.

3. 스타일 시트를 호출 하는:

외부 스타일 시트 호출:

페이지 인라인: 페이지 코드의 머리 지역 직접 스타일 시트를 작성. 로:

외부 호출 방법: 별도. css 파일, 스타일 시트를 작성 하 고 다음 코드와 유사한 페이지 머리에 그것을 호출.

웹 표준에 부합 하는 디자인, 것이 좋습니다 외부 조정, 사용 하 고 수정만 하지 않고 페이지의 스타일을 변경할 수 있습니다는. css 파일. 모든 페이지에서 동일한 스타일 시트 파일을 호출 하는 경우 스타일 시트 파일을 변경 모든 파일의 스타일을 변경할 수 있습니다.

4. 오른쪽 요소 선택:

HTML 요소의 스타일 대신 문서의 구조에 따라 HTML 요소를 선택 합니다. 예를 들어 P 요소를 사용 하 여 그들을 포장 하는 대신 텍스트 단락을 포함 하도록. 문서를 만들 때 적절 한 요소를 찾을 수 없습니다, 경우 일반 div 또는 span; 사용 하십시오

Div와 span을 사용 하 여 전환을 하지 마십시오. 작은, 적절 한 DIV 및 span 요소 사용 하면 문서 구조 더 명확 하 고 합리적이 고 사용 하기 쉬운 스타일;

태그와 문서 구조를 만들기 위해 뿐만 아니라 사용자 다운로드 속도 향상 시키기 위해 파일을 작은 유지 하 가능 하지만 또한 쉽게 문서와 보기;의 브라우저 해석으로 약간 중첩 구조를 사용 하 여

5. 파생 선택기:

명명 단순화 하 고 명확 하 게와 같은 구조를 하는 요소에서 자식 요소에 대 한 스타일을 정의 하는 파생 선택기를 사용할 수 있습니다.

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

다시 그림 처리와 6, 보조 그림:

"보조 그림" 여기 페이지로 표현 될 콘텐츠의 일부가 아니지만 보정, 간격, 및 알리미만 사용 되는 사진을 말합니다. 그것은 CSS 스타일 변경 등을 통해 페이지의 상황을 변경 하지 않고 처리 하는 배경 이미지에 수행할 수 있습니다.

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

7, 구조 및 스타일 분리:

페이지, 문서, 그리고 구조와 스타일의 분리를 달성 하기 위해 외부 전화 CSS 스타일 시트 CSS 파일에 스타일의 구조를 작성 합니다.

8, 문서 쓰기의 구조:

페이지 CSS 문서는 구조화 된 문체, 논리가 명확 하 고 읽기 쉬운 이어야 한다. 로:

/ * = = = 탐색 선도 = = = * /
#mainMenu 없음
폭: 100%;
높이: 모양이;
배경: url (images/mainmenu_bg.jpg) 반복-x;
}
#mainMenu ul Li 없음
플 로트: 왼쪽;
라인-높이: 30px;
여백-오른쪽: 1px;
커서: 포인터;
}
/ * = = = 공기 끝 선도 = = = * /

9. 마우스 제스처:

XHTML 표준에 손만 IE에서 인식 하 고 그것은 "손" 마우스 제스처를 변환 하는 데 필요한, 하면 "포인터", "커서: 포인터 즉," 대신 "손"

2. 참고 사양 작성

1. 라인 사이 노트:

같은 속성 값 후 직접 작성:

. 검색 없음
국경: 1PX 단단한 #fff / * 정의 검색 입력 프레임 테두리 * *
배경: url (. / images/icon.gif) 노-보고서 #333 / * 검색 상자의 배경 정의 * *
}

2, 전체 단락 참고:

시작 및 끝 각 장소에서 같은 메모를 추가할:

/ * = = = 스트립 검색 = = = * /
. 검색 없음
국경: 1px 단단한 #fff;
배경: url (. / images/icon.gif) 아니-반복 #333;
}
/ * = = = 끝 바 검색 = = = * /

3. 스타일 속성 코드 약어

1, 다른 클래스는 동일한 특성 및 특성 값 요약의:

하지만 두 개의 서로 다른 클래스에 대 한 동일한 속성 및 속성 값의 일부는 동일 하거나 심지어 모두 동일, 그들은 한다 약식, 여러 다른 클래스와 동일한 속성 및 속성 값, 병합 된 약어 코드의 양을 줄일 수 있으며 쉽게 제어할 수 있는 경우에 특히. 로:

#mainMenu 없음
배경: url (. / images/bg.gif);
국경: 1px 고체 #333;
폭: 100%;
높이: 모양이;
오버플로우: 숨겨진;
}
#subMenu 없음
배경: url (. / images/bg.gif);
국경: 1px 고체 #333;
폭: 100%;
높이: 20px;
오버플로우: 숨겨진;
}

두 개의 서로 다른 클래스의 속성 값 중복으로 축약 될 수 있다:

#mainMenu, #subMenu 없음
배경: url (. / images/bg.gif);
국경: 1px 고체 #333;
폭: 100%;
오버플로우: 숨겨진;
}
#mainMenu {높이: 30px;}
#subMenu {높이: 20px;}

2, 약어의 동일한 특성:

동일한 속성 등의 속성 값에 따라 축소 될 수 있습니다.

. 검색 없음
배경-색상: # 333;
배경-이미지: url (. / images/icon.gif);
배경-반복: 아니오-반복;
배경-위치: 50% 50%;
}
. 검색 없음
배경: #333 URL (... / images/icon.gif) 아니-반복 50% 50%;
}

약어의 3, 내부 및 외부 테두리:

내부 및 외부 테두리에 대해 CSS에서 거리 위쪽, 오른쪽, 아래쪽 및 왼쪽, 순서 구분 되 고 이러한 네 가지 속성의 값과 동일 하지 않은 경우 직접 축약 될 수 있다:

. btn 없음
여백-가기: 10px;
여백-오른쪽: 8px;
여백-하단: 12px;
여백-왼쪽: 5px;
여백-가기: 10px;
여백-오른쪽: 8px;
여백-하단: 12px;
여백-왼쪽: 8px;
}

으로 축약 될 수 있다:

. btn 없음
여백: 10px 8px 12px 5px;
padding: 10px 8px 12px 5px;
}

경우 위쪽 및 아래쪽, 왼쪽 및 오른쪽 테두리 속성 값은 동일 하, 두 속성 값을 약식 수 있습니다와 같은 직접:

. btn 없음
여백-가기: 10px;
여백-오른쪽: 5px;
여백-하단: 10px;
여백-왼쪽: 5px;
}

약어는:

. btn {여백: 10px 5px;}

그리고 때 위쪽 및 아래쪽 4 개의 테두리의 속성 값은 동일, 당신은 수 생략 그들에 직접,와 같은:

. btn 없음
여백-가기: 10px;
여백-오른쪽: 10px;
여백-하단: 10px;
여백-왼쪽: 10px;
}

약어는:

. btn {여백: 10px;

4, 약어의 색상 값:

RGB 3 색 값 같은 경우는 색상 코드를 약식 수 있습니다. 로:

. 메뉴 {색상: #ff3333;}

으로 축약 될 수 있다:

. 메뉴 {색상: #f33;}

4. 해킹 글 사양

CSS의 해킹을 사용 하 여 필요한 상황의 부재에, 물론, 조정 해야 하기 때문에 다른 브라우저는 웹 페이지의 해석에 대 한 브라우저의 표준 지원에 대 한 동일 하지 않습니다, FF 3px 갭, 이러한 차이, 많은 경우에 IE 등 그것은 조정, 해킹으로 인 한 문제를 방지 하려면 해킹을 작성 하지 것이 좋습니다.

1, IE6, IE7, Firefox 호환성 문구:

A: 쓰기

IE 인식할 수 *; 표준 브라우저 (FF) 같은 인식 하지 *;
6으로 인식할 수 *, 인식할 수 없는 하지만! 중요 한,
I e 7를 식별할 수는 *, 또한 확인할 수 있습니다! 중요 하다;
Ff로 인식 하지 않습니다 *, 식별할 수 있습니다 하지만! 중요 하다;
위의 식의 동일한 클래스에 따라 / CSS 해킹 아래 id로 쓸 수 있습니다:
. searchinput 없음;
배경-색상: #333 / * 모든 3 수 * *
* 배경-색상: #666! 중요 하다; / * *만 i e 7 /
* 배경-색상: #999; / * 6으로 i e 6 아래 * *
}
일반 3 작성 순서: FF, IE7, i e 6.

2 작성:

I e 6는 "_"로 인식 될 수 있다 고 IE7과 ff로 인식 되지 않습니다, 그래서 i e 6와 i e 7와 FF 사이의 차이에 이것을 작성할 수 있습니다.
. searchinput 없음;
배경-색상: #333 / * 범용 * *
_background-색상: #666 / * 6으로 식별 * *
}

3 작성:

* + html 및 * html은 IE의 독특한 라벨, 파이어 폭스는 지원 되지 않습니다.
. searchinput {배경-색상: #333;}
* html. searchinput {배경-색상: #666;} / * *만 i e 6 /
* + html searchinput {배경-색상: #555;} / * *만 i e 7 /

IE 브라우저 화면:

선택한 선택기는 적절 한 대체 됩니다. 두 번째 문장은 mac에서 사파리 브라우저에 고유

*: 랭 (en) 선택 {글꼴: 12px! 중요 한} / * ff 전용 * *
선택: 빈 {글꼴: 12px! 중요 한} / * 사파리 보임 * *

6으로 식별:

이것은 주로 결 전에 주석 값 속성을 분리 하는 CSS 주석 이다.

선택 {표시 / * 6으로 인식 하지 않습니다 * /: none;}

즉 조건 해킹 하는 경우:

모든 IE는 확인할 수 있습니다.

IE만
IE5.0만 확인할 수 있습니다.
만 IE 5.0
IE5.0 IE5.5 변화를 확인할 수 있습니다.
만 IE 5.0 +
만 6으로 식별:
단지 IE 6-
I e 6으로 6으로 아래 ie5.x 인식할 수 있습니다.
단지 IE 6 / +
만 i e 7 식별:
만 IE 7 /-

2, 명확한 플 로트:

파이어 폭스, 어린이 부동 때 다음 부모의 높이 수 완전히 전체 아이 랩이 분명 부동 전세 마차를 사용 하 여 부모, 정의 다음이 문제가 해결 될 수 있습니다.

선택: 없음 후
내용: ".";
디스플레이: 블록;
높이: 0;
취소: 둘 다;
가시성: 숨겨진;
}