처음부터 공통 속성의 HTML/CSS (3)

1. CSS 텍스트 속성

(1) 텍스트 크기 {font-size:value;}

단위: pt:9pt=12px; 브라우저 기본 글꼴 크기는 16px
em:1em=16px;
CSS2.0의 경우
xx-small:9px
x-small: 11px
소형:13px
중형:16px
대형:19px
x-대형:23px
xx-대형:27px

(2) 글꼴 색상

{색상: rbg250,250,250/#000000/빨간색;}

(3) 텍스트 글꼴 {font-family: "Font 1", "Font 2", "Font 3";}

브라우저는 글꼴에 따라 해석합니다.
참고: 글꼴 이름이 중국어인 경우 큰따옴표를 추가합니다. "Microsoft Yahei"는 영어 단어 하나를 추가할 필요가 없습니다. 공백이 있으면 Arial; 영어로 따옴표를 추가하세요: "Times New Romen"

(4) 굵은 글꼴{font-weight:;}

속성 값: 일반/500(일반), 굵게/600-900(굵게)

(5) 텍스트 기울기

{font-style:itatic(이탤릭체)/oblique(비스듬한 텍스트)/normal(기울임꼴 취소)}

(6) 가로 정렬

{text-align:left/center/right/justify(양쪽 끝 정렬);}

(7) 세로 정렬

{수직 정렬:상단/하단/가운데;}

(8) 텍스트 줄 높이

{line-height:normal/value;}

줄 높이 측정: 이 텍스트 줄의 상단부터 다음 텍스트 줄의 상단까지
단일 텍스트 줄의 경우; 줄 높이 = 컨테이너 높이, 세로 중심 ; 줄 높이 < 컨테이너가 높을 때 수직 위쪽

설명: 글꼴 약어 순서: 글꼴 스타일 글꼴 크기/줄 높이 글꼴 계열; ";}

(9) 텍스트 수정

{텍스트 장식:없음/밑줄(밑줄)/윗줄(밑줄)/line-through(취소선 추가)}

확장: 취소선 추가

(10) 첫 줄 들여쓰기

{text-indent:value;}

값은 단어 수입니다. 단위는 em;
Text-indent는 음수 값이며 앞으로 이동합니다.
첫 번째 줄에서만 작동합니다. 텍스트

(11) 단어 간격

{letter-spacing:value;}

영문과 한자의 간격을 조절

확장자: {word-break: break-all;}=
Newline

2. 테두리

{테두리 상단/하단/오른쪽/왼쪽: 1px 실선/점선/점선/이중;}

3. CSS 목록 속성

(1) 목록 기호 스타일

{list-style-type:disc(단색 원)/circle(빈 원)/squrare(빈 사각형 너비)/none(목록 기호 제거);}

{list-style-type:none}Equal {목록 스타일;없음;}

(2) 목록 기호로 표시된 그림

{목록 스타일 이미지:url();}

(3) 목록 기호 위치 정의

{목록 스타일 위치:외부/내부;}

(4) 목록 기호 제거

{목록 스타일:없음;}

4. 배경 속성

(1) 배경색 {배경색: 값;}

(2) 배경 이미지 {배경-이미지: url (경로);}
(3) 배경 이미지 타일링 {배경-반복: 없음 -repeat(타일식 아님)/repeat(타일식)/repeat-x(가로 타일)/repeat-y(세로 타일);}
(4) 배경 이미지 고정 {Background-attachment: 스크롤(스크롤) /fixed( 고정);}
(5) 배경 위치:x y(값: 50px 50px; 방향: 오른쪽 하단;)}
방향 위치는 가로(왼쪽/가운데/오른쪽) 세로(상단/가운데/ 하단)
(6) 약어: {배경:url() 반복 없음 중앙 상단 고정 #f00;}
                                                                   >

5. 웹페이지에서 일반적으로 사용되는 이미지 형식

(1) jpg: 손실 압축 손실, 색상이 풍부한 이미지에 적합

(2) gif: 손실 압축 손실, 색상 지원, 투명도, 애니메이션, 색상이 적은 이미지에 적합

(3) png : 손실 사진의 색상이 적고 애니메이션을 지원하지 않으며 투명도를 지원하며 불꽃놀이입니다.
참고: 높은 png 저장 공간이 필요하며, 호환되는 경우 gif 저장 공간이 더 많이 필요합니다.

6. 플로트(세로 요소를 가로로 배열)

{float:left/right/none}
(1) Clear float {clear:left/right/both;}
설명: 플로팅 이후의 요소는 문서 흐름에서 분리되어 그 위에 정지됩니다. . 플로팅 요소 앞의 요소가 표준 흐름의 요소인 경우(플로팅 없음)
플로트 뒤의 요소 위치는 브라우저에 따라 다르며 플로트 요소 뒤의 플로팅되지 않은 요소는 압축됩니다. 부동 요소의 원래 위치.
(2) 높이 축소 해결
높이 축소: 결과 조건은 상위 요소가 높이를 쓰지 않고 하위 요소가 부동하는 것입니다.
해결책: (1) 빈 끝에 이 div에 대한 div{clear:both;}
문을 작성합니다. (2) CSS의 상위 요소인 div{overflow:hidden;}에 문을 추가합니다.

7. 박스 모델

1. 정의: 웹페이지 요소가 표시되는 방식 및 각 요소 간의 관계.
테두리 테두리 필러 콘텐츠 영역

2. 패딩(padding)
(1) 패딩: 페이지에 있는 요소의 내용과 요소의 가장자리(테두리) 사이의 거리입니다.
(2) ) 컨테이너 내 콘텐츠의 위치를 ​​조정하는 데 사용됩니다
(3) 상위 요소에서 하위 요소의 위치를 ​​조정하는 데 사용됩니다
(4) 상위 요소에 padding 속성이 추가됩니다
소개 패딩 값을 줄일 수 있는지 여부 문제가 적습니까?
1. 빼기: 상위 요소에는 너비와 높이가 있습니다
2. 축소 없음: 상위 요소에는 너비와 높이가 없습니다.
(5) 축소하는 방법은 무엇입니까?
높이 - (상단+하단); 너비 - (왼쪽+오른쪽);         
3. 구문:
4개 값: {패딩: 상단 오른쪽 하단 왼쪽;}
값 1개: 20px}={padding:20px 20px 20px 20px;}
두 값: {padding: 20px 30px;}={padding: 20px 30px 20px 30px;}
두 값: {padding: 20px 30px 40px ;}= {패딩: 20px 30px 40px 30px;}
분할: {padding-top/right/bottom/left:value;}

2. 여백
(1) 여백: 설정 페이지에서 요소 외부의 빈 영역입니다.
(2) 여백 속성은 하위 요소에 추가됩니다.
(3) 구문:
4개 값: {margin: 상단 오른쪽 하단 왼쪽;}
1개 값: {margin: 20px}={padding:20px 20px 20px 20px;}
2개 값: {margin: 20px 30px;}= {padding: 20px 30px 20px 30px;}
두 값: {margin: 20px 30px 40px;}={padding: 20px 30px 40px 30px;}
분할: {margin-top/right/bottom/left :value ;}