일반적으로 사용되는 CSS 코드 종합 모음(업무에 필수)

html+css를 사용하면 웹 페이지의 레이아웃을 매우 편리하게 수행할 수 있지만 모든 속성이나 코드를 염두에 두어야 하는 것은 아닙니다. 최근 CSS에서 자주 사용되는 코드를 정리하여 나중에 확인하고 공유할 수 있습니다. 동시에, 이것이 당신에게 유용하길 바랍니다.

1. 텍스트 설정

1. 글꼴 크기: 글꼴 크기 매개변수

3. 글꼴 두께: 글꼴 두께

4.

웹에 안전한 색상 사용에 주의하세요

2. 하이퍼링크 설정

text-꾸밈: 매개변수 의 주요 목적은 브라우저가 텍스트 링크를 표시할 때 밑줄을 변경하는 것입니다.

매개변수 값 범위:

underline: 텍스트에 밑줄

overline: 텍스트에 밑줄

line-through: 텍스트에 취소선

blink: 텍스트를 깜박이게 함

none: 위 내용을 표시하지 않음 모든 효과

3. 배경색

1. 배경색배경색: 매개변수

2. 배경 이미지

배경 이미지: url(URL)

URL은 배경 이미지의 저장 경로이며 없음을 의미합니다.

3. 배경 이미지 반복

background-repeat: 매개변수

매개변수 값 범위:

no-repeat: 타일링된 배경 이미지를 반복하지 않음

repeat-x: 이미지를 수평 방향으로만 타일링합니다

Repeat-y: 이미지 타일을 세로 방향으로만 만듭니다

배경 이미지 반복 속성을 지정하지 않으면 브라우저는 기본적으로 가로 및 세로 방향으로 타일링되는 배경 이미지를 사용합니다.

4. 배경 이미지 고정

배경 이미지 고정은 웹 페이지 스크롤에 따라 배경 이미지가 스크롤되는지 여부를 제어합니다. 배경 이미지 고정 속성을 설정하지 않으면 웹 페이지 스크롤에 따라 브라우저의 기본 배경 이미지도 함께 스크롤됩니다. 스크롤할 때 지나치게 화려한 배경 이미지가 시청자의 주의를 돌리는 것을 피하기 위해 일반적으로 고정으로 설정됩니다.

Background-attachment: 매개변수

매개변수 값 범위:

fixed: 웹 페이지를 스크롤할 때 배경 이미지는 브라우저 창에 대해 고정됨

scroll: 웹 페이지를 스크롤할 때 배경 이미지가 브라우저 창과 함께 스크롤됩니다

4. 블록

1. word-spacing: 간격 거리

2. 글자 간격

letter-spacing: 글자 간격

3. 텍스트 정렬

text-align: 매개변수

매개변수 값:

왼쪽 정렬

right: 오른쪽 정렬

center : 가운데 정렬

justify: 상대적인 왼쪽 및 오른쪽 정렬

4. 수직 정렬

vertical-align: 매개변수

top: 위쪽 정렬

bottom: 아래쪽 정렬

text-top: 상대 텍스트 위쪽 정렬

text-bottom : 상대 텍스트 아래쪽 정렬

baseline: 기준선 정렬

middle: 가운데 정렬

sub: 아래 첨자 형식으로 표시

super: 위쪽 첨자 형식으로 표시

텍스트 들여쓰기.

text-indent: 들여쓰기 거리

12px는 텍스트 거리

6과 동일합니다. Space

white-space: 매개변수

normal Normal

nowrap 줄바꿈 없음

7.

display: 매개변수

매개변수 값 범위:

block: 블록 수준 요소, 개체 앞뒤에 줄 바꿈

inline: 개체 앞뒤에 줄 바꿈 없음

list-item: 개체 앞뒤에 줄 바꿈 개체, 글머리 기호 추가됨

none: 표시 없음

five , box

1, height height

2, width width

3, padding inner margin4, margin external margin

5, float(floating) ): 블록 수준 요소를 행으로 정렬할 수 있습니다(예: 가로 메뉴).

6. 클리어 클리어 플로팅

6. 테두리

1. 스타일

테두리 스타일 매개변수

테두리 스타일 매개변수: 없음: 테두리 없음

점선: 테두리 길고 짧은 선의 경우

solid: 테두리가 실선입니다

double: 테두리가 이중선입니다

2. Width

border width 매개변수

3. List

list- 스타일형 목록 스타일

브라우저마다 목록 문자가 다를 수 있으며, 이는 웹 페이지에 영향을 줄 수 있으므로 웹 페이지의 대부분 목록은 배경 이미지와 함께 표시됩니다.

사용자 인터페이스 스타일 제어

8. 마우스

커서: 마우스 모양 매개변수

CSS 마우스 모양 매개변수 표:

마우스 모양: CSS 코드

style="cursor:hand" 　　 손 모양

style= "cursor:crosshair" 십자 모양

style="cursor:text" 텍스트 모양

style="cursor:wait" 모래시계 모양

style="cursor:move" 십자 화살표 모양:

style=" 커서:도움말 " 물음표 모양

style="cursor:e-resize" 오른쪽 화살표 모양

style="cursor:n-resize" 위쪽 화살표 모양

style="cursor:nw-resize" 왼쪽 위 화살표 모양

style="cursor:w-resize"  왼쪽 화살표 모양

style="cursor:s-resize"  아래쪽 화살표 모양

style="cursor:se-resize"  오른쪽 아래 화살표 모양

style="cursor:sw-resize" 왼쪽 하단 화살표 모양

위 내용은 일반적으로 사용되는 CSS 코드 종합 모음(업무에 필수)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!