What do CSS do?

This book does not seem very rigorous in some places. It may be a small mistake. It is not recommended for beginners to choose it. It is not too late to look at it with the foundation.

From the principle of the "CSS authoritative guide" to the instance operations of "CSS things", from the discussion on paper to the practice of sandground, this is a necessary stage for you to make a qualitative leap. read this book, is a good practice.

Chapter 4 is a bit different from the CSS authoritative guide,Select operator, pseudo class, and pseudo objectAnd so on;

Chapter 2 IntroductionEditplus EditorIt focuses on EP syntax, Automatic completion, user group tools, templates, shortcut keys, and editing. If you want to use EP as the editor, you can take a look.

Chapter 2 is aboutBox Model.
Two notes are mentioned in this article:
① The Box Model in IE's weird mode. Its width (height) includes border + padding;
② Empty ie labels have high bugs.
I am skeptical about whether the doctype statement is correct, which is a problem that causes the weird pattern in the book.

[Ie empty tag BUG: For empty tags, an empty placeholder is provided, which is based on the default text height.
Solution:
① Nest an empty intra-row label in the label, such as <div> <span> </div>;
② Or add the style {overflow: hidden };
③ Use font-size: 0px to solve the problem;
④ Or add <! --> Comment;
⑤ Or add it to the DIV label

⑥ Set height: 0.
Setting the height or line-height is ineffective .]

In Chapter 4-5LayoutThe two chapters are mainly about how to implement the layout of two and three columns.

[The error "right floating + positioning + negative margin" is found in section 4.3. It is easier to modify it when you create a demo]

Chapter 2: IntroductionText Style.
If you have read the CSS authoritative guide, you can skip it. If you have not read it, you are advised to read it, which is more detailed than the current book.
There are two methods to hide text:
① Text-indent 9999px;
② Line-Height: The Row Height Is 9999px. There are not many new knowledge points.

[The 136 page introduces font-weight. The attribute values "Bolder" and "lighter" are relative-level keywords. They are not roughly or finely written than normal, for example, if the parent element defines font-weight as 200, bolder is 300, and normal is equivalent to 400. For more information about font-weight, it is recommended that you read the CSS authoritative guide .]

Chapter 2 isImage Processing.
Three main contents:
① Background image optimization refers to the advantages and disadvantages of JPG, GIF, and PNG;
② Set the background image, that is, the description of the attribute values of the background;
③ CSS Sprite.

[When we talk about background-position on page 176, it is wrong to calculate the percentage value based on the image center. The percentage value also refers to the image and element boxes. For example, assume that the DIV element width and height are 30% PX, and the image width and height are 60% PX, and the value of background-position: indicates that the image is 30 px from the upper left corner to the right and 60 PX down, the point corresponding to the DIV element box overlaps. The corresponding vertex is: (200px x 30%, 200px60%), that is, 60px horizontal from the upper left corner of the DIV, 120px vertical .]

Chapter 2 isList: Unordered list ul, ordered list ol, and definition list DL.
This chapter is very simple. By the way, I would like to add two points:
① When the Li of IE6 contains floating elements, there will be a small gap. For details, refer to the "IE6/7 BUG: vertical Li plus floating elements to produce a gap of 3px down: http://blog.sina.com.cn/s/blog_6f6b4c3c0100w62d.html
② When setting the display: inline of Li, there will be gaps in the horizontal direction in ff. The most direct solution is to put <li> in a row and do not press Enter. But it is best to change it to float for processing. Li itself is a block element and there is no need to change it to an inline element.

[The description of the <map> label on page 207 is incorrect. It is completely justified. <map> the label is an image ing, instead of telling the browser that the tag contains content that is site navigation and map ".]

Chapter 2,Form.
It should be a part of the majority of people who have little access to it. After all, communication with the server is involved. In addition, the controllability of form elements is poor, and the difference between the system and the browser makes form elements more difficult. I personally think that the best way to learn about the elements of the form is to study the code deducted from the Internet. This chapter provides several examples to demonstrate the style of a form.

Chapter 2 --Table, Once popular, but now is the candle. Tables are rarely used, and there are many things. There is no need to spend a lot of time researching them. Check the manual when necessary.

Chapter 2 introduces twoCSS Filter.
① Transparent filter: The transparent background text is not transparent. The result shows that the background and text are allocated to two layers. The transparent filter is set for the layer of the background, then I was found to be played.
(2) alphaimageloader filter, IE6 can not display the normal PNG-24 image filter, but it seems that the need to use hack to ensure the consistency of various browsers.
More filters depend on you. Download the CSS Filter manual.
Download from the website-[XHTML + CSS] [e-books] style sheet filter Chinese manual:
Http://www.w3cfuns.com/forum.php? MoD = viewthread & tid = 2340 & fromuid = 1439

[To which extent should the filter be used? Hope that experienced kids shoes can be explained]

Chapter 2, commonTab.
This is very practical. We recommend that you take a look at it.
This chapter also mentions an article about how browsers process percentage values,
Percent details-container size address: http://www.blueidea.com/tech/web/2007/4651.asp
Do you know the final value of 33% * 123px for each browser? Read this article to let you know.

Chapter 4 makes a simplePure CSS album EffectTo let readers know the potential of CSS. The key point is a: the use of hover. This article mentions a bug in IE6: To Make A: hover IMG take effect, you must first set and change the attribute value of A: hover.

Chapter 2 analyzes two typesWeird navigationEffect implementation.
The first irregular background image, such as trapezoid and diamond, is not used in this example, because after I read the code, the implementation method is not very good. If you have done so, remember to share your experiences.
The second type is overlay. The key point is to create overlay effects relative to the position-to-background image and the negative margin. This kind of code is small and nice.

Chapter 2News list.
The title on the left and the time on the right are common forms of news lists. In order to make the title appear completely within a fixed width range, the redundant words of the title are hidden. The method similar to the page layout is used to add the right margin of the title to create a blank space, add the left margin of the time to the blank part of the title. This skill should be mastered.

Chapter 2Slide EffectSimulation. If a JS script is added, the carousel effect can be achieved. This is pure CSS implementation, so there is no carousel function. This effect uses the jump anchor link in the page to achieve the click switching effect. If you are interested, you can do it easily.

Chapter 2Float and clear.
The two major difficulties of CSS-positioning and floating-all affect the Document Stream. There are a lot of people asking. The floating control is simple and the usage is the highest, but it causes the most compatibility problems.
I remember the float that was visible everywhere when I started my webpage. It can be expressed in a flood of ways. Beginners may also easily fall into this mud trap. Use float with caution, kids shoes! -- Leave the question.
This chapter explains the floating principle and the method for clearing floating. The auxiliary examples are well selected and easy to understand. It is suitable for those who do not know about floating and clearing, or who do not understand thoroughly.

Chapter 2 is to createActivity pageThis page is called a special page. Many factors are taken into account in the production process, and the steps are also clear. The author's work style is also worth learning.

The content of the appendix will not be mentioned. To learn how to learn it, you have to rely on yourself. There is a saying in the book: Keep doing, keep thinking, and keep practicing. This is the only way to become a master.

This book is about so much content. If you find that you are interested in one aspect, you can download an ebook. The author's website has an error table of the book. You can check what you don't understand during reading, but you 'd better ask at the w3cfuns forum to help you more people.

Finally, it is worth mentioning that we should develop the correct habits.
This book follows the following steps for each example: ① Analysis principle; ② input basic and semantic HTML code; ③ beautification from the outside to the inside, from the coarse to the fine, complete the CSS style sheet.
Developing good habits can improve your efficiency. Don't underestimate "habits", it will affect your life.