>  기사  >  웹 프론트엔드  >  일반적으로 사용되는 CSS 약어 구문 요약

일반적으로 사용되는 CSS 약어 구문 요약

巴扎黑
巴扎黑원래의
2017-04-05 17:13:21994검색

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

색상

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

​ #000000은 #000으로 축약될 수 있습니다. #336699는 #369로 축약될 수 있습니다. 상자 크기

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

    property:value1;은 모든 모서리가 value1 값임을 의미합니다. property:value1 value2; 위쪽과 아래쪽의 값은 value1이고 오른쪽과 왼쪽의 값은 value2라는 의미입니다

  • property:value1 value2 value3; 위쪽 값은 value1, 오른쪽 및 왼쪽 값은 value2, 아래쪽 값은 value3임을 의미합니다

  • 속성:값1 값2 값3 값4; 4개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽을 나타냅니다
  • 기억하는 편리한 방법은 시계 방향, 오른쪽 위, 왼쪽 아래입니다. 여백 및 패딩의 구체적인 적용 예는 다음과 같습니다.
  • 여백:1em 0 2em 0.5em;

    테두리(border)
  • 테두리의 속성은 다음과 같습니다.

테두리 너비:1px;

    테두리 스타일:단색;

  • 테두리 색상:#000;
  • 한 문장으로 축약할 수 있습니다: border:1px solid #000;
  • 구문은
    테두리:너비 스타일 색상

  • 입니다. 배경

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

배경색:#f00;

    배경 이미지:url(배경.gif);

  • 배경 반복:반복 안 함;

  • 배경 첨부:고정;

  • 배경 위치:0 0;
  • 한 문장으로 축약할 수 있습니다: background:#f00 url(Background.gif) no-repeatfixed 0 0;
  • 구문은
    배경:컬러 이미지 반복 첨부 위치;

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

색상: 투명

    이미지: 없음

  • 반복: 반복

  • 첨부 파일: 스크롤

  • 게재순위: 0% 0%
  • 글꼴(fonts)
  • 글꼴의 속성은 다음과 같습니다.

  • 글꼴 스타일:기울임꼴;

    글꼴 변형:작은 대문자;

  • 글꼴 두께:굵게;

  • 글꼴 크기:1em;

  • 줄 높이:140%;

  • 글꼴 계열:"루시다 그란데",sans-serif;
  • 한 문장으로 축약할 수 있습니다: 글꼴:italic small-caps Bold 1em/140% "Lucida Grande",sans-serif;
  • 글꼴 정의를 축약하는 경우 글꼴 크기 및 글꼴 계열의 두 가지 값을 정의해야 합니다.

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

    이라고 쓸 수 있습니다. list의 속성은 다음과 같습니다.

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

    목록 스타일 위치:내부;

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

위 내용은 일반적으로 사용되는 CSS 약어 구문 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.