10가지 CSS 팁_CSS/HTML

1.css 글꼴 약어 규칙
css를 사용하여 글꼴을 정의할 때 다음을 수행할 수 있습니다.
font-size: 1em;
line-height: 1.5em;
font-weight:bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
실제로 다음 속성을 축약할 수 있습니다.
font: 1em/1.5embold italic small-caps verdana,serif
지금은 훨씬 나아졌지만 한 가지 주의할 점은 이 단축 방법을 사용하려면 최소한 글꼴 크기 및 글꼴 모음 속성과 기타 속성(예: 글꼴 두께, 글꼴 스타일, 글꼴 변형)은 지정되지 않은 경우 자동으로 기본값을 사용합니다.


2. 동시에 두 개의 클래스 사용
일반적으로 속성에 대해 하나의 클래스만 지정하지만 이는 실제로 여러 개만 지정할 수 있다는 의미는 아닙니다. 예를 들어

...

두 클래스를 동시에 사용하면(쉼표 대신 공백으로 구분) 이 단락은 두 클래스에 지정된 규칙을 적용합니다. 동시에. 규칙 중 하나라도 중복되는 경우 후자의 규칙이 우선 적용됩니다.


3.css의 테두리 기본값
테두리 규칙을 작성할 때 일반적으로 색상, 너비, 스타일을 지정합니다(어떤 순서든 허용됨). 예: border: 3px solid #000(3픽셀 너비의 검은색 실선 테두리) 실제로 이 예에서 지정해야 하는 유일한 값은 스타일입니다. 스타일을 단색으로 지정하면 나머지 값은 기본값을 사용합니다. 기본 너비는 중간(3~4픽셀에 해당)입니다. 기본 색상은 테두리의 텍스트 색상입니다. 이것이 정확히 원하는 것이라면 CSS에서 지정할 필요가 없습니다.


4.!important는 IE에서 무시됩니다.
CSS에서는 일반적으로 마지막으로 지정된 규칙이 우선순위를 갖습니다. 그러나 IE 이외의 브라우저의 경우 !important로 표시된 모든 문은 절대 우선순위를 받습니다. 예:
margin-top: 3.5em !important; margin-top: 2em
IE 제외 상단 여백은 3.5입니다. em은 모든 브라우저에서 사용되지만 IE에서는 2em입니다. 특히 IE와 다른 브라우저 간의 미묘한 차이점을 보여주기 위해 상대적 여백을 사용할 때 유용합니다.
(많은 사람들이 CSS 하위 선택기도 IE에서 무시된다는 사실을 눈치챘을 것입니다.)


5. 이미지 교체 기술
텍스트를 표시하려면 이미지 대신 표준 HTML을 사용하는 것이 더 현명한 경우가 많습니다. 더 빠른 다운로드 외에도 더 나은 유용성을 얻으려면. 그러나 방문자의 컴퓨터에서 사용할 수 없는 글꼴을 사용하기로 결정한 경우 이미지만 선택할 수 있습니다.
예를 들어, 각 페이지 상단에 '위젯 구매'라는 제목을 사용하고 싶지만 검색 엔진에서도 검색되기를 원하며 아름다움을 위해 희귀한 글꼴을 사용하는 경우 그림에 나와 있는 내용은 다음과 같습니다.

물론 이는 사실이지만 검색 엔진이 대체 텍스트보다 실제 텍스트를 훨씬 더 중요하게 여긴다는 증거가 있습니다(이미 너무 많은 웹사이트에서 대체 텍스트 키워드 역할), 따라서 다른 방법을 사용해야 합니다:

위젯 구입

, 아름다운 글꼴은 어떻습니까? 다음 CSS가 도움이 될 수 있습니다:
h1
{
background: url(widget-image.gif) no-repeat;
}

h1span
{
position: 절대;
left:-2000px;
}
이제 아름다운 이미지가 생겼고 실제 텍스트는 잘 숨겨졌습니다. CSS를 사용하면 텍스트가 화면 왼쪽에 배치됩니다. 2000픽셀.


6. CSS 상자 모델 해킹을 위한 또 다른 옵션
CSS 상자 모델 해킹은 IE6.0 이전 버전에서는 특정 요소의 테두리를 변경하는 데 사용됩니다. 패딩 값은 너비 값에 추가되지 않고 너비에 포함됩니다. 예를 들어 다음 CSS를 사용하여 컨테이너의 크기를 지정할 수 있습니다.
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
그런 다음 html로 적용합니다:

...

상자의 전체 너비는 거의 모든 브라우저에서 150픽셀입니다(너비 100픽셀 + 5픽셀 테두리 2개 + 20픽셀 패딩 2개). IE6 이전 브라우저에서만 여전히 100픽셀입니다(테두리 값과 패딩 값이 너비 값에 포함됨). 상자 모델 해킹은 이 문제를 해결하도록 설계되었지만 문제도 발생합니다. 더 간단한 방법은 다음과 같습니다:
css:
#box
{
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
}
html:

...

이렇게 하면 모든 브라우저에서 상자의 전체 너비는 150이 됩니다. 픽셀.


7. 블록 요소 중앙에 배치
웹사이트가 고정 너비 레이아웃을 사용하고 모든 콘텐츠가 화면 중앙에 배치된다고 가정하면 다음 CSS를 사용할 수 있습니다.
#content
{
width: 700px;
margin: 0 auto;
}
html 본문 내에 모든 항목을 배치할 수 있습니다

, 항목은 중앙에 표시되도록 자동으로 동일한 왼쪽 및 오른쪽 경계 값을 얻습니다. 그러나 이는 IE6 이전 브라우저에서는 여전히 문제이며 중앙에 정렬되지 않으므로 다음과 같이 수정해야 합니다:
body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
본문을 설정하면 본문 내용이 중앙에 배치됩니다. 그러나 모든 텍스트가 중앙에 배치되어도 원하는 효과가 아닐 수 있습니다. 따라서 #content의 div에도 값을 지정해야 합니다. text-align: left

8. 수직 센터링 달성
수직 센터링은 테이블용 케이크 조각입니다. 셀을 수직 정렬: 중간으로 지정하기만 하면 됩니다. 하지만 CSS 레이아웃에서는 작동하지 않습니다. 탐색 메뉴의 높이를 2em으로 설정하고 CSS에서 수직 정렬 규칙을 지정한다고 가정하면 텍스트는 여전히 상자 상단에 정렬되며 전혀 차이가 없습니다.
이 문제를 해결하려면 상자의 줄 높이를 상자의 높이와 동일하게 설정하세요. 이 예에서는 상자 높이가 2em이고 CSS에 다른 줄 높이(2em)를 추가하면 됩니다. 수직 센터링을 달성할 수 있습니다!

9. 컨테이너 내 CSS 위치 지정
CSS의 가장 큰 장점 중 하나는 문서 내 어디에나 개체를 배치할 수 있다는 점이며, 컨테이너 내에서도 개체를 배치할 수 있다는 것입니다. 컨테이너에 CSS 규칙을 추가하면 됩니다:
#container
{
position:relative;
}
그런 다음 컨테이너에 있는 모든 요소의 위치 지정은 컨테이너를 기준으로 합니다. 다음 html 구조를 사용한다고 가정합니다.

...

컨테이너 내에서 왼쪽 테두리에서 30픽셀, 테두리에서 5픽셀에 탐색 위치를 지정하려는 경우 top, 다음 CSS 문을 사용할 수 있습니다:
#navigation
{
position:absolute;
left: 30px;
top: 5px;
}

10. 화면 하단까지 확장 배경색
css의 단점 중 하나는 수직 제어가 부족하여 테이블 레이아웃이 발생하지 않는 문제로 이어집니다. 웹사이트 탐색을 배치하기 위해 페이지 왼쪽에 열을 설정했다고 가정해 보겠습니다. 페이지 배경은 흰색이지만 탐색 열의 배경을 파란색으로 지정하려면 다음 CSS를 사용하세요.
#navigation
{
background: blue;
width: 150px;
}
문제는 탐색 항목이 페이지 하단까지 확장되지 않고 당연히 배경색도 하단까지 확장되지 않는다는 것입니다. 따라서 왼쪽 열의 파란색 배경이 페이지 중간에서 잘려 디자인이 낭비됩니다. 무엇을 해야 할까요? 불행히도 우리는 속임수만 사용할 수 있습니다. 즉, 본문의 배경을 왼쪽 열과 동일한 색상 및 너비의 이미지로 지정합니다. CSS는 다음과 같습니다.
body
{
배경: url(blue-image.gif ) 0 0peat-y;
}
배경 이미지는 너비 150픽셀의 파란색 이미지여야 합니다. 이 방법의 단점은 em을 사용하여 왼쪽 열의 너비를 지정할 수 없다는 것입니다. 사용자가 텍스트의 크기를 변경하고 내용의 너비가 확장되면 배경색의 너비가 그에 따라 변경되지 않습니다.
이 글을 쓰는 시점에서는 이것이 이러한 유형의 문제에 대한 유일한 해결책이므로 왼쪽 열의 픽셀 값만 사용하여 자동으로 늘어나는 다른 배경색을 얻을 수 있습니다.