CSS 최적화 2-(일반적인 CSS 약어 구문 요약)_경험 교류

약어를 사용하면 CSS 파일의 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙은 다음과 같습니다:

Color
16진수 색상 값, 각 두 자리의 값이 동일하면 반으로 약어화할 수 있습니다. 예:
#000000 #000;# 336699는 #369로 축약될 수 있습니다.

Box size
에는 일반적으로 다음과 같은 네 가지 쓰기 방법이 있습니다.

property:value1; 값 value1; value1 value2; 위쪽 및 아래쪽 값은 value2임을 의미합니다.
property:value1 value2 value3; right, left 값은 2, 아래쪽 값은 value3
property:value1 value2 value3 value4 4개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽을 차례로 나타냅니다.
기억하기 편리한 방법은 시계방향, 위쪽입니다. , 오른쪽, 아래쪽, 왼쪽. 여백 및 패딩의 구체적인 적용 예는 다음과 같습니다.
margin:1em 0 2em 0.5em

Border(border)
border의 속성은 다음과 같습니다.

border-width:1px ;
border-style:solid;
border-color:#000;
는 한 문장으로 축약될 수 있습니다: border:1px solid #000; 구문은 border:width 스타일 색상입니다.

배경
배경 속성은 다음과 같습니다. gif);
background-repeat :no-repeat;
background-attachment:fixed;
background-position:0
한 문장으로 축약할 수 있습니다: background:#f00 url( .gif) 반복 없음 고정 0 0;

구문은 배경:컬러 이미지 반복 첨부 위치

하나 이상의 속성 값을 생략할 수 있습니다. 브라우저 기본값은 다음과 같습니다.

색상: 투명
이미지: 없음
반복: 반복
첨부: 스크롤
위치: 0% 0%
글꼴 (글꼴)
글꼴의 속성은 다음과 같습니다:

font-style:italic
font-variant:small-caps; Font-size:1em;
line-height:140% ;
font-family:"Lucida Grande",sans-serif
한 문장으로 축약할 수 있습니다. /140% "Lucida Grande",sans-serif;

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

목록
기본 점과 일련번호를 취소하려면 list-style:none;을 쓰면 됩니다.

목록 속성은 다음과 같습니다.

list-style -type:square;
list-style-position:inside;
list-style-image:url(image.gif)
list-style:square inside url( 이미지.gif)