22 required css skills and 22css skills

22 required css skills and 22css skills
1. Change the background and color of the selected text

::selection{ /* Safari and Opera */    background:#c3effd;    color:#000;}::-moz-selection{ /* Firefox */    background:#c3effd;    color:#000;}

2. Prevent the scroll bar of Firefox from beating

html{ overflow-y:scroll; }

3. Paging Printing

.page-break{ page-break-before:always; }

4. Use it! Important

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

5. Image replacement text

.header{    text-indent:-9999px;    background:url('someimage.jpg') no-repeat;    height: 100px; /*dimensions equal to image size*/    width:500px;}

Note: text-indent:-9999px; indent left of the first line to a place invisible to anyone

6. Minimum height of compatible browsers

#container{    height:auto !important;/*all browsers except ie6 will respect the !important flag*/    min-height:500px;    height:500px;/*Should have the same value as the min height above*/}

7. highlight the link opened in the new window

a[target="_blank"]:before,a[target="new"]:before {    margin:0 5px 0 0;    padding:1px;    outline:1px solid #333;    color:#333;    background:#ff9;    font:12px "Zapf Dingbats";    content: "\279C";}

8. Beautify the serial number of li

ol {    font: italic 1em Georgia, Times, serif;    color: #999999;}ol p {    font: normal .8em Arial, Helvetica, sans-serif;    color: #000000;}

9. sinking the first word

p:first-letter{display:block;margin:5px 0 0 5px;float:left;color:#FF3366;font-size:3.0em;font-family:Georgia;}

10. browser-compatible opacity

.transparent_class {          filter:alpha(opacity=50);          -moz-opacity:0.5;          -khtml-opacity: 0.5;          opacity: 0.5;      }

11. Vertical center using line-height

line-height:30px;

12. center layout

body{    width:1000px;    margin:0 auto;}

13. Remove the vertical scroll bar of the ie text field

textarea{    overflow:auto;}

14. Move the dashed line of a hyperlink

a:active, a:focus{ outline:none; }

15. If the element in ie disappears, add the element

position:relative;

16. add different icons based on different links

a[href$='.doc'] {    padding:0 20px 0 0;    background:transparent url(/graphics/icons/doc.gif) no-repeat center right;}

17. css hand click Style

input[type=submit],label,select,.pointer { cursor:pointer; }

18. uppercase letters

text-transform: capitalize;

19. All English letters are capitalized and the first letter is larger than others

font-variant:small-caps;

20. highlighted text box. ie is not supported

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

21. Remove the img border

a img{ border:none; }

22. Use label to implement a table-Free Form

HTML Code

<form method="post" action="#" ><p><label for="username" >Username</label><input type="text" id="username" name="username" /></p><p><label for="password" >Username</label><input type="password" id="password" name="pass" /></p><p><input type="submit" value="Submit" /></p></form>

CSS Code

p label{    width:100px;    float:left;    margin-right:10px;    text-align:right;}

Reference: http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

 

Css skills and knowledge

Css skills and skills
You can only learn from the root of your knowledge.

After you read "Cao Peng CSS video tutorial", you can complete the DIV + CSS structure. I am a person from the past and I spent 4 hours watching it, to watch and follow him
1) Why do I need a CSS style table?
Introduction:

The labels learned frequently in previous courses show more complex results on the webpage, with a single style.

CSS is used to change the style of labels on a webpage to make the webpage more colorful. It can attract more readers on the surface. CSS matches China's beautiful clothes

Style Sheets can differentiate the content and style to facilitate team development.

1. Basic syntax of the style table
1) the fundamental structure of the style table.

2) style rules and examples.

3) Introduce a style.

Ø lecture case: basic syntax of Style Sheets

2. Text attributes
Introduction:

First from the text of the fine, color, font to depict text attributes.

Exaggerate the benefits of using styles to complete the presentation of text in a huge color font

3. lecture class training
For form training of "request table", refer to "lecture contact case \ lecture training 1 ".

4. Background attributes
Introduction:

First from the text of the fine, color, font to depict text attributes.

Ø key points:

The basic usage of backcolor, background-image, and background-repeat attributes.

Note:

1) location where Background-repeat is used: When a small GIF image is used as a webpage configuration, you can use repeated results, either horizontally or vertically.

2) Another simple way of writing a style is to arrange all kinds of attributes together and separate them with spaces, as shown below:

Body {

Background: #999ff00

Url (../image/css_tutorials/background.jpg)

No-repeatfixed 40px 100px

}

Ø lecture case:

Background.html

Ø verification case:

Add case \ How to Use CSS to control webpage background. Html

5. Box attributes
Introduction:

First from the text of the fine, color, font to depict text attributes.

Ø key points:

1) Box format: a set of images placed on a webpage to clarify the boundaries, supplements, and meanings of frames planned in the Box form.

2) Border attributes and supplementary attributes are used to create a border style in multiple columns of a rare table.

3) use the border attribute to create the style of the output frame of the fine border.

Ø lecture case:

Introduce common style attributes one by one

Ø verification case:

6. Special style
Ø key points:

The method for creating a hyperlink without underline.

Ø lecture case:

Introduce common style attributes one by one \ none_underLineLinkCSS.html

Ø verification case:

7. Lecture Hall training 2
For the framework page of a similar online training tutorial, refer to "lecture case \ lecture training 2 ".

8. Create Image buttons
Ø key points:

How to Create Image buttons.

Ø lecture case:

Introduce common style attributes one by one \ registerCss2.html

Ø verification case:

9. Use of three types of styles
Ø key points:

The titles of other reference materials for the three types of styles can be different, for example, some are called "embedded (Inline style)", "external (embedded style)", and "internal (internal style) "style table.

Ø lecture case:

Three methods for using style sheets

Ø verification case:

10. Summary
What are common attributes of the box attribute? And identify and clarify its meaning?

What are hyperlink styles?

Embedded style table, in-row style... the remaining full text>

CSS writing skills

Css is written in the back to overwrite the previous one, or two css are referenced. The referenced one will overwrite the previous one:

# Div1, # div2 {
Width: 960px;
Font: 12px;
Margin: 10px;
}

Then I will write another sentence:

# Div2 {width: 660px ;}