(A) CSS에 대한 프리젠 테이션을
선택기 { 속성 1 : 속성 값 ; 속성 2 : 속성 값 ; ... } // 예 P { 텍스트 들여 쓰기 : 2EM ; / * 첫 줄 들여 쓰기 2 개 문자 * / 라인 - 높이 : 180 % ; / * 행 텍스트 180 % 높은 높이 * / }
(C) 선택 "태그 선택기", "선택기 ID", "클래스 선택", "복합 선택기", "가상 클래스 선택"
3.1 : 라벨 선택기 - 범위 : 전체 문서는 문서 전체에 글꼴, 배경 색상, 하이퍼 링크 및 다른 스타일의 정의와 같은 스타일의 기본 기초로 사용하기에 적합한 라벨의 모든 스타일 정의를 보낼 것입니다.
3.1.1 : 하나의 라벨
1 몸체 { 2 폰트 : 16px / 1 "마이크로 소프트 YaHei에서" ; / * 16px에 문서 전체 폰트, 텍스트 1 회 마이크로 소프트 우아한 검은 대한 라인 높이. * / 3. 색상 : # 333 ; / * 텍스트 색상 * / 4. 배경 색 : #eee ; / * 배경 색상 * / 5 }
3.1.2 : 여러 레이블
. (1) H2의 H1 { 2 색상 : 중 # F60 ] . (3) 텍스트 정렬 = 좌 : 센터 ; / * 가로 텍스트 중심 * / . 4 자간 : 2 픽셀 ; / * 텍스트 사이의 공간 * / }
3.1.3 : 공간에 의해 분리 된 복수의 태그, 태그의 앞에 레이블 뒤에 중첩 포함 관계, 즉 중첩을 나타낸다.
추신 : 여기에서 주목해야 할이 범위 내 페이지를 찾기 위해, 먼저 범위를 발견, 같은 다음 페이지 범위로 잘 설명에서 왼쪽으로 레이블을 설명하는 것입니다, 선택기는 가능한 한 중첩되어야한다.
. (1 개) P 범위 { 2 색상 : # C03 ] . 3 폰트 크기 : 1.1em ; / * 텍스트 광고 내의 텍스트의 크기가 1.1 배이다. * / }
3.2 ID 선택기 -
ID 선택, 독특한. HTML 개체 ID는 재사용 할 수 없습니다 고유 한 ID 이름의 이름입니다.
처음에 "#"로 ID를 선택. 아이디 이름은 한 번만 사용할 수 있습니다.
모든 라벨은 id와 class 속성이 있습니다.
이러한 사업부의 고유 패턴을 만들기 위해, 사업부에 대한 ID = "주"속성을 추가, 당신은 {} 스타일 방식을 #main 사용할 수 있습니다.
#main 선택기 포인트 ID 위의 HTML에서 물체에 적용되는 HTML 객체 스타일 = "메인". 선택기 후크 동일하다.
1 #main { 2 样式 3 } 4 5 <div의 ID = "메인"> ... </ div>
3.3, 클래스 선택
이는 프로그램의 클래스를 나타냅니다 클래스를. 마찬가지로 유사한 특성을 가진, 그룹처럼 사람들을 끌어 당기는 매력이있다.
구문은 ". 클래스의 구조를 기반으로"시작, 클래스 스타일이 레이블에 대한 어떤 필요에 의해 호출 될 수있는 여러 번 사용할 수 있습니다, 그것은 또한 결합 될 수있다.
예를 들어, 여러 개의 클래스는 다음과 같은 스타일을 정의 :
추신:
사실, 클래스가 특정 기능을 가진 부품을 많이 볼 수있다, 클래스 부품의 서로 다른 조합의 효과를 극대화하기 위해 달성 할 수있는 스타일을 html로 필요합니다. 목적은 모든 HTML 클래스 스타일이라고 사용하는 것입니다.
나는 ^ _ ^ 빌딩 블록 게임을 가지고 노는 아이 같은 느낌
참고 : ID와 클래스 이름은 자신의 정의, 그래서 이름 지정 규칙을 따라야합니다, 숫자로 시작할 수 없습니다 만, 문자로 시작할 수 있습니다 숫자와 밑줄을 포함 할 수 있습니다. 당신은 예약 된 키워드 태그를 사용할 수 없습니다. 당신과 같은 "# 2", ". 사업부", "#의 H1", ". 3A"형식을 사용할 수 없습니다.
클래스는 속성과 속성 값 첫 글자를 취할 수 또는 문자와 숫자의 최상의 조합으로 지정됩니다.
1 .bg1 { 2 배경 색상 : #ccc ; 3 } 4 .bg2 { 5 배경색 : #eee ; 6 } 7 .color1 { 8 색 : #의 F99 ; 9 } 10 .color2 { 11 색 : # 666 ; 12 } 13 .f18 { 14 폰트 사이즈 : 18px ; 15 } 16 .f16 { . 17 폰트 사이즈 : 16px ; 18된다 } . 19 .p20 { 20는 패딩 : 20 픽셀 ; / * 패딩 * / 21이다 } (22)이다 .m20 { 23은 여백 : 20 픽셀 ; / * 마진 * / 24 }
1 < H1 클래스 = "COLOR1의 F18" > </ H1 > 2 < H2 클래스 = "COLOR2의 F16" > </ H2 > 3 < DIV 클래스 = "BG1의 P20의 M20" > </ DIV > 4 < DIV 클래스 = "BG2 P20 " > </ DIV >
3.4 복합 선택기
혼합물을 일반적으로 ID, 클래스 태그 선택기이다.
이 라벨을 모두 다음의 ID 선택 스타일을 사용하여, 전형적이다.
< DIV ID = "navlist" > < UL > < 리 > < HREF = "#" ID = "현재" > HTML教程</ > </ 리 > < 리 > < HREF = "#" 클래스 = " CSS " > CSS教程</ > </ 리 > < 리 > < HREF ="# " > jQuery를教程</ > </ 리 > < 리 > < HREF = "#" > SEO教程</ > </ 리 > < 리 > < HREF = "#" >关于我</ > </ 리 > </ UL > </ DIV >
예를 들어, 지금 아래 모두 같은 스타일을 사용하여 라벨 아래에 다음 ID "navlist"리 UL은 선택이 쓸 수 있습니다 :
. (1) #navlist 상향 리튬 { 2 패턴 3 }
당신이 레이블 스타일이 동일하지 않습니다 싶은 경우에, 당신은 id 속성 또는 클래스 속성은 다음과 같은 선택을 사용할 수 있다는 생각을 추가 할 수 있습니다 :
. (1) #navlist 상향 # 현재 리튬 { 2 스타일 . (3) } . 4 UL 리 a.css #navlist { . 5 의 패턴 (6) }
이 낮은 수준 중첩 관계에 대한 공간, 그리고이 클래스 ID입니다 직접 속성과 동일합니다 ID = "현재"과의 클래스 = "CSS는"이있다.
3.5, 의사 클래스 선택기 -
단지 덜 사용하는 CSS2 의사 클래스 선택기 주도 하이퍼 링크 의사 클래스를 지원 IE6를 사용하기 때문에 대부분은이다 : 의사 클래스 선택기이 맴 돕니 다.
의사 클래스는 무엇입니까? 자체가 존재하지 않는 사실, 객체는 특정 조건에서 트리거됩니다.
예를 들어, 네 가지 상태의 총에 하이퍼 링크 : 방문하기 전에, 호버, 현재, 네 방문 의사 수준의 결과를 클릭합니다.
네 가지 상태 하이퍼 링크, 적용 할 수있는 구체적인 작성 순서를 가질 필요가있다.
. (1) A : 링크 {} / * 액세스하기 전에 * / 2 A : 방문 } { / * 방문 * / . 3 호버하십시오 {} / * 마우스 오버 *의 / 4. A : 액티브 } { / * 이 클릭 * /
호버 (A)에 있어야 : 후 방문하는 :: 링크 및 활성이 여야 A는, 주 후에 마우스를
신뢰할 시퀀스 것은 : l (링크) OV (구경 ) EH (호버)는 (능동) TE, 즉 함께 같은 (사랑)와 증오 (혐오) 두 단어가 합계를
그러나 우리가 일반적으로 네 가지 상태를 정의하지, 대부분의 사이트는 호버를 (후) 스타일이 다른 세 가지 상태로 동일하지 않은 경우 동일해야합니다. 따라서,이 스타일은 다음과 같이 정의 할 수 있습니다 :
. 1 { 2 색상 : # 333 ; 3. 텍스트 장식 : 없음 ; / * 밑줄 없다 * / 4. } 5. A : 호버 { 6. 색상 : #의 F30 , 7. 텍스트 장식 : 밑줄 ; / * 밑줄 * / 8 }
이 블로그 빌린 - http://www.mrszhao.com/post/30.html