Simply record the history of CSS that I knew before learning CSS, systematically learn CSS and how to learn it.

Simply record the history of CSS that I knew before learning CSS, systematically learn CSS and how to learn it.

CSS (English: Cascading Style Sheets) is called Cascading Style Sheets

1. The history of CSS?

For detailed historical introduction, please check Wikipedia CSS

1.1 The proposal of CSS

CSS was originally proposed by Harken Wim Lay in 1994. Then Harken Wim Lay and Bert Boss collaborated to design CSS, and published CSS1 in 1996.

1.2 CSS version

CSS1 1996
CSS2 1998-added positioning, z-index, media
CSS2.1 2004-2011, is the most extensive version now (IE support)
CSS3 was drafted in 1999-relatively new CSS (to upgrade the module, only the module version number, upgrade each)
CSS4 began to design in 2011

1.3. What does stacking mean?

Style cascade (the same selector can be styled multiple times)
Selector cascade (different selectors can be used to style an element)
File stacking (multiple files can be used for stacking)

These features make CSS extremely flexible

1.4. How do I know which browsers support which features? (compatibility)

Method 1: Run through dozens of browsers

Method 2 : Use caniuse.com , it can tell you whether the browser supports

Can i use it

Red means there is a problem with the browser, yellow is a problem, green is fine

2. System Chemistry CSS

What must be learned to learn a language?

Grammar (how to write code)
How to debug (how to know if your code is wrong)
Where to find information
Who is the standard setter

2.1 Syntax

Syntax 1: style

选择器 {
    
    
	属性名：属性值；
    /*注释*/
}

note:

All symbols are English symbols

Case sensitive, "a" and "A" are different

No comments for //

The last semicolon can be omitted, but it is not recommended

Wrong anywhere, no error will be reported, the browser will just ignore it

Grammar 2: at Grammar

@charset "UTF-8";
/* 指定当前文件的字符编码或字符集*/
@import url(3.css); 
/*导入额外的css*/
@media (min-width: 100px) and (max-width: 200px){
    
    
}
/*媒体查询*/

note:

@charset must be placed on the first line, the first two at syntax must end with a semicolon ";"

Charset means character set, but UTF_8 is character encoding (GBK Chinese, Japanese and Korean, unicode universal code-UTF-8/UTF-16/UTF-32)

charset determines the file encoding rather than the character set.

2.2 How to debug?

W3C vaildator verification code
VScode can confirm about a few lines of error
*webstorm can know what went wrong by looking at the color
Use developer tools, see warning

There is also a border debugging method for self-checking:

Steps: If there is a problem with an element, add a border to this element. The border does not appear? Explain that the selector is wrong or the syntax is wrong. The
border appears? Check whether the boundary meets expectations, and delete the boundary when the bug is resolved, which is equivalent to JS's log debugging method.

2.3 Where can I find information?

Google search keywords + MDN, such as flex MDN
CSS tricks is the village English website flex css tricks
css+Zhang Xinxu (studied css for more than ten years and wrote countless css documents)

2.4 Who is the standard setter

The latest css spec standard, you can search for documents if you can't find it, you can see the extensive Chinese version of css 2.1.

3. How to learn? -CRM method

Learn the way to learn from the Valley of the Hunger

copy-copy documents, copy teacher
Run- put on your own machine to run successfully
Modify-Add a little bit of your own ideas and run

–continue

I am on my way to learn the front end from entry to soil. Every time you watch, it is your greatest encouragement to my learning journey, let's work hard together!

Welcome to leave your valuable comments.

----At last

Please like

CSS entry notes 1

table of Contents