css tips memo_html/css_WEB-ITnose

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

1. 080b747a20f9163200dd0a7d304ba388
2. f3c6ff956f7f6ef54cafd2552cee6671 
3. 531ac245ce3e4fe3d50054a55f265927                                        ;input type="button"
4. onMouseOver="this.className='over';"
5. onMouseOut="this.className=' ';"
6. onMouseDown= "this.className='down';"
7. onMouseUp="this.className='over';"
8. value="Unclicked button"
9. onClick ="this.value='The clicked button'" name="Button">
13. Three,
in Import another CSS from one CSS file

@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);

1. /* Safari & Chrome */ image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));
3. /* IE6 & IE7 */ 
4. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); 
5.  
6. /* IE8 */ 
7. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; 
8. } 
12. background:#f4faff9;
background:linear-gradient(#fff 0%,#f1f9ff 100 %) no-repeat;
13. background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
background:-webkit-gradient(linear,0 0,0 100% ,from(#fff),to(#f1f9ff)) no-repeat;

background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat

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

1. 92384714f092cc07598aa769f2cc6930Set as homepage5db79b134e9f6b82c0b36e0489ee08ed|e192d76e833851318e3bb90ed06ab784Contact us5db79b134e9f6b82c0b36e0489ee08ed |a5f05e2e71d8117a8b35ab4dd6bfecbeAdd to favorites5db79b134e9f6b82c0b36e0489ee08ed

8. Chinese stroke effect

Java code

1. 080b747a20f9163200dd0a7d304ba388 "Verdana";
2. filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);
4. }
5. .sizscolor {
6. font-size:14px; font-weight:bold;
7. position:absolute;
8. padding:4px;
9. filter:
10. Dropshadow(offx=1,offy=0,color=white)
11. Dropshadow(offx=0,offy=1,color=white)
12. Dropshadow (offx=0,offy=-1,color=white)
13. Dropshadow(offx=-1,offy=0,color=white);
14. }
16. -->
17. 531ac245ce3e4fe3d50054a55f265927
18. 9c3bca370b5104690d9ef395f2c5f8d1 class="sizscolor"> Chinese stroke effect16b28748ea4df4d9c2150843fecfba68
19. 36cc49f0c466276486e50c850b7e4956
22. 9. Adjust word spacing
24. { text-transform: uppercase; letter-spacing: 2px }

10. The problem of doubling margin

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: dcb9747e38711bafad73ca1c45a03560 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)

2f4a40c797b4dee338ee82226f99becd

696573c02c6ce9d49f6db49867271094

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

1. c887657927aedee4faf97a8312bb6eaa
2. 817bd0c437a10b0c378b1a4985102dfa
3. f1beef59c62422721e46dcbaa5527fc0
4. cb2b66fcc177982dd415108de4dd76a6
5. 34934661d7147ca926b095899343bad0
6. a64997a0904a094b4570728d7f327acd
7. e654da01b9d934d0b898b3fb6c044aec
8. eaf8bc0776e75a4aea635ad455438ac4
9. c22b7a3084c6162104b08662b1ebf8b7
10. f2475bc0d02a524246eacdb398ec424e
11. 6eac519e8537e4205ddd37e30a7b548a

or

Html code

1. 37fc46e97bc03ad53c7d8a4e67801750
2. < ;input type="file" id="file" size="1" style="width:100" class="upload">
3. ee7959cc8dd4be16ef633321c03dac32Upload16ef26f8b7ea0fc89bdf90e275a93e5d54bdf357c58b8a65c66d7c19c8e4d114

Css code

1. #uploadImg{ font-size:12px; overflow:hidden; position:absolute;  left:190px; top:6px; }  
2. #uploadImg a { color:#000; line-height:24px; text-align:center; display:block; width:70px; margin:0; height:24px; border:1px solid #aecbd3; background:url(../images/btnbj.gif) repeat-x 0 0; }  
3. #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}  

 

Html代码  

1. c9ccee2e6ea535a969eb3f532ad9fe89  
2. input{border:1px solid green;}  
3. div {width:300px;position:relative;}  
4. p {float:left}  
5. .file {position:absolute;top:20px;right:300px; top:0; right:73px;width:0px;height:30px;  
6. filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}  
7. #txt {height:29px;margin:1px}  
8. #ii {width:70px;height:27px;margin-top:2px;}  
9. 531ac245ce3e4fe3d50054a55f265927  
10. dc6dce4a544fdca2df29d5ac0ea9906b  
11. 4d74cb3dd2981faa5d1bd304fcc417e3  
12. e388a4556c0f65e1904146cc1a846bee  
13. c6b169192f1086c46ebda06f7d392b3c  
14. 94b3e26ee717c64999d7867364b1b4a3  
15. e388a4556c0f65e1904146cc1a846bee  
16. f332ff98a5bd00e08bf4415c889c0989  
17. 94b3e26ee717c64999d7867364b1b4a3  
18. e388a4556c0f65e1904146cc1a846bee  
19. 121fef1d28b8310041beb7bcd16e08d2  
20. 94b3e26ee717c64999d7867364b1b4a3  
21. f5a47148e367a6035fd7a2faa965022e  
22. 16b28748ea4df4d9c2150843fecfba68  

 

 

二十一、css bug

 

	IE6	IE7	IE8	Firefox	Chrome	Safari
!important		Y		Y
_	Y
*	Y	Y
*		Y
9	Y	Y	Y