10 작은 알려진 CSS 사용 팁

10 작은 알려진 CSS 사용 팁

1. CSS 글꼴 속기 규칙

CSS를 사용 하 여 글꼴을 정의할 때이 수행할 수 있습니다.

글꼴-크기: 1em;
라인-높이: 1.5em;
글꼴-무게: 굵게;
글꼴-스타일: 기울임꼴;
글꼴-변형: 작은-뚜껑;
글꼴-가족: verdana, serif;
사실,이 특성을 생략 수 있습니다.

글꼴: 1em / 1.5em 굵게 기울임꼴 소문자를 작은 대문자로 Verdana, serif
그것은 훨씬 더 지금, 하지만 주의 한 가지:이 속기를 사용 하 여 적어도 글꼴-크기 및 글꼴 패밀리 속성을 지정 해야 하 고 지정 되지 않은 경우에 다른 속성 (예: 글꼴 두께, 글꼴 스타일, 글꼴-변종)는 자동으로 기본 값을 사용 합니다.

2. 동시에 두 개의 클래스를 사용 하 여

보통 우리는 특성에 대 한 클래스를 지정 하지만 당신이 아닙니다만 지정할 수 있습니다, 사실, 얼마나 예를 들면 지정 하려면 지정할 수 있습니다:

< p class = "텍스트 측면" >... </p >
(쉼표 대신 공백을 사용 하 여) 동시에 두 개의 클래스를 사용 하 여 단락 두 클래스에서 밖으로 설정 하는 규칙을 적용 합니다. 규칙 중 겹치는 경우 후자 주어질 것 이다 실용적인 우선 순위.

3. css 테두리 (테두리) 기본값

테두리 규칙을 작성할 때 일반적으로 지정할 색, 너비 및 스타일 (임의의 순서로). 예: 국경: 3px 고체 #000 (3 픽셀 넓은 검은 단단한 테두리), 사실,이 예제에서 지정 하는 유일한 값은 스타일. 스타일은 고체를 지정 하면 (고체), 나머지 값은 기본 값을 사용: 기본 폭은 보통 (4 픽셀 3에 해당), 그리고 기본 색상은 국경에서 텍스트 색상. 이것은 원하는 효과, 당신은 수 확실히 지정 하지 그것 CSS에서.

4.! 중요 한 IE에 의해 무시 됩니다

CSS에서 일반적으로 마지막 규칙 지정 된 우선 순위를 주어 집니다. 그러나, IE 이외의 브라우저에 대 한 모든 후속 문을 표시! 중요 한 예를 들면 절대 우선 순위를 받게 됩니다:

여백-가기: 3.5em! 중요 하다; 여백-가기: 2em
IE 제외한 모든 브라우저의 위쪽 테두리 3.5em, 이며 즉 2em IE와 다른 브라우저의 뉘앙스를 보여 (예이 예) 상대적인 경계 값을 사용 하는 경우에 특히 유용 하 게, 때로는은.
(많은 사람들이 또한 나타날 CSS 선택기는 IE에 의해 또한 무시 됩니다)

5. 사진 교체 능력

그것은 종종 다운로드를 가속화 하 고 더 나은 가용성을 제외 하 고 텍스트를 표시 하는 그림 대신 표준 HTML을 사용 하는 더 현명한. 그러나 방문자의 컴퓨터에서 사용할 수 없습니다 수 있습니다 글꼴을 사용 하 여 결정 하는 경우만 사진을 선택할 수 있습니다.
예를 들어 각 페이지의 상단에 제목 "구매 위젯"을 사용 하지만 당신은 또한 그림을 사용 하 여 표시할 필요가 드문 글꼴을 사용 하는 미학을 위해 검색 엔진에서 찾을 수 있습니다 희망:

< h1 >< img src = "위젯-image.gif" alt = "구매 위젯" / >< / h1 >
그것은 확실히 사실, 하지만 검색 엔진 값 실제 텍스트 대체 텍스트 보다 훨씬 더 (키워드로 대체 텍스트를 사용 하 여 너무 많은 사이트는 이미) 증거가 있다, 그래서 우리는 다른 방법을 사용 해야: < h 1 >< 범위 > 구매 위젯 < / 범위 >< / h1 >, 예쁜 글꼴? 다음 CSS는 도움이 될 수 있다:

H1
{
배경: url (위젯-image.gif) 아니오-반복;
}

H1 범위
{
위치: 절대;
왼쪽:-2000px;
}
아름 다운 사진과 CSS로, 좋은 숨겨진된 텍스트-텍스트는 화면-2000 픽셀의 왼쪽에 있습니다.

6. css 박스 모델 해킹의 또 다른 선택

CSS 박스 모델 해킹 IE6.0 버전 테두리 값 및 안쪽 여백 값의 너비 (너비 값 아님) 내에서 요소 포함 됩니다 전에 i e 6 브라우저 디스플레이 문제를 해결 하는 데 사용 됩니다. 예를 들어 컨테이너의 크기를 지정 하는 다음 CSS를 사용할 수 있습니다.

#box
{
폭: 100px;
테두리: 5px;
패딩: 20px;
}
다음 HTML에 적용: < div id = "상자" >... < / div >

상자의 총 너비는 거의 모든 브라우저에서 150 픽셀 (100 픽셀 폭 + 2 5 픽셀 테두리 + 2 20 픽셀 패딩), 유일한 i e 6 브라우저의 버전이 여전히 100 픽셀 (패딩 값과 테두리 값 너비 값에 포함 됩니다), 해킹의 상자 모델은이 문제를 해결 하는 하지만 그것 또한 문제가 발생할 수 있습니다. 더 간단한 접근은 다음과 같습니다.
css는:

#box
{
폭: 150px;
}

#box div 없음
테두리: 5px;
패딩: 20px;
}
html:

< div id = "상자" >< div > < / div >< / div >
모든 브라우저에서 상자의 총 너비 150 픽셀 것입니다.

7. 센터 블록 요소

가정 사이트는 스크린의 센터의 모든 내용을 고정 폭 레이아웃 사용 그리고 다음 CSS를 사용할 수 있습니다.

#content
{
폭: 700px;
여백: 0 자동차;
}
모든 항목에 HTML의 본문 내에 배치할 수 있습니다 < div id = "내용" >< / div >는 자동으로 동일한 왼쪽을 가져옵니다 및 센터를 위해 오른쪽 값 표시. 그러나,이 여전히 i e 6 브라우저의 이전 버전에서 문제가 이며 것입니다 하지 가운데, 다음 수정 해야 합니다.

바디
{
텍스트-정렬: 센터;
}

#content
{
텍스트-정렬: 왼쪽;
폭: 700px;
여백: 0 자동차;
}
설정의 신체 주요 콘텐츠 센터 이지만 모든 텍스트를 중심으로, 난 두려워은 원하는 효과,이 #content div 값도 지정에 대 한: 텍스트-정렬: 왼쪽

8. 수직 센터를 달성 하기 위해 CSS를 사용

수직 센터는 테이블에 대 한 케이크 한 조각, 수직 정렬로 셀 지정: 중간, 하지만 그것은 CSS 레이아웃에서 작동 하지 않습니다. 라고 하자, 2EM을 탐색 메뉴의 높이 설정 하 고 CSS에서 세로 맞춤을 지정, 텍스트 것입니다 될 줄을 차이가 상자 상단에 전혀.

이 문제를 해결 하기 위해 상자 같은 높이 상자의 행 높이 설정 하면,이 경우에, 2em의 상자 높이 다음 그냥 하나 추가 css에서: 라인-높이: 2em을 수직으로 달성 될 수 있다 센터!

9입니다. CSS 컨테이너 내에 위치

CSS의 큰 장점 중 하나는 문서에서 원하는 개체를 위치 이며 또한 컨테이너 내에서 개체를 배치할 수 있습니다. 컨테이너에 대 한 CSS 규칙을 추가 하기만 하면:

#container
{
위치: 상대;