How much do you know about css (2) - ideas for learning css_html/css_WEB-ITnose

I wrote the first article in this series two weeks ago. In fact, it was just an idea at the time. It has not been updated for a while because I was thinking about a solution process. Now that it has some initial results, let’s start an update.

1. A joke

The topic does not need to be too serious, and writing a blog is not like writing a book. Writing like a chat is the best way to express yourself.

I remember reading a joke before, it might be a true story, it doesn’t matter. The general content is as follows: A Hong Kong professor said: There is a big difference between our Hong Kong universities and mainland universities. In mainland universities, even the security guards understand philosophy, because when you want to enter the campus, the security guards will ask you a very question. Philosophical questions "Who are you, where do you come from, and where are you going?".

After reading the joke, my first reaction was definitely to laugh at myself. After laughing, I forgot what I was supposed to do.

But I think this sentence does have some Gundam meaning, although I don’t know what philosophy is. "Who are you, where are you from, where are you going", if mapped to our CSS tutorial, you can ask these questions:

1. What is CSS and how to understand it in depth? What is its relationship with html;
2. There are several sources of CSS (5 sources);
3. What does CSS do and how to combine it with html;

Friends who have read my other tutorials all know my principle: if I want to write something, I must have an idea that I think is very special and very reasonable and efficient. If not, I would rather not write it. Most people who write CSS may write selectors at first, but I don't do that.

No more gossip. If you want to understand these problems from the root, let’s start with the browser.

2. How the browser works

I have read an article before called "How the browser works: Behind the scenes of the new web browser". The article briefly and comprehensively introduces the working process of the browser. It is best for web front-end programmers to understand it. I would like to recommend another book "WebKit Technology Insider". The author has been paying attention to this book for a long time and has included it in my recent reading plan.

The content in the article will not be mentioned in detail for the time being. Let’s take it out of context and only talk about the CSS-related parts.

The above picture is the flow chart of webkit kernel rendering html and css. As you can see from the picture, the parsing of html is a line and the parsing of css is a line. The two will be combined at a certain point to form the final view.

If we focus on CSS, from the above picture we can summarize three breakthrough points for learning CSS.

1. How do browsers load and parse CSS?? 5 sources of CSS;
2. How to combine CSS and html?? Selectors;
3. What display methods can CSS control? Box mode, floating, positioning, background, font, etc.;

Seeing this, I don’t know Are any of your friends excited? Because before we learn CSS, we first analyze how the browser loads, processes, and uses CSS. We follow this idea to write CSS tutorials. Instead of starting from the id selector as per the script.

The reason why I haven’t written a blog during this period of time is actually because I am thinking hard about a more reasonable and efficient idea and framework. If what I write is the same as others, then I won’t find it interesting.

This series of articles is also developed step by step according to this idea and framework.

3. CSS loading process

CSS??Cascading Style Sheets??Cascading style sheets. "Style sheet" is relatively easy to understand, but what is "cascading"? From the literal meaning, stacking definitely requires multiple layers to be stacked up. And how many layers does this "multi-layer CSS" have? What are each layers? Which layers will our programmers use? These issues will be the focus of our discussion.

In addition, with so many layers superimposed, how to deal with conflicts if they arise, which one shall prevail? This is also the focus of our discussion.

Finally, among these layers there is a "browser default style" layer, which is the browser's default style for each html element. This time we will learn from the "robot" of the browser and see how the css it writes can help us.

4. Combination of CSS and HTML

How to combine CSS with html? Of course, through selectors. CSS provides a variety of selector types, and new selector types are constantly being added at each level, making selectors more flexible and easier to use. This series will feature an article dedicated to explaining selectors.

Intelligent humans are also using the selectors provided by CSS to expand their territory in other adjacent areas, such as jquery and zen-coding.

For css selectors, there is a very important topic - level. In most web front-end interview questions, you will see CSS selector level judgment questions. The book "CSS Design Guide" gives a concept - specificity, calculation formulas and rules, and a simple recitation formula. So thoughtful.

Finally, pseudo-classes and pseudo-elements are closely related to selectors. We will also take out an article to explain pseudo-classes and pseudo-elements, as well as their most typical uses.

5. Page rendering

Page rendering can be divided into two categories: text and blocks.

1. For text, we can set font, font size, bold, italics, background color, etc.;
2. For blocks, there are more situations, including box model, float , positioning, display, background, etc.;

This series will spend a lot of space to explain the basic knowledge and some of their key applications.

6. Layout

Layout is the highlight of CSS, and the layout of each system has its own characteristics. Neither good nor bad, each has its own advantages and disadvantages. Let’s take a few typical examples and analyze them together. For example:

1. Classic three-column layout
2. Bootstrap grid layout
3. Baidu home page layout
4. Weibo layout
5. People Human network layout
6. Waterfall flow layout
7. …

7. Next step

The following article will expand the description of this article step by step, slowly starting from examples and code. Keep looking forward to it!

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

Welcome to follow my Weibo.

Also welcome to follow my tutorials:

"From Design to Pattern""In-depth understanding of javascript prototype and closure series""Microsoft petshop4 .0 Source Code Interpretation Video" "json2.js Source Code Interpretation Video"

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