웹 프론트엔드 개발 CSS 기본 스타일 요약-HTML 튜토리얼-php.cn

색상 및 단위 사용

색상
- 색상 이름을 사용하여 색상을 나타냅니다(예: 빨간색
- 16진수를 사용하여 데모를 나타냅니다. 예: #FF0000
- 색상을 표현하려면 rgb 숫자값을 사용하고, rgb(빨간색, 녹색, 파란색)는 각각 0~255 사이입니다
  일반적으로 16진수를 사용하여 색상을 표현합니다
단위
- px: 픽셀, 해상도 설정과 관련됩니다.
- %는 브라우저의 백분율에 상대적입니다. 너비는 설정할 수 있지만 높이는 설정할 수 없습니다.

텍스트 스타일(텍스트)

색상: 텍스트 색상 설정
text-align: 텍스트 정렬 설정
- 센터
- 왼쪽
- 그렇습니다
letter-spacing: 단어 간격/글자 간격
단어 간격: 단어 간격, 공백이 있는 경우 설정, 중국어의 경우 공백을 참조하세요.
line-height: 줄 높이(두 번째 줄의 줄 높이 = 첫 번째 줄의 하단부터 세 번째 줄의 상단까지)
텍스트 들여쓰기: 일반적으로 30픽셀의 경우 2
텍스트 장식: 텍스트 장식
- 밑줄: 밑줄
- 윗줄: 윗줄
- 줄바꿈: 취소선
- 깜박이 플래시(사용불가)
text-transform: 대소문자 변환
- 대문자: 모두 대문자
- 소문자: 모두 소문자
- 대문자화: 각 단어는 대문자로 시작합니다.
text-shadow: 텍스트 그림자를 만듭니다(가로 오프셋 px, 세로 오프셋 px, 흐림 수준 px, 그림자 색상). 흐림 수준 px 값이 높을수록 더 흐려집니다.
글꼴 설정:

글꼴 스타일: 글꼴 스타일 이탤릭체, 경사 이탤릭체
font-size: 글꼴 크기를 설정합니다
font-weight: 글꼴의 두께를 설정합니다. 굵은 글씨가 가장 두껍습니다
font-family: 텍스트 글꼴, 일반 스크립트, 공식 스크립트 등을 설정합니다.
글꼴 약어 속성: 스타일 가중치 크기 계열(공백) 순서는 이 형식이어야 합니다. 일반적으로 약어 속성을 사용한 후 문자 간격을 글꼴 속성 뒤에 입력합니다. 그렇지 않으면 덮어쓰게 됩니다.

테두리 및 배경

- 없음 테두리 없음
  점선
  실선
  이중 이중선
  홈 홈선
  점선 테두리
  삽입 포함된 시작 볼록
  능선 능선 경계

기타 스타일(표, 목록, 투명도, 커서)

목록
투명성
커서 모양

박스 모델

박스 모델은 요소, 패딩, 테두리, 여백으로 구분됩니다.

1. 특정 크기의 요소를 설정합니다

<code class="hljs groovy"><span class="hljs-number">1). <span class="hljs-string">width:设置元素宽度
<span class="hljs-number">2). <span class="hljs-string">height:设置元素高度</span></span></span></span></code>

로그인 후 복사

2. 패딩 설정

패딩 상단/하단/오른쪽/왼쪽
패딩: 약어

3. 여백(테두리부터 브라우저 가장자리 또는 다음 상자까지의 거리)을 설정합니다.

여백-위/아래/왼쪽/오른쪽
여백: 약어

4. 최소 및 최대 크기 설정(너비를 백분율로 설정한 경우 브라우저를 확장 또는 축소하거나 화면이 크거나 작은 모니터로 변경한 후 요소가 어긋나거나 넘치지 않도록 방지)

min-width: 최소값은 두 div 너비의 합입니다
최대 너비: 최대값

5. 요소 콘텐츠 오버플로 처리

overflow-x/y: x 또는 y축 오버플로
overflow: 약어: 스크롤 스크롤 막대를 설정합니다(오버플로 처리 방법)

6. 요소 유형 변경

1) 유형은 다음과 같습니다.

인라인 요소: 너비와 높이는 페이지에서 설정할 수 없으며 행, b, 범위를 차지하지 않습니다
inline-block 인라인 블록 수준 요소: 행을 차지할 수 없지만 .img 요소의 너비와 높이를 설정할 수 있습니다.
block 블록레벨 요소: 전용 라인을 차지하며 width, height, p, div 요소를 설정할 수 있습니다

2).요소 유형 표시 변경:

요소 유형은 서로 변환될 수 있으며, 변환 후에는 요소의 속성도 변경됩니다
div는 일반적으로 인라인 요소로 변환되지 않아 손실되며 높게 설정할 수 없습니다.

3) 숨겨진 요소: 표시:없음

7. 플로팅 및 스택 요소 차단

부동:부동:왼쪽/오른쪽
함께 쌓인 요소 제거:clear:both(왼쪽과 오른쪽 모두 제거)

8. 사례:

Baidu 페이지 구축:

팁: div를 중앙에 배치하려면 직접 여백: 0 auto;
처음에는 브라우저 기본 기능을 구현하지 않으려면: *{margin:0px}
div 블록이 넘치는 것을 방지하기 위해 최대값과 최소값을 설정하세요. 최소값은 왼쪽과 오른쪽 div의 합입니다
가운데 세로 텍스트: 줄 높이
탐색의 경우 li 태그 외부에 링크 태그를 추가하세요

레이아웃 스타일

1. 포지셔닝 방법 위치

정적: 기본적으로 요소는 일반 요소, 문서 흐름 위치 지정, 위에서 아래로
상대적: 요소의 위치는 일반 위치를 기준으로 합니다. 변위 전의 위치는 다른 요소에서 사용할 수 없습니다. 일반적으로 요소의 위치를 미세 조정하려면 상단만 사용할 수 있습니다. ,왼쪽 이전 위치에 비해 이동한 것 같습니다
고정(fixed): 브라우저 창을 기준으로 위치 지정, 자주 사용되는!!!, 위치는 변위 전에 점유되지 않으며 상하좌우로 사용할 수 있습니다. 🎜>작은 광고에 흔히 사용되는 기술 스크롤바는 계속 움직이며 위치는 변하지 않습니다. 문서 흐름에서 벗어나 위쪽, 아래쪽, 왼쪽, 오른쪽 위치에 떠 있게 됩니다. 예를 들어 top50px는 위쪽으로 50px 이동하지 않지만 요소는 상대적으로 상단 테두리에서 50px 거리에 버튼을 설정하는 것도 사용할 수 있으며 스크롤 막대를 당겨도 위치가 변경되지 않습니다.
절대(absolute): 상대 위치 값이 정적이 아닌 조상 요소입니다. 조상 요소는 조상 요소에 따라 변경되며, 조상 요소는 누가 변경되는지에 따라 정적일 수 없습니다. (기본값은 정적입니다. )
은 상위 요소와 하위 요소 또는 상위 요소와 하위 요소 사이의 위치 변경이 발생하는 경우
2. 포지셔닝 레이아웃

위/아래/왼쪽/오른쪽

3. Z-인덱스

요소 및 요소의 표시 레이어 수를 설정하는 데 사용됩니다.
위치와 함께 사용해야 합니다
.
전환, 변신

1. 전환
전환: 요소가 한 스타일에서 다른 스타일로 점진적으로 변경됩니다.
속성:
전환: 약식(속성 기간 타이밍-함수 지연)

역전환:

마우스를 올려서 div에 붙여넣으면 완료