CSS 고전 기법 10 칙 1/2 페이지

2868 단어 CSS
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)만 설정 할 수 있 지만,이것 은 두 개 를 사용 할 수 없다 는 것 을 의미 하 지 는 않 는 다.사실 너 는 이렇게 할 수 있다.

...


동시에 P 요소 에 두 가지 종 류 를 주 고 중간 에 빈 칸 으로 열 면 모든 text 와 side 두 가지 속성 이 P 요소 에 추 가 됩 니 다.두 클래스 의 속성 이 충돌 하면 나중에 설정 하 는 역할 을 합 니 다.즉,CSS 파일 에 뒤에 있 는 클래스 의 속성 이 작용 합 니 다.
보충:하나의 ID 에 대해 서 는 이렇게 쓸 수 없습니다.

...

도 이렇게 쓸 수 없습니다.
3.CSS border 의 결 성 값
보통 경계 색상,너비,스타일 을 설정 할 수 있 습 니 다.예 를 들 어:
border: 3px solid #000
경 계 를 3 픽 셀 너비,검은색,실선 으로 표시 합 니 다.하지만 실제로 이곳 은 스타일 만 지정 하면 된다.
스타일 만 지정 하면 다른 속성 은 결 성 값 을 사용 합 니 다.일반적으로 Border 의 너비 부족 은 medium 이 고 보통 3~4 개의 픽 셀 과 같다.결 성 된 색 은 그 중의 문자 의 색 이다.만약 이 값 이 적당 하 다 면 그렇게 많이 설정 할 필요 가 없다.
4.CSS 는 문서 인쇄 에 사용
많은 사이트 에 인쇄 를 위 한 버 전이 있 지만 실제로 이것 은 필요 하지 않다.왜냐하면 CSS 로 인쇄 스타일 을 설정 할 수 있 기 때문이다.
즉,페이지 에 두 개의 CSS 파일 을 지정 할 수 있 습 니 다.하 나 는 화면 표시 에 사용 되 고 하 나 는 인쇄 에 사 용 됩 니 다.

첫 번 째 줄 은 표시 입 니 다.두 번 째 줄 은 인쇄 입 니 다.미디어 속성 에 주의 하 십시오.
그런데 인쇄 CSS 에 뭐라고 써 야 되 지?너 는 일반 CSS 를 설계 하 는 방법 에 따라 그것 을 설정 할 수 있다.디자인 과 동시에 이 CSS 를 표시 CSS 로 설정 하여 효 과 를 검사 할 수 있 습 니 다.디 스 플레이:none 명령 을 사용 하여 장식 그림 을 끄 고 네 비게 이 션 단 추 를 끌 수도 있 습 니 다.더 많은 것 을 알 고 싶다 면'인쇄 차이'라 는 편 을 볼 수 있다.
5.이미지 교체 기법
일반적으로 그림 대신 표준 HTML 로 문 자 를 표시 하 는 것 을 권장 합 니 다.빠 를 뿐만 아니 라 가 독성 도 있 습 니 다.그러나 특수 한 글씨 체 를 사용 하고 싶 을 때 는 그림 만 사용 할 수 있다.
예 를 들 어 물건 을 파 는 아이콘 을 모두 사용 하고 싶 으 면 이 그림 을 사용 하 세 요.

Buy widgets


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

Buy widgets


하지만 이렇게 되면 특별한 글씨체 가 없다.같은 효 과 를 얻 으 려 면 CSS 를 이렇게 디자인 할 수 있 습 니 다.
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
image height 를 실제 그림 의 높이 로 바 꾸 는 것 에 주의 하 세 요.여기 서 그림 은 배경 으로 표 시 됩 니 다.진정한 문 자 는-2000 픽 셀 이라는 들 여 쓰기 로 설정 되 어 있 기 때문에 화면 왼쪽 2000 시 에 나타 나 보이 지 않 습 니 다.하지만 그림 을 닫 은 사람 에 게 는 모두 보이 지 않 을 수 있 으 니 주의해 야 한다.
1 2 다음 페이지 전문 을 읽다

좋은 웹페이지 즐겨찾기