Shulou(Shulou.com)06/01 Report--

This article mainly introduces what Css application skills have, which can be used for reference. I hope you can learn a lot after reading this article. Let's take a look at it.

1. Clear the gap between several pixels at the bottom of the picture

Method 1:

The code is as follows:

Img {display:block;}

Method 2:

The code is as follows:

Img {vertical-align:top;}

In addition to the top value, it can also be set to text-top | middle | bottom | text-bottom, or even specific sum values

Method 3:

The code is as follows:

# test {font-size:0;line-height:0;}

# test is the parent element of img

two。 Align the text vertically to the text input box

Methods:

The code is as follows:

Input {vertical-align:middle;}

3. Centers a single line of text vertically in the container

Methods:

The code is as follows:

# test {height:25px;line-height:25px;}

Just set the line height of the text to be equal to the height of the container.

4. Make the color of the hyperlink different after access and before access, and retain the hover and active effects after access

Methods:

The code is as follows:

A:link {color:#03c;}

A:visited {color:#666;}

A:hover {color:#f30;}

A:active {color:#c30;}

Just set the hyperlink style in the order of L-V-H-A, and you can write shorthand as LoVe (like) HAte (hate).

5. Why can't IE set the color of the scroll bar under Standard mode?

Methods:

The code is as follows:

Html {

Scrollbar-3dlight-color:#999

Scrollbar-darkshadow-color:#999

Scrollbar-highlight-color:#fff

Scrollbar-shadow-color:#eee

Scrollbar-arrow-color:#000

Scrollbar-face-color:#ddd

Scrollbar-track-color:#eee

Scrollbar-base-color:#ddd

}

Define the scroll bar color style originally set on body to the html tag selector.

6. Make the text overflow boundary without wrapping to force it to be displayed on one line

Methods:

The code is as follows:

# test {width:150px;white-space:nowrap;}

Set the width and white-space of the container to nowrap, which is similar to the label.

7. Make the text overflow boundary appear as an ellipsis

Method (this method is not supported by Firefox5.0):

The code is as follows:

# test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

You first need to set up to force the text to be displayed on one line, then truncate the overflowed text through overflow:hidden, and display the truncated text as an ellipsis in text-overflow:ellipsis.

8. Make continuous long strings wrap automatically

Methods:

The code is as follows:

# test {width:150px;word-wrap:break-word;}

The break-word value of word-wrap allows word wrapping

Thank you for reading this article carefully. I hope the article "what are the Application skills of Css" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.