CSS/CSS3 Common Style Summary

1. Force text line display:

White-space:nowrap;

Multiline text last ellipsis:

Display:-webkit-box; -webkit-line-clamp:2; Overflow:hidden; -webkit-box-orient:vertical; Text-overflow:ellipsis;

2. Set overflow text to appear as an ellipsis tag:

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.

Example: Want a piece of text to appear in a fixed width on a line, the last character is an ellipsis (...), CSS style is as follows

White-space:nowrap;text-overflow:ellipsis;overflow:hidden;

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 the connection is too many times, one of the add this code is not practical 4.html in two graphs of the horizontal carriage return resulting in the gap, how can be removed to become no gap.

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

<div></div>

It shows exactly three pictures on top of it.

<div></div>

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; You can resolve the bug 6. Table Syntax

<table aling=left>...</table> table position, left
<table aling=center>...</table> table position, in place
<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> 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> setting table How to display the border
<table width= width >...</table> width of the specified table (using numbers)
<table height= Height >...</table> Specify the height of the table (using numbers)
<td colspan= Parameters >...</td> Specify the number of columns in the cell merge column ( Use a number)
<td rowspan= parameter >...</td> Specify the number of columns (using numbers) for the cell merge column 7.CSS text-transform

The Text-transform property controls the case of the text.

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>

Transparency-compatible code in 10.CSS:

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
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 13: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.
Box-shadow reference: http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html 14.css3 Set Font

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

CSS Mandatory line break

{

Word-break:break-all;/* Support IE,CHROME,FF not supported */

word-wrap:break-word;/* support ie,chrome,ff*/

}
 

16.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

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 for Vertical gradient 1 represents the RGB color and HSL color of the horizontal gradient 18.css3, IE8 does not recognize RGBA notation the principle of RGB color is to form 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.

Background-color:rgba (0,0,0,0.5), this writing solution opacity bring the element also transparent problem, single IE8 low version browser does not support. 19. Initialize the Em,u italic

Em,u{font-style:normal;}

20. Cancel the mobile page click on the picture in a the dotted box problem

-webkit-tap-highlight-color:transparent;

-webkit-touch-callout:none;

-webkit-user-select:none;

21. Media Query function:General wording:

@media screen and (max-width:960px) {
    body{
        background: #000;
    }
}

Someone should find that there is a screen in the code above, which means to tell the device to use it when the page is printed.