25 Very useful CSS tips you should know

In our front-end CSS encoding, often to set special font effects, border fillets and so on, but also to consider the issue of compatibility, CSS page layout, said difficult, in fact, very simple.

Say it is easy, often have a lot of problems to haunt the novice, in the introduction of a lot of skills, these tips and knowledge can do more to help you, experienced CSS programmers usually know this, but beginners do not miss!

Here are 25 very useful CSS tips that will help you solve the problem of getting your tricky CSS code. You can use it directly in your current project.

1. changing text highlighting color (change text Highlight color)

You may not know! Using CSS, you can control the color test, at least for standards-compliant browsers such as Safari or Firefox.

　　

/**  /background: #c3effd;　　color:#;　　}::/** / background: #c3effd;　　color:#; }

2. Prevent Firefox scroll bar jumping (Prevent Firefox Scrollbar Jump)

Firefox usually hides the contents 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 trick.

　　

html{Overflow-y:scroll;}

3. Print page breaks (print page Breaks)

While most Internet users prefer to read the content online, some users may want to print the article. Using CSS, you can control the page breaks 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 beginners don't miss out! important CSS rules. By joining! Your CSS rules are important and you can increase it precedence over other follow-up rules.

For example, the following code, the background color is blue, and not due to red!

. page {background-color:blue!important; background-color:red;}

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

This is a good SEO technique that lets you see a nice fancy image instead of simply boring text, but search engines will only see text.

　　

. header{text-indent:-9999px; Background:url ('someimage.jpg') no-/*dimensions equal to　　Image size* / width:500px; }

6. Minimum cross browser height (let IE support min-height)

Internet Explorer does not understand the Min-height property, but here's the CSS trick to accomplish in IE browser.

　　

!important; /* All browsers except IE6 would respect the!IMPORTANT flag */　　min-height:500px; height:500px; /* should has the same value as the min height above */ }

7. Highlight the link you want to open in a new window (Highlight links that open in a newwindow)

The CSS code highlights the link, and opening the link in a new window pops up a new tab or window,

a[target="_blank"]:before, A[target="New"]:before {margin:05px0 0;　　padding:1px; outline:1px Solid #333; color:#333;　　Background: #ff9; font:12px"ZAPF Dingbats"; Content:"\279c"; }

8. Style ordered Li List (style Your-Ordered list)

The ordered list of styles for a number, and the contents of each list item are 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. Drop cap with CSS using CSS

Drop caps, use CSS,

You can create a sinking effect, such as the use of a newspaper or a magazine: the first letter pseudo-element.

p:first-00  5px;　　 float: left;　　Color: #FF3366;　　Font-size:3. 0em;　　Font-family:georgia; }

10. Trans-browser opacity (cross Browser Opacity)

Although the CSS3 standard includes the opacity attribute, not every browser supports its cross-browser transparency, where CSS tips

Transparent_class {filter:alpha (opacity=);　　-moz-opacity:0.5;　　 0.50.5; }

11. Line-height Vertical Center (Vertical centering with Line-height)

If you are using fixed height containers and vertically centered text, use the Line-height property to do this perfectly.

　

line-height:30px;

12 Fixed width and center (center fixed width layout)

If you use a fixed-width layout, you should center the layout,

body{width:1000px;　　Margin:0  Auto; }

13. Remove vertical textarea scroll bar in IE browser (remove vertical textarea scrollbar in IE)

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

textarea{Overflow:auto; }

14. Delete an active link boundary (remove active link borders)

Some browsers such as Firefox and IE add a dashed outline boundary to the user by clicking on the link.

This is a useful accessibility feature that lets users know which links he clicks or focuses on. But sometimes you need to get rid of this, and here you need to use the CSS.

A:active, a:focus{Outline:none;}

15. Prevent elements from disappearing on IE (Prevent Elements from disappearing in IE)

Sometimes Internet Explorer behaves in a special way, so that some elements disappear and thus appear when you try to make a selection.

This is due to some of the float elements of IE problem. Where this can be added is that the relatively fixed element disappears.

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

CSS Property Selector is very powerful and gives you a lot of options to control the different elements of the style, such as you can add an icon based on the href attribute on a label that lets the user know whether the link points, images, pdf,doc files, etc.

a[href$='. doc'] {padding:000;　　Background:transparent URL (/graphics/icons/doc.gif) no-Repeat center right; }

17. CSS pointer cursor (CSS Pointer Cursors)

This trend has been caught up recently. Users of all user interface elements can click a hyperlink similar to the cursor on the page. Here is the CSS technique,

Input[type=submit],label,Select,. pointer {cursor:pointer;}

18. Capitalized in first letter (capitalize Text)

This trick is especially useful for the title of an article that displays all uppercase letters that begin with a word on the page.

　　

Text-transform:capitalize;

19. Small capital letters (Small caps text)

This is a less used, but useful CSS property. It takes advantage of all the alphabetic text, but the first letter of each word, the size of the letter is less than the first letter.

Font-variant:small-caps;

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

This CSS technique lets you highlight the input field that is currently in focus. Not compatible in IE

　　

Input[type=text]:focus, input[type=password]:focus{border:2px solid #; }

21st. Remove image border (remove Border)

Picture hyperlinks usually get an ugly blue border, making your image hyperlinks look scary. The following code can be removed

　　

A img{border:none;}

22. Using labels in forms (tableless forms using labels)

　　

p label{width:100px;　　 float: left;　　Margin-right:10px;　　Text-align:right; }

23. Set a consistent base font size (set a consistent base)

　　

body{font-size:62.5%;}

24. Highlight initials and INITIALS TAGS (Highlight acronym and ABBR tags)

Abbreviations and abbreviation tags provide useful information to users, browsers and search engines for acronyms and abbreviations, but the most important Firefox browser,

Here's CSS tips to highlight abbreviations and abbreviations in your page.

acronym, abbr{border-bottom:1px dotted #333;　　Cursor:help; }

25. CSS Reset

This piece of CSS code resets the compatibility issues that fit all browsers to prevent inconsistencies in your 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, fon T, 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: -%; 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; }