1. CSS 글꼴 속성 약어 규칙

일반적으로 CSS는 글꼴 속성을 설정하는 데 사용됩니다.
글꼴 두께:굵게;
글꼴 스타일:기울임꼴;
글꼴 변형:작은 대문자;
글꼴 크기:1em;
줄 높이:1.5em;
글꼴 계열:verdana,sans-serif;
한 줄에 모두 작성할 수 있습니다.
글꼴: 굵은 기울임꼴 작은 대문자 1em/1.5em verdana,sans-serif;
이것이 훨씬 간단해 보이지 않습니까? 주의할 점은 단 하나입니다. 이 단축 방법은 글꼴 크기와 글꼴 모음 속성이 동시에 지정된 경우에만 작동합니다. 또한, 글꼴 두께, 글꼴 스타일, 글꼴 변형을 설정하지 않으면 기본값을 사용하므로 이 점을 명심하세요.

2. CSS 테두리의 기본값

일반적으로 다음과 같이 테두리의 색상, 너비 및 스타일을 설정할 수 있습니다.
테두리: 3px 솔리드 #000;
이렇게 하면 테두리가 3픽셀 너비의 검은색 단색으로 표시됩니다. 그러나 실제로는 여기서만 스타일을 지정하면 됩니다.
스타일만 지정하면 다른 속성에는 기본값이 사용됩니다. 일반적으로 Border의 기본 너비는 중간이며 일반적으로 3~4픽셀과 같습니다. 기본 색상은 텍스트 색상입니다. 이 값이 딱 맞다면 그렇게 많은 설정을 할 필요가 없습니다.

3. 요소에 대해 두 개의 클래스를 동시에 사용하십시오.

일반적으로 하나의 요소를 하나의 클래스(Class)로 설정하지만, 그렇다고 두 개를 사용할 수 없는 것은 아닙니다. 실제로 다음과 같이 할 수 있습니다.

…

P 요소에 공백으로 구분된 두 클래스를 동시에 지정하면 텍스트 및 측면 클래스의 모든 속성이 P 요소에 추가됩니다. 두 클래스의 속성 사이에 충돌이 있는 경우 나중에 설정된 속성이 적용됩니다. 즉, CSS 파일에 나중에 배치된 클래스의 속성이 적용됩니다.
보충: ID의 경우

…

라고 쓸 수도 없고 이렇게 쓸 수도 없습니다.

4. 문서 인쇄용 CSS

많은 웹사이트에는 인쇄 전용 버전이 있지만 CSS를 사용하여 인쇄 스타일을 지정할 수 있으므로 실제로는 필요하지 않습니다.
즉, 페이지에 두 개의 CSS 파일을 지정할 수 있습니다. 하나는 화면 표시용이고 다른 하나는 인쇄용입니다.
<링크 유형=”text/css” rel=”스타일시트” href=”stylesheet.css” 미디어=”화면” />
<링크 유형=”text/css” rel=”스타일시트” href=”printstyle.css” 미디어=”인쇄” />
1행은 표시용이고 2행은 인쇄용입니다. 미디어 속성에 주의하세요.
그런데 인쇄용 CSS에는 무엇을 써야 할까요? 일반 CSS를 디자인하는 것과 같은 방식으로 설정할 수 있습니다. 디자인하는 동안 이 CSS를 설정하여 CSS를 표시하여 효과를 확인할 수 있습니다. 아마도 일부 장식 이미지를 끄거나 일부 탐색 버튼 등을 끄기 위해 display: none 명령을 사용할 수도 있습니다.

5. CSS 이미지 교체 기술

일반적으로 표준 HTML을 사용하여 이미지 대신 텍스트를 표시하는 것이 좋습니다. 이는 속도가 더 빠르고 가독성도 높습니다. 하지만 일부 특수 글꼴을 사용하려면 그림만 사용할 수 있습니다.
예를 들어, 물건 판매를 위한 아이콘을 만들려면 다음 이미지를 사용합니다.

물론 이것은 가능하지만 검색 엔진의 경우 일반 텍스트에 비해 대체 텍스트에 거의 관심이 없습니다. 이는 많은 디자이너가 검색 엔진을 속이기 위해 여기에 많은 키워드를 넣기 때문입니다. 따라서 방법은 다음과 같아야 합니다.

위젯 구매

하지만 특별한 글꼴은 없습니다. 동일한 효과를 얻으려면 다음과 같이 CSS를 디자인할 수 있습니다.
h1 { 배경: url(widget-image.gif) no-repeat height: 이미지 높이 text-indent: -2000px }
이미지 높이를 실제 이미지의 높이로 바꾸는 데 주의하세요. 여기서는 이미지가 배경으로 표시되며 들여쓰기가 -2000픽셀로 설정되어 있으므로 실제 텍스트는 화면 왼쪽에 2000포인트 나타나 보이지 않게 됩니다. 하지만 사진을 꺼두시는 분들은 아예 못 보실 수도 있으니 주의하시기 바랍니다.

6. CSS 박스 모델의 또 다른 기법

이 Box 모델의 조정은 주로 테두리 너비와 공백을 요소 너비로 계산하는 IE6 이전의 IE 브라우저에 대한 것입니다. 예를 들어:
#상자 { 너비: 100px; 테두리: 5px }
다음과 같이 호출하세요.

이제 상자의 전체 너비는 150포인트가 되어야 하며, 이는 IE6 이전의 IE를 제외한 모든 브라우저에서 정확합니다. 그러나 IE5와 같은 브라우저에서는 전체 너비가 여전히 100포인트입니다. 이 차이는 이전 사람들이 발명한 상자 조정 방법을 사용하여 처리할 수 있습니다.
그러나 CSS를 사용하여 동일한 목적을 달성하여 일관성 있게 표시할 수 있습니다.
#상자 { 너비: 150px }
#box div { 테두리: 패딩: 20px }
다음과 같이 호출됩니다.

이런 식으로 어떤 브라우저를 사용해도 너비는 150포인트가 됩니다.

7. CSS는 블록 요소가 중앙에 수평으로 정렬되도록 설정합니다.

고정 너비 웹 페이지를 만들고 웹 페이지를 가로 중앙에 배치하려는 경우 일반적으로 다음과 같습니다.
#content { 너비: 700px; 여백: 0 자동 }
모든 요소를 ​​둘러싸려면