태그로 묶인 모든 텍스트 그리고 강조된다.

이름 영어 단어 "underline"에서 유래했습니다. HTML 태그 더 새로운 것으로 간주됩니다.

예를 들어

일반 텍스트.

일반 텍스트. ins 태그를 통해 밑줄이 그어진 텍스트

페이지에서 다음으로 변환됨

일반 텍스트. u 태그를 통해 밑줄이 그어진 텍스트

일반 텍스트.

CSS text-decoration 속성을 통해 밑줄이 그어진 텍스트

CSS에는 밑줄을 만들기 위해 html 텍스트의 형식을 지정하는 text-decoration 속성이 있습니다.

CSS 구문 텍스트 장식

텍스트 장식: 없음|밑줄|밑줄|줄 긋기|상속;

• 없음 - 장식이 없는 텍스트
• 밑줄 - 밑줄
• 밑줄 - 위쪽 밑줄
• line-through - 텍스트 취소선
• 깜박임 - 깜박이는 텍스트(이 값을 사용하지 않는 것이 좋습니다)

우리는 밑줄의 가치에 관심이 있습니다.

예를 들어:

Текст со свойством text-decoration: underline

Преобразуется на странице в

Текст со свойством text-decoration: underline

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Задача

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5 CSS 2.1 IE Cr Op Sa Fx

예제의 결과는 그림 1에 나와 있습니다. 하나.

링크의 선 굵기와 밑줄 색상도 border-bottom 속성을 통해 설정됩니다.

분명히 당신은 많은 리소스에 밑줄이 그어진 애니메이션 링크를 보았고 이를 사이트에 구현하는 방법을 알고 싶었습니다. 아름답게 만들기 위해 CSS 밑줄요소, 우리는 큰 지식이나 추가 스크립트의 연결이 필요하지 않으며 표준 HTML과 CSS만 있으면 됩니다.

밑줄 변형

링크나 기타 요소에 밑줄을 긋는 것은 무엇이든 생각할 수 있습니다. 밑줄은 아래쪽에서 떠 있을 수 있고 왼쪽이나 오른쪽으로 미끄러지는 식입니다. 우리는 더 많은 것을 볼 것입니다 흥미로운 예, 밑줄은 아래 데모에서와 같이 중앙에서 가장자리로 이동합니다.

밑줄 데모

HTML

먼저 A 태그를 예로 들어 몇 가지 요소를 만들어 보겠습니다. 대부분의 작업이 스타일에 전념하기 때문에 그 속성은 우리에게 중요하지 않습니다.

CSS

구현은 요소 하단 중앙에서 가장자리로 이동하는 두 개의 선으로 구성됩니다.

text-decoration 속성은 밑줄을 담당하지만 여기에서 사용하는 것은 의미가 없습니다. 이 경우 애니메이션 계획을 구현하는 것과 완전히 관련이 없기 때문입니다. 각 요소에 pseudo-element::before 또는::after 를 할당할 수 있음을 잊지 마십시오. 따라서 모든 속성을 해당 속성으로 설정하고 즉시 다음 매개변수를 링크에 설정합니다.

A( 디스플레이: 인라인 블록; 위치: 상대; 텍스트 장식: 없음; )

따라서 블록 흐름과 원래 위치를 기준으로 위치를 설정합니다. 이 모든 것은 우리가::before pseudo-element를 할당할 때 밑줄이 요소 밖으로 크롤링되지 않도록 수행됩니다. 절대 위치. 그런 다음 정확한 위치와 크기를 설정해야 합니다. 그리고 여기에서 밑줄의 전반부를 즉시 생성합니다.

A::before(디스플레이: 블록, 위치: 절대, 내용: "", 높이: 2px, 너비: 0, 배경색: 빨간색, 전환: 너비 0.5s 인아웃, 왼쪽 0.5s 인-아웃- 바깥쪽, 왼쪽: 50%, 아래쪽: 0, )

저것들. 밑줄의 높이는 2px, 길이 0, 빨간색이며 transition 속성은 애니메이션을 담당합니다. 물론 왼쪽의 들여쓰기는 50%입니다. 중심점. ::after 의사 요소를 사용하여 거의 동일한 작업을 수행합니다.

A::after( 디스플레이: 블록; 위치: 절대; 내용: ""; 높이: 2px; 너비: 0; 배경색: 빨간색; 전환: 너비 0.5초 이즈인아웃; 왼쪽: 50%; 하단: 0;)

A:hover::before( 너비: 50%; 왼쪽: 0; ) a:hover::after( 너비: 50%; )

이것은 이 아이디어를 구현하는 방법 중 하나일 뿐입니다. 단 하나의 pseudo-element::before로도 동일한 작업을 수행할 수 있습니다. 기사를 구독하고 기사 주제를 제안하십시오.

태그와 같은 블록 요소에 밑줄

두 가지 방법으로 수행할 수 있습니다. 예를 들어, 텍스트의 양에 관계없이 텍스트 아래의 라인을 블록의 전체 너비로 설정합니다. 또한 텍스트에서만 수행하도록 밑줄을 긋습니다. 다음에는 두 가지 옵션을 모두 살펴보겠습니다.

블록의 전체 너비에 대한 텍스트 아래의 선

텍스트 아래에 선을 만들려면 요소에 border-bottom 스타일 속성을 추가하십시오. 그 값은 동시에 선 너비, 스타일 및 색상입니다(예제 1).

예 1: 전체 너비 선

HTML5 CSS 2.1 IE Cr Op Sa Fx

샘플 텍스트

행에서 텍스트까지의 거리는 padding-bottom 속성을 H1 선택기에 추가하여 조정할 수 있습니다. 결과 이 예그림에 나와 있습니다. 하나.

텍스트 밑줄

텍스트에만 밑줄을 긋기 위해서는 text-decoration 속성을 underline 값과 함께 사용해야 하며 다시 H1 선택기에 추가해야 합니다(예 2).

예 2: 선에서 텍스트 너비로

HTML5 CSS 2.1 IE Cr Op Sa Fx

샘플 텍스트

블랙 헤드라인은 화이트가 아닌 블랙임에도 불구하고 시선을 사로잡는다.

이 예의 결과는 그림 1에 나와 있습니다. 2.

text-decoration 속성을 사용하는 경우 라인이 텍스트에 고정되어 있어 위치와 스타일을 결정할 수 없습니다.

형식을 지정하는 태그를 연구하거나 HTML 텍스트

튜토리얼의 가장 간단하고 핵심적인 수업 중 하나에 주의를 기울이게 됩니다.

• HTML 텍스트대부분의 인터넷 페이지의 주요 구성 요소입니다.
• 키워드별 HTML 페이지의 본문에서사용자가 귀하의 사이트를 찾을 수 있습니다.
• HTML 텍스트원하는 크기와 색상이 될 수 있습니다. 글꼴 유형과 볼륨을 정의할 수도 있습니다.
• HTML 크기폰트일반적으로 픽셀로 설정됩니다.
• HTML 서식텍스트광범위하게 서식 지정 태그가 사용됩니다.

아래 참조 HTML 텍스트의 형식을 지정하는 태그:

• 태그 → 굵은 HTML 텍스트(볼드체).
• 태그 → 굵게 HTML 텍스트(볼드체).
• 태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).
• 태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).
• 태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).
• 태그 → HTML 텍스트, 크기가 평소보다 큽니다(큰 글꼴).
• 태그 → HTML 텍스트, 크기가 평소보다 작습니다(작은 글씨).
• 태그 → 비스듬한 HTML 텍스트 (기울임꼴).
• 태그 → 비스듬한 HTML 텍스트(이탤릭체).
• 태그 → 비스듬한 HTML 텍스트(이탤릭체).
• 태그 → 밑줄 친 HTML 텍스트(밑줄친 글꼴).
• 태그 → 취소선 HTML 텍스트(취소선 글꼴).
• 태그 → HTML 텍스트(글꼴) 아래 첨자.
• 태그 → HTML 텍스트(글꼴) 위 첨자.

HTML 텍스트 형식: 취소선, 밑줄이 그어진 텍스트

결과: ... 고정 폭 글꼴

결과: ... 평소보다 글꼴 크기가 큽니다.

결과: ... 기울임꼴

결과: 취소선 텍스트(취소선 글꼴)

결과: 위 첨자

C 위에 제시된 서식 지정 방법은 텍스트의 작은 부분에만 사용해야 합니다. 즐겨 CSS예를 들어 전체 페이지 또는 여러 줄에 대해 특정 글꼴을 설정하려는 경우.