2021 CSS에서 일반적으로 사용되는 코드 모음

일반적으로 사용되는 CSS 코드 전체 목록

html+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: 매개변수 매개변수 값:

left: 왼쪽 정렬

right : 오른쪽 정렬

center: 가운데 정렬

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

4. 세로 정렬

vertical-align: 매개변수top: 위쪽 정렬

bottom: 아래쪽 정렬

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

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

baseline: 기준선 정렬

middle: 가운데 정렬

sub: 첨자 형식으로 표시

super: 형식으로 표시 of superscripts

5. 텍스트 들여쓰기

text-indent: 들여쓰기 거리 12px는 텍스트 거리

6

, 공백

white-space: 매개변수 normal Normal

과 같습니다. 미리 예약됨

줄바꿈 없는 nowrap

7. 표시 스타일

display: 매개변수 매개변수 값 범위:

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

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

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

none: 표시 없음

5. 상자

1, 높이 2, 너비

3, 패딩

4, margin

5 , float(float): 가로 메뉴와 같이 블록 수준 요소를 연속적으로 배열할 수 있습니다.除6. 클리어 클리어 플로팅

6, 테두리

1, 스타일

테두리 스타일 매개변수

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

점선: 프레임이 점선입니다.

점선: 테두리 길고 짧은 선

solid: 테두리가 실선입니다.

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

2, width

border width 매개변수

3, color

border color 매개변수

7. 목록

list-style-type 목록 스타일

브라우저마다 목록 문자가 다를 수 있으며, 이는 웹 페이지에 영향을 줄 수 있으므로 웹 페이지의 목록 대부분은 배경 이미지로 표시됩니다. 사용자 인터페이스 스타일 제어

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=" 커서:sw -resize" 　　 왼쪽 하단 화살표 모양

읽어주신 모든 분들께 감사드리며, 많은 혜택이 있기를 바랍니다.

이 기사는 https://blog.csdn.net/xujiuba/article/details/78926554

추천 튜토리얼: "CSS Tutorial"

에서 복제되었습니다.

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