Toptal의 빠르고 실용적인 CSS 치트 시트

통사론

박스 모델

/* 코멘트 */

@미디어 유형 {

선택기 {

재산 가치;

}

}

참고: 미디어 유형은 선택 사항입니다.

인라인 스타일

<태그>

임베디드 스타일

<머리>

<스타일 유형="텍스트/css">

선택기 { 속성: 값; }

</스타일>

</head>

외부 스타일 시트

<머리>

<link rel="스타일시트"

type="text/css" href="style.css" />

</head>

상자

여유

마진 탑
여백 오른쪽
여백-하단
여백-왼쪽

선택기

심

패딩 탑
패딩 오른쪽
패딩 바닥
패딩 왼쪽

*

모든 요소

꼬리표

모든 태그 요소

국경

보더 탑
경계 오른쪽
경계 바닥
경계 왼쪽

태그 *

태그 내의 모든 요소

태그 tag2

태그 내의 tag2 요소

테두리 색상

테두리 상단 색상
테두리 오른쪽 색상
테두리 바닥 색상
테두리 왼쪽 색상

태그, 태그2

모든 tag 및 tag2 요소

태그 > 태그2

tag2는 tag의 자식입니다.

테두리 스타일

보더 탑 스타일
테두리 오른쪽 스타일
보더 바텀 스타일
테두리 왼쪽 스타일

태그 + 태그2

태그가 앞에 오는 tag2

.수업

'class' 클래스가 있는 요소

테두리 너비

테두리 상단 너비
테두리 오른쪽 너비
테두리 하단 너비
테두리 왼쪽 너비

태그 클래스

클래스가 'class'인 모든 태그

#ID

ID가 'id'인 요소

크기 및 색상

태그#id

id가 'id'인 태그

상대적 크기

엠 | 렘 | 전 | 채널

폭스바겐 | vh | 가상 머신 | vmax | %

의사 선택자

:활동적인

활성 요소에 스타일 추가

절대 크기

cm | mm | 입력

픽셀 | 태평양 표준시 | PC

:후에

요소 뒤에 내용 추가

:전에

요소 앞의 광고 콘텐츠

그림 물감

16진수 #ff00ff

: 첫째 아이

첫 번째 자식에 스타일 추가

RGB RGB(255,0,255)

:첫 편지

첫 번째 문자에 스타일 추가

포지셔닝

:첫 줄

첫 번째 줄에 스타일 추가

위치

절대 | 고정 | 친척 | 정적 | 상속하다

:집중하다

초점이 맞춰진 요소에 스타일 추가

: 호버

마우스가 끝났을 때 스타일 추가

뜨다

왼쪽 | 오른쪽 | 없음 | 상속하다

:링크

방문하지 않은 링크에 스타일 추가

:방문

방문한 링크에 스타일 추가

오른쪽 상단,
하단, 왼쪽

가장자리에서 오프셋을 설정합니다.

텍스트

글꼴 패밀리

글꼴 모음을 지정합니다.

분명한

왼쪽 | 오른쪽 | 둘 다 | 없음 | 상속하다

글꼴 크기

글꼴 크기를 지정합니다

글꼴 스타일

정상 | 기울임꼴 | 비스듬한 | 상속하다

표시하다

문서 흐름에 배치하는 요소를 지정합니다.

글꼴 변형

정상 | 작은 대문자 | 상속하다

과다

보이는 | 숨겨진 | 스크롤 | 자동 | 상속하다

폰트

-무게

정상 | 굵은 | 대담한 | 라이터 | 정수(100-900) | 상속하다

시계

보이는 | 숨겨진 | 붕괴 | 상속하다

색깔

텍스트의 색상을 설정합니다

줄 높이

정상 | 정수 | % | 상속하다

Z-인덱스

자동 | 정수 | 상속하다

텍스트 정렬

왼쪽 | 오른쪽 | 센터 | 정당화하다 | 상속하다

치수

키

자동 | 정수 | % | 상속하다

텍스트-

장식

없음 | 밑줄 | 개요 | 라인스루 | 깜박 | 상속하다

최대 높이

없음 | 정수 | % | 상속하다

최대 너비

없음 | 정수 | % | 상속하다

텍스트 들여쓰기

정수 | % | 상속하다

최소 높이

정수 | % | 상속하다

텍스트-

변환

없음 | 대문자 | 대문자 | 소문자 | 상속하다

최소 너비

정수 | % | 상속하다

너비

자동 | 정수 | % | 상속하다

세로

-맞추다

정수 | % | 기준선 | 서브 | 슈퍼 | 상단 | 텍스트 상단 중간 | 바닥 | 텍스트 하단 | 상속하다

다른

배경

체재:

배경(색상)(이미지)

(반복) (위치)

하얀색

-공간

정상 | 지금 랩 | 사전 | 사전 라인 | 미리 포장| 상속하다

커서

커서 유형 설정

단어 간격

정상 | 길이 | 상속하다

인용 부호

따옴표 유형 설정