10가지 CSS 약어/최적화 팁 정리

약어의 가장 큰 장점은 CSS 파일의 크기를 크게 줄이고, 웹사이트의 전반적인 성능을 최적화하며, 읽기 쉽게 만들 수 있다는 것입니다. 다음은 CSS 약어 규칙에 대한 소개입니다. 모두에게 도움이 되었으면 좋겠습니다

CSS 약어는 여러 줄의 CSS 속성을 한 줄로 줄여서 말하는 것으로 CSS 코드 최적화 또는 CSS 약어로도 알려져 있습니다. CSS

약어의 가장 큰 장점은 CSS 파일의 크기를 대폭 줄이고 웹사이트의 전반적인 성능을 최적화하며 읽기 쉽게 만들 수 있다는 점입니다. 다음은 일반적인 CSS 약어 규칙을 소개합니다.

1. 상자 크기

여기에서는 주로 margin과 padding이라는 두 가지 속성에 사용됩니다. 그리고 동일합니다.

상자에는 위, 아래, 왼쪽, 오른쪽의 네 방향이 있으며 각 방향에는 여백이 있습니다.

margin-top:1px; 
margin-right:2px; 
margin-bottom:3px; 
margin-left:4px;

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

margin:1px 2px 3px 4px;

구문 여백: 오른쪽 위 왼쪽 아래

//四个方向的边距相同，等同于margin:1px 1px 1px 1px; 
margin:1px; 
//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px; 
//右边距和左边距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 3px; 
//注意，这里虽然上下边距都为1px，但是这里不能缩写。 
margin:1px 2px 1px 3px;

2. 테두리(border)

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

border-width:1px; 
border-style:solid; 
border-color:#000;

는 한 문장으로 축약할 수 있습니다.

border:1px solid #000;

구문 border:width style color;

3. 배경

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

background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0;

는 줄여서 쓸 수 있습니다. 문장:

background:#f00 url(background.gif) no-repeat fixed 0 0;

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

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

:

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0%

4. 글꼴(fonts)

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

font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:"Lucida Grande",sans-serif;

는 하나로 축약될 수 있습니다. 문장:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

참고로 약어를 사용하는 경우 글꼴 정의를 위해서는 글꼴 크기와 글꼴 패밀리 값을 두 개 이상 정의해야 합니다.

5. 목록

기본 점과 일련번호를 취소하려면 list-style:none;이라고 쓰면 됩니다.
목록의 속성은 다음과 같습니다. :

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

는 한 문장으로 축약 가능합니다:

list-style:square inside url(image.gif);

6. Color(컬러)

16진수 색상값으로, 각 두 자리의 값이 같으면 반으로 줄여서 표현할 수 있습니다. 예:

Aqua: #00ffff ——#0ff 
Black: #000000 ——#000 
Blue: #0000ff ——#00f 
Dark Grey: #666666 ——#666 
Fuchsia:#ff00ff ——#f0f 
Light Grey: #cccccc ——#ccc 
Lime: #00ff00 ——#0f0 
Orange: #ff6600 ——#f60 
Red: #ff0000 ——#f00 
White: #ffffff ——#fff 
Yellow: #ffff00 ——#ff0

7. 속성 값은 0입니다.

작성 원칙은 CSS 속성 값이 0인 경우입니다. , 단위(예: px/em)를 추가하려면 다음과 같이 작성할 수 있습니다.

:

padding: 10px 5px 0px 0px;

이렇게 써보세요. :

padding: 10px 5px 0 0;

8. 마지막 세미콜론

마지막 속성 값 뒤의 세미콜론은 쓸 필요가 없습니다. :

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal; 
}

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

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal 
}

9. )

You may 다음과 같이 작성됩니다:

h1{ 
font-weight:bold; 
} 
p{ 
font-weight:normal; 
}

는 다음과 같이 축약될 수 있습니다:

h1{ 
font-weight:700; 
} 
p{ 
font-weight:400; 
}

10. 둥근 모서리 Radius(border-radius)

border-radius는 둥근 테두리를 구현하는 데 사용되는 CSS3에 새로 추가된 속성입니다.

-moz-border-radius-bottomleft:6px; 
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px; 
-webkit-border-bottom-left-radius:6px; 
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px; 
border-bottom-left-radius:6px; 
border-top-left-radius:6px; 
border-top-right-radius:6px;

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

-moz-border-radius:0 6px 6px; 
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px;

구문 border-radius:topleft topright Bottomright Bottomleft

위 내용은 10가지 CSS 약어/최적화 팁 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!