wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오. CSS 튜토리얼을 탐색하려면 여기를 클릭하십시오.
위 : Markup Language-CSS 레이아웃 . 13 장 텍스트 스타일을 지정합니다
CSS를 사용하여 텍스트 스타일을 설정하는 관행에 대해 논의하는 것이 좋습니다. 일반적으로 텍스트 콘텐츠를 처리하는 것은 아마도 표준을 완전히 준수하지 않는 웹 사이트에서도 CSS가 가장 많이 사용되는 곳일 것입니다. 웹 페이지에서 반복되는 태그를 제거하는 것은 한 번 (그리고 현재) 디자이너에게 매우 매력적이며 CSS를 사용하여 텍스트 인쇄를 제어하는 데 큰 장점을 보는 것은 어렵지 않습니다.
이전의 많은 예에서 CSS는 많은 상황을 처리 할 수 있으며 텍스트 스타일을 설정하는 것이 가장 기본적인 웹 페이지의 디자인 요소를 추가하는 가장 쉬운 방법임을 알고 있습니다. 동시에 텍스트에 CSS를 추가하면 페이지에 불필요한 사진을 추가하지 못하게 할 수 있습니다.
이 장에서는 CSS가 지루하고 일반적인 텍스트 조각을 다른 높이 (새로운 색상, 크기 및 글꼴)로 어떻게 가져옵니다. 하이퍼 텍스트를 더 시원하게 보이게하는 방법?
텍스트 스타일을 지정하는 것은 CSS가 약간 오래되고 불완전하게 CSS 고급 기능을 지원하는 브라우저를 향한 최고의 작업 중 하나입니다. 과거에는 디자이너와 개발자가 크기와 대담한 효과를 달성하기 위해 텍스트를 디자인 할 때 오늘날의 표준에 따라 견딜 수없고 사용하기 어려운 웹 페이지를 만들고 싶을 수도 있습니다 (텍스트가 대부분 이미지로 표시되는 웹 페이지를 본 적이 있습니까? 그러나 텍스트 브라우저를 사용하고 있습니다 ...)
그림을 사용하는 몇 가지 대안을 제공하고 위의 질문에 답변하기 위해이 장에서는 아직 스타일이없는 텍스트 단락으로 시작하여 점차적으로 다양한 CSS 규칙을 추가하여 매력적인 디자인이됩니다. 끊임없이 변화하는 시간
브라우저의 사전 설정 글꼴에서 처리 될 텍스트를 보면서 시작하십시오. 필자의 경우 사전 설정 글꼴은 16 픽셀 시간입니다. Mac OS X에서 Safari Browser를 사용하십시오.이 때문에, 당신이 보이는 텍스트는 aliasing aniiasing 방식으로 묘사됩니다. Windows XP를 사용하고 START ClearType을 사용하는 경우 비슷한 효과를 볼 수 있습니다.
Times (또는 Variant Times New Roman)는 많은 브라우저의 사전 설정 글꼴이지만 사용자는 자신이 좋아하는 글꼴로 쉽게 변경 되므로이 사전 설정 값에 의존 할 수는 없습니다.
그림 1301 은이 장에서 사용한 텍스트 내용을 스타일로 추가하지 않은 텍스트를 보여줍니다. <H1>으로 표시된 간단한 제목이며 다음은 가정 장식을위한 세 가지 팁입니다.
그림 13-1 브라우저에는 제목이 표시되고 텍스트의 사전 설정 효과가 선 높이를 변경합니다.
가장 단순하고 가장 효과적인 텍스트 스타일 효과 중 하나는 라인 높이 속성입니다. 각 텍스트 라인 사이에 여분의 공간을 추가하면 텍스트 단락을 쉽게 읽을 수 있고 더 매력적이며 페이지에 훌륭한 효과를 가져올 수 있습니다.
<body> 태그에 다음 CSS 규칙을 추가 하여이 기술을 완료 할 수 있습니다. 물론 <p>의 선 높이를 변경하려는 것과 같은 다른 태그 에이 규칙을 추가 할 수도 있습니다.
몸 {
라인 높이 : 1.5EM;
}
이 코드의 의미는 다음과 같습니다. 페이지의 텍스트의 선 높이는 텍스트 높이의 1.5 배 여야합니다. 나는 라인 높이를 지정할 때 EM 장치를 사용하는 것을 좋아합니다. 글꼴 크기로 변경되기 때문입니다.
그림 13-2는 라인 높이를 추가 한 후 효과를 보여줍니다.
그림 13-2 사전 설정 텍스트 플러스 라인 높이 후 효과
멋지게 보이고 작은 라인 높이를 달성 할 수있는 결과는 놀랍습니다.
이전 페이지 1 2 3 4 5 다음 페이지 전체 텍스트 읽기