일반적으로 사용되는 CSS 약어의 구문 요약_CSS/HTML

약어를 사용하면 CSS 파일의 크기를 줄이고 읽기 쉽게 만드는 데 도움이 됩니다. CSS 약어의 주요 규칙은 다음과 같습니다.

색상

16진수 색상 값은 각 두 자리의 값이 동일할 경우 절반으로 축약할 수 있습니다. 예:
#000000은 #000으로 축약할 수 있고, #336699는 #369로 축약할 수 있습니다.

상자 크기

일반적으로 네 가지 작성 방법이 있습니다.

• property:value1;은 모든 가장자리에 value1 값이 있음을 의미합니다.
• property:value1 value2; 위쪽과 아래쪽의 값은 value1이고 오른쪽과 왼쪽의 값은 value2임을 의미합니다.
• property:value1 value2 value3; 위쪽 값은 value1, 오른쪽 및 왼쪽 값은 value2, 아래쪽 값은 value3임을 의미합니다.
• property:value1 value2 value3 value4 4개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽을 차례로 나타냅니다.

기억하는 편리한 방법은 시계방향, 오른쪽 위, 왼쪽 아래입니다. 여백 및 패딩의 특정 적용 예는 다음과 같습니다.
margin:1em 0 2em 0.5em

테두리(국경)

테두리의 속성은 다음과 같습니다.

• 테두리 너비:1px;
• 테두리 스타일:단색;
• 테두리 색상:#000

은 한 문장으로 축약될 수 있습니다: border:1px solid #000;

구문은

테두리:너비 스타일 색상 입니다.

배경

배경의 속성은 다음과 같습니다.

배경색:#f00;
• 배경 이미지:url(배경.gif);
• 백그라운드 반복:반복 안 함;
• 배경 첨부:고정;
• 배경 위치:0 0

한 문장으로 축약할 수 있습니다: background:#f00 url(Background.gif) no-repeat fix 0 0;

구문은

배경:컬러 이미지 반복 첨부 위치;

입니다. 하나 이상의 속성 값을 생략할 수 있습니다. 생략하면 속성 값은 브라우저 기본값을 사용합니다.

색상: 투명

이미지: 없음
• 반복: 반복
• 첨부파일: 스크롤
• 순위: 0% 0%
글꼴

글꼴의 속성은 다음과 같습니다.

글꼴 스타일:기울임꼴;

글꼴 변형:작은 대문자;
• 글꼴 두께:굵게;
• 글꼴 크기:1em;
• 줄 높이:140%;
• 글꼴 계열:"Lucida Grande",sans-serif
한 문장으로 축약할 수 있습니다: 글꼴: 기울임꼴 작은 대문자 굵게 1em/140% "Lucida Grande",sans-serif;

글꼴 정의를 축약하는 경우 글꼴 크기와 글꼴 계열의 두 가지 값을 정의해야 합니다.

목록

기본 점과 일련번호를 취소하려면 list-style:none;,

이라고 쓸 수 있습니다.

list의 속성은 다음과 같습니다.

목록 스타일 유형: 정사각형;

목록 스타일 위치:내부;
• 목록 스타일 이미지:url(image.gif)
은 한 문장으로 축약될 수 있습니다: list-style:square inside url(image.gif);