Div + css 시작 하기 자습서 CSS 페이지를 제어 하는 방법

주로 설명, 2 개의 콘텐츠
첫째: CSS 페이지 스타일을 제어 하는 방법을 몇 가지;
둘째: 이러한 방법을 우선 순위 수준에서 같은 페이지에 나타납니다.

매우 중요 한 기능이 XHTML + CSS 레이아웃 페이지를 사용 하 여 콘텐츠 및 HTML 페이지 코드를 분리, 콘텐츠의 모양을 참조, 이미지는 CSS 코드 페이지 마치 사람이 옷을 입고, 사람들은 HTML, 콘텐츠, 고 옷은 CSS, 테이블
좋아, 지금 문제는, CSS 페이지를 제어할 수 있도록 하는 방법? 또는, 어떻게 옷 입을 사람, 사람들의 스타일 특성의 좋은 구현; 다른 CSS 표시 하는 페이지를 만들 수 있는 다른 스타일, 다른 사이트에 적용 하 고 다른 옷, 사람들 넣어 후 반영 됩니다
다른 직종입니다.

HTML 페이지의 효과 제어 하는 CSS를 첫째: 어떻게?
4 가지 종류의 방법, 인라인 모드, 포함된 모드, 링크 방법, 수입 방법

1)에-라인 모드
인라인 모드는 가장 직접적이 고 4 스타일의 간단한 그리고 직접 스타일 적용 = "" 예를 들어 HTML 태그:

< p 스타일 = "색상: #F00; 배경: #CCC; 글꼴-크기: 12px; " >< / p >
이 메서드는 태그를 많이 필요 스타일 속성을 설정 하면 페이지의 생산에서 더 많은 직접 HTML 페이지를 발생할 것입니다 그래서 순수 하지은, 비록 파일 볼륨은 너무 커서, 검색 스파이더가 크롤 링, 높은 유지 보수 비용 나중에 결과에 공헌.

2 인라인 모드
인라인 방식은 < 머리 >< 사이 CSS 코드를 작성 / 헤드 > < 스타일 ><에 선언 / 스타일 >, 예를 들면:

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

< html xmlns = "http://www.w3.org/1999/xhtml"

< 머리 >

< 메타 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ & gt

< 제목 > 제목 문서 < / 제목 & GT

< 유형 스타일 =" Text/css ">

<!-

#div1 {폭: 64px; 높이: 64px 플 로트: 왼쪽}

#div1 img {폭: 64px; 높이: 64px;}



< / 스타일 & gt

< / 머리 & gt

< 바디 & gt
& nbs P;
< div id = "Div1" >< img src = "Http://www.cssxuexi.cn/index/images/ico/2days.gif" / >< / DIV >
전국
CSS 매니아 함께 서 우리의 슬로건은 경우에, 당신은 아웃.:

"자신의 기쁨과 고통을 공유, 공유 귀하의 경험과 경험, 자신의 정보 및 리소스 공유"

만약 당신이 좋아 하면, 우리와 함께.

< / 바디 & gt

< / html >
인라인, 당신은 또한 알고 있어야 공중 경우에CSS 코드, 하지만 또한 모든 페이지를 정의 하 고, 사이트에 많은 페이지의 경우 각 파일은 더 큰 될 것입니다, 나중에 유지 보수는 또한 큰, 매우 작은 경우, CSS 코드는 많이,이 방법은 매우 좋은
.

방법 3) 링크
링크는 가장 자주 사용 하 고, 대부분 실용적인 방법으로,만 추가할 필요가 < 머리 >< 사이 / 헤드 >

< 링크 href = "Style.css" 유형 = "Text/css" rel = "stylesheet" / >
당신은 이것을 할 수 완전히 HTML 파일과 CSS 파일 두 가지로 나누어
또는 페이지 프레임 워크는 코드, 사전 제작 이후 유지 보수의 HTML 코드와 예술 CSS 완전 한 분리를 달성 하기 위해 하나 이상의 파일을 매우 편리 하 고, 하 고 페이지 스타일의 통일성을 유지 하려는 경우 그냥 별도 파일을 다른 페이지에서 이러한 공통 CSS 파일을 유지.
사이트의 스타일을 변경, 확인, 매우 편리 하 고, 이것은 우리의 XHTML + CSS 생산 페이지 홍보 방법에 공공 CSS 파일을 수정 해야 할 경우 얼굴 자신의 CSS 파일을 호출할 수 있습니다.
HTML 코드

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

< html xmlns = "http://www.w3.org/1999/xhtml"

< 머리 >

< 메타 http-equiv = "content-type" 내용 = "text/html; charset = gb2312 "/ & gt

< 제목 > 제목 문서 < / 제목 & GT

< 링크 href =" Style.css "유형 =" Text/css "rel =" 스타일 시트 / >

< / 헤드 >

< 몸 >

< div id = "디 V1 ">< img src =" Http://www.cssxuexi.cn/index/images/ico/2days.gif/ >< / div >

국가 CSS 매니아, 수렴 하지 않을 경우, 당신은 밖으로 있다 ~ 우리의 슬로건은:

"자신의 기쁨과 고통을 공유, 공유 귀하의 경험과 경험, 자신의 정보 및 리소스 공유"

당신이 좋아한다면, 우리와 함께.

< / 바디 & gt

< / html >
CSS 코드

#div1 {폭: 64px; 높이: 64px 플 로트: 왼쪽;}

#div1 img {폭: 64px; 높이: 64px;
4 가져오기 방법
가져오기 스타일 및 링크 스타일 비슷한 HTML 초기화 될 때 두 번째 인라인 메서드와 유사한 파일의 일부로 HTML 파일로 가져온 CSS 스타일 시트를 가져옵니다.
특정 가져오기 스타일과 링크 스타일의 차이 무엇입니까,이 문서를 볼 수 있습니다 "CSS: @import와 링크 특정 다른" 링크를 사용 하는 것이 좋습니다 하지만 방법!

2 번: 4 스타일의 우선 순위
위의 4 가지 방법 중 두 개는 같은 페이지에 대 한 사용 하는 경우 우선 순위 문제가 될 것입니다 그리고 다음과 같은 결론을 설명 하기 위해 예제를 포기 하지 않을

4 스타일 (높은 순)에서 우선 순위 수준에 있다: 인라인, 인라인, 링크, 그리고 스타일을 가져옵니다.