XHTML 슈퍼 추천의 CSS+div 레이아웃 요약_경험 교환

xml(Extensible Markup Language)의 등장으로 구조화된 문서와 데이터는 보편적이고 적응 가능한 형식을 가지게 되었으며, 이는 웹뿐만 아니라 어디에나 적용할 수 있습니다. 표준은 가능하다고 합니다.
XHTML은 The Extensible HyperText Markup Language의 약어입니다. HTML4.0을 기반으로 XHTML을 얻기 위해 XML 규칙을 확장합니다. HTML에서 XML로의 전환을 구현합니다.
CSS는 Cascading Style Sheets의 약자입니다. 순수한 CSS 레이아웃과 구조화된 XHTML의 조합은 디자이너가 모양과 구조를 분리하는 데 도움이 되어 사이트에 더 쉽게 액세스하고 유지 관리할 수 있습니다. 1) 페이지에 올바른 DOCTYPE을 추가하세요
DOCTYPE은 Document Type의 약어입니다. 주로 사용 중인 XHTML 또는 HTML 버전을 나타내는 데 사용됩니다. 브라우저는 DOCTYPE에 정의된 DTD(문서 유형 정의)에 따라 페이지 코드를 해석합니다.
XHTML1.0은 세 가지 DOCTYPE 옵션을 제공합니다.
(1) 전환 - 매우 일반적으로 사용됩니다.

(2) Strict(Strict)

(3) Frameset(Frameset)
2) 네임스페이스(Namespace) 설정
다음 코드 추가 DOCTYPE 선언 바로 뒤:

네임스페이스는 요소 유형과 속성 이름을 수집하는 상세한 DTD입니다. 네임스페이스 선언을 사용하면 온라인 주소 포인터를 통해 네임스페이스를 식별할 수 있습니다. 평소대로 코드를 입력하시면 됩니다.

3) 인코딩 언어 선언
브라우저에서 올바르게 해석되고 태그 유효성 검사를 통과하려면 모든 XHTML 문서에서 사용하는 인코딩 언어를 선언해야 합니다. 코드는 다음과 같습니다.

여기서 선언한 코딩 언어는 중국어 간체 GB2312입니다. 중국어 번체 콘텐츠를 제작해야 하는 경우 BIG5로 정의하면 됩니다.
4) 모든 태그는 소문자로 작성하세요.
XML은 대소문자를 구분하므로 XHTML도 대소문자를 구분합니다. 모든 XHTML 요소 및 속성 이름은 소문자여야 합니다. 그렇지 않으면 W3C 유효성 검사에서 문서가 유효하지 않은 것으로 간주됩니다. 예를 들어 다음 코드는 올바르지 않습니다.

5) 이미지에 alt 속성을 추가합니다.
모든 이미지에 alt 속성을 추가합니다. alt 속성은 이미지를 표시할 수 없을 때 대체 텍스트가 표시되도록 지정합니다. 이는 일반 사용자에게는 필요하지 않지만 텍스트 전용 브라우저와 화면 판독기를 사용하는 사용자에게는 중요합니다. Alt 속성이 추가된 경우에만 코드가 W3C 정확성 검사를 통과합니다. 다음과 같이 의미 있는 대체 속성을 추가해야 한다는 점에 유의하세요.

올바른 쓰기:


6) 모든 속성 값 추가 인용문
HTML에서는 속성 값을 인용할 필요가 없지만, XHTML에서는 인용해야 합니다. 속성도 공백으로 구분해야 합니다.
예: 이것도 틀렸습니다

7) 모든 태그를 닫습니다.
XHTML에서는 열려 있는 모든 태그를 닫아야 합니다. 빈 태그도 닫아야 하며 태그 끝에 슬래시 "/"를 사용하여 닫아야 합니다. 예:

8) 즐겨찾기 아이콘
예: 먼저 16x16 아이콘을 만들고 이름을 favicon.ico로 지정한 후 루트 디렉터리에 배치합니다. 그런 다음 헤드 영역에 다음 코드를 삽입합니다.

9) CSS를 사용하여 요소의 모양 정의
CSS 레이아웃을 사용하면 페이지를 일괄 수정할 수 있다는 이점이 있습니다. , 문서 구조를 변경할 수 있습니다. 프리젠테이션 계층에서 분리하여 작업량과 서버 부하를 줄이고 사이트의 확장 기능과 응용 프로그램을 늘릴 수 있습니다.
CSS는 공백과 대소문자를 구분하지 않습니다. 다음은 몇 가지 기본 요약입니다
(1) 색상 값
색상 값은 RGB 값으로 작성할 수 있습니다. 예: color: rgb(255,0,0 ) , 위 예의 color:#FF0000 처럼 16진수로 쓸 수도 있습니다. 16진수 값이 쌍으로 반복되면 동일한 효과로 축약될 수 있습니다. 예를 들어 #FF0000은 #F00으로 쓸 수 있습니다. 단, 반복되지 않으면 축약할 수 없습니다. 예를 들어 #FC1A1B는 6자리로 채워야 합니다.
(2) 글꼴 정의
웹 표준에서는 다음과 같은 글꼴 정의 방법을 권장합니다.
body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynamise, sans-serif };
나열된 순서대로 글꼴이 선택됩니다. 사용자의 컴퓨터에 Lucida Grande 글꼴이 포함되어 있으면 해당 문서는 Lucida Grande로 지정됩니다. 그렇지 않은 경우 Verdana 글꼴로 지정되고, Verdana가 없으면 Lucida 글꼴로 지정됩니다.
Lucida Grande 글꼴은 Mac OS X에 적합합니다.
Verdana 글꼴은 모든 Windows에 적합합니다.
Lucida는 UNIX 사용자에게 적합합니다.
"Song Ti"는 중국어 간체 사용자에게 적합합니다.
나열된 글꼴 중 사용할 수 있는 글꼴이 없으면 기본 sans-serif 글꼴이 호출될 수 있습니다.
(3) 그룹 선택기
여러 요소가 동일한 스타일 속성을 갖는 경우 명령문을 함께 호출할 수 있으며 요소는 쉼표로 구분됩니다.
p, td, li { 글꼴 크기: 12px; }
(4) 파생 선택기
파생 선택기를 사용하여 요소의 하위 요소에 대한 스타일을 정의할 수 있습니다. 예를 들면 다음과 같습니다.
li Strong { 글꼴 스타일: italic; 글꼴 무게: 일반;}
는 아래 하위 요소에 대한 것입니다. li Strong은 기울임꼴이지만 굵은 스타일은 정의하지 않습니다.
(5)id 선택기
CSS 레이아웃은 주로 "div" 레이어를 사용하여 구현되며, div의 스타일은 "id 선택기"를 통해 정의됩니다. 예를 들어, 먼저
레이어를 정의한 다음 스타일 시트에서 다음과 같이 정의합니다.
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
여기서 "menubar" 귀하 자신의 ID 이름으로 정의됩니다. 앞에 "#" 기호가 있음을 참고하세요.
ID 선택기는 파생도 지원합니다. 예:
#menubar p { text-align : right; margin-top : 10px }
이 방법은 주로 레이어와 더 복잡한 레이어를 정의하는 데 사용됩니다. 그리고 많은 파생 요소를 가지고 있습니다.
(6) 카테고리 선택기
CSS에서 점을 사용하여 카테고리 선택기 정의를 나타냅니다. 예: 페이지의
.14px {color : #f60 ;font-size:14px ;}
, class="category name" 메소드를 사용하여
14px 글꼴 크기
를 호출합니다. 이 메소드는 비교적 간단하고 유연하며 페이지의 필요에 따라 언제든지 생성하고 삭제할 수 있습니다.
(7) 링크 스타일 정의
CSS에서는 링크 스타일을 정의하기 위해 4개의 가상 클래스, 즉 a:link, a:visited, a:hover 및 a: active를 사용합니다. 예:
a:link{글꼴-가중치: 굵게 ;텍스트-장식: 없음 ;색상: #c00 ;}
a:visited {글꼴-가중치: 굵게 ;텍스트-장식: 없음 ;색상: #c30 ;}
a:hover {글꼴 가중치 : 굵게 ;텍스트 장식 : 밑줄 ;색상 : #f60 ;}
a:활성 {글꼴 가중치 : 굵게 ;텍스트 장식 : 없음 ;색상 : #F90 ;}
위의 문장들은 각각 "링크, 방문한 링크, 마우스 오버 시, 마우스 클릭 시" 스타일을 정의합니다. 위의 순서대로 작성하셔야 하며, 그렇지 않으면 예상한 화면과 다르게 표시될 수 있으니 주의하시기 바랍니다. "LVHA" 순서로 되어 있다는 것을 기억하세요.
(8) 선택기를 조합하여 절묘한 디자인 효과를 연출하세요
순서가 지정되지 않은 일반 목록 앞의 지루한 검은 점을 아름다운 패턴으로 대체하세요. 사이트http://marine.happycog.com...
먼저 CSS 규칙을 사용하여 카테고리 속성 인벤토리의 순서가 지정되지 않은 목록을 알려줍니다.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
호출 태그:
Angelfish(67개 항목)
Angels/ Frogfish (35개 항목)
엔젤피쉬(5526개 항목)
엔젤피시(15개 항목)
(9) 약어는 시계방향 순입니다
margin:25px 0 25px 0;
(10) 줄 높이
line-height: 150%는 줄 간격이 일반의 150%임을 나타냅니다.
10) 구조화된 코드 div(division), id, class
이를 사용하여 컴팩트한 xhtml을 작성합니다. CSS를 더 현명하게 사용하세요.
(1) 구조화된 ID 태그는 클래스 태그와 다릅니다.
속성 페이지에 ID가 "content"인 div가 포함되어 있으면 다른 div 또는 다른 요소가 동일한 이름을 가질 수 없습니다. . 대조적으로, class 속성은 페이지에서 반복해서 사용될 수 있습니다.
(2) id 규칙
id 값은 문자나 밑줄로 시작해야 하며, 숫자로 시작하고 문자, 숫자, 밑줄 뒤에 올 수 없습니다. 공백과 하이픈 - 둘 다 허용되지 않습니다.
11) 완성된 웹사이트는 w3c에서 표준 수정을 하실 수 있습니다
http:validator.w3.org
http://jigsaw.w3.org/css-v ...