CSS 텍스트 밑줄 설정 방법 소개
- 不言원래의
- 2018-11-05 14:22:107455검색
전체 웹 디자인에서 가장 쉽게 식별할 수 있는 스타일은 여전히 밑줄이 그어진 파란색 텍스트이며, 대부분 다른 웹 페이지로 연결됩니다. 링크 요소 에는 기본적으로 스타일이 있으며 기본 모드에서는 파란색이 유일한 색상입니다. 오늘날의 링크 요소에 더 이상 밑줄을 그을 필요가 없더라도 텍스트 아래의 줄은 단순히 오늘날의 링크 식별자가 아니라 이 지식 포인트를 이해해야 합니다. 이 기사는 주로 밑줄 텍스트 수정 CSS 옵션과 "링크"에 관한 것입니다. 옵션.
먼저 빠르고 쉽고 규칙적인 밑줄이 필요한 경우 텍스트 색상의 기본 위치에 텍스트 색상을 생성하는 HTML 요소 를 사용할 수 있습니다. 실제로 요소는 단순히 텍스트 장식을 추가합니다. 텍스트는 브라우저에 내장된 CSS를 사용하여 밑줄이 그어집니다. (관련 권장 사항: css 온라인 매뉴얼)
효과는 다음과 같습니다.
위 내용이 원하는 내용이 아닐 수도 있습니다. 다음으로 CSS를 사용하여 텍스트 아래에 줄을 추가하는 방법을 소개하겠습니다. . 두 가지 선택적 방법이 있습니다
첫 번째는 텍스트에 추가할 장식을 지정하는 텍스트 장식 속성입니다. 이 속성에 가능한 값은 밑줄, 윗줄 및 줄바꿈입니다. text-장식 속성은 text-장식-라인, 텍스트 장식-색상, 텍스트 장식-스타일의 약어 속성이어야 하는데 아직 지원되지 않습니다. 이제 텍스트 장식 속성이 있으므로 텍스트 아래에 선을 추가하고 색상을 지정할 수 있으며 해당 선과 텍스트 스타일에 색상을 지정할 수 있으며 밑줄을 이중, 점, 점선 또는 물결 모양으로 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
text-decoration: underline;
}
</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>효과는 다음과 같습니다:
다른 모양의 텍스트 밑줄 예:
css 점선 밑줄:
p{
text-decoration: underline;
text-decoration-style: dotted;
}효과는 다음과 같습니다:
css 분홍색 실선 밑줄:
p{
text-decoration: underline;
text-decoration-color: red;
} 효과는 다음과 같습니다:
css 물결 모양 밑줄:
p{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}효과는 다음과 같습니다.
두 번째는 border-bottom 속성을 사용하는 것입니다. 표시 속성은 inline 이어야 합니다. 이 방법을 사용하면 padding-bottom 속성을 사용하여 선의 위치, border-bottom-width로 선 두께, border-bottom-style로 스타일, border-bottom-color로 색상을 제어할 수 있습니다. 테두리 하단 스타일에는 텍스트 장식 스타일 및 일부 3D 효과 옵션과 동일한 옵션이 있습니다. 이 옵션은 더 많은 옵션과 변수를 제공하지만 이 방법을 사용하는 것이 번거로울 수 있습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: green;
padding-bottom: 10px;
}
</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>효과는 다음과 같습니다.
마지막으로 두 번째 방법은 물결 모양의 밑줄을 설정할 수 없습니다.
위 내용은 CSS 텍스트 밑줄 설정 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!