포함 일반 CSS3 선택기 : 실질적으로 공통 속성, 의사 클래스 계층 (조합)의 선택은, 특정한 사용 권고 판독 CSS 선택기 네 개의 카테고리 : 기본 조성, 특성, 가상 클래스를 사용하여 셀렉터가 에 의해 선택 요소가 발견하고 스타일 속성을 추가 할 수있는 역할에 대한 기본적인 이해.
일반적인 선택이있다 : 태그, ID가, 클래스, 협회 조합 선택의 (상위 세트를 통해 하위 집합을 찾기 위해), 노트 HTML 페이지의 ID가 고유 실질적으로 선택이 있습니다 (/ *가 나타내는 주석 * /), / * : 제 아이 * / / *의 첫 번째 요소 : 마지막 요소 마지막 자식 * / / * (n)은 n 번째 자식 여러 요소 * / / * : 1 세대 라인 의 첫 번째 행의 * / / * : 단어의 첫 글자 / 문자 * / 및 수준을 선택 의사 클래스 선택기 뒤를 AB 자손, A> B의 하위 요소, 소자 B (인접 선택기) 뒤에 +를 갖는다 : 호버 ,: 포커스 포커스 :: 문자 배경색 마지막 속성 선택기 실질적으로 (직접적으로 태그 본체에 사용될 수있는 특성을 선택 객체 속성) 염기성 선택기 [등록]을 선택하는 마우스를 변경할보세요 선택기 [속성 = 값, 실질적 선택기 [~ 속성 = 값] 공백 실질적 어떤 단부 선택기 [$ 속성 = 값]을 시작 것에서 실질적 선택기 [^ 속성 값 =] 복수로 분리. (비고 : 기본 선택 또는 의사 - 클래스의 마음, 네 개의 관련 CSS 선택기는 보웬으로 주도하기 전에 무료로 지금 어디 튜토리얼 십육년, 일부 선택기의 이름과는 권장하지 매우 일치한다 코멘트) 몇 가지 흥미로운 스타일이 다음 쇼를 작성하는 여기에, 다른 장소에서 메시지를 환영합니다.
1 <! DOCTYPE HTML > 2 < HTML LANG = "EN" > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" > 5 < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > 6 < 제목 > CSS3选择器和文本字体样式</ 제목 > 7 < 스타일 유형 = "텍스트 / CSS" > 8 DIV :: F90 번호 ; 10 } / * 첫번째 라인 * / 11. div- :: 첫 글자 { 12는 폰트 스타일 : 기울임 ; 13은 폰트 크기 : 24 픽셀 , 14 } / * 첫번째 단어 / 문자 * / 15 .box> 리튬이 첫 어린이 { 16 목록 스타일 : 스퀘어 ] . (17) } / * 첫번째 요소 * / 18 없다 : 최종 - 자식 .box> 리튬 { . 19 목록 스타일 : 없음 ; 20이다 }/ * 마지막 요소 * / (21)가 .box> 리 : 아이-N 번째 (3). { (22)은 목록 스타일 : 낮은 - 로마 , 23은 } / * n 번째 요소 * / 24 DIV 선택 :: { 25 배경 색 : 레드 , (26)는 색상 : #FFF ; 27 } / * 텍스트 배경 색상 변경을 선택합니다 :: 선택 마우스 * / 28 INPUT { 29 개요 : 없음 ; 30 } / * 기본값을 대체 할 텍스트 초점, 테두리 색상 * / 31 </ 스타일 > 32 </ 헤드 > 33 < 본문 > 34 < UL 등급 = "박스" > 35 < 리 > 1 </ 리 > 36 < 리 > 2 </ 리 > 37 < 리 > 3 </ 리 > 38 < 리 > 4 </ 리 > 39 < 리 > 5 </ 리 > (40) </ UL > (41)는 < DIV > 42 "채널없는 책 같은 책을 만들기 위해 : I에"나는 책을 생각하지 ","맹자 "는"전용 장 낮은 ". 단지 스물셋 정책을 수행에서 가져온"로 우 더 나은 어떤 책보다 "그것을 쓰는 것이 더 좋다"이 독립적 인 사고에 좋은 것으로 독자를 묻는 방법을 드 독서를 통해 화려한이다. ". 다음 문장보다 책없이 편지 : 나는"우 쳉 "에서 오전 걸릴 두 개 또는 세 개의 (가) 맹자 strategies.It에서, "제 심장 아래"있는 "I AM 더 나은 마지막 편지 책 내가이하는.는"자주적으로 생각하는 독자층의 독자를 필요로한다. " (43)는 </ DIV > (44)는 < 양식 액션 =" " 방법 =" GET " > 45 초점 : < 입력 유형 ="텍스트 " > 46 </형태 > 47 </ 바디 > 48 </ HTML >
CSS3에서 "글꼴"글꼴 : / * 글꼴 - 가족 : 글꼴 유형 * / / * 글꼴 크기 : 글꼴 크기 * / / * 글꼴 스타일 : itailc 이탤릭체 * / / * 글꼴 - 무게 : 제어 글꼴 두께 크기 * / 독서 권장 일반적으로 변환 글꼴의 다양한 제어하는 데 사용 CSS의 글꼴 스타일 내용이 기본적으로 동일한 소개합니다.
단어 간격, 단어 간격 : 단어 간격, 텍스트 장식 : 밑줄, 텍스트 정렬 : 텍스트 정렬, 텍스트 들여 쓰기 : 취임 들여 쓰기, 줄 높이 자간있는 텍스트 스타일의 일반적인 스타일을 처리 CSS3 : 라인 높이, 색상 : 텍스트 글꼴 색상, 단어 휴식 : 휴식 - 모든 텍스트 감싸기. 악의적 인 입력 텍스트 정보, 예를 들어, 단일 문자입니다, 어떻게 할 경우 종종 벽돌 벽은 지금, 다시 한 명중 말? 당신은이 쇼 위에서 아래로 일반적인 HTML 문서 만이 보여 왼쪽에서 오른쪽으로 페이지가,? 솔루션 div.box2를 참조 어떻게 자신을 쓰기 브라우저에서 포장 및 스크롤 막대가 나타납니다 하단하지 않는 것을 발견 할 것이다 물론 다음, 브라우저 디스플레이, 깊은 인상을, 그런 경우는 페이지 레이아웃, 결국, 소수, 또는 모양 좋은에 줄을 변경, 외국인은 현재도 예외는 없다!
1 <! DOCTYPE HTML > 2 < HTML LANG = "EN" > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" > 5 < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > 6 < 제목 >有意思的단어 휴식 : 휴식 - 모든文本折行</ 제목 > 7 < 스타일 유형 = "텍스트 / CSS" > 8 DIV. : BREAK - 모든 ; 10 오버 플로우 : 자동 ; . (11) } / * 워드 BREAK : 모든 BREAK 랩 텍스트 * / (12)는 <이 / 스타일 > (13)가있다 </ 머리 > (14) < 몸 > 15 ! - < 기본 텍스트가 랩입니다 -> 16 < DIV의 클래스 = "BOX1" > . (17) "모두에게 어떤 책을 다음 문장으로 책을 믿으 : I를에"우 책이 더 나은 어떤 책보다 긴 맹자 "와"장에서 헌신 "단지에서 계속할 스물셋 정책을." ","믿는 모든 것에 "이것은 오프를 통해 화려한이다. "독립적 인 사고에서 독자 좋은 요청, 판독 방법"쓰는 것이 좋습니다 다음 문장보다 책없이 편지 : 나는에서이다. "우 쳉 아래"와 그것은 맹자에서 두 개의 또는 세 가지 전략을. " 제 심장 ","이 지난 도서 내에서이 가지고 더 나은의 문자 "는이 독립적으로 생각의 독자층 독자가 필요합니다 .. (18) </ DIV > 19 <! - -하지만,이 악성 텍스트를 입력, 당신은 당신의 브라우저에서 그것을 발견 할 것이다 ? 포장 및 스크롤 막대가 나타납니다 하단하지 않는,이 쇼 위에서 아래로 일반적인 HTML 문서 만이 보여 왼쪽에서 오른쪽으로 페이지, 어떻게, div.box2 솔루션을 보는가 > - 20 < DIV 클래스 = "BOX2을 " > 21 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 22 </ DIV > 23 </ 바디 > 24 </ HTML >