처음부터 HTML/CSS - 공통 속성

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-large:23px
xx-large:27px

(2) 글꼴 색상

{color: rbg250,250,250/#000000/red;}

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

브라우저는 글꼴로 해석합니다
참고: 글꼴 이름이 중국어 인용문인 경우 double을 추가합니다. mark: "Microsoft Yahei"; 영어 단어 하나를 추가할 필요가 없습니다. Arial; 영어에 공백이 있으면 따옴표를 추가하십시오: "Times New Romen"(4) 굵은 글꼴 -weight:;}

속성 값: 보통/500(굵게)/600-900(굵게);

(5) 텍스트 기울기

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

(6) 가로 정렬

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

(7) 수직 정렬

{vertical-align:top/bottom/middle;}

(8) 텍스트 줄 height

{line-height:normal/value;}

줄 높이 측정: 이 텍스트 줄의 상단부터 다음 텍스트 줄의 상단까지
한 줄; 텍스트: 줄 높이 = 컨테이너 높이, 수직 중심; 줄 높이
설명: 글꼴 약어 순서: 글꼴 스타일 글꼴-가중 글꼴-크기/줄 높이 글꼴-패밀리; Microsoft Yahei";}
(9) 텍스트 장식

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

확장자:

취소선 추가

(10) 첫 줄 들여쓰기

{text-indent:value;}

값은 단어입니다. 숫자는 다음과 같습니다.

text-indent는 음수 값입니다. 앞으로 이동합니다.

텍스트의 첫 번째 줄에서만 작동합니다.

(11) 단어 간격

{letter-spacing:value;}
영문과 한자의 간격을 조절

확장자: {word-break: break-all ;}=
줄 바꿈

2. 테두리

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

3 , CSS 목록 속성

(1) 목록 기호 스타일

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

(2) 목록 기호로서의 그림

과 동일합니다. {list- style-image:url();}

(3) 목록 기호 위치 정의

{list-style-position:ouside/inside;}

( 4) 목록 기호 제거

{list-style:none;}

4. 배경 속성

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

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

（ 1) jpg: 손실 압축은 품질이 떨어지며 색상이 풍부한 이미지에 적합합니다
(2) gif: 손실 압축은 색상이 손실되고 투명도를 지원하며 애니메이션은 색상이 적은 이미지에 적합합니다
(3) png: 색상이 적은 이미지 손실, 애니메이션 지원 안 함, 투명도 지원, 불꽃놀이입니다.
참고: png 저장에 대한 요구 사항이 높고, gif 저장에 대한 요구 사항이 높으며, 호환되는 경우 gif를 사용합니다.

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

{float:left/right/none}
(1) Clear float {clear:left/right/both;}
설명: 다음 요소 플로팅 요소 앞에 있는 요소가 (플로팅이 아닌) 표준 흐름의 요소인 경우
플로팅 요소 뒤의 요소 위치는 브라우저에 따라 다릅니다. 플로팅된 요소 뒤에 있는 플로팅되지 않은 요소는 원래 플로팅 요소 위치에 압착됩니다.
(2) 높이 축소 해결
높이 축소: 결과 조건은 상위 요소가 높이를 쓰지 않고 하위 요소가 부동하는 것입니다.
해결책: (1) 빈

을 추가합니다. 부동 요소 끝에

, 이 div에 대해 div{clear:both;}
문을 작성합니다. (2) CSS의 상위 요소에 문을 추가합니다. div{overflow:hidden;}

7. 상자 모델

1. 정의: 웹페이지 요소가 표시되는 방식과 각 요소의 관계.
Border border Padding 내용 영역

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

2. 여백
(1) 여백: 여백 빈 영역에
(2) 하위 요소에 여백 속성이 추가됩니다.                                                                                🎜>값 1개: {여백: 20px}={패딩: 20 px 20px 20px;}
두 가지 값: { margin: 20px 30px;}={padding: 20px 30px 20px 30px;}
두 값:{margin: 20px 30px 40px;}={padding: 20px 30px 40px 30px;}
분할: {margin-top/ 오른쪽/아래/왼쪽:값;}