2 days driving div+css (Tips)

This is a piece of article that I saw last year, feel in my study, have a lot of influence. So share it to the brothers who want to get to know CSS quickly. This is the tip of the story.

Basic article
[Knowledge One] The term "div+css" is inaccurate.
[Knowledge II] "Div+css" will introduce you to two major misunderstandings
[Knowledge three] what is the standard?
[Basic One] How CSS controls the page
[Basic Two] CSS Selector
[Basic three] CSS selector naming and common naming
[Basic four] box model
[Base five] block elements and inline elements

Real-Combat Chapter
[First lesson] practical small warm-up
[Lesson two] Floating
[Lesson three] clear floating
[Lesson four] navigation bar (top) | Navigation bar (bottom)
[Big exercise] the first four lessons of the big exercise
[Lesson five] structural design of floating layouts | The performance design of floating layout
[Sixth lesson] Positioning
[Seventh lesson] targeting apps
[Eighth Lesson] CSS Hack

Skill article
[Single Picture button instance]
[Indent the first line of text with two text indents]

"Little Tricks One" single Picture button instance (CSS Sprites, CSS Wizard)


Generally we do the button basically need two pictures, a picture of the normal state, a press down the film, do this button thinking is, set the background of link a for the first picture, a:hover background for the second picture



The code is as follows:

HTML code:

1. <href= "#"  ID= "TheLink"></a> 

CSS code:

1. #theLink {      display:block; /* because tag A is an inner chain element, it uses this sentence to convert the inner chain element into a block element, and the width and height behind it only work. */       width:120px;       height:41px;       margin:0 Auto;       background:url (... /images/normal.gif) no-repeat;} #theLink: Hover {background:url (.. /images/press.gif) no-repeat;}

Source:two picture button source code. RAR (6.18 KB, Downloads: 1055)


=========================================================


This class, mainly to introduce the second way of thinking, in fact, it is very simple, first of all, we will combine the above two images into a picture, as follows:



Next, set the image above to the background of the button, and finally, move the a:hover background up to 41 pixels to be OK.

HTML code:

1. <href= "#"  ID= "TheLink"></a  >

CSS code:

1. #theLink {      display:block;       width:120px;       height:41px;       margin:0 Auto;       background:url (... /images/buttonbg.gif) no-repeat;} #theLink: Hover {background:url (.. /images/buttonbg.gif) no-repeat 0-41px;}

This image integration technology, is CSS Sprites, that is, CSS Wizard!

To learn here, can everyone[Seventh lesson] targeting appsThe example is implemented with CSS sprites?

Source:the source code of the Single Picture button. RAR (5.4 KB, Downloads: 1296) first-line text indentation of "little tricks two" CSS first experience

Remember when you first started to learn to make a page, you want to let a paragraph of the first line indent two words, such as:


Always in front add 8 "", because in the past are not familiar with CSS, this method of implementation although relatively straightforward, but the number of words will be a lot of "" flooding in the code, the code is significantly more chaotic, now we achieve this effect is much simpler, directly in the CSS code to add

1. Text-indent:2em;

It's easy to indent text paragraphs ~

Text-indent:2em;
Explain: text meaning is a literal, indent in computer English meaning is indentation, as for the back of the 2em meaning is 2 relative units;

What unit is EM?
Em this unit meaning is the height of the text, 1em is a text height, 2em is two text height, so we wrote "TEXT-INDENT:2EM;" The meaning is that the text indentation 2 text height, because the Chinese character is characters, height and width is the same, so the indentation of 2 text height, is equal to the indentation of two text width, the final effect is to indent two words.

"Description Point"
For "TEXT-INDENT:2EM;" Attribute can only be added to a block element, and inline elements are not functional.

Source code: text indent. rar (68.34 KB, download count: 545) Original address: http://www.w3cfuns.com/portal.php?mod=topic&topicid=13

2 days driving Div+css (skill) (turn)