CSS(Cascading Style Sheet)는 웹 디자인에 사용되는 언어로, 텍스트 속성을 변경하여 페이지를 아름답게 만드는 등 다양한 기능을 포함하고 있습니다. 이 문서에서는 몇 가지 일반적인 CSS 텍스트 속성과 이를 웹 페이지에 구현하는 방법을 소개합니다.
1. 글꼴 속성
글꼴 속성을 사용하여 텍스트의 글꼴, 크기, 색상, 스타일 및 간격을 제어할 수 있습니다. 특정 속성은 다음과 같습니다:
- font-family: 글꼴 이름 또는 글꼴 계열 이름 목록을 설정하는 데 사용됩니다. 여러 이름은 쉼표로 구분되어 있으며, 브라우저는 목록 순서대로 글꼴을 검색합니다.
- font-size: 글꼴 크기를 설정하는 데 사용되며 픽셀(px), 백분율(%), EM, rem 및 기타 단위로 지정할 수 있습니다.
- font-weight: 글꼴의 두께를 설정하는 데 사용되며 숫자, 키워드 굵게 및 굵게 등을 사용하여 지정할 수 있습니다.
- font-style: 글꼴을 굵게 또는 기울임꼴로 설정하는 데 사용됩니다. italic 및 oblique 키워드를 사용하여 지정할 수 있습니다.
- line-height: 줄 간격을 설정하는 데 사용되며 픽셀이나 백분율과 같은 단위를 사용할 수 있습니다.
- text-align: 왼쪽, 가운데, 오른쪽, 양쪽 맞춤 등을 포함하여 텍스트의 가로 정렬을 설정하는 데 사용됩니다.
2. 텍스트 속성
텍스트 속성을 사용하여 텍스트 장식, 들여쓰기, 줄 바꿈 등을 제어할 수 있습니다. 특정 속성은 다음과 같습니다:
- text-장식: 텍스트의 밑줄, 취소선 및 텍스트 장식 줄을 설정하는 데 사용됩니다. 밑줄, 윗줄, 줄바꿈 및 없음 키워드를 사용하여 지정할 수 있습니다.
- text-indent: 텍스트 들여쓰기를 설정하는 데 사용되며 픽셀이나 백분율과 같은 단위를 사용할 수 있습니다.
- text-transform: 대문자, 소문자, 대문자 등을 포함하여 텍스트의 대소문자 변환 방법을 설정하는 데 사용됩니다.
- white-space: 일반, 현재 랩, 사전 랩 등을 포함한 텍스트 처리 방법을 설정하는 데 사용됩니다.
3. 색상 속성
색상 속성은 텍스트와 배경의 색상을 제어하는 데 사용됩니다. CSS 색상 이름이나 16진수 값을 사용하여 색상을 지정할 수 있습니다. 그 중:
- color 속성은 텍스트 색상을 설정하는 데 사용됩니다.
- background-color 속성은 배경색을 설정하는 데 사용됩니다.
4. 선택기
글꼴, 텍스트, 색상 속성 외에도 선택기도 CSS의 중요한 부분입니다. 선택기는 수정해야 하는 HTML 요소를 지정하는 데 사용됩니다. 예:
- 태그 선택기: 특정 유형의 HTML 요소를 선택하는 데 사용됩니다. 예를 들어 p는 모든 단락 요소를 변경합니다.
- 클래스 선택기: 동일한 클래스 이름을 가진 HTML 요소를 선택하는 데 사용됩니다. 예를 들어 .h1은 h1 클래스를 사용하여 모든 요소를 변경합니다.
- ID 선택기: 동일한 식별자를 가진 HTML 요소를 선택하는 데 사용됩니다. 예를 들어 #header는 페이지에서 ID가 "header"인 요소를 선택합니다.
- 와일드카드 선택기: 모든 HTML 요소를 선택하는 데 사용됩니다. 예를 들어 *는 웹 페이지의 모든 요소를 선택합니다.
5. 예제 연습
여기에서는 CSS를 사용하여 텍스트 속성과 색상 속성을 변경하는 방법을 보여줍니다. 간단한 웹 페이지를 만들고 일부 요소의 텍스트 및 색상 속성을 변경하겠습니다.
- 먼저 HTML 문서에 다음 코드를 추가하세요:
这是标题
这是一段正文,包含有一些链接:链接1和链接2
로그인 후 복사
< ; /body>
- 같은 폴더에 스타일시트 파일 styles.css를 만들고 다음 스타일을 추가하세요:
.title {
font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; text-align: center; color: navy;
로그인 후 복사
}
.text {
font-family: "Times New Roman", Times, serif; font-size: 18px; line-height: 1.5em; text-indent: 25px; color: #333;
로그인 후 복사
}
.list {
font-family: Verdana, sans-serif; font-size: 16px; text-transform: uppercase; color: maroon;
로그인 후 복사
}
- 브라우저를 열고 HTML 파일을 미리 보면 텍스트 및 색상 속성이 수정된 것을 확인할 수 있습니다.
CSS를 통해 텍스트 및 색상 속성을 수정하여 페이지를 더욱 아름답고 개인화해 보세요. 글꼴 스타일, 텍스트 서식, 색상 속성 등 CSS는 다양한 선택과 유연성을 제공합니다. 웹페이지 작성을 시작할 때 다양한 선택기와 속성을 사용하여 사이트를 돋보이게 만드세요.
위 내용은 CSS 변경 텍스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!