HTML5 4일차 참고사항

선택자:

1, 관계 선택자

1) 그룹 선택자 h2,p,.text,#box{style}

쉼표로 구분 열기

2) 하위 요소 선택기 상위 요소 > 하위 요소 {style}

보다 큼 기호로 구분 >

3) 하위 선택기 상위 하위 요소 {style }

공백으로 구분



색상은 상속됩니다

2 , 동적 의사 클래스 선택자 (태그에서 흔히 사용됨)

: 연결 시 링크 상태

: 방문 후 방문한 상태

: 마우스를 올렸을 때의 상태

: active 마우스를 클릭했을 때의 상태

원리: Love Hate 원칙 LoVeHAte는 이것을 순서대로 씁니다

일반적으로{} a:hover{}

3, :nth를 씁니다. selector

:first-child:첫 번째 하위 요소

:last-child:마지막 하위 요소

:nth-child(n): n번째 하위 요소 n: 0, 1,2...n 2n 2n+1... 0부터 시작하여 매번 1씩 누적

홀수 행과 짝수 행의 색상이 다릅니다: :nth-child(2n +1) nth-child( 2n)

CSS 속성

1, 텍스트 속성(텍스트 스타일, 글꼴 속성, 글꼴 스타일)

font-size:12px/14px 글꼴 크기(브라우저 기본 텍스트) 크기 16px)

font-family:Microsoft Yahei;

font-weight:100-900/bold/bolder/normal 굵은 글꼴

color:#000000;

font-style:italic(italic)/normal;

2, 단락 속성

text-align:left/center/right 텍스트 가로 정렬

세로 -align:top/middle/bottom 텍스트 세로 정렬

text-indent:20px/2em 텍스트 들여쓰기

line-height:20 -24px/150%/1.5 줄 간격

text-장식:밑줄/윗줄/줄바꿈/없음 텍스트 장식

특수 용도:

높이와 세로 가운데 맞춤이 있는 텍스트 줄 설정 방법:

line-height:height; (줄 높이 = 높이)

letter-spacing:10px; word 단어 사이의 거리

word-spacing:1px; 영어 사이트)

text-transform:capitalize (각 단어의 첫 글자는 대문자) 대문자 (모두 대문자) 소문자 (모두 소문자) (주로 영어 사이트에서 사용됨)

white-space :normal/nowrap (줄바꿈 없음)

3, 배경 속성 (배경)

background-color:#000000/rgba()/red

background-image: url(사진 경로)

background-repeat:repeat/repeat-x/repeat-y/no -repeat; (배경 이미지 표시 방법 설정)

background-position:horizontal 방향 세로 방향

가로 방향: +300px -300px 20% 왼쪽 가운데 오른쪽

세로 방향: +300px -300px 20% 위쪽 가운데 아래쪽

배경은 복합 속성입니다. , - 이후를 생략할 수 있습니다.

예: background:#ff0000 url(../img/1.jpg) no-repeat 20px 30px;

4, 목록 속성(목록 스타일) 복합 속성(주로 다음 용도로 사용됨) ul ol li)

list-style-image:url();목록 항목 앞에 이미지 추가

list-style-type:none(목록 앞에 점)

list-style-position: inside/outside

list-style:none; 가장 일반적으로 사용되는

위 내용은 HTML5 4일차 노트 내용입니다. .더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!