What are the application skills of Css
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!
