CSS know how much (2)--the idea of learning CSS

Two weeks ago wrote the first article of the series, in fact, it was just an idea, this period of time is not updated, is thinking of a solution process. If you have a better start now, let's go ahead.

1. A joke

It doesn't have to be too serious, blogging is not like writing a book, and writing something like chatting is the best way to express it.

It's not important to remember seeing a joke before, or maybe it's a real thing. The general content is as follows: A Hong Kong professor said: "Our universities in Hong Kong and mainland universities are very far away, and mainland universities even have the knowledge of the philosophy of the doorman, because when you want to enter the campus, security will ask you a very philosophical question." Who are you, where are you from, and where are you going? ”。

After reading the first reflection of the joke is certainly very self-deprecating laugh, laughed after forgetting, why do go.

But I think this sentence does have a point up to the meaning, although I do not know what is philosophy. "Who you are, where you come from, where you go", if mapped to our CSS tutorial this time, can ask a few questions:

1. CSS is what, how to understand deeply, it and HTML is a kind of relationship;
2. There are several sources of CSS (5 sources);
3. CSS to do things, how to combine HTML implementation;

Friends who have seen my other tutorials know my principles: I want to write something, I have to feel very special and very reasonable, efficient thinking, if not I would rather not write. Most people who write CSS may write a selector, but I won't.

Gossip doesn't say. To learn about these issues from the root, start with a browser.

2. How the browser works

Read an article before, called "How the Browser works: a new web browser behind the scenes." The article is a concise introduction to the browser's work process, the Web front-end program ape better understand. In addition to recommend a book, "WebKit Technology Insider", the author is very early attention to this book, has been included in the recent reading plan.

The content of the article is not detailed, we first "out of context" only said CSS-related parts.

The WebKit kernel renders HTML and CSS flowcharts. As you can see, the parsing of HTML is a line, and the parsing of CSS is a line, and the two will combine at some point to form the final view.

If we focus on CSS, from which we can summarize the three breakthroughs in learning CSS.

1. How browsers load and parse the 5 sources of css--css;
2. How CSS and HTML are combined-selectors;
3. CSS can control the display mode-box mode, floating, positioning, background, font, etc.;

See here, do not know if there are no friends feel very excited? Because before we learn CSS, the first is to analyze the browser such as finer, processing, using CSS, we follow this idea to write CSS tutorial. Instead of being scripted from the beginning of the ID selector.

Why I have not written a blog this time, in fact, is pondering a more reasonable and efficient thinking and framework. If I write something like other people's, I also feel that it is not interesting.

This series of articles is also based on this idea and framework, step by step.

3. The loading process of CSS

Css--cascading style sheets--cascading style sheet. "Style sheet" everyone better understand, that what is "cascade" it? From the literal point of view, the cascade must be more stacked together. And this "multilayer css" in the end there are several layers, each layer is what, we program the apes will be used to what layer? These questions will be the focus of our discussion.

In addition, so many layers overlay, if there is a conflict how to deal with, whichever is? This is also the focus of our discussion.

Finally, there is a "browser default style" layer in these layers, which is the style of each HTML element that the browser defaults to. This time we are like the browser of this "robot" to learn, and see what it writes out of the CSS can give us some help.

4. The combination of CSS and HTML

How CSS can be combined with HTML-through selectors, of course. CSS provides a variety of selector types, and each level is constantly adding new selector types, making selectors more flexible and easy to use. This series will come up with an article devoted to selectors.

Smart humans also use CSS-provided selectors to open up other neighboring areas, such as jquery,zen-coding.

For CSS selectors, there is a very important topic-the level. In most web front-end interview questions, you will see a CSS selector level of judgment. The CSS Design Guide book gives a concept-the degree of specificity, but also gives the calculation formula and calculation rules, and also gives a simple reciting formula. It was thoughtful of you.

Finally, there are pseudo-classes and pseudo-elements associated with selectors, and we'll come up with an article devoted to pseudo-classes and pseudo-elements, and their most typical usage.

5. Page rendering

Page rendering can be divided into two categories--text, blocks.

1. For the text, we can set the font, size, bold, italic, background color, and so on;
2. For the block, the situation is more, there are box model, floating, positioning, display, background, etc.;

This series will give you a lot of space to explain the basics and some of their key applications.

6. Layout

Layout is the play of CSS, and each system's layout has its own characteristics. No good no bad, certainly is each has the merits and demerits, may wish to take out several more typical examples to analyze together. For example:

1. Classic three-column layout
2. Bootstrap Grid Layout
3. Baidu Homepage Layout
4. Micro-Blog Layout
5. Renren Network Layout
6. Waterfall Flow Layout
7. ......

7. Next

The following article will step through the description of this article, slowly from the example and code. Continue to look forward to it!

-------------------------------------------------------------------------------------------------------------

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

-------------------------------------------------------------------------------------------------------------

CSS know how much (2)--the idea of learning CSS