본 번역 은 작가 나 사이트 의 권한 을 받 지 못 했다.모든 권 리 는 원작 자 와 원 사이트 에 귀속 된다.만약 당신 이 원작 자 나 원 발표 사이트 의 권한 을 수 여 받 으 면 본 번역 을 자 유 롭 게 사용 할 수 있 습 니 다.1.CSS 글꼴 속성 약자 규칙 은 보통 CSS 로 글꼴 속성 을 설정 합 니 다.font-weight:bold;font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 하지만 그것들 을 모두 한 줄 에 쓸 수도 있다.font: bold italic small-caps 1em/1.5em verdana,sans-serif; 정말 괜찮다!한 가지 만 알려 드릴 것 이 있 습 니 다.이 약자 방법 은 font-size 와 font-family 속성 을 동시에 지정 할 때 만 작 동 합 니 다.그리고 font-weight 를 설정 하지 않 았 다 면, font-style, 그리고 font-varient ，그들 은 부족 한 값 을 사용 할 것 이 니,이 점 을 기록 해 야 한다.2. 두 가지 종 류 를 동시에 사용 하면 보통 한 요소 에 하나의 클래스(Class)만 설정 할 수 있 지만 이것 은 두 가지 요 소 를 사용 할 수 없다 는 것 을 의미 하지 않 습 니 다.사실 너 는 이렇게 할 수 있다. class="text side">...................................................................................두 클래스 의 속성 이 충돌 하면 나중에 설정 하 는 역할 을 합 니 다.즉,CSS 파일 에 뒤에 있 는 클래스 의 속성 이 작용 합 니 다.보충:하나의 ID 에 대해 서 는 이렇게

...

도 이렇게 쓰 면 안 돼 요. CSS border 의 부족 한 값 은 보통 경계 색상,너비,스타일 을 설정 할 수 있 습 니 다.예 를 들 어 border: 3px solid #000 이 분 은 경 계 를 3 픽 셀 너비,검은색,실선 으로 표시 합 니 다.하지만 실제로 이곳 은 스타일 만 지정 하면 된다.스타일 만 지정 하면 다른 속성 은 결 성 값 을 사용 합 니 다.일반적으로 Border 의 너비 부족 은 medium 이 고 보통 3~4 개의 픽 셀 과 같다.결 성 된 색 은 그 중의 문자 의 색 이다.만약 이 값 이 적당 하 다 면 그렇게 많이 설정 할 필요 가 없다.4. CSS 는 문서 인쇄 에 사용 되 는 많은 사이트 에 인쇄 를 위 한 버 전이 있 지만 실제로 필요 하지 않 습 니 다.CSS 로 인쇄 스타일 을 설정 할 수 있 기 때 문 입 니 다.즉,페이지 에 두 개의 CSS 파일 을 지정 할 수 있 습 니 다.하 나 는 화면 표시 에 사용 되 고 하 나 는 인쇄 에 사 용 됩 니 다.   첫 번 째 줄 은 표시 입 니 다.두 번 째 줄 은 인쇄 입 니 다.미디어 속성 에 주의 하 십시오.그런데 인쇄 CSS 에 뭐라고 써 야 되 지?너 는 일반 CSS 를 설계 하 는 방법 에 따라 그것 을 설정 할 수 있다.디자인 과 동시에 이 CSS 를 표시 CSS 로 설정 하여 효 과 를 검사 할 수 있 습 니 다.그렇게 지도 모른다,아마,아마... display: none 이 명령 은 장식 그림 을 끄 고 네 비게 이 션 단 추 를 끄 라 고 한다.더 많은 것 을 알 고 싶다 면'인쇄 차이'라 는 편 을 볼 수 있다.5. 그림 교체 기술 은 일반적으로 표준 HTML 로 문 자 를 표시 하 는 것 을 권장 하 며,그림 을 사용 하지 않 는 것 이 빠 를 뿐만 아니 라 더욱 읽 을 수 있다.그러나 특수 한 글씨 체 를 사용 하고 싶 을 때 는 그림 만 사용 할 수 있다.예 를 들 어 물건 을 파 는 아이콘 을 모두 사용 하고 싶 으 면 이 그림 을 사용 하 세 요:

물론 입 니 다.하지만 검색엔진 에 있어 서 정상 적 인 문자 에 비해 alt 안의 교체 문자 에 관심 이 거의 없습니다.이것 은 많은 디자이너 들 이 여기에 많은 키 워드 를 넣 어 검색엔진 을 속 이기 때 문 입 니 다.그래서 방법 은 이 렇 습 니 다.

Buy widgets

하지만 특별한 글꼴 이 없습니다.같은 효 과 를 얻 으 려 면 CSS:h1 을 이렇게 디자인 할 수 있 습 니 다. { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }  이미지 height 를 진짜 그림 의 높이 로 바꾸다.여기 서 그림 은 배경 으로 표 시 됩 니 다.진정한 문 자 는-2000 픽 셀 이라는 들 여 쓰기 로 설정 되 어 있 기 때문에 화면 왼쪽 2000 시 에 나타 나 보이 지 않 습 니 다.하지만 그림 을 닫 은 사람 에 게 는 모두 보이 지 않 을 수 있 으 니 주의해 야 한다.6. CSS box 모델 의 또 다른 조정 기법 인 이 Box 모델 의 조정 은 주로 IE6 이전의 IE 브 라 우 저 를 대상 으로 하 는 것 으로 경계 너비 와 공백 을 모두 요소 너비 에 계산한다.#box { width: 100px; border: 5px; padding: 20px }  이렇게 호출:이 때 상자 의 전체 폭 은 150 시 입 니 다.이것 은 IE6 이전의 IE 브 라 우 저 를 제외 한 모든 브 라 우 저 에서 정확 합 니 다.그러나 IE5 와 같은 브 라 우 저 에 서 는 전체 폭 이 100 점 이다.이전 사람들 이 발명 한 Box 조정 방법 으로 이런 차 이 를 처리 할 수 있다.그러나 CSS 로 도 같은 목적 을 달성 하여 효과 가 일치 하도록 할 수 있 습 니 다.\#box { width: 150px } #box div { border: 5px; padding: 20px }  이렇게 호출:

...

이렇게 하면 어떤 브 라 우 저 든 너비 가 150 시 입 니 다.7. 블록 요소 가운데 정렬 { width: 700px; margin: 0 auto }  사용 할 줄 알 아 요.  모든 원 소 를 둘 러 라.이것 은 매우 간단 하지만 좋 지 않 아서 IE6 이전 버 전에 서 는 이런 효 과 를 나타 내지 못 할 것 이다.CSS 는 다음 과 같 습 니 다:body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }  이것 은 웹 페이지 의 내용 을 모두 가운데 로 하기 때문에 Content 에 text-align 을 추가 합 니 다. left 。 8. 수직 정렬 을 CSS 로 처리 합 니 다.수직 정렬 은 표 로 쉽게 이 루어 집 니 다.표 셀 을 설정 합 니 다. vertical-align: middle 됐 습 니 다.CSS 로 서 는 소 용 없어.네 비게 이 션 바 를 2em 높이 로 설정 하고 네 비게 이 션 문 자 를 수직 으로 가운데 로 놓 으 려 면 이 속성 을 설정 하 는 것 은 소 용이 없습니다.CSS 방법 이 뭐 죠?참,이 문자 들 의 줄 높이 를 2em：line-height: 2em ，그럼 됐어.9. CSS 가 용기 안에서 CSS 를 찾 는 장점 중 하 나 는 하나의 요 소 를 임의로 찾 을 수 있 고 한 용기 에서 도 찾 을 수 있다 는 것 이다.예 를 들 어 이 용기:\#container { position: relative }  이렇게 하면 용기 안의 모든 요소 가 상대 적 으로 위 치 를 정할 수 있 습 니 다.이렇게 사용 할 수 있 습 니 다:...왼쪽 30 시,위 5 시 까지 위치 하려 면 이렇게 할 수 있 습 니 다:\#navigation { position: absolute; left: 30px; top: 5px }  물론,당신 은 이렇게 할 수 있 습 니 다:margin: 5px 0 0 30px 4 개의 숫자 순 서 는 위,오른쪽,아래,왼쪽 입 니 다.물론 사 이 드 가 아 닌 포 지 셔 닝 방법 이 좋 을 때 도 있다.10. 화면 아래쪽 까지 직통 하 는 배경 색 은 수직 방향 에서 제어 할 수 없습니다.내 비게 이 션 표시 줄 을 내용 표시 줄 처럼 페이지 아래로 직통 시 키 려 면 표 로 하 는 것 이 편리 하지만,이러한 CSS:\#navigation 만 사용 하면 됩 니 다. { background: blue; width: 150px }  비교적 짧 은 네 비게 이 션 바 는 끝까지 직통 하지 않 고 중간 내용 이 끝 날 때 끝난다.어 떡 하지?불 행 히 도 사기 수단 을 사용 할 수 밖 에 없 었 습 니 다.이 짧 은 칸 에 배경 그림 을 더 해 주 었 습 니 다.너비 와 너비 가 같 고 색상 이 설 정 된 배경 색 과 같 습 니 다.body { background: url(blue-image.gif) 0 0 repeat-y }  이때 em 을 단위 로 할 수 없습니다.그러면 독자 가 글씨체 의 크기 를 바 꾸 면 이 수작 은 들통 나 고 px 만 사용 할 수 있 기 때 문 입 니 다.Trenton Moss。  발표 사 이 트 는:http://www.webcredible.co.uk/。 본 번역 은 작가 나 사이트 의 권한 을 받 지 못 했다.모든 권 리 는 원작 자 와 원 사이트 에 귀속 된다.만약 당신 이 원작 자 나 원 발표 사이트 의 권한 을 수 여 받 으 면 본 번역 을 자 유 롭 게 사용 할 수 있 습 니 다.