สไตล์การขีดเส้นใต้ CSS การขีดเส้นใต้ลิงก์และข้อความผ่าน CSS ซึ่งเป็นคุณสมบัติการตกแต่งข้อความ วิธีเปลี่ยนสไตล์และสีของขีดเส้นใต้
คุณสมบัติการตกแต่งข้อความ CSS มีหน้าที่ตกแต่งข้อความในแง่ของการขีดเส้นใต้ คุณสามารถขีดเส้นใต้หรือขีดเส้นใต้บนได้ คุณยังสามารถขีดฆ่าข้อความหรือใช้ขีดเส้นใต้ทั้งหมดพร้อมกันได้
ไวยากรณ์การตกแต่งข้อความ CSS
...การตกแต่งข้อความ: ไม่มี|ขีดเส้นใต้|โอเวอร์ไลน์|เส้นผ่าน|สืบทอด; ...
- ไม่มี - ข้อความที่ไม่มีการตกแต่ง
- ขีดเส้นใต้ - ขีดเส้นใต้
- โอเวอร์ไลน์ - ขีดเส้นใต้
- เส้นผ่าน - ข้อความขีดทับ
- กะพริบ - ข้อความกะพริบ (ไม่แนะนำให้ใช้ค่านี้)
คุณสามารถระบุได้หลายค่า ตัวอย่างเช่น
การตกแต่งข้อความ : ขีดเส้นใต้ โอเวอร์ไลน์ ;
วิธีเปลี่ยนสไตล์และสีของขีดเส้นใต้
หากต้องการเปลี่ยนรูปแบบการขีดเส้นใต้มีคุณสมบัติพิเศษ text-decoration-style :
สไตล์การตกแต่งข้อความ: ของแข็ง | สอง | จุด | ประ | หยัก;
- ทึบ - ขีดเส้นใต้ทึบ
- เส้นคู่ - เส้นคู่
- ประ - จุดไข่ปลา
- ประ - เส้นประ
- เส้นหยัก - เส้นหยัก
หากต้องการเปลี่ยนสีขีดเส้นใต้ ให้ใช้คุณสมบัติ text- decoration-color:
สไตล์การตกแต่งข้อความ : color ;
สีสามารถรับค่าในรูปแบบ RGB ชื่อสีได้ (ดูรหัสและชื่อสี html สำหรับเว็บไซต์)
บันทึกขออภัย เบราว์เซอร์เกือบทั้งหมดไม่รองรับคุณสมบัติสไตล์การตกแต่งข้อความและสีตกแต่งข้อความ (เป็นปี 2559 แล้ว)
ตัวอย่างที่มีขีดล่าง
ตัวอย่างที่ 1: ขีดล่างอย่างง่าย
Обычный текст. Нижнее подчеркивание Верхнее подчеркивание
Обычный текст.
Нижнее подчеркивание
Верхнее подчеркивание
Верхнее и нижнее подчеркивание
Пример 2. Зачеркнутый текст
Обычный текст. Зачеркнутый текст
Вот как это выглядит на странице:
Обычный текст. Зачеркнутый текст
Пример 3. Меняем цвет и тип подчеркивания
Обычный текст.
Вот как это выглядит на странице:
Обычный текст.
Красное подчеркивание с пунктирной линией
Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom :
border-bottom : 1px datted red ;
Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:
object.style.textDecoration ="VALUE "
От автора: стилизация подчеркиваний ссылок – довольно сложное занятие, и я постоянно забываю, какой способ лучше подходит в той или иной ситуации. К счастью, Джон Джеймсон поможет нам быстро разобраться в этом в своей статье.
Существует множество способов, как стилизовать подчеркивания. Возможно, вы помните статью «создаем подчеркивания ссылок на Medium ». Medium не пытались делать что-то из рамок вон выходящее, они хотели просто создать привлекательные подчеркивания в тексте.
Тонкие, черные подчеркивания с пробелами вокруг букв с нижними выносками – работа Марсин Витчэри из статьи создаем подчеркивания ссылок на Medium.
Хорошее стандартное подчеркивание, которое к тому же имеет хороший размер и пропускает нижние выносные части букв. Намного лучше, чем в большинстве браузеров по умолчанию. Как оказалось, Medium столкнулись с множеством проблем на своем пути. И даже два года спустя до сих пор хорошая стилизация подчеркиваний вызывает много проблем.
Цели
Почему бы просто не использовать text-decoration: underline? Если мы говорим об идеальном сценарии, подчеркивания должны:
располагаться ниже базовой линии;
пропускать нижние выносные части букв;
менять цвет, толщину и стили;
переходить на новую строку;
работать с любыми фонами.
Я считаю, что мы вполне можем требовать все это от подчеркиваний, однако насколько мне известно, не существует интуитивного способа для решения всех этих задач в CSS.
Подходы
Так какие способы есть в нашем распоряжении для подчеркивания текста? Я вспомнил следующие:
text-decoration;
background-image;
SVG фильтры;
Underline.js (canvas);
text-decoration-*
Пройдемся по всему списку и рассмотрим все плюсы и минусы каждого подхода.
Свойство text-decoration
Свойство text-decoration – самый простой способ подчеркивания текста. Нужно применить всего лишь одно свойство. На маленьком тексте такая линия будет смотреться нормально, но стоит увеличить размер шрифта и она уже смотрится неуклюже.
Самая большая проблема со свойством text-decoration – отсутствие кастомизации. Линия использует цвет и размер шрифта того текста, к которому применяется, и не существует кроссбраузерного способа изменения стилей. Чуть позже поговорим более подробно по этому свойству.
Плюсы
просто использовать;
располагается ниже базовой линии;
пропускает нижние выносные части букв по умолчанию в Safari и iOS;
перепрыгивает на новую строку;
работает с любыми фонами.
Минусы
не пропускает выносные нижние части букв в остальных браузерах;
нельзя менять цвет, толщину и стили.
Свойство border-bottom
Свойство border-bottom – хороший баланс скорости и кастомизации. Данный подход использует проверенные CSS рамки, а значит, вы с легкостью можете менять цвет, толщину и стили. Так выглядит свойство border-bottom на инлайновых элементах:
Самый большой минус – это то, насколько далеко подчеркивание расположено от текста. Подчеркивание расположено ниже нижних выносных частей букв. Данная проблема решается, если сделать элемент inline-block и уменьшить line-height, но тогда теряется возможность перепрыгивать на новые строки. Хорошо подходит для одиночных строк, но не более.
Кроме того, с помощью text-shadow можно скрыть части линии вокруг нижних выносок. В таком случае вам придется имитировать цвет фона, что означает, что метод работает только на однородных фонах. Градиенты и изображения не подойдут.
На данный момент существует 4 свойства для стилизации подчеркивания. Намного лучше, чем просто text-decoration.
Плюсы
можно использовать свойство transition и анимировать цвет и толщину;
перепрыгивает на новые строки по умолчанию, если элемент не inline-block;
Минусы
линия расположена очень далеко и ее сложно передвинуть;
слишком много лишних свойств нужно задействовать, чтобы подчеркивание хорошо смотрелось;
плохое выделение текста при использовании text-shadow.
Свойство box-shadow
Свойство box-shadow рисует подчеркивание с помощью двух внутренних теней: одна создает прямоугольник, а вторая прячет его. Это означает, что для правильной работы метода нужен однородный фон.
Такой же трюк с text-shadow можно использовать для имитации пропуска вокруг нижних выносок букв. Если цвет линии отличается от текста, или она достаточно тонкая, то проблем возникнуть не должно, как это бывает с text-decoration.
Плюсы
можно расположить под базовой линией;
можно пропускать выноски с помощью text-shadow;
можно менять цвет и толщину;
перепрыгивает на новые строки.
Минусы
нельзя менять стили;
не работает со всеми фонами.
Свойство background-image
Свойство background-image лучше всех решает наши задачи, и у него очень мало минусов. Идея заключается в том, что вы создаете изображение с помощью linear-gradient и background-position, которое повторяется по горизонтальной оси вдоль строк текста. Элемент должен быть display: inline;.
Демо ниже не использует linear-gradient. Для создания крутого эффекта, можете использовать свое изображение.
Плюсы
можно расположить ниже базовой линии;
можно пропускать нижние выноски с помощью text-shadow;
можно менять цвет, толщину (даже на полпикселя) и стили;
работает с пользовательскими изображениями;
перепрыгивает на новые строки;
работает с любым фоном, если не использовать text-shadow.
Минусы
размер изображения может по-разному меняться под разные разрешения, браузеры и уровни увеличения.
SVG фильтры
Вот с этим методом я игрался. Вы можете создать инлайновый SVG элемент filter, который будет рисовать линию, и расширить текст, чтобы замаскировать те части линии, которые должны быть прозрачными. Фильтру можно присвоить id и ссылаться на него в CSS с помощью filter: url(‘#svg-underline’).
В чем тут плюс – фильтр добавляет прозрачность, не полагаясь на text-shadow. То есть вы можете пропускать нижние выноски букв на любом фоне, в том числе градиентах и изображениях! Пример ниже работает только с одной строкой текста, так что осторожнее.
А вот так это выглядит в Chrome и Firefox:
В IE, Edge и Safari с поддержкой возникают проблемы. В CSS сложно тестировать поддержку SVG фильтров. Можно использовать правило @supports на filter, но так вы проверите только работу самой ссылки, а не то, применился ли фильтр или нет. Мой способ довольно грубо работает с браузерами, так что будьте вдвойне осторожнее.
Плюсы
расположен ниже базовой линии;
пропускает нижние выноски;
можно менять цвет, толщину и стили;
работает на любом фоне.
Минусы
не перепрыгивает на новые строки;
не работает в IE, Edge и Safari, но можно в качестве фолбэка указать text-decoration. Подчеркивания в Safari сами по себе смотрятся здорово.
Underline.js (Canvas)
Underline.js – удивительная библиотека. Меня впечатляет, что Wenting Zhang смогли сделать с JS и вниманием к деталям. Если вы еще не видели техническое демо Underline.js, остановитесь на минутку и посмотрите. В сети есть замечательное девятиминутное выступление на тему принципов работы , я вам сейчас быстро его перескажу. Подчеркивания рисуются с помощью canvas. Совершенно новый подход, который на удивление хорошо работает.
Несмотря на привлекательное название, это всего лишь техническое демо. То есть вы не сможете сразу поместить библиотеку в проект без целой кучи изменений.
Эту библиотеку стоит упомянуть только лишь, как доказательство концепции. У canvas есть потенциал для создания красивых, интерактивных подчеркиваний, но для правильной работы вам придется написать дополнительный JS код.
Свойства text-decoration-*
Помните, я сказал, что чуть позже мы более подробно разберем что-то? Сейчас этим и займемся. Свойство text-decoration работает хорошо само по себе, но мы можем добавить пару экспериментальных свойств для еще лучшего вида:
text-decoration-color
text-decoration-skip
text-decoration-style
Не радуйтесь раньше времени, вы же знаете о поддержке в браузерах.
Свойство text-decoration-color
Свойство text-decoration-color позволяет менять цвет подчеркивания отдельно от цвета текста. У свойства даже неплохая поддержка в браузерах. Оно работает в Firefox и с префиксом в Safari. Есть свой минус – если вы не очищаете линию вокруг выносок, в Safari она ложится поверх текста. Firefox:
Свойство text-decoration-skip
Свойство text-decoration-skip отвечает за пропуск нижних выносок в подчеркиваемом тексте.
Свойство нестандартное и на данный момент работает только в Safari. Для работы в других браузерах нужно использовать префикс –webkit-. В Safari это свойство включено по умолчанию, вот почему подчеркивания пропускают нижние выноски даже на сайтах, где это свойство не указано.
Если вы используете Normalize, вам нужно знать, что последние версии отключают свойство для нормальной работы во всех браузерах. Если вы хотите вернуть эти почти магические подчеркивания, вам нужно включить данное свойство.
Свойство text-decoration-style
Свойство text-decoration-style предлагает тот же набор подчеркиваний, что и свойство border-style, но также добавляет новый вид – wavy. Возможные значения:
Прямо сейчас свойство text-decoration-style работает только в Firefox, ниже показан скриншот:
Набор однотонных подчеркиваний Выглядит похоже?
Что не так?
Свойства text-decoration-* более интуитивны по сравнению с другими свойствами для стилизации подчеркиваний. Однако если по-другому взглянуть на требования, которые мы предъявили ранее, то можно заметить, что с помощью этих свойств нельзя менять толщину и позицию. После небольшого изучения я нашел эти два свойства:
text-underline-width
text-underline-position
Похоже, эти свойства были выброшены из ранней версии CSS из-за отсутствия интереса к ним. Они так и не применялись. Эй, я в этом не виноват.
Выводы
Так как же лучше всего подчеркивать текст? Все зависит от разных факторов.
Для маленького текста я рекомендую использовать text-decoration и экспериментальное свойство text-decoration-skip, надеясь, что оно будет работать. В большинстве браузеров это смотрится так себе, но так было всегда, и люди не обращали на это внимание. Если вы достаточно терпеливы, есть шанс, что в скором времени все ваши подчеркивания будут хорошо смотреться, и вам ничего не придется менять.
Для основного текста используйте background-image. Метод работает, смотрится красиво, и для него есть Sass миксины. Если подчеркивание тонкое, или цвет отличается от текста, скорее всего, вы можете пропустить метод с text-shadow. Для текста на одной строке используйте border-bottom и любые другие свойства.
А для пропуска выносок букв на градиентных фонах или изображениях попробуйте использовать фильтра SVG. Или же просто не смешивайте такие фоны с подчеркиваниями. В будущем, когда улучшится поддержка в браузерах, можно будет использовать свойства text-decoration-*.
Продолжаем творить трюки на чистом css. Сегодня я расскажу, как на средствами css сделать красивую разделительную линию в виде волны на сайте. Ее можно использовать, например, для визуального разделения постов на блоге, или отдельных блоков в сайдбаре.
Когда-то я уже рассказывал о . Но там применялся тег-динозавр hr с парочкой хитрых правил в стилях, позволявших поиграться с тенью.
Сегодня же совсем иной расклад. Для отображения линии в виде волны придется добавить в правила гораздо больше хитростей и применять уже не просто css, а css3. Вэлкам!
Для начала обычный html код. Линии мы будем выводить пустыми блоками div со специальными наборами правил. Пустые блоки - это, конечно же, зло. Но иногда приходится с ним мириться.
Здесь мы показали 4 вида линий. А вот так будет выглядеть набор стилей в css для них:
Wave {
overflow: hidden;
position: relative;
width: 630px;
height: 50px;
}
.line {
position: absolute;
width: 630px;
height: 26px;
}
.line1 {
}
.line2 {
}
.line {
background-size: 50px 50px;
}
.smallLine {
position: absolute;
width: 630px;
height: 5px;
}
.smallLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, black 49%, transparent 51%);
}
.smallLine {
background-size: 10px 10px;
}
.circle {
position: absolute;
width: 630px;
height: 20px;
background: radial-gradient(16px, transparent, transparent 4px, black 4px, black 10px, transparent 11px);
background-size: 30px 40px;
}
.circle2 {
top: 20px;
left: 15px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 630px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
Здесь мы использовали такие фишки как linear-gradient и radial-gradient из арсенала css3.
Есть и другой вариант применения разделительной линии в виде волны (самая нижняя на иллюстрации в начале поста). Ее можно применять в конце какого-либо блока, как нижнее оформление. Код достаточно прост. Сначала html:
В правилах css применим псевдоэлементы:before и:after . О них вы можете прочитать . Вот как будет выглядеть код:
Wave{
width: 630px;
background: #333;
height: 30px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #19d1ff 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, #19d1ff 12px, transparent 13px);
}
Вот и все! Дерзайте!
Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных.
Использование text-decoration
Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color . В примере 1 показано применение text-decoration к элементу
.
Пример 1. Использование text-decoration
ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 1.
ข้าว. 1. มุมมองเส้นที่สร้างจากการตกแต่งข้อความ
เบราว์เซอร์ IE และ Edge ไม่รองรับคุณสมบัติ text- decoration-color
ใช้เส้นขอบด้านล่าง
คุณสมบัติ ขอบล่างเพิ่มเส้นความหนา สี และสไตล์ที่ระบุให้กับองค์ประกอบด้านล่าง เส้นดังกล่าวใช้ความกว้างทั้งหมดที่มีอยู่แม้จะมีความยาวของข้อความชื่อเรื่องก็ตาม (รูปที่ 2)
ข้าว. 2. มุมมองของเส้นที่สร้างด้วยขอบล่าง
ระยะห่างจากบรรทัดถึงข้อความสามารถปรับได้โดยใช้คุณสมบัติ ช่องว่างภายในด้านล่างดังแสดงในตัวอย่างที่ 2
ตัวอย่างที่ 2: การใช้เส้นขอบด้านล่าง
การแสดงสุนทรพจน์ทางวัฒนธรรมในศตวรรษที่ 21
แท้จริงแล้ว อุปกรณ์ต้นฉบับที่สร้างตำนานได้แสดงให้เห็นวาทกรรม และสิ่งนี้ทำให้มีเสียงและลักษณะเฉพาะของมันเอง
หากต้องการทำให้บรรทัดมีความกว้างของข้อความ เพียงเปลี่ยนหัวเรื่องให้เป็นองค์ประกอบบล็อกอินไลน์โดยเพิ่มคุณสมบัติ h2 ให้กับตัวเลือก แสดงด้วยค่า inline-block
การใช้::after และเนื้อหา
คุณสามารถสร้างเส้นเทียมผ่านการรวมคุณสมบัติได้ เนื้อหาและองค์ประกอบหลอก ::หลังจาก- โดยจะแสดงเฉพาะองค์ประกอบหลอกที่ว่างเปล่าหลังชื่อเรื่อง และลักษณะที่ปรากฏขององค์ประกอบหลอกนี้จะถูกกำหนดโดยคุณสมบัติอื่น ในรูป 3 แสดงเส้นที่คล้ายกัน
ข้าว. 3. สร้างบรรทัดผ่าน::after
ตำแหน่งของบรรทัดดังกล่าวสัมพันธ์กับข้อความจะถูกระบุผ่านคุณสมบัติ ด้านล่างที่มีค่าลบ สีของเส้นผ่านคุณสมบัติ พื้นหลัง- อันที่จริง นี่ไม่ใช่เส้น แต่เป็นบล็อกสี่เหลี่ยม ดังนั้นเราจึงใช้การเติมพื้นหลัง (ตัวอย่างที่ 3)
ตัวอย่างที่ 3: การใช้::หลัง
การแสดงสุนทรพจน์ทางวัฒนธรรมในศตวรรษที่ 21
แท้จริงแล้ว อุปกรณ์ต้นฉบับที่สร้างตำนานได้แสดงให้เห็นวาทกรรม และสิ่งนี้ทำให้มีเสียงและลักษณะเฉพาะของมันเอง
ช่วยให้คุณสร้างขีดเส้นใต้ที่แตกต่างกันใน HTML: ขีดเส้นใต้, โอเวอร์ไลน์, ข้อความผ่านบรรทัด ฯลฯ มารวมคุณสมบัตินี้กับคุณสมบัติก่อนหน้าและรับ:
บรรทัดที่สองแสดงให้เห็นว่าทุกอย่างเขียนในแถวเดียวพร้อมการตกแต่งข้อความอย่างไร
รูปแบบการตกแต่งข้อความ - รูปแบบการขีดเส้นใต้ข้อความ
ตัวเลือกระบุ รูปร่างเส้นตกแต่งสำหรับ /link. หลักเกณฑ์ CSS ใหม่ได้เพิ่มค่าหยักและสองเท่า ดังนั้นตอนนี้จึงมี 5 ค่าแล้ว:
- เส้นทึบ - เส้นทึบ;
- สองเท่า - สองเท่า (จากตัวอย่างแรกด้านบน);
- ประ - ประกอบด้วยลำดับของจุด
- ประ - ช่วยให้คุณสร้างขีดเส้นใต้ CSS ประ
- หยัก - เส้นหยักที่งดงาม
text-underline-position - CSS ขีดเส้นใต้ตำแหน่ง
การใช้คุณสมบัตินี้ คุณสามารถควบคุมตำแหน่งของเส้นที่สัมพันธ์กับสัญลักษณ์แบบอักษรได้
มีให้เลือกทั้งหมด 4 แบบ:
- auto — ตั้งอยู่ใกล้กับบรรทัดฐานของข้อความมากที่สุด
- ใต้ - ใต้ขอบล่างสุดของแบบอักษร
- ซ้ายและขวา - ซ้าย/ขวา สำหรับโพสต์ที่แสดงแนวตั้ง
นี่คือความแตกต่างที่มองเห็นได้ระหว่างการขีดเส้นใต้ข้อความโดยใช้อันเดอร์และอัตโนมัติ:
ฉันคิดว่าความแตกต่างค่อนข้างชัดเจน
ตกแต่งข้อความข้าม - ลบการขีดเส้นใต้สำหรับองค์ประกอบ
เมื่อใช้ตัวเลือกนี้ คุณสามารถยกเลิก (ข้าม) การตกแต่งองค์ประกอบบางอย่างได้ บรรทัด HTML- เพื่อให้เข้าใจถึงค่าที่ยอมรับได้ของช่องว่าง วัตถุ การตกแต่งกล่อง ขอบ หมึก ฉันจะทำซ้ำรูปภาพจากบันทึกย่อก่อนหน้า:
ตัวอย่างเช่น การใช้หมึก คุณสามารถสร้างขีดล่างใน CSS ที่จะไม่ตัดกับอักขระได้ วัตถุค่าช่วยให้คุณสามารถข้ามองค์ประกอบแบบอินไลน์ (อินไลน์บล็อก) - แทรกช่วงและเส้นทึบจะแตกในตำแหน่งที่เหมาะสม:
พารามิเตอร์การตกแต่งกล่อง ช่องว่าง ขอบ ได้รับการสนับสนุนน้อยกว่ามากจากเบราว์เซอร์ ดังนั้นบางครั้งผลลัพธ์จึงแตกต่างจากที่คาดไว้ นี่คือสถานะของความเข้ากันได้/การสนับสนุนการตกแต่งข้อความในขณะที่เขียน:
เคล็ดลับเพิ่มเติมสำหรับการขีดเส้นใต้ลิงก์
ผู้ใช้ระดับเริ่มต้นมักจะถามคำถามทั่วไปในหัวข้อนี้ ดังนั้นเราจึงตัดสินใจพิจารณาคำถามเหล่านี้ด้วย ตัวอย่างทั่วไปอยู่ที่ด้านล่างสุดหลังจากคำอธิบาย
วิธีลบลิงค์ที่ขีดเส้นใต้
a:hover ( การตกแต่งข้อความ: ขีดเส้นใต้; )
ทั้งสองตัวอย่างด้านล่างช่วยให้คุณเข้าใจตรรกะของวิธีการทำงานของโฮเวอร์: คุณอาจระบุลิงก์ที่ขีดเส้นใต้ใน CSS ในตอนแรก จากนั้นจึงลบลิงก์ออกในโฮเวอร์ หรือในทางกลับกัน
หากคุณมีคำถามอื่นๆ ในหัวข้อนี้ โปรดถามพวกเขาในความคิดเห็น เราจะพยายามตรวจสอบในภายหลังหรือให้คำแนะนำในคำตอบแก่คุณ สิ่งสำคัญในเรื่องนี้คือการปฏิบัติ ลองเพิ่มคุณสมบัติต่างๆ สำหรับตัวเลือกการตกแต่งข้อความในตัวอย่างโดยตรง หรือสร้างไฟล์ทดสอบของคุณเอง เราหวังว่าทุกอย่างชัดเจนในหัวข้อการขีดเส้นใต้ข้อความและลิงก์ใน CSS / HTML
