[CSS Note 8] CSS 코드 약어, 대역폭을 덜 차지함

1. 박스 모델 코드 약어
박스 모델을 얘기할 때 기억하세요, 여백(margin), 패딩(padding), 테두리(border)는 상하좌우 4방향으로 설정됩니다. 시계 방향으로 설정: 오른쪽 위, 왼쪽 아래. margin과 padding에 대한 구체적인 적용 예시는 다음과 같습니다.

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

은 대개 다음과 같은 3가지 약어를 가집니다.

1. , left 는 동일합니다. 예를 들어 다음 코드는

margin:10px 10px 10px 10px;

은 다음과 같이 축약할 수 있습니다.

margin:10px;

2. top 및 하단은 동일하며 왼쪽과 오른쪽의 값은 다음 코드와 같이 동일합니다.

margin:10px 20px 10px 20px;

은 다음과 같이 축약할 수 있습니다. 🎜> 3. 다음 코드와 같이 왼쪽과 오른쪽의 값이 동일할 경우

margin:10px 20px;

은 다음과 같이 축약할 수 있습니다.

margin:10px 20px 30px 20px;

참고: padding과 border의 약어 방식은 margin과 동일합니다.

margin:10px 20px 30px;

2. 색상 값 약어

설정한 색상이 16진수 색상 값인 경우 각 두 자리의 값이 동일하면 CSS 스타일도 약어로 표시할 수 있습니다. , 약어 절반을 사용할 수 있습니다.

예시 1:

3. 글꼴 약어

웹 페이지의 글꼴 CSS 스타일 코드에도 고유한 글꼴 약어 설정 방법이 있습니다. 웹 페이지의 경우:

p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

실제로 많은 코드 줄을 한 문장으로 축약할 수 있습니다.

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }

참고:

body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }

1. 이 약어를 사용하려면 최소한 글꼴 크기 및 글꼴 모음 속성을 지정해야 하며, 다음과 같은 경우 다른 속성(예: 글꼴 두께, 글꼴 스타일, 글꼴 변형, 줄 높이)이 자동으로 기본값을 사용합니다. 지정되지 않았습니다.

2. 축약시 글자크기와 줄높이 사이에 대각선으로 "/"를 추가합니다.

일반적으로 중국어 사이트의 경우 영어가 상대적으로 적기 때문에 다음과 같은 약어 코드를 더 많이 사용합니다.

글꼴 크기, 줄 간격, 중국어 글꼴, 영어만 있습니다. 글꼴 설정.

body{ font:12px/1.5em "宋体",sans-serif; }

위 내용은 [CSS Note 8] CSS 코드 약어로 대역폭을 덜 차지합니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!