CSS는 텍스트 내용을 설정

CSS는 개발자가 웹 페이지의 다양한 요소를 보다 쉽게 ​​제어하여 다양한 시각 효과와 대화형 경험을 만들 수 있게 해주는 일반적인 웹 디자인 언어입니다. 그중 CSS는 텍스트 내용을 설정하는 데 매우 중요하며 다양한 텍스트 스타일과 레이아웃 효과를 얻는 데 도움이 됩니다. 이 기사에서는 CSS를 사용하여 텍스트 내용을 설정하는 방법을 소개합니다.

1. 글꼴

글꼴은 텍스트 스타일의 가장 기본적인 설정입니다. CSS는 다양한 글꼴 설정 옵션을 제공합니다. 그 중 가장 기본적인 설정 방법은 Font-family 속성을 사용하여 글꼴 이름을 지정하는 것입니다. 예:

body {
    font-family: Arial, sans-serif;
}

위 코드는 웹 페이지 본문의 글꼴을 Arial 또는 sans-serif 글꼴로 설정합니다. Arial 글꼴이 사용자 컴퓨터에 이미 설치되어 있는 경우 이 글꼴을 사용하고, 그렇지 않으면 시스템 기본 sans-serif 글꼴을 사용하십시오. 대부분의 경우 이 접근 방식으로 충분하지만 글꼴을 보다 세밀하게 제어하려면 다른 속성을 사용할 수 있습니다.

font-size 속성은 픽셀, 백분율 또는 em 단위를 사용하여 글꼴 크기를 지정할 수 있습니다.

h1 {
    font-size: 32px;
}

위 코드는 h1 제목의 글꼴 크기를 32픽셀로 설정합니다. 상위 요소 크기에 비례하여 글꼴 크기를 설정하려면 백분율이나 em을 단위로 사용할 수 있습니다.

p {
    font-size: 120%;
}

span {
    font-size: 1.2em;
}

위 코드는 p 단락의 글꼴 크기를 상위 요소 크기의 120%로 설정하고, 범위 요소의 글꼴 크기를 글꼴 크기는 상위 요소 크기의 1.2배입니다.

글꼴 이름과 크기 외에도 글꼴 속성은 글꼴의 두께, 기울임꼴 및 변형을 지정할 수도 있습니다. 예를 들어, 글꼴 가중치 속성은 일반, 굵게 또는 숫자 값(보통 400 또는 700)일 수 있는 글꼴의 두께를 지정할 수 있습니다.

h2 {
    font-weight: bold;
}

위 코드는 h2 제목의 글꼴을 굵게 설정합니다. 기울임꼴 글꼴을 설정하려면 다음과 같이 글꼴 스타일 속성을 사용할 수 있습니다.

em {
    font-style: italic;
}

위 코드는 em 요소 내부의 글꼴을 기울임꼴로 설정합니다.

2. 텍스트 색상 및 배경 색상

텍스트 색상 및 배경 색상도 텍스트 스타일의 비교적 기본 설정입니다. CSS는 구현을 위해 색상과 배경색이라는 두 가지 속성을 제공합니다.

color 속성은 텍스트 색상을 지정할 수 있으며 색상 이름, 16진수 RGB 값 또는 RGB 기능을 사용할 수 있습니다.

h3 {
    color: red;
}

p {
    color: #333333;
}

a {
    color: rgb(255, 0, 0);
}

위 코드는 h3 제목의 텍스트 색상을 빨간색으로, p 단락의 텍스트 색상을 빨간색으로 설정합니다. 진한 회색, a 링크의 텍스트 색상이 빨간색으로 설정됩니다.

마찬가지로 background-color 속성은 색상 이름, 16진수 RGB 값 또는 RGB 함수를 사용하여 배경색을 지정할 수 있습니다.

footer {
    background-color: #f2f2f2;
}

위 코드는 바닥글 요소의 배경색을 밝은 회색으로 설정합니다.

3. 텍스트 정렬 및 줄 높이

텍스트 정렬 및 줄 높이도 텍스트 스타일의 중요한 설정이며, 이는 두 가지 속성 text-align 및 line-height를 통해 달성할 수 있습니다.

text-align은 텍스트의 가로 정렬을 제어할 수 있으며 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤 값을 취할 수 있습니다.

h4 {
    text-align: center;
}

위 코드는 h4 제목의 텍스트를 가로 및 중앙으로 정렬합니다.

line-height는 숫자 값이나 백분율을 단위로 사용할 수도 있고, 일반 및 상속과 같은 키워드를 사용할 수도 있습니다.

p {
    line-height: 1.5;
}

위 코드는 p 단락의 줄 높이를 다음과 같이 설정합니다. 글꼴 크기의 1.5배입니다.

4. 텍스트 장식 및 그림자

CSS는 text-designation 및 text-shadow 속성을 통해 텍스트에 장식 및 그림자 효과를 추가할 수도 있습니다.

text-장식은 밑줄, 취소선, 윗줄 등과 같은 텍스트 장식을 지정할 수 있습니다.

a {
    text-decoration: underline;
}

s {
    text-decoration: line-through;
}

u {
    text-decoration: overline;
}

위 코드는 a 링크에 밑줄을 긋고, s 요소의 텍스트에 취소선을 추가하고, u 요소의 텍스트에 윗줄을 그립니다. 요소 와이어.

text-shadow는 텍스트에 그림자 효과를 추가할 수 있으며 그림자의 색상, 위치, 흐림 반경 및 기타 매개변수를 지정할 수 있습니다.

h5 {
    text-shadow: 2px 2px 5px #888888;
}

위 코드는 h5 제목의 텍스트에 그림자 효과를 추가합니다. 그림자의 색상은 #888888이고 위치는 (2px , 2px)이며 흐림 반경은 5px입니다.

요약

CSS는 글꼴, 텍스트 색상 및 배경 색상, 텍스트 정렬 및 줄 높이, 텍스트 장식 및 그림자 등을 포함하여 텍스트 콘텐츠를 설정하는 다양한 방법을 제공합니다. 실제 개발에서 개발자는 원하는 텍스트 효과를 얻기 위해 필요에 따라 적절한 설정 방법을 선택할 수 있습니다.

위 내용은 CSS는 텍스트 내용을 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!