Summary of common styles of CSS/CSS3

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.

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: 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; The bug can be resolved

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> setting 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 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 grid (using numbers)
<table cols= Parameters >...</table> The number of columns in the specified table
<table frame= Parameters >...</table> setting table How to display the frame line
<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 bar (using numbers)
<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"]{}

B. Using the expression of CSS to judge expressions

input{}

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 Setting fonts

<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

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 represents a vertical gradient of 1 for a horizontal gradient

18.CSS3 RGB color and HSL color, IE8 does not recognize RGBA notationThe principle of RGB color is to make a color by defining different red-green-blue values. Color:rgb (254,2,8), where HSL declares the color by hue, saturation, and brightness mode. COLOR:HSL (359,99%,40%); If you need to set a transparent background, you can use them: 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.

font-size:17px; border-radius:6px; Color:rgb (255, 255, 255); font-family: Microsoft Ya-black, arial, black body, Arial; height:26px; line-height:25px; Text-shadow:rgb (2px 2px 3px) margin:12px 0px!important; Background:rgb (119, 119, 119); " >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's going to find out there's a piece of code Screen, he means to tell the device to use a serif font when printing a page, and a sans serif font when it is displayed on the screen. But at the moment I find a lot of sites will be directly omitted screen, because your site may not need to consider the user to print, you can write directly:

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

Among CSS2 media queries: <link rel= "stylesheet" type= "text/css" media= "screen" href= "Style.css" > We want to know if the mobile device is a portrait-placed display, It can be written like this: <link rel= "stylesheet" type= "text/css" media= "screen and (orientation:portrait)" href= "Style.css" > We also use the first paragraph of code to implement the same CSS2, so that it can make the page width less than 960 of the execution of the specified style file: <link rel= "stylesheet" type= "text/css" media= "screen and ( max-width:960px) "href=" Style.css "> but above this method, the biggest disadvantage is that he will increase the number of page HTTP requests, increase the burden of the page, we use the CSS3 to write the style in a file is the best way. The following notation is implemented with dimensions equal to 480px:

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2) {

The style you added yourself

}

One of the following explanations for-webkit-min-device-pixel-ratio:

The-webkit-min-device-pixel-ratio is 1.0 1.  All non-Retina Mac 2.  All non-retina iOS devices 3.  Acer Iconia A500 4.  Samsung Galaxy Tab 10.1 5. Samsung Galaxy S

     -webkit-min-device-pixel-ratio for 1.3    1.  Google Nexus 7      -webkit-min-device-pixel-ratio for 1.5    1.  Google Nexus S      2.  Samsung Galaxy S ii     3.  HTC desire     4.  HTC Desire hd    5.  HTC Incredible s     6.  HTC velocity    7.  HTC sensation      - Webkit-min-device-pixel-ratio for 2.0    1.  iphone 4    2.  iphone 4s    3.  iPhone 5    4.  IPad (3rd generation)      5.  IPad 4    6.  All retina displays mac    7.  Google Galaxy nexus    8.  Google Nexus 4    9.  Google Nexus 10    10.  Samsung Galaxy S iii    11.  Samsung Galaxy Note ii  & nbsp; 12.  Sony Xperia s    13.  HTC one x  22.CSS Landscaping placeholder hint information is style compatible:

Input::-webkit-input-placeholder{color: #AAAAAA;} Input:focus::-webkit-input-placeholder{color: #EEEEEE;}

Phone to placeholder tip information is basically the default style, to modify its style needs to add:

/* WebKit browsers */::-webkit-input-placeholder {color: #777;}

/* Mozilla Firefox 4 to */:-moz-placeholder {color: #777; opacity:1;}

/* Mozilla Firefox 19+ */::-moz-placeholder {color: #777; opacity:1;}

/* Internet Explorer + */:-ms-input-placeholder {color: #777;}

-Google Chrome (Webkit):::-webkit-input-placeholder pseudo-element;

-IE10::-ms-input-placeholder pseudo-class;

-Firefox browser (gecko18-)::-moz-placeholder pseudo-class;

-Firefox browser (gecko19+):::-moz-placeholder pseudo-element;

-Opera (Presto): None.

23. Clear the default style of the iOS system phone to the input box:

24. Uncheck the highlight that appears on the A tab:

-webkit-tap-highlight-color:rgba (0, 0, 0, 0); /* Unlink Highlighting */

25. When developing a mobile page, the default style of the scroll bar is often set:

  /* Set the style of the scroll bar *    /-::-webkit-scrollbar {    -width:12px;    -}    -/* Scroll groove *    /-::-webkit-scrollbar-track {    --webkit-box-shadow:inset006pxrgba (0,0,0,0.3);    -border-radius:10px;    -}    -/* ScrollBar slider *    /-::-webkit-scrollbar-thumb {    -border-radius:10px;    -Background:rgba (0,0,0,0.1);    --webkit-box-shadow:inset006pxrgba (0,0,0,0.5);    -}    -::-webkit-scrollbar-thumb:window-inactive {    -Background:rgba (255,0,0,0.4);    - }

26. To slide the scrollbar in the mobile page, add the method of inertia effect:First set:

Div{height:100%;overflow-y:auto;}

But when it was actually tested on the IPhone, it was found that Safari (including many of the UIWebView used by the IOS App's built-in browser) turned off the famous "inertia scrolling" effect altogether. But the solution is there, and surprisingly simple: only one CSS property solves the problem:

-webkit-overflow-scrolling:touch;

Some students have added this attribute after encountering a downward slide after the page becomes blank, in fact, a CSS property can be loaded into memory to solve:

-webkit-transform:translate3d (0,0,0);

Note: If-webkit-overflow-scrolling:touch is set, the default style for changing the scroll bar is invalidated under iOS, as described in the previous article.
27. Style implementation triangles:

position:absolute;left:50%;bottom:0;margin-left:-10px;width:0;height:0; Border-width:10px;border-style:solid dashed dashed dashed;border-color:transparent transparent #71151c transparent;

28. Control the number of text lines on the mobile side

Display:-webkit-box;-webkit-line-clamp:4;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;

CSS3 Horizontal Vertical Center

30.css--input The box outline:medium when you click on the input box; (Chrome)

Outline:medium;

31. Mobile-side fonts/* Code to define the font for the mobile side */

Body{font-family:helvetica;}

32. Prohibit iOS long time does not trigger the system menu, prohibit ios&android long time to download pictures

. Css{-webkit-touch-callout:none}

33. Disable the selection of text for iOS and Android users

. Css{-webkit-user-select:none}

34. How to make a phone call and send a message

Phone: <a href= "tel:0755-10086" > Call:0755-10086</a>

Text message:winphone system is invalid, <a href= "sms:10086" > Texting: 10086</a>

E-mail: <a href= "Mailto:[email protected]" >[email protected]</a>

35.CSS3 attribute-webkit-filter (methods such as changing the brightness transparency of fuzziness)

-webkit-filter is a property of CSS3, WebKit the first to support these functions, feeling very good effect. Let's take a look at the Filter property.

The following effects are now supported in the specification:

-Grayscale gray value is 0-1 decimal-sepia brown value is between 0-1 decimal-saturate saturation value is num-hue-rotate hue rotation The value is a decimal between the Angle-invert inverse color value of 0-1-opacity the opacity value of 0-1 and a decimal between the brightness luminance value of 0-1-contrast Contrast value is Num-blur blur value is Length-drop-shadow shadow

Usage is the standard CSS notation, such as:

How to use: (with animation)

. jaguar-con-show img.jaguar-con-imglast{                   -webkit-transition:all 0.3s ease-in-out;    -moz-transition:all 0.3s ease-in-out;    -o-transition:all 0.3s ease-in-out;    -ms-transition:all 0.3s ease-in-out;    Transition:all 0.3s ease-in-out;    }. Jaguar-con-show img.jaguar-con-imglast{       -webkit-filter:blur (3px) brightness (. 6);    -moz-filter:blur (3px) brightness (. 6);    -o-filter:blur (3px) brightness (. 6);    -ms-filter:blur (3px) brightness (. 6);        Filter:blur (3px) brightness (. 5);     -webkit-transform:scale (1.1,1.1);    -moz-transform:scale (1.1,1.1);    /*BORDER:3PX solid #000; */}

36.CSS pointer-eventsPointer-events originally originated from SVG and is now reflected in many browsers. However, a little bit of CSS is needed for any HTML element to take effect. This property, called Pointer-events, can basically be set to auto, which is normal behavior, and "None" is an interesting property.
If you have set the CSS property of an element to Pointer-events:none. It will not capture any click event, but instead let the event pass through the element to the following element. Both Firefox 3.6+ and Chrome 2.0+ and Safari 4.0+ support this CSS3 property, which is not supported by IE6/7/8/9, and Opera supports it in SVG but is not supported in HTML.

Summary of common styles of CSS/CSS3