Preface: In the process of learning and practicing CSS, I often forget some seemingly commonly used codes. In order to strengthen my memory, I will summarize them here and add and delete them one after another for immediate reference. I hope that I can solve problems in time in the future and keep these strange characters in mind.
1. About forced alignment of paragraph text
text-align:justify; text-justify:inter-ideograph ;
If you want to align the text at both ends, you must first define the width of P, then { text-align:justify; text-justify :distribute-all-lines; }
2. Add CSS to the different states of the button
Html code
@import url(***.css);
Four , Gradient background color (you must add width or height to use this)
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);
When using this, you must pay attention to defining the width or height value of the DIV.
Css code
.gradient {
/* Firefox 3.6 */
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
5. Use PNG images to create transparent effects in IE6
*html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled =true, sizingMethod=scale, src=images/*.png); background:none; }
6. Single line omitted text
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
When using this, you must pay attention to defining the width of a single line (such as div or li) that needs to omit text value.
7. Code for setting as homepage and adding to favorites
Html code
8. Chinese stroke effect
Java code
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6. The solution is to add display:inline; to this div. For example: <#div id="imfloat"> The corresponding css is #IamFloat{ float:left; margin:5px; /*under IE, it is understood as 10px*/ display:inline;/*Under IE, it will be understood as 5px*/}
11. Putting the mouse on the picture will make the picture brighter
You can use pictures to replace the technique, or you can use the following filters. The code is as follows:
.pictures img { filter: alpha(opacity=45); }.pictures a:hover img { filter: alpha(opacity=90); }
12. Distinguish between different browsers
Difference between FF, IE7 and IE6:
background: orange ;* background:green !important ;*background:blue ;
Note: IE can recognize *; standard browsers (such as FF) cannot recognize *;
IE6 can recognize *, but not !important, IE7 can recognize *, but also !important;
FF cannot recognize *, but can recognize !important;
One more thing to add, underscore "_ ",
IE6 supports underline, but neither IE7 nor firefox supports underline.
So you can also distinguish IE6, IE7, firefox in this way
: background:orange ;* background:green ;_ background:blue ;
Note: No matter what method is used, the order of writing is that firefox is written at the front, IE7 is written in the middle, and IE6 is written at the end.
13. Single-line image text vertically aligned in the center
style *{vertical-align:middle;...}
14. Input plus style (1)
input[type~=radio]
{
...
}
Meaning: Please apply the following style to all inputs, except for inputs whose type attribute is radio.
15. Add style to input (2)
16. Add shadow to text
h1 { float: left; text-indent:0em; text-shadow:black 2px 2px 2px; filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
17. Use Javascript and CSS to remove the dotted box and underline in the link
Add onFocus= in the link tag "if(this.blur)this.blur()" can block the dotted box that appears around the click, such as:
18. input type="image "
19. Delete the dotted box on the link
a:active, a:focus { outline:none; }
20. Change the style of the upload button
Html code