Consolidate 20 CSS/CSS3 Common Properties

Here I summed up my usual in the project often used in the 20 CSS commonly used style, are some personal experience, here to share to everyone, I hope to help you

1. Force text line display: White-space:nowrap;

2. Set overflow text to appear as ellipsis: text-overflow:ellipsis;
(Note: text-overflow:clip | ellipsis | ellipsis-word; (CSS3 newly added)
Where clip represents the text that cuts the overflow directly;
A value of ellipsis indicates that an ellipsis (...) is displayed when the text overflows, omitting the mark in place of the last character;
A value of Ellipsis-word indicates that an ellipsis (...) is displayed when the text overflows, but that the ellipsis is substituted for the last word.

3. For example a piece of code: <a href= "javascript:void (0)" ></a>
When you click on the picture in the a tag, there are dashed boxes, ie pictures and borders, how to solve?
Workaround:
A{outline:none;} Mainly for Firefox and other browsers, but IE does not
img{border:0;}
A:active{nooutline:expression (This.onfocus=this.blur ());} Resolve the dashed box in Ie6,ie7.

For a label, the general simple solution is:
Add JS control to the a tag, when the A tag is focused, force cancel focus, this time a tag naturally will not have a dashed box.

<a href= "#" onfocus= "This.blur ();" > Testing </a>
But when there are too many connections, it's not practical to add a single piece of code.

4.html in two graphs transverse carriage return lead to the gap, how can be removed to become no gap?

For example: P width 300px; IMG width 100px; border:0px;

The code is as follows:

<p>

</p>
The above situation shows exactly three pictures </p><p><p>



</p>

In this case, it is not possible to display three graphs horizontally because the carriage return causes a gap between the two graphs.
The solution is to let the picture float.

5.css IE6, IE7 Overflow:hidden Invalid solution

Cause:
The Overflow:hidden property of the parent element is invalidated when the parent element's immediate child or subordinate child element's style has the Position:relative property.

Workaround:
We found that child elements in IE 6 and 7 would exceed the height set by the parent element, even if the parent element was set to Overflow:hidden.
Solving this bug is simple, using *position:relative in the parent element; The bug can be resolved

6. Table syntax

The code is as follows:

<table aling=left>...</table> table position, left
<table aling=center>...</table > table position,
<table background= picture path >...</table> background image url= is the path URL
<table border= border size >...< /table> Set table border size (using numbers)
<table bgcolor= color code >...</table> Set table background color
<table borderclor= color code > ...</table> set the color of the table border
<table borderclordark= color code >...</table> Set the color of the table's dark border
<table borderclorlight= color code >...</table> Set the color of the table bright border
<table cellpadding= parameters >...</table> Specify the spacing between the content and the gridline (using numbers)
<table cellspacing= parameter >...</table> refers to the distance between the hold line and the gridline (using a number)
<table cols= Parameters >...</table> Specify the number of columns in the table
<table frame= Parameters >...</table> Set table How to display the box
<table width= width >...</table> Specify the width of the table (using numbers)
<table height= height >...</table> Specify the height of the table (using numbers)
<td colspan= Parameters >...</td > Specify the number of columns (using numbers) for the cell merge column
<td rowspan= parameters >...</td> Specify the number of columns (using numbers) for the merged columns of a cell

7.CSS Text-transform

The Text-transform property controls the case of the text.
Possible values
Value Description
None defaults. Defines the standard text with lowercase letters and uppercase letters.
Each word in the capitalize text begins with an uppercase letter.
The uppercase definition has only uppercase letters.
lowercase defines no capital letters, only lowercase letters.
Inherit specifies that the value of the Text-transform property should be inherited from the parent element.

8. letter-spacing

The Letter-spacing property increases or decreases whitespace between characters (character spacing).
For example: letter-spacing:2px;

9.textarea Remove the right scroll bar, remove the lower right corner drag

Code: <textarea style= "Overflow:hidden; Resize:none; "> </TEXTAREA>

10.CSS Transparency Compatible Code: Filter:alpha (opacity=80); opacity:0.8;

11. Control CSS styles According to the type of input

A. Using the type selector in CSS

Input[type= "text"] {background-color: #FFC;}
B. Using the expression of CSS to judge expressions

input{background-color:expression (this.type== "text"? #FFC ': '); }
C. Implement with JavaScript script (feel unnecessary, omit ...)

12:text-stroke
[Text-stroke-width]: Sets or retrieves the stroke thickness of text in an object [Text-stroke-color]: Sets or retrieves the stroke color of text in an object

13:text-stroke
Note Points for Text-stroke (text strokes) and text-fill-color (text fill color):
Currently these two properties are supported only by WebKit kernel Safari and chrome, for example:-webkit-text-stroke:3.3px #2A75BF;
Text-fill-color: Color values, and color attributes are almost the style of the text;
Using both the Text-fill-color and the color properties, Text-fill-color overrides the color value of the color property;
Text-fill-color can use transparent values, namely: text-fill-color:transparent

14:text-shadow
text-shadow:0px 0px 0px #333333;
Property values in order: horizontal displacement (supports negative values), vertical displacement (supports negative values), blur radius, shadow color
Text-shadow to the same text, you can set multiple shadows, similar to Box-shadow, using the comma "," split, the previous setting effect on the next set effect.

15. Set the font

The code is as follows:

<style> @font-face</p><p>{font-family:myfirstfont;</p><p>src:url (' Sansation_ Light.ttf '),</p><p>    url (' Sansation_light.eot ');/* ie9+ */}</p><p>p{font-family: Myfirstfont;} </p><p></style>

CSS Mandatory line break

The code is as follows:

{</p><p>word-break:break-all;/Support IE,CHROME,FF does not support/word-wrap:break-word;/support ie,chrome,ff/}

17.css:first-child Selector,: Last-child selector,: Nth-child (ie7,8 Invalid, not recognized)
: Nth-child (2) Select the first few tags, "2 can be the number you want"
: Nth-child (2n) Select even label, 2n can also be even
: Nth-child (2n-1) Select Odd Label, 2n-1 can be odd
: Nth-child (3n+1) custom selection label, 3n+1 means "two take one"

CSS3 Implementing background color gradients

The code is as follows:

Background:-webkit-linear-gradient (Top, #FFF, #cb1919);
Background:-o-linear-gradient (Top, #FFF, #cb1919);
Background:-ms-linear-gradient (Top, #FFF, #cb1919);
Background:-moz-linear-gradient (Top, #FFF, #cb1919);
Background:linear-gradient (Top, #FFF, #cb1919);

First parameter: Sets the starting position of a gradient

Second parameter: Set the color of the starting position

Third parameter: Set the color of the end position
Internet explorer

IE to implement the gradient can only use IE's own filter to achieve

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr=#00ffff,endcolorstr=#9fffff,grandienttype=1);

First parameter: The color of the start position of a gradient

Second parameter: Color of the gradient end position

Third parameter: type of gradient

0 represents a vertical gradient of 1 for a horizontal gradient
IE8 does not recognize RGBA notation

RGB color and HSL color of CSS3
The principle of RGB color is to make a color by defining different red-green-blue values. Color:rgb (254,2,8);
HSL is the hue, saturation, luminance mode to declare the color. COLOR:HSL (359,99%,40%);

If you need to set a transparent background, you can use them:

Background-color:hsla (0,0%,100%,0.8); Background-color:rgba (255,255,255,0.8);

The reason for not using opacity is that opacity makes the elements inside transparent, but not the top.

20. Initialize the Em,u italic

Em,u{font-style:normal;}

"Recommended"

1. CSS3 Free Video Tutorial

2. h5 and CSS3 to make input boxes with hint text

3. Share some of the most recent CSS3 properties that are commonly used

4. Use CSS to make chat box small sharp corner, bubble effect

5. Browser for mobile high-performance CSS3 animation