CSS 코드의 단순화된 약어에 대한 간략한 토론

요즘 많은 사람들이 사용하는 CSS 코드는 실제로 매우 복잡하며 단순화되거나 축약될 수 있습니다.
이번에는 제가 알고 있는 내용을 바탕으로 CSS 코드의 단순화된 약어에 대해 이야기해보겠습니다.

1. 모든 CSS 코드는 하나의 스타일 태그만 사용하면 됩니다. 각 단락에 하나씩 추가할 필요는 없습니다. 예:
body{배경:url("") 반복 고정!중요;}

.bodybg{배경:url("") 반복 없음 스크롤 없음!중요;}

다음으로 단순화하고 병합할 수 있습니다:

body{Background:url("") 반복 고정!중요;}
.bodybg{배경:url("") 반복 없음 스크롤 없음!중요; }

블로그 각 부분의 배경 변경, 블로그 각 부분의 글꼴 색상 변경, 템플릿 너비 변경, 마우스, 스크롤바 등 CSS 코드를 병합할 수 있습니다. 스타일 태그.


2. 색상: 16진수 색상 값입니다. 각 두 자리의 값이 동일하면 반으로 축약할 수 있습니다. 예:

Black #000000
흰색 #fffff는 #fff로 축약될 수 있습니다.
빨간색 #ff0000은 #f00으로 축약될 수 있습니다.
파란색 #0000ff는 #00f로 축약될 수 있습니다. #369로 축약할 수 있습니다.

검정색, 흰색, 빨간색, 파란색, 녹색, 노란색 등과 같은 일부 일반적인 색상. 코드가 기억나지 않는 경우 해당 영어 검정, 흰색, 빨간색, 파란색, 녹색을 사용할 수 있습니다. 노란색 등으로 표현합니다.

3. 동일한 로고의 여러 속성을 제어할 때 여러 속성을 중괄호 안에 넣고 세미콜론으로 서로 다른 속성을 구분할 수 있습니다. 예를 들어, 큰 배경 및 스크롤 막대:

body {배경:url("") 반복 고정!중요;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT -색상: #fff;
스크롤바-그림자 색상: #fff;
스크롤바-3DLIGHT-색상: #000;
스크롤바-화살표-색상: #000;
스크롤바-트랙 색상 : # EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}

는 다음과 같이 단순화하고 병합할 수 있습니다.

body {Background:url("") Repeatfixed!important;
스크롤바 -얼굴 색상: #EDF6F5;
스크롤바-밝은 색상: #fff;
스크롤바-그림자 색상: #fff;
스크롤바-3DLIGHT-색상: #000;
SCROLLBAR-ARROW -COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}


4. 동일한 속성을 함께 결합하거나 쉼표로 구분할 수도 있습니다. 예를 들어

.bodytop{배경:#transparent;}
.bodybg{배경:#transparent;}

을 단순화하여

으로 병합할 수 있습니다. bodytop,.bodybg{배경:#transparent;}
.bodytop{display:none;}
.bodyBottom{display:none;}

은 다음과 같이 단순화하고 병합할 수 있습니다.

.bodytop, .bodyBottom{display:none;}


.feeds .text a{color:#000;}
.feeds .function a{color:#000;}
병합을 단순화할 수 있습니다. 대상:

.feeds .text a,.feeds .function a{color:#000}

더 명확하게 설명하기 위해 너무 많은 예를 들었습니다. 약어 코드를 단순화하려면 자신의 상황을 기반으로 해야 합니다.

현재 많은 사람들이 블로그에 게시한 홈페이지 투명 템플릿의 코드처럼:

.logo
{Background:#transparent}
.banner
{ 배경:#투명 }
.메뉴
{배경:#투명}
.bodyBg
{배경:#투명}
.bodyBottom
{배경:#투명}
.feeds .up
{배경:#투명}
.feeds .down
{배경:#투명}
.feeds .function
{배경:#투명}
.feeds .page
{배경:#투명}
.links .up
{배경:#투명}
.links .down
{배경:#투명}
.links .mid
{ 배경:#투명}
.photo .mid
{배경:#투명}
.label .mid
{배경:#투명}
.calendar .mid
{배경: #투명}
.callboard .up
{배경:#투명}
.callboard .down
{배경:#투명}
.callboard .mid
{ 배경:#투명 }
.gbook .up
{배경:#투명}
.gbook .down
{배경:#투명}
.links .more
{배경: #transparent}
.add .ico
{Background:#transparent}
.add
{Background:#transparent}

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

.logo, .banner,.menu,
.bodyBg,.bodyBottom,.feeds .up,.feeds .down,.feeds .function,.feeds .page,
.links .up, .links .down,.links .mid,.photo .mid,.label .mid,
.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,
.gbook .up ,.gbook .down,.links.more,.add .ico,.add
{배경:#transparent}


6. 배경

다음과 같습니다:

배경 색상:#f00;
배경 이미지:url("");
배경 반복:반복 안 함;
배경 첨부:고정;
배경 위치:0 0;

은 한 문장으로 축약할 수 있습니다: background:#f00 url("") no-repeatfixed 0 0;

구문은 다음과 같습니다: background:color 이미지 반복 첨부 위치;


7. 테두리

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

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

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

구문은 다음과 같습니다: border:width style color;


9. 글꼴(fonts)

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

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

다음으로 축약 가능: 글꼴 :italic small-capsbold 1em/140% Lucida Grande",sans-serif;

글꼴 정의를 축약하는 경우 글꼴 크기와 글꼴 계열의 두 가지 값을 정의해야 합니다.
10. CSS 코드는 형식이 올바른 경우 대소문자, 줄 바꿈 또는 공백을 고려하지 않습니다.

저희 블로그에서 CSS 약어를 사용하면 코드를 단순화하고 중복을 줄일 수 있다는 장점이 있지만 웹사이트를 구축하는 데 있어서는 매우 중요합니다.
CSS 스타일 시트 파일을 호출하는 속도는 관련이 있습니다. 따라서 파일이 작을수록 호출 속도가 빨라집니다.
어떤 측면에서는 웹사이트 페이지의 로딩 속도를 향상시킬 수 있으며 속도는 웹사이트에 중요한 요소입니다.

그러므로 CSS 스타일 시트 파일을 만들 때 약간의 공백
등 코드를 축약하고 단순화하도록 노력해야 하며, 예를 들어 전체 템플릿 6에서 제공한 코드의 주석은 "Lock Heart for You" 등은 최대한 삭제해야 합니다.


다음은 CSS 약어 속성 및 해당 속성이 나타내는 일반 속성 목록입니다.

배경: 배경 첨부, 배경 색상, 배경 이미지, 배경 위치, 배경 반복
테두리 (테두리): 테두리 색상, 테두리 스타일, 테두리 너비
border-bottom(하단 테두리): 하단 테두리 색상, 하단 테두리 스타일, 하단 테두리 너비
border-left(왼쪽 테두리): 왼쪽 측면 테두리 색상, 왼쪽 테두리 스타일, 왼쪽 테두리 너비
border-right(오른쪽 테두리): 오른쪽 테두리 색상, 오른쪽 테두리 스타일, 오른쪽 테두리 너비
border-top(위쪽 테두리): 위쪽 테두리 색상, 위쪽 테두리 스타일, 위쪽 테두리 너비
큐(사운드 프롬프트): 전면 프롬프트, 포스트 프롬프트
글꼴(글꼴): 글꼴, 글꼴 크기, 글꼴 스타일, 글꼴 두께, 글꼴 변형, 줄 높이, 글꼴 크기 조정, 글꼴 늘이기
목록 -style(목록 스타일): 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일 유형
margin(공백): 상단 여백, 오른쪽 여백, 하단 여백, 왼쪽 여백
윤곽선: 외곽선 색상, 외곽선 스타일, 외곽선 너비
패딩: 위쪽 간격, 오른쪽 간격, 아래쪽 간격, 왼쪽 간격
일시 중지: 뒤로 일시 중지, 앞쪽 일시 중지
첨부 파일은 효과를 실시간으로 표시할 수 있는 매우 사용하기 쉬운 CSS 코드 편집기입니다.
()