25 very useful CSS skills you should know

In our front-end CSS coding, we often need to set special font effects, border rounded corners, and so on, and also consider compatibility issues,CSS web page layout, difficult to say, is actually very simple. It is easy to say, and there are often many problems that plague new users. Many tips are introduced in this article. These tips and knowledge can help you get twice the result with half the effort,Experienced CSSProgramPersonnel usually know this, but do not miss it for beginners! Important CSS rules

Here are 25 very useful CSS skills that will help you solve the tricky CSSCodeProblem. You can use it directly in your current project.

1.Change the highlighted text color ( Change text highlight color) read more

Compatible with CSS linear gradient (linear-gradient) of IE and Firefox)
Recommendation of front-end development performance-How to Implement CSS code slimming 10 CSS rules that each web designer should know to allow IE browser to support rgba color web development experience recommendation-8 useful fragments in new website Projects

You may not know!With CSS, you can control the color test, at least against standard browsers such as safari or Firefox.

 1   : Selection { /*  Safari and opera */  2   Background : # C3effd ; 3   Color : #000 ; 4 } 5   :-Moz-selection { /*  Firefox  */  6   Background :# C3effd ; 7   Color : #000 ; 8 }

2.Prevent the scroll bar jump of Firefox ( Prevent Firefox scrollbar jump)

Firefox usually hides the content of the vertical scroll bar if the size is smaller than the visible window, but to solve this problem, you can use this simple CSS technique.

 
HTML {overflow-Y: Scroll ;}
 

3.Print the pagination character ( Print page breaks)

Although most Internet users prefer to read content online, some users may want to printArticle.With CSS, you can control the page break of the content and add this class to any label you want to print on the next page.

. Page-break{Page-break-before:Always;}
 

4. Using! Important

Experienced CSS programmers usually know this, but do not miss it! Important CSS rules.Join! Your CSS rules are very important. You can increase their priority over other subsequent rules.For example, the following code shows that the background color is blue rather than red!

 
. Page{Background-color:Blue! Important;Background-color:Red;}
 

5.Replace text and images ( Replace text with image)

This is a good Seo technique that allows you to see a good fancy image, rather than a simple and boring text, but search engines can only see text.

. Header{Text-indent:-9999px;Background:Url('someimage.jpg ') No-repeat;Height:100px;/*Dimensions equal to image size*/Width:500px;}
 

6.The lowest cross-browser height (enabling IE to support Min-height)

Internet Explorer does not understand the Min-height attribute, but the CSS skills here are completed in IE browser.

# Container{Height:Auto! Important;/*All browsers fail t IE6 will respect! Important flag*/Min-height:500px;Height:500px;/*Shocould have the same value as the min height above*/}
 

7. Highlight the link to be opened in the new window (highlight links that open in a new window)

The CSS code highlights the link. A new tab or window is displayed when the link is opened in a new window,

A [target = "_ blank"]: before, a [target = "new"]: Before {margin: 0 5px 0 0 0; padding: 1px; outline: 1px solid #333; color: #333; Background: # ff9; Font: 12px "zafc dingbats"; content: "\ 279c ";}
 

8.Ordered style Li list ( Style your ordered list)

An ordered list of numbers in a style. The content of each list item is compared in different ways.

 
Ol {Font: italic 1em Georgia, times, Serif; color: #999999;} ol P {Font: Normal. 8em Arial, Helvetica, sans-serif; color: #000000 ;}
 

9.Use the first word of CSS to sink ( Drop caps using CSS)

The first word sink, using CSS,
You can create a sinking effect, such as the use of a newspaper or magazine: The first letter pseudo element.

 
P: First-letter {display: block; margin: 5px 0 0 5px; float: Left; color: # ff3366; font-size: 3.0em; font-family: Georgia ;}
 

10.Cross-browser opacity ( Cross browser opacity)

Although the css3 standard includes the opacity attribute, not every browser supports cross-browser transparency. The CSS technique here

 
Transparent_class{Filter:Alpha (opacity = 50);-Moz-Opacity:0.5;-Khtml-Opacity:0.5;Opacity:0.5;}
 

11.Vertical center of line-height ( Vertical centering with line-height)

If you are using a fixed height container and vertically centered text, use the line-height attribute to do this perfectly.

 
Line-Height: 30px;
 

12 fixed width and centered ( Center fixed width layout)

If you use a fixed-width layout, you should use a central layout,

 
Body{Width:1000px;Margin:0 auto;}
 

13. Remove vertical textarea scrollbar in IE)

The IE browser adds a vertical scroll bar to the textarea input field regardless of its content height.You can use this simple CSS technique to solve this problem.

 
Textarea{Overflow:Auto;}
 

14.Delete the link boundary of an activity ( Remove active link borders)

Some browsers such as Firefox and IE Add a dotted line outline boundary. You can click the link.This is a useful auxiliary function, allowing the user to know the link, click or focus.But sometimes you need to get rid of this, here you need to use CSS.

 
A: active, A: Focus{Outline:None;}
 

15. Prevent elements from disappearing in IE (prevent elements from disappearing in IE)

Sometimes the behavior of IE browser is in a special way, so that some elements disappear and appear when you try to select.This is due to the IE problem of some float elements.This can be added to the position where the relatively fixed element disappears.

16.Attribute-specific icons ( Attribute-specific icons)

The CSS attribute selector is very powerful. It gives you many options to control elements with different styles. For example, you can add a label for the href Attribute Based on an icon, let users know whether to link points, images, PDF files, DOC files, etc.

A[href?}'.doc ']{Padding:0 20px 0 0;Background:Transparent URL (/graphics/icons/doc.gif) No-repeat center right;}
 

17.CSS pointer cursor ( CSS pointer cursors)

This trend is catching up recently.For all user interface elements, you can click a hyperlink similar to the cursor on the webpage.Here is the CSS technique,

 
Input [type = submit], label, select,. pointer{Cursor:Pointer;}
 

18. Uppercase ( Capitalize text)

This is particularly useful when the title of an article is displayed on the webpage with all words starting with an uppercase letter.

 
Text-transform: Capitalize;
 

19.Small uppercase letter text ( Small caps text)

This is a rarely used but useful CSS attribute.It uses all letters and texts, but the first letter of each word, the size of the letter is smaller than the first letter.

 
Font-variant: Small-caps;
 

20.Highlighted text input fields ( Highlight text input fields)

This CSS technique highlights the currently focused input fields. Incompatible in IE

 
Input [type = text]: focus, input [type = PASSWORD]: Focus{Border:2px solid #000;}
 

21.Delete an image border ( Remove image Border)

Image hyperlinks usually get an ugly blue border, which makes your image hyperlink look terrible. The following code can be removed.

A img{Border:None;}
 

22. Use tags in the form ( Tableless forms using labels)

 
<Form method = "Post" Action = "#"> <labelFor= "Username"> username </label> <input type = "text" name = "username" id = "username"> <labelFor= "Password"> username </label> <input type = "password" name = "pass" id = "password"> <input type = "Submit" value = "Submit"> </form>
 

P label{Width:100px;Float:Left;Margin-Right:10px;Text-align:Right;}
 

23.Set the consistent basic font size ( Set a consistent base font size)

 
Body{Font-size:62.5%;}
 

24.Highlight abbreviations and abbreviations ( Highlight acronym and abbr tags)

Abbreviations and abbreviations tags provide useful information to users, acronyms and abbreviations of browsers and search engines, but the most important Firefox browser ,.The CSS skills here highlight the abbreviation and abbreviation labels on your web page.

Acronym, abbr{Border-bottom:1px dotted #333;Cursor:Help;}
 

25.CSS Reset

This CSS code reset is suitable for all browsers to prevent compatibility problems caused by inconsistent CSS code.

 HTML, body, Div, span, applet, object, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, pre, A, abbr, acronym, address, big, cite, code, Del, dfn, em, Font, IMG, INS, KBD, Q, S, SAMP, small, strike, strong, sub, sup, TT, VAR, b, U, I, center, DL, DT, DD, ol, UL, Li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, TR, th, TD { Margin : 0 ;Padding : 0 ; Border : 0 ; Outline : 0 ; Font-size : 100% ; Vertical-align : Baseline ; Background : Transparent ;} Body {Line-height : 1 ;} OL, UL { List-style : None ;} BLOCKQUOTE, Q { Quotes : None ;} BLOCKQUOTE: before, BLOCKQUOTE: After, Q: before, Q: After { Content : '' ; Content : None ;} /*  Remember to define focus Styles!  */  : Focus { Outline : 0 ;} /*  Remember to highlight inserts somehow!  */  INS { Text-Decoration : None ;} Del { Text-Decoration : Line-through ;} /*  Tables still need 'cellspacing = "0" 'in the markup  */  Table { Border-collapse : Collapse ; Border-spacing : 0 ;}

25 useful CSS skills you should know at the link of this Article