CSS 주석,명명,계승 성,스타일 정렬 등 CSS 기법 의 소결

1.xhtml+CSS 사 이 트 를 만 들 때 CSS 의 주석 이 매우 중요 합 니 다.CSS 스타일 을 만 들 때 손 쉽게 설명 하 는 습관 을 유지 해 야 합 니 다.일반적으로 나 는 사용 하 는 것 에 익숙 하 다. 주석 내용 */”라 는 형식 으로 주석 을 쓰 는데,에 디 트 플러스 등 하 이 라이트 기능 을 가 진 편집기 에 서 는 C 언어 에서 자주 사용 하 는'/********/'와 같은 주석 을 사용 하 는 것 은 무의미 하 며,많은 무의미 한 내용 을 분리 로 채 울 필요 가 없 기 때문이다.주석 이 있 는 문 서 는 웹 사이트 의 원본 CSS 문서 로 서 웹 사 이 트 를 발표 할 때 CSS 압축 도 구 를 사용 하여 CSS 를 압축 하고 출력 된 CSS 에서 주석 을 제거 하여 파일 전송 효율 을 높 일 수 있다.2.이름 이 CSS 파일 에 이름 을 지 을 때 저 는 의미 에 맞 는 영어 이름 이나 줄 임 말 이름 을 사용 하 는 것 을 좋아 합 니 다.아주 많이 사용 하 는 부분 에 서 는 일부 병 음 으로 이름 을 지 을 수 있 습 니 다.또한,종속 관계 가 있 는 클 라 스 에 서 는"list"와 유사 한 것 을 사용 할 수 있 습 니 다.banner'와 같은 이름,즉 부모 요소 이름 에''을 붙 이 는 것 이다.원소 명 까지.명명 에 관 해 서 는 팀 디자이너 의 습관 에 따라 협상 할 수 있다.그러나 나중에 문 서 를 만 들 수 있 도록 이름 을 붙 이 는 것 이 좋 습 니 다.3.상속 성 은 CSS 에서 상속 성 을 잘 활용 해 야 한다.예 를 들 어 두 개의 포 함 된 div 에서 부모 요 소 는 background-color 속성 을 검은색 으로 정의 합 니 다.만약 에 하위 요소 의 배경 이 검은색 이 라면 중복 정 의 를 하지 않 아 도 됩 니 다.CSS 의 계승 성 을 잘 이용 하면 코드 를 더욱 효과 적 이 고 간소화 할 수 있다.4.CSS 정의 의 차원 이 CSS 의 class 를 정의 할 때 차원 이 뚜렷 한 방식 으로 문 구 를 설명 하 는 것 을 권장 합 니 다.예제 구조: Example Source Code [www.52css.com]           예제 CSS: Example Source Code [www.52css.com] #menu { ... } #menu .menulist { ... } #menu .menulist .selectit { ... } 상례 에서 최종 효 과 를 보면\#menu 는 중복 적 으로 나타 날 필요 가 없 지만 실제로 앞에서\#menu 를 추가 할 수 있다 면 문서 의 차원 을 더욱 명확 하 게 하고 읽 기 에 더욱 유리 할 것 이다.5.스타일 정렬 이 CSS 스타일 시트 를 디자인 할 때 우 리 는 대부분 손 으로 쓴 코드 이기 때문에 class 의 스타일 정렬 이 혼 란 스 럽 기 쉽다.예 를 들 어 몇 개의 class 에서 padding,margin,background,color 등 스타일 을 사 용 했 지만 정렬 할 때 어떤 class 는 background 가 앞 에 있 고 어떤 것 은 margin 이 앞 에 있 습 니 다.이렇게 하면 어느 정도 의 혼란 을 초래 하여 생각 을 좌절 시 키 기 쉽다.저 는 개인 이나 팀 의 디자이너 가 대체적인 순 서 를 협정 하 는 것 을 건의 합 니 다.이렇게 하면 개별적 으로 큰 차 이 를 볼 수 없 지만 전체적으로 읽 기 쉽 고 관리 하기 쉬 우 며 전체적인 효율 이 많이 향상 될 것 입 니 다.예 를 들 어 저 는 기본적으로 width,height 와 padding,margin,border 등 을 앞 자리 에 두 었 습 니 다.background 다음 에 텍스트 를 제어 하 는 font,color,text-align 등 이 있 습 니 다.그 다음 에 일부 특수 태그 에서 만 사용 할 수 있 는 요소 입 니 다.예 를 들 어 list-style 등 이 있 고 마지막 으로 css 필터 입 니 다.특수 한 상황 이 발생 했 을 때(예 를 들 어 CSS 의 일부 속성의 우선 순 위 는 정의 가 필요 합 니 다)유연 하 게 처리 할 수 있 습 니 다.

좋은 웹페이지 즐겨찾기