current position:Home>Why is CSS so difficult to learn ? Method is very important!

Why is CSS so difficult to learn ? Method is very important!

2021-08-26 15:47:21 Zero one 01

Hello everyone , I am a Zero one . Some time ago, I brushed such a question in Zhihu : Why? CSS It's so hard to learn ?

 Know a user's question

After seeing this problem , I think about it ,CSS It seems difficult to learn , It doesn't seem like JavaScript That's a very systematic Syllabus , You don't usually use all CSS, Basically, there are a few commonly used attributes , Even the introductory videos of many training institutions will only teach you some commonly used CSS( How else do you think a few hours of teaching video can get you started CSS What about ?)

Usually people answer you CSS It's also easy to learn because it only uses those common attributes , He probably didn't go deep into . To exaggerate ,CSS It should also be regarded as a small language , Study it deeply , There are many knowledge points . If we don't specialize in CSS Of , There's no need to know CSS The use of all attributes of and the syntax of all subsequent new features , You can learn as needed according to the working scene , But make sure you study the attributes deep enough ~

So how do we learn CSS Well ? To this end, I made a simple outline , I'd like to talk about these points

CSS Syllabus

One 、 Books 、 Community articles

This should be everyone's learning CSS The most common way ( So do I. ). There are several scenarios :

Scene one : Encountered in development 「 When the number of text words exceeds, an ellipsis is used (...) Exhibition 」 The needs of , Open Baidu search :css Too many words are displayed with ellipsis , EH ~ I found !ctrl+c、ctrl+v, Learning is useless , to be finished !

 Search engine learning method

Scene two : One morning, I went to the technology community , See an article about CSS The article , See a in the title CSS The attribute is called resize,resize What is the attribute , Why haven't I used ? Click in and read with relish ~ two minutes later ~ Mr. , Originally, there is this attribute , It works like this , It's up !

 Community blog learning method

Scene three : I decided to , I want to learn CSS, Open the shopping website to search :CSS Books , Order quickly ! When the book arrives , Start reading and learning every day . Of course, there are several situations at this time , Namely :

  • I only read it on the first day I got the book , All the way back
  • I saw part of it , But I'm too lazy to knock the code , Finally feel bored and give up reading
  • Read the book seriously , Also followed the code in the book , Made a lot of notes , Finally learned a lot

No matter which of the above methods , I think it's all very good , By the way, I would like to recommend some good learning resources

After all, standing on the shoulders of giants , Is the most efficient , You can spend 1 An hour to learn that the big guys spend 1 The knowledge summed up by genius

Two 、 remember CSS Data type of

CSS Another difficult point to learn , Probably because CSS There are too many properties of , And the value of each attribute supports many ways , Therefore, it is almost impossible to easily remember all the writing methods of each attribute . Recently, I found that CSS It also has its own data type , Here's a quote from big brother Zhang Xinxu CSS Value type documentation , For your subsequent reference

A brief introduction CSS The data type of is like this :

CSS data type

Use in figures <> Enclosed means a kind of CSS data type , Introduce several types in the figure below :

  • <number>: The representation value can be a number
  • <length>: Represents the size and length of the element , for example 3px33em34rem
  • <percentage>: Represents the percentage based on the parent element , for example 33%
  • <number-percentage>: The representation value can be either <number>, It can also be <percentage>
  • <position>: Indicates the location of the element . Values can be <length><percentage>left/right/top/bottom

Look at two CSS attribute :

  • The first is width, The document will tell you that the data types supported by this attribute are <length> and <percentage>, Then we know that the attribute can be written in the following ways :width: 1pxwidth: 3remwidth: 33emwidth: 33%
  • The second attribute is background-position, The document will tell you that the data types supported by this attribute are <position>, Then we know that the attribute can be written in the following ways :background-position: leftbackground-position: right background-position: topbackground-position: bottombackground-position: 30%background-position: 3rem

From this example we can see that , Want to remember as much as possible CSS Use of attributes , You can remember from CSS data type ( Now there's almost 40+ Type of data ) Start , So every time you learn something new CSS Attribute , Thinking will change , Here's the picture

Didn't remember CSS Data type I :

 Previous thoughts

remember CSS Data type I :

 The present thought

I don't know if you noticed , If the document only tells you background-position Support <position> data type , Are you sure you know the full usage of this attribute ? You do know that this property supports background-position: 3rem This way of writing , Because you know <position> The data type contains <length> data type , But you know it also supports background-position: bottom 50px right 100px; Is it written like this ? Why can I write four values separated by spaces ? Who told you this ?

This requires us to understand CSS The grammar of 了 , Please read the next section carefully

3、 ... and 、 Read CSS The grammar of

I need to use the clipping effect in a style before , So get ready to learn CSS Medium clip-path How attributes are used , So I inquired about the more authoritative clip-path MDN, We watch , I found this

clip-path  grammar

I realized that I even CSS I can't understand your grammar . Tell the truth , Before, whether it was a beginner CSS Or temporarily find someone CSS Property usage , All direct Baidu , You can find the answer you want in an instant ( For example, rookie tutorial ), This time, , I'm really stupid ! Because itself clip-path This property is more complex , There are many supported grammars , See the light MDN The sample code given to you can't Get To all usage and meaning of this property ( The rookie tutorial can't teach you comprehensively )

So I followed the network cable to find out CSS The grammar of The meaning of some symbols in , Help me understand grammar better

Because about CSS Knowledge of grammatical symbols in CSS Attribute value definition syntax MDN There is a super detailed introduction on ( It is suggested that you must take a look at MDN This article !! It's very easy to understand ), So I won't explain more , Here are just a few summary tables

Attribute combination symbol

Attribute combination : Indicates the writing combination of multiple attribute values . For example, in border: 1px solid #000 in ,1px Can and solid Interchange location 、#000 Can you omit and so on , These are all combinations of attributes

Symbol name effect
Space Juxtaposition The order of attributes on the left and right sides of a space cannot be interchanged
, comma ( Separator ) The attributes on both sides of the comma must be separated by commas
/ Slash ( Separator ) Attributes on both sides of the slash must be separated by a slash
&& " And " Combinator " And " Properties on both sides of the combiner must appear , But in random order
|| " or " Combinator " or " At least one of the properties on both sides of the combiner appears , And in random order
| " Mutually exclusive " Combinator " Mutually exclusive " There is exactly one property on both sides of the combiner
[] brackets The content enclosed in square brackets represents a whole , It can be seen as parentheses in Mathematics ()

Compositor priority

" And " Combinator 、" or " Combinator 、" Mutually exclusive " Combinators are used to indicate the occurrence of attribute values , But there is a priority between the three . for example bold | thin || <length>, among “ or ” The combiner takes precedence over “ Mutually exclusive ” Combinator , So this expression is equivalent to bold | [thin || <length>]

Symbol name priority ( The greater the number , The higher the priority )
Space Juxtaposition 4
&& " And " Combinator 3
|| " or " Combinator 2
| " Mutually exclusive " Combinator 1

Attribute duplicate symbol

Duplicate attribute : Indicates the number of occurrences of one or some attributes . For example, in rgba(0, 0, 0, 1) in , Can the number of numbers be 3 individual 、 Can the last digit write the percentage . This is somewhat similar to regular repetition symbols

Symbol name effect
nothing Don't write symbols Default . Not writing a symbol means that this attribute appears only once
+ plus The attribute or the whole to the left of the plus sign appears one or more times
? question mark The attribute or the whole to the left of the question mark appears zero or once
* asterisk The attribute or the whole to the left of the asterisk appears zero or one or more times
# Well No The attribute or the whole to the left of the pound sign appears one or more times , And with a comma (,) separate
{A, B} Curly braces The attribute or the whole to the left of the brace appears at least A Time , Most appear B Time
! Exclamatory mark An attribute must appear in the whole to the left of the exclamation mark , Even if all attributes in the whole are declared, it can occur zero times

Reading CSS grammar

Based on this section clip-path Take the grammar of , Let's simply interpret one of these properties ( Only part of the interpretation , Because reading all the words will be very long )

Let's look at the overall structure first

clip-path The grammar of

It's divided into four parts , The order is from top to bottom , Between each two parts are where To connect , It means where The following part is a supplementary explanation to the above part

: It means clip-path The supported writing of this attribute is : If you don't just write <clip-source> Value of data type , Or at least from <basic-shape> and <geometry-box> Choose a type of value between the two to write , Or for none.

: We learned that ① Medium <basic-shape> The supported writing method of data type is :inset()circle()ellipse()polygon()path() this 5 A function

: Because we want to know circle() The specific use of this function , So just look at this first . We learned that circle() The arguments of the function support <shape-radius> and <position> Two data structures , And both can be written, but not written , But if you want to write <position> , That must be preceded by at

: First of all to see <shape-radius> The supported properties are <length-percentage> ( As the name suggests, it is <length> and <percentage>)、closest-sidefarthest-side. and <position> The syntax of data types looks more complex , Let's analyze it alone , Because it's really, really long , I will <position> Format and beautify it to show you , Easy for you to read ( I also suggest that if you encounter such a long syntax introduction when learning the syntax of an attribute , Also like I format it , This is convenient for you to read and understand )

<position> Syntax of data types

As you can see , The whole is divided into three parts , And these three parts are mutually exclusive , That is, only one of these three parts can appear , Then according to what we learned earlier CSS Grammatical symbols , You can know how to use , Because there are too many supported writing methods here , Let me just make a table ( In fact, it's arrangement and combination )! If there's anything else you don't understand , You can read it carefully MDN Or you can leave a message in the comment area to ask me , I will reply as soon as I see it !

<position> Type supports writing

The first part The second part The third part
left left left 30px top 30px or top 30px left 30px
center center left 30px top 30% or top 30% left 30px
right right left 30px bottom 30px or bottom 30px left 30px
top 30% left 30px bottom 30% or bottom 30% left 30px
bottom 3px or 3em or 3rem Equal length value left 30% top 30px or top 30px left 30%
left top or top left left top left 30% top 30% or top 30% left 30%
left center or center left left center left 30% bottom 30px or bottom 30px left 30%
left bottom or bottom left left bottom left 30% bottom 30% or bottom 30% left 30%
center center left 30% right 30px top 30px or top 30px right 30px
right top or top right left 30px right 30px top 30% or top 30% right 30px
right center or center right center top right 30px bottom 30px or bottom 30px right 30px
right bottom or bottom right center center right 30px bottom 30% or bottom 30% right 30px
center bottom right 30% top 30px or top 30px right 30%
center 30% right 30% top 30% or top 30% right 30%
center 30px right 30% bottom 30px or bottom 30px right 30%
right top right 30% bottom 30% or bottom 30% right 30%
right center
right bottom
right 30%
right 30px
30% top
30% center
30% bottom
30% 30%
30% 30px
30px top
30px center
30px bottom
30px 30%
30px 30px

indicating surprise or wonder ! I'm so tired , This supports too many ways of writing !

Four 、 Try more

Previous section , We are learning clip-path Attribute syntax , I know what we want (circle()) How to write your grammar , So you really can ? Maybe you did MDN Give you an example , got it circle(40%) What is the approximate effect , Here's the picture

MDN clip-path A simple case of

As I said earlier ,MDN Just give you a list circle() The simplest way to write this function , But we just learned its grammar , Learned that there are other ways to write ( for example circle(40% at left)), and MDN The documentation just tells you what syntax is supported , It also doesn't explicitly tell you , What is the function of which grammar , What kind of effect can be achieved .

At this point, we need to try it ourselves

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title> Try clip-path Of circle() Use </title>
    <style> #zero2one { width: 100px; height: 100px; background-color: ; clip-path: circle(40%); <!--  I'll change it in this line later , Try again and again ! --> } </style>
    <div id="zero2one"></div>
 Copy code 

Take a look at the effect , Um. , Follow MDN It shows the same

clip-path: circle(40%)

Change the value again clip-path: circle(60%), Look at the effect

clip-path: circle(60%)

I seem to have found the law , It seems to be based on the center of the element ,60% It means the length from the center to the edge 60% Draw a circle for the radius , Cut out the contents outside the circle . These are all MDN What is not mentioned in the document , It was verified by my own practice .

Next, let's try other grammars ~

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

clip-path: circle(40% at top)

EH ? Amazing ! Why did it become like this , I don't seem to have found any rules yet , Try changing the value again clip-path: circle(80% at top)

clip-path: circle(80% at top)

It seems that the center of the circle has moved to the middle of the top of the element , Then take the length from the center of the circle to the lowest edge 80% Draw a circle for the radius and cut it . So far, we seem to understand circle() In the syntax at hinder <position> What do data types do , It is probably used to control the center position of the circle drawn during cutting

The rest of the time is left to you to test all the grammar one by one , Here's another simple example , Like you try again clip-path: circle(40% at 30px), You must wonder what that means , Let's see the effect

clip-path: circle(40% at 30px)

Intuitively , The whole circle moves some distance to the left , We didn't set up at 30px when , The center of the circle is at the center of the element , And now it seems to shift to the right , Make a bold guess at 30px The abscissa of the center of the circle is far to the left of the element 30px

Next, check our guess , Continue to modify its value clip-path: circle(40% at 0)

clip-path: circle(40% at 0)

Obviously, the center of the circle is in the middle of the leftmost part , It should be said that it proves our guess just now , Then we might as well verify the vertical coordinates ? Continue to modify the value clip-path: circle(40% at 0 0)

clip-path: circle(40% at 0 0)

Pretty good , Very smooth ,at 0 0 The second one 0 The distance between the ordinate of the center of the circle and the top is 0 It means . Then we can safely draw a conclusion at this time , For things like 30px33em In this way <length> Value of data type , The corresponding coordinates are as shown in the figure


Okay , This article has been a long time , I will not continue to introduce the use of other grammars , Just now it was purely for example , Because we are not introducing circle() The use of the tutorial , Interested readers can go down and practice by themselves ~

So practice is really important !! MDN The document does not list the effects of each grammar , Because each one is listed , The document looks messy , So it's up to you . I remember Zhang Xinxu said in a live broadcast , What he has CSS Characteristics of , It takes a lot of time to try it out , It's not something you can understand by looking at documents , So something you learned in an article by the big guys CSS Use of attributes , It may have taken them a few hours or even more to study it .

CSS Many features have compatibility problems , Because there are many browser manufacturers on the market , Their support varies , And we usually know CSS Compatibility of a property , That's true

see MDN Browser compatibility of a property of

clip-path Browser compatibility

adopt Can I Use To find the browser compatibility of a property

can i use

These are all right , But sometimes there may be some CSS The browser compatibility of properties cannot be obtained through these two channels , So what to do ? Manually try whether the effect of this attribute on each browser supports it ( Boss Xinxu said he would do the same before ), I won't give you an example , You should be able to understand

️ Last

In fact, each of them CSS Big guys don't succeed because of some fast learning paths , They all rely on constant hands-on attempts 、 Record 、 Sum up all kinds of CSS Knowledge , I will often use what I learned CSS Knowledge to do a little demo To consolidate , A few months ago, I added a friend of the desert teacher , I often see some in his circle of friends CSS New features demo Demo code and articles ( I really admire ),coco So is the boss , Also often send some simple use CSS Cool special effects ( It is said that there are no special effects that he can't achieve ~)

in addition , If you want to go deeper , You can also pay attention to CSS The specification of , The more authoritative one is W3C Of CSS Working Group 了 , There's a lot in it CSS Specification document for

w3c css standard

Okay , Recommend some good books recognized by the industry ~ for example 《CSS Authoritative guide 》、《CSS reveal 》、《CSS The world 》、《CSS The new world 》 wait ...

Finally, for 「 How to learn CSS?」 This topic , Do you have any questions or do you think there are good learning methods ? Welcome to comment and discuss ~

Good articles in the past

I am a Zero one , Share technology , Not just the front end , If you like it, just give my article a point Fabulous Well , Thank you for your support !!

The article was published on the official website : Front end impression , If you need to reprint, please contact me. Thank you !

copyright notice
author[Zero one 01],Please bring the original link to reprint, thank you.

Random recommended