html 및 DIV+CSS에 대한 명명 규칙 요약 및 공유(컬렉션)

웹 페이지 제작에서 DIV+CSS 명명 규칙 사용을 표준화하면 특히 팀으로 작업할 때 최적화 효과를 향상할 수 있으며, 구체적인 DIV CSS 명명 규칙과 CSS 명명 규칙이 이 문서에 나와 있습니다.

자주 사용하는 DIV+CSS 네이밍 종합 모음, 즉 CSS 네이밍 규칙

CSS+DIV 웹페이지(Xhtml)을 개발할 때 가장 헷갈리고 얽히는 것은 CSS 네이밍입니다. 특히나 CSS를 모르는 초보자들은 더욱 그렇습니다. 무엇을 명명하고 어떻게 명명하는 것이 가장 좋은 방법입니다.

1. 명명 규칙 설명

1. 모든 이름은 소문자여야 합니다.

2 속성 값은 큰따옴표("")로 묶어야 하며 class="helloweb"과 같은 값을 가져야 합니다. , id ="helloweb"

3. 각 태그에는 시작과 끝이 있어야 하며 올바른 레벨이 있어야 하며 레이아웃은 규칙적이고 깔끔해야 합니다

4. 빈 요소에는 종료 태그가 있거나 "/"를 추가해야 합니다. " 시작 태그 뒤에 "

5. 코드에는 스타일, 글꼴, bgColor, 테두리 등과 같은 성능 요소가 완전히 분리되어 있습니다.

6.

을 따라야 합니다. 작은 크기의 원칙은 문서의 구조를 반영하며 검색 엔진 쿼리에 도움이 됩니다.

7. 각 테이블과 폼에 고유한 구조적 태그 ID를 추가하세요

8. 사진에 오류가 발생하면 Alt가 사용자에게 반영될 수 있다는 장점이 있습니다

9. 영어 명명 원칙을 사용하려면

10. 한눈에 이해하기 쉬운 단어가 아닌 이상 단어를 축약하지 마세요

다음은 일반적인 CSS 명명 방법과 DIV CSS 명명 방법을 소개합니다.

2. 웹 페이지 외부 레이어의 중요한 부분에 대한 CSS 스타일 이름 지정

코트 랩 -----가장 바깥 레이어에 사용

헤더 - ---- ----------머리에 사용

메인 콘텐츠 메인 ------------본문 콘텐츠에 사용(가운데)

main-left -- --- --------왼쪽 레이아웃

오른쪽 기본-오른쪽 -----------오른쪽 레이아웃

탐색 모음 탐색--------------- ----웹페이지 메뉴 네비게이션 바

content --------------웹페이지 중간 본문에 사용됩니다

하단 바닥글 ----------- ---- --하단

3.DIV+CSS 명명 참고표

다음은 CSS 스타일 명명 및 CSS 파일 명명 참조표, DIV CSS 명명 모음입니다.

①CSS 스타일 명명 지침 웹페이지 공개 명명 #wrapper 페이지 주변 제어 전체 레이아웃 너비 #container 또는 #content 컨테이너
② 가장 바깥쪽 #layout 레이아웃에 사용됩니다. #head, #header 헤더 부분 #foot, #footer 바닥글 부분 #navmain 네비게이션 #subnav 보조 네비게이션 #menu 메뉴 #submenu 하위 메뉴 #sideBar 사이드바 #sidebar_a, #sidebar_bleft 열 또는 오른쪽 열 #메인 페이지 본문 #태그 라벨 #msg #메시지 프롬프트 정보 #팁 팁 #투표 #친구링크 친화적 연결 #제목 제목

3 #요약 요약 #loginbar 로그인 바; #searchInput 검색입력창 #핫스팟 #검색검색 #search_output 검색결과와 검색결과가 비슷함 #searchBar 검색바 #search_results 검색결과 #저작권 저작권 정보 #branding

4trademark #logo 웹사이트 LOGO 로고 #사이트정보 웹사이트 정보 # siteinfo법률고백 #siteinfoCreditsReputation #joinusJoin us #파트너 파트너 #서비스 서비스 #등록자 등록 도착/화살표 화살표 #길드 가이드 #사이트맵 사이트 맵 #목록 목록 #홈페이지 홈페이지 #하위 페이지 보조 페이지 하위 페이지 #tool, #toolbar 도구 기사 #드롭 드롭다운 #dorpmenu 드롭다운 메뉴

⑤#상태 상태 #스크롤 스크롤.탭 탭 페이지.왼쪽.오른쪽.가운데 왼쪽, 가운데, 오른쪽.뉴스 뉴스.다운로드 다운로드.배너 광고 배너(상단 광고 배너) 전자무역 관련 .제품 제품 . products_prices 제품 가격 .products_description 제품 설명 .products_review 제품 리뷰 .editor_review 편집자 리뷰 .news_release 최신 제품 .publisher 제조업체 .스크린샷 썸네일 .faqs 자주 묻는 질문 .keyword 키워드 .blog 블로그 .forum 포럼

⑥ CSS 파일 명명 설명 master.css, style.css 메인 모듈.css 모듈 base.css는 기본적으로 레이아웃을 공유합니다.css 레이아웃, 레이아웃 테마.css 테마 columns.css 열 글꼴.css 텍스트, 글꼴 form.css 양식 mend.css 패치 print.css 인쇄

기타 CSS 이름 지정 지침:

DIV+CSS 이름 지정 요약: "."(소문자 마침표)를 사용하여 이름 지정을 시작하거나 "#"(파운드 기호)를 사용하여 이름 지정을 시작하는 것은 중요하지 않습니다. 이름을 지정하기 시작하지만 기본 상자, 중요 상자, 특수 상자 및 가장 바깥쪽 상자의 이름은 "#"(파운드 기호) 선택 기호로 시작하고 나머지 상자의 이름은 "."( 소문자 마침표) 선택 기호 및 이름 지정도 HTML에서 반복적으로 호출되어야 합니다.

일반적으로 가장 일반적으로 사용되는 기본 이름은 다음과 같습니다. Wrap(코트, 가장 바깥쪽 레이어), header(헤더, 헤더), nav(탐색 모음), menu(메뉴), title(열 제목, 일반적으로 h1h2h3h4 태그와 함께 사용됨)
, content(컨텐츠 영역), footer(바닥글, 하단), logo(로고, h1 태그와 함께 사용할 수 있음), 배너(광고 배너, 일반적으로 상단에 위치), copyRight(저작권). 다른 것들은 필요에 따라 선택적으로 사용할 수 있습니다.

권장 사항: 기본 상자, 중요 상자, 가장 바깥쪽 상자의 이름은 "#"(파운드 기호) 선택 기호로 시작하여 지정해야 하며, 나머지 상자의 이름은 "."(소음점) 선택 기호로 시작해야 합니다.

2 CSS 스타일 파일의 이름은 다음과 같습니다:

main master.css

layout,layout.css

columns.css

textfont.css

print style print.css

themes.css

4. 영어 작명 실력

일반적으로 사용되지 않는 내용이 있으면 번역 도구를 사용하여 번역하고 영어 이름을 지정할 수 있습니다.

위 내용은 html 및 DIV+CSS에 대한 명명 규칙 요약 및 공유(컬렉션)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!