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.                                         ;input type="button"
2. onMouseOver="this.className='over';"
3. onMouseOut="this.className=' ';"
4. onMouseDown= "this.className='down';"
5. onMouseUp="this.className='over';"
6. value="Unclicked button"
7. onClick ="this.value='The clicked button'" name="Button">
11. 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. Set as homepage|Contact us |Add to favorites

8. Chinese stroke effect

Java code

2. class="sizscolor"> Chinese stroke effect

9. Adjust word spacing

{ 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: <#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

or

Html code

2. < ;input type="file" id="file" size="1" style="width:100" class="upload">
3. Upload< /a>

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.   
2.   
3.   

4.   

5.   

6.   

7.   

8.   

9.   

10.   

11.   

12.   
13.