Web front-end development beginners how to learn CSS scientifically quickly?

May 30, 2021 Article blog

Many front-end beginners are very big about CSS, asking the w3cschool lion sister "how to learn CSS". P art of the reason for this is that we don't have a good understanding of CSS. Although CSS is only a small part of the front-end work, it is directly related to the final display of the web page, it is worth learning.

This article provides an overview of some common basics of CSS to help you better understand it.

Web front-end development beginners how to learn CSS scientifically quickly?1

What is CSS?

CSS (Cascading Style Sheets) - An acronym for Cascading Style Sheets, a computer markup language that represents file styles such as HTML (an application of a standard universal markup language) or XML (a subset of a standard universal markup language).

Too many CSS knowledge points to remember?

There are a lot of CSS knowledge points, we just need to learn and understand its basics and principles, when we need to use it, we need to go to w3cschool to query the CSS reference manual, we don't need to learn all the attributes and values, but learning CSS has some front-end foundation, without which you'll have a hard time understanding it, and you can learn HTML on W3Cschool first. This saves a lot of time and takes a lot of detours.

Acquaintance Selector (SELECTORS)

Elements in HTML pages are controlled through the CSS selector, enabling one-to-one, one-to-many, or many-to-one control, and the first thing to learn about CSS is the selector. G enerally use the class selector (called the class selector in the program), or use HTML elements directly in body (refers to all code from start tag start tag to end tag end tag). Style is set, but some more complex operations require more advanced selectors to implement, such as some objects directly behind the element, or to select odd rows in a table, depending on where the element is in the document.

These selectors are part of the CSS3 specification (which you may have heard of as CSS3 selectors) and have excellent browser support. For more information about the various selectors you can use, see W3Cschool's CSS Selector.

Some selectors behave as if you've applied class to something in your document. F or p:first-child is like you added a "class" to the first p element, which is called a Pseudo-Element Selectors". A "pseudo-object selector" acts like a dynamic insertion element, such as ::first-line similar span wrapping the first line of text with span. H owever, if the length of the row changes, it is reapplyed, and this does not happen if the element is inserted. N ow you might find these selectors complex, and the following example is an example of a pseudo-element Pseudo Element with a Pseudo-class We use :first-child to locate the first p element, and then ::first-line selector <span> the first line of the element as if we had added a < span around the first line> to thicken it and change the color.

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>认识CSS选择器（SELECTORS）- 编程狮(w3cschool.cn)</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>


<body>
<div class="container">
    <p>大学之道，在明明德，在亲民，在止于至善。</p>
    <p>知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。</p>
    <p>古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。</p>
<p>其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS code:

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.container p:first-child::first-line {
  font-weight: bold;
  color: rgb(254,106,0);
}

Effect:

Web front-end development beginners how to learn CSS scientifically quickly?2

Inheritance and Stacking (INHERITANCE AND THE CASCADE)

Cascades define which rule should be applied first when an element applies multiple style rules. I f you can't understand why some CSS doesn't seem to work, it's probably that cascading isn't being used well. C ascades are closely related to inheritance, which defines the style properties that child elements can inherit from the parent element. It is also about specificity, with different selectors having different specificities, and inheritance can determine which rule to apply when several selectors can be applied to an element.

Note: To understand this, it is recommended to read the CSS Style Cascade in W3Cschool.

If you're trying to apply some CSS to an element, your Browser Developer Tool (DevTools) is the best choice. L ooking at the following example, I set the h1 title to orange with the element selector h1 I also use the class selector to set the h1 title to purple. T he h1 title is purple because the class has a higher priority. I n the developer tool, you can see that the element selector is crossed out because it is not applied. Once you see that the browser is getting your CSS (but something else has overruled it), you can start to figure out why.

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承和层叠 - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">
    <h1 class="greatlearning">大学</h1>
    <p>大学之道，在明明德，在亲民，在止于至善。</p>
    <p>知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。</p>
    <p>古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。</p>
<p>其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS code:

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.greatlearning {
  color: rebeccapurple;
}


h1 {
  color: orange;
}

effect:

Web front-end development beginners how to learn CSS scientifically quickly?3

Box Model

css treats html elements as a box for design and layout. B oxes have their properties and can also be nested between boxes. The standard CSS Box Model takes the width of your given element and then adds the inner border and border to that width -- which means that the element takes up more space than the given width.

Properties: margin, padding, border, content
Depending on the value of the display property, such as, block, inline-block, inline (default), can be set to the block model, the inline block model, the inline block model, the inline model
Classification: Standard model, IE model (alternative box model)

In addition to the standard box model, there is a box model called the IE model (alternative box model), and the width of the box is the width of the visible box on the page, so the width of the content area is that width minus the width of the fill and border. Check out the CSS Box Model on W3Cschool for details.

The two boxes are shown below, both with a width of 200 pixels, a border of 1 pixel and an inner margin of 20 pixels. The first box uses the standard box model, so it takes up a total width of 242 pixels, and the second box uses an alternative box model, so it is actually 200 pixels wide.

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 盒模型 -编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="box">
    我是标准盒子模型。
</div>


<div class="box box2">
    我是替代盒子模型。
</div>
</body>
</html>

CSS code:

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


p {
  margin: 0 0 1em 0;
}


.box {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  width: 200px;
  margin-bottom: 2em;
}


.box2 {
  box-sizing: border-box;
}

effect:

Web front-end development beginners how to learn CSS scientifically quickly?4

The Browser Developer Tool (DevTools) can help you understand the box model you're using again. I n the following image, I use Firefox's developer tool to use the default content-box box model tool. The tool tells me that this is the box model in use, and I can see the size and how to add borders and inner borders to the specified width.

Web front-end development beginners how to learn CSS scientifically quickly?5

DevTools helps you understand why the box is of a certain size and the box model used

Note: Prior to IE8, if you wanted to be compatible, you needed to declare with the W3C standard. Which box model can be controlled by box-sizing in the browser in IE8 plus, the default is content-box, which is the standard box model.

In W3Cschool's CSS Box Model, there is a detailed description of the box model and box size.

Normal flow

There are also people translated as "document flow", the specific name does not matter, we understand its principles on the line. T itles and paragraphs start with new lines, words appear as sentences, and there is only one space between them. L abels used for formatting, such as em do not break the sentence flow. T his content is displayed as Normal normal flow or Block Flow Layout Each part of the content is described as in flow

We have to accept this behavior, it will become easier to learn. That's one of the reasons why it makes sense to start with a properly tagged HTML document, because browsers follow regular streams and built-in style sheets, and your content starts where it's readable.

Formatting Context (FORMATTING CONTEXTS)

Once the contents of the document are in a normal process, you may want to change the appearance of some of them. Y ou can do this by changing the formatting context of the element. As a very simple example, if you want all paragraphs to be connected instead of starting with a new line, you can set the style property display:inline of the p element to change the p element from a block element to an inline element.

Essentially, the formatting context defines external and internal types. E xternal control elements and the behavior of other elements on the page, internal control of the appearance of child elements. For example, when you set display:flex you format the context for a block outside the setting, and the child elements are formatted for flex.

Note: The latest version of the Display specification changes the value of display explicitly declaring external and internal types. T herefore, you may declare display:block flex; (block block external, flex inside).

Read more display display on W3Cschool's CSS display display.

In or out of flow (IN IN OR OUT OF FLOW)

Elements in CSS are described as in flow or out of flow flow". E lements in a stream are given space, and space is affected by other elements in the stream. If you detach an element from the stream by floating or positioning it, the space of that element is no longer affected by other flow elements.

For absolutely positioned elements, this is the most obvious. If you set an position: absolute that element will detach from the stream, and you need to make sure that the element does not overlap with the element in the stream and does not affect the readability of the rest of your layout.

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">

  
    <p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
    <p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
    <p>子曰:“巧言令色，鲜矣仁！”</p>
    <p>曾子曰“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”</p>
    <p>子曰:“道千乘之国,敬事而信，节用而爱人，使民以时。”</p>
    <p>子曰：“弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。”</p>
    <p>子夏曰：“贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。”</p>
    <p>子曰：“君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。”</p>
    <p>曾子曰：“慎终追远，民德归厚矣。”</p>
    <p>子禽问于子贡曰：“夫子至于是邦也，必闻其政，求之与，抑与之与？”子贡曰：“夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？”</p>
    <p>子曰：“父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。”</p>
    <p>有子曰：“礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。”</p>
    <p>有子曰：“信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。”</p>
    <p>子曰：“君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。”</p>
    <p>子贡曰：“贫而无谄，富而无骄，何如？”子曰：“可也。未若贫而乐，富而好礼者也。”子贡曰：“《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？”子曰：“赐也，始可与言《诗》已矣，告诸往而知来者。”</p>
    <p>子曰：“不患人之不己知，患不知人也。”</p>

  
    <div class="item">绝对定位和脱离流。</div>
</div>
</body>
</html>

CSS code:

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 10px;
  column-count: 2;
  max-width: 400px;
  position: relative;
}


.item {
  border-radius:.5em;
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: rgba(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 200px;
}

effect:

Web front-end development beginners how to learn CSS scientifically quickly?6

However, the floating element is also detached from the stream, but the text of the subsequent element wraps around the floating element. You can set the background color of the elements behind them, and you'll see that they will rise and take up the original space of the original floating element.

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">


    <div class="item">浮动和脱离流</div>  
    <p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
    <p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
    <p>子曰:“巧言令色，鲜矣仁！”</p>
    <p>曾子曰“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”</p>
    <p>子曰:“道千乘之国,敬事而信，节用而爱人，使民以时。”</p>
    <p>子曰：“弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。”</p>
    <p>子夏曰：“贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。”</p>
    <p>子曰：“君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。”</p>
    <p>曾子曰：“慎终追远，民德归厚矣。”</p>
    <p>子禽问于子贡曰：“夫子至于是邦也，必闻其政，求之与，抑与之与？”子贡曰：“夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？”</p>
    <p>子曰：“父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。”</p>
    <p>有子曰：“礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。”</p>
    <p>有子曰：“信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。”</p>
    <p>子曰：“君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。”</p>
    <p>子贡曰：“贫而无谄，富而无骄，何如？”子曰：“可也。未若贫而乐，富而好礼者也。”子贡曰：“《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？”子曰：“赐也，始可与言《诗》已矣，告诸往而知来者。”</p>
    <p>子曰：“不患人之不己知，患不知人也。”</p>

  
</div>
</body>
</html>

CSS code:

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 10px;
  max-width: 500px;
}


.item {
  border-radius:.5em;
  float: left;
   background-color: rgba(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 100px;
  margin: 10px;
}


.container p:nth-of-type(1) {
  background-color: yellow;
}

effect:

Web front-end development beginners how to learn CSS scientifically quickly?7

Note: It is important to remember that if you remove an element from a stream, you need to manage the overlap yourself because the general rules for block flow layout no longer apply.

Layout

In the past, we used to use CSS for layouts in HTML, with common layouts such as single-column layouts, two-column adaptive layouts, Sanfei layouts and double-wing layouts, pseudo-high layouts, and adhesion layouts. H ighlight the Flex layout and grid layout:

Flex layout

Flex layout, also known as elastic box layout, a few lines of code can achieve the layout of various pages.

//html部分同上
.parent {
    display:flex;
}  
.right {
    margin-left:20px; 
    flex:1;
}

The Flexbox layout foundation on W3Cschool is recommended to get started and help you master Flex better.

Grid layout

Grid layout is a grid-based 2D layout system designed to optimize user interface design.

//html部分同上
.parent {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:20px
}

Alignment

Most people think of alignment as part of Flexbox, but these properties apply to all layout methods that are worth understanding in this case, rather than considering Flexbox Alignment or Flexbox Alignment, CSS grid alignment. W e have a set of Event attributes that, if possible, work in a generic way. Then, because of the way different layout methods behave, they will have some differences.

Size (Sizing)

On the web, we're used to setting dimensions by length or percentage, and that's how we use floats to create grid type layouts. H owever, modern layout methods can allocate a lot of space for us, if we allow it. It's worth taking the time to understand how Flexbox allocates space (or how the Grid fr unit works).

Responsive Design

Often, the new Grid and Flexbox layout methods mean that we can use fewer media queries than the old methods because they are flexible enough to respond to changes in viewport or component size without us changing the width of the element. However, there are areas where breakpoints need to be added to further enhance the design.

Fonts and typography

As with layout, font usage on the web is changing dramatically. N ow, variable fonts make a single font file infinitely different. T o find out what they are and how they work, watch Mandy Michael's short speech: The Future of Variable Fonts and Web Design. In addition, I would recommend Jason Pamental's dynamic typography with modern CSS and variable fonts.

To explore variable fonts and their capabilities, Microsoft offers an interesting demo, as well as some playgrounds to try variable fonts - Axis Praxis is best known (I also like Font Playground).

The guide on MDN will prove useful for using variable fonts in the first place. To learn how to implement a fallback solution for browsers that don't support variable fonts, read Oliver Schondorfer's "Implementing Variable Fonts with Fallback Web Fonts" Firefox DevTools Font Editor also supports the use of variable fonts.

Deformation and animation

CSS transformations and animations are definitely the basis I need to know. I don't often need to use them, and I forget the syntax when I use them. T hankfully, the references on MDN helped me, and I recommend starting with a guide to using CSS transformations and using CSS3 animation. Zell Liew also has a good article that provides a good explanation for the CSS transition.

To find something possible, check out the Animista website.

One of the things that can be confusing about animation is which way to take it. I n addition to what CSS supports, you may also need to deal with JavaScript, SVG, or Web Animation APIs, which are often confused. In her presentation, Choose Your Animated Adventures Recorded in Events, Val Head explains these options.

Use the reference manual

Many people who use Grid or Flexbox rely heavily on the CSS reference manual on w3cschool and can't work without it. T his is no problem, we also mentioned earlier can be reasonable use of reference manuals to improve development efficiency, but only if you first understand the principle. O therwise, when we copy the syntax, we may overlook why we write this. Then, when faced with a situation where the property seems to behave differently, this apparent inconsistency can be confusing to find out what the problem is.

CSS is a language that has evolved over the years and has been updated, and will never be learned if it is to learn as a learner's mindset. H owever, once you've cracked down on the basics and the underlying principles, you can easily face the changes. If you want to system the learning front end recommends learning the 0 Foundation to Front End Development course on W3Cschool.

These are the programming lions for you to organize about the web front-end development beginners how to learn CSS quickly and scientifically? The whole content, hope to css daunting beginners to help, if you have a better way to learn welcome to share

Web front-end development beginners how to learn CSS scientifically quickly?

What is CSS?

Too many CSS knowledge points to remember?

Acquaintance Selector (SELECTORS)

Inheritance and Stacking (INHERITANCE AND THE CASCADE)

Box Model

Normal flow

Formatting Context (FORMATTING CONTEXTS)

In or out of flow (IN IN OR OUT OF FLOW)

Layout

Alignment

Size (Sizing)

Responsive Design

Fonts and typography

Deformation and animation

Use the reference manual

Cookie Consent