Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to set underlining in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The method of setting underscore in css: 1, use "text-decoration:underline;" to set underscore style; 2, use "border-bottom" property to set underline style.

This article operating environment: windows7 system, HTML5&&CSS3 version, DELL G3 computer

The method of setting underscore in css

You can use the text-decoration property or the border-bottom property to underline fonts in CSS.

1. Use text-decoration:underline; to set the underline style

The text-decoration property of CSS is used to specify the embellishment to be added to the text, and its underline property value defines a line under the text.

Syntax:

Text-decoration:underline

Code example:

Css text underline style. Demo span {text-decoration:underline;} this is a test text, HTML Chinese net!

The underscore added by the css text-decoration attribute is the simplest style, and there is no way to set anything special, such as setting the underscore to a dotted one. Let's take a look at another way to add underscores, which can set different underline styles.

2. Use the border-bottom property to set the underline style

The border-bottom property of CSS sets the style of the bottom border of the element so that you can add a line under the text.

Syntax:

Border-bottom: width style color

Parameters:

Width: specifies the width of the lower border.

Style: specifies the style of the lower border.

Color: specifies the color of the lower border.

Description: border-bottom attribute can be used to control the thickness, color and style of lines to achieve different text underline styles.

Code example:

Css text underline style .demo {width: 400pxsecality.demo {border-bottom: 1px solid # 000000;} .demo2 span {border-bottom: 5px solid # 0081EF;} .demo3 span {border-bottom: 2px dashed # 000000;} .demo4 span {border-bottom: 2px dotted # 000000;} .demo5 span {border-bottom: 5px double # 000000;} this is the first test text, HTML Chinese website!

This is the second paragraph of the test text, HTML Chinese!

This is the third paragraph of the test text, HTML Chinese website!

This is the fourth paragraph of the test text, HTML Chinese website!

This is the fifth paragraph of the test text, HTML Chinese website!

This is the end of the content of "how to set underlining in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.