Which html css javascript should I learn first? How can I learn javascript well?

Scenario 3: I decided that I want to learn CSS well. I opened the shopping website and searched for: CSS books and placed an order quickly! When the book arrives, start reading and studying every day. Of course, there are several situations at this time, namely:

• I just flipped through the book on the first day I got it, and it has been gathering dust since then
• I read part of it, but I was too lazy to code, and finally felt bored and gave up reading
• I read the book seriously, followed the code in the book, took a lot of notes, and finally learned a lot

No matter which of the above methods is used, I think they are all very good. By the way, I would like to recommend some good learning resources to you.

• Zhang Xinxu’s blog
• Teacher Da Mo’s W3Cplus
• Coco’s iCSS

After all, standing on the shoulders of giants is the most efficient way. You can spend an hour learning the knowledge that the big guys spent a day summarizing.

2. Remember CSS data types

Another point where CSS is more difficult to learn is probably because there are too many properties in CSS, and the value of each property supports many ways of writing, so it is almost impossible to easily remember all the ways of writing each property. . Recently, when I was browsing blogs, I discovered that CSS also has its own data types. Here is a quote from Zhang Xinxu’s CSS value type document for your convenience.

A brief introduction to the data types of CSS is as follows:

The items enclosed in <> in the figure represent a CSS data type. Let’s introduce the types in the figure:

• : Indicates that the value can be a number
• : Indicates the size and length of the element, such as 3px, 33em, 34rem
• : Represents the percentage based on the parent element, such as 33%
• : Indicates that the value can be either or
• : Indicates the position of the element. Values can be , , left/right/top/bottom

Let’s look at two CSS properties:

• The first one is width. The documentation will tell you that the data types supported by this attribute are and , so we know This attribute can be written in the following ways: width: 1px, width: 3rem, width: 33em, width: 33% code>
• The second attribute is background-position. The documentation will tell you that the data types supported by this attribute are . Then we know that this attribute can be written in the following ways: background-position: left, background-position: right , background-position: top, background-position: bottom >, background-position: 30%, background-position: 3rem

From this example we can see that if you want to remember the use of as many CSS properties as possible, you can start by memorizing CSS data types (there are almost 40+ data types now), so that you learn new ones every time When using CSS attributes, your thinking will change, as shown below

I didn’t remember CSS data types:

Remember CSS data types for me:

I don’t know if you have noticed that if the document only tells you that background-position supports the data type, are you sure you can know all the uses of this attribute? You do know that this property supports background-position: 3rem because you know that the data type contains data type, but did you know that it also supports background-position: bottom 50px right 100px;? Why can I write four values separated by spaces? Who told you this?

This requires us to understand CSS syntax. Please read the next section carefully.

3. Understand the syntax of CSS

I needed to use the clipping effect in a certain style before, so I wanted to know how to use the clip-path attribute in CSS, so I checked the more authoritative clip- path MDN, after looking at it, I found this

I then realized that I couldn’t even understand the syntax of CSS. To be honest, in the past, whether I was learning CSS for the first time or looking for the usage of a certain CSS attribute temporarily, I would go directly to Baidu and find the answer I wanted in an instant (such as a novice tutorial). But this time,I really Silly! Because the clip-path attribute itself is relatively complex and supports many syntaxes. It is impossible to get all the usage and meaning of this attribute just by looking at the sample code provided by MDN (rookie) The tutorial cannot teach you comprehensively)

So I followed the network cable to understand the meaning of some symbols in CSS Grammar, which helped me better understand the grammar.

Because the knowledge related to CSS syntax symbols has a super detailed introduction on CSS attribute value definition syntax MDN (It is recommended that you read this MDN article first!! It is very easy to understand) , so I won’t explain too much. I’ll just put a few summary tables here.

Attribute combination symbol

Attribute combination: Indicates the writing combination of multiple attribute values. For example, in border: 1px solid #000, can 1px swap positions with solid? Can #000 Whether to omit, etc., these are all combinations of attributes.

Combinator priority

The "AND" combinator, "OR" combinator, and "mutually exclusive" combinator are all used to express the occurrence of attribute values, but there is a priority among the three. For example, bold | thin || , where the "or" combinator has a higher priority than the "mutually exclusive" combinator, so this writing method is equivalent to bold | [thin || ]

Attribute repeat symbol

Attribute repetition: Indicates the number of occurrences of a certain attribute or attributes. For example, in rgba(0, 0, 0, 1), can the number of numbers be 3, and can the last digit be written as a percentage. This is somewhat similar to the regular repeating symbols

Interpreting CSS syntax

Taking the syntax of clip-path in this section as an example, let's briefly interpret one of the attributes (only part of it will be interpreted, because it will be very long to interpret all of it)

Let’s take a look at the overall structure first

It is divided into four parts in total, and the order is from top to bottom. Each two parts are connected by where, which means that the part below where is related to the part above. Additional explanation for that part

①: It means clip-path. The writing method supported by this attribute is: not only write the value of data type, but also Why not at least choose one type of value between and to write, or else just write it as none.

②: We learned that the data type in ① supports the following writing methods: inset(), circle( ), ellipse(), polygon(), path().

③: Because we want to understand the specific use of the circle() function, we will only look at this first. We know that the parameters of the circle() function support two data structures: and , and both are You can write it or not, but if you want to write , you must add a at in front of it.

④: First see that the attribute supported by is (as the name suggests, it is and ), closest-side, farthest-side. The syntax of the data type seems more complicated. Let’s analyze it separately. Because it is really, very long, I will format and beautify the So that I can show it to you and make it easier for you to read (I also suggest that if you encounter such a long syntax introduction when learning the grammar of a certain attribute, you can also format it like me, so that it is easier for you to read and understand)

As can be seen in the figure, the whole is divided into three parts, and these three parts are mutually exclusive, that is, only one of these three parts can appear. Based on the CSS syntax symbols we learned earlier, we can know how to use it, because here There are too many supported writing methods, so I’ll just make a table (actually just permutations and combinations)! If you still don’t understand, you can carefully read MDN’s syntax introduction or you can leave a message in the comment area and ask me. I will reply as soon as I see it!

Type supported writing methods

Oops! I am exhausted. There are too many ways to support this!

4. Try more hands-on methods

In the previous section, after we learned the syntax of the clip-path attribute, we knew how to write the syntax of the circle clipping (circle()) we want, then you can Do you really know how to do it? Maybe you read the example MDN gave you and know what the approximate effect of circle(40%) is, as shown below

As I said before, MDN only lists for you the simplest way to write the function circle(), but we just learned its syntax and learned that there are other ways to write it (such as circle(40% at left)), and the MDN document only tells you which syntaxes are supported, and it does not clearly tell you what the function of which syntax is and what effect it can achieve.

Now we need to try it ourselves

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Try using clip-path’s circle()</title>
    <style>
        #zero2one {
            width: 100px;
            height: 100px;
            background-color: ;
            clip-path: circle(40%); <!-- I will change this line later and try again and again! -->
        }
    </style>
</head>
<body>
    <div id="zero2one"></div>
</body>
</html>
Copy code

Take a look at the effect. Well, it’s the same as what MDN shows.

Modify the value again clip-path: circle(60%) and see the effect

I seem to have figured out the pattern. It seems that the center of the element is used as the reference point. 60% means to draw a circle with a radius from the center to 60% of the edge length, and crop the outside of the circle. Content. These are not mentioned in the MDN documentation and have been verified by my own practice.

Next let’s try other syntax~

Try changing the value to clip-path: circle(40% at top)

Eh? It's amazing! Why does it become like this? I haven't found any pattern yet. Try changing the value again clip-path: circle(80% at top)

It seems that the center of the circle was moved to the middle of the top of the element, and then a circle was drawn with a radius of 80% of the length from the center to the bottom edge and cropped. At this point we seem to understand what the data type behind at in the syntax of circle() is for. It is probably used to control cropping. The center position of the circle drawn when

The rest of the time is left to you to test all the syntaxes one by one. To give a simple example, for example, if you try clip-path: circle(40% at 30px), you You must be curious about what this means, let’s see the effect

Intuitively, the entire circle has moved some distance to the left. When we did not set at 30px, the center of the circle was at the center of the element, but now it seems to have shifted to the right. I would make a bold guess at 30px means that the abscissa of the center of the circle is 30px from the leftmost side of the element

Next, verify our guess and continue to modify its value clip-path: circle(40% at 0)

Obviously, the center of the circle at this time is in the middle part of the far left side, which should be said to have proved our guess just now. So why not verify the ordinate again? Continue to modify the value clip-path: circle(40% at 0 0)

Not bad, very smooth. The second 0 in at 0 0 means that the distance between the vertical coordinate of the center of the circle and the top is 0. Then we can safely draw a conclusion at this time. For values of data type like 30px and 33em, The corresponding coordinates are as shown in the figure

Okay, this article is already very long, so I won’t continue to introduce the use of other syntaxes. I just used it purely to give an example, because we are not introducing circle() in this article. In the usage tutorial, interested readers can go and practice by themselves~

So practice is really important! ! The MDN document does not list the corresponding effects of each syntax for you, because if each is listed, the document will look very messy, so you can only rely on yourself. I remember Zhang Xinxu said in a live broadcast that the CSS features he mastered were all developed by spending a lot of time trying them out, and they can’t be understood just by looking at the documents, so you can understand them by looking at the documents. The use of a certain CSS property that they learned about in this article may have been researched by them for several hours or even ten hours.

Many features of CSS will have compatibility issues, because there are many browser manufacturers on the market, and their support levels vary. However, we usually understand the compatibility of a certain CSS attribute, like this

Check the browser compatibility of a certain MDN property

By Can I Use

Find browser compatibility for a property

These are all correct, but sometimes the browser compatibility of some CSS properties may not be obtained through these two channels, so what should we do? Manually try to see if the effect of this attribute is supported on each browser (Xinxu boss said that he would do this before), I will not give examples on this point, everyone should be able to understand

Finally

In fact, every CSS master does not succeed because of some quick learning path. They rely on constantly trying, recording, and summarizing various CSS knowledge, and they often use the CSS knowledge they learned to make a The small demo is used to consolidate. I became a friend of Teacher Da Mo a few months ago. I often see some demo codes and articles about new CSS features in his circle of friends (I really admire them). The same goes for the Coco boss, who often posts Some cool special effects achieved simply with CSS (it is said that there is no special effect that he cannot achieve~)

In addition, if you want to go more in-depth, you can also pay attention to the CSS specifications. The more authoritative one is the CSS Working Group of W3C, which contains many CSS specification documents.

Okay, let me recommend a few more books that are recognized by the industry as pretty good ~ such as "CSS Definitive Guide", "CSS Revealed", "CSS World", "CSS New World", etc...