Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to learn CSS quickly". The editor shows you the operation process through actual cases. The operation method is simple and fast, and it is practical. I hope this article "how to learn CSS quickly" can help you solve the problem.

What is CSS?

CSS (cascading style sheet), an abbreviation for Cascading Style Sheets, is a computer markup language used to represent file styles such as HTML (an application of Standard Generalized markup language) or XML (a subset of Standard Generalized markup language).

Too much knowledge of CSS to remember?

CSS knowledge is indeed a lot, we just need to learn and understand its basic knowledge and principles, need to use when to w3cschool query CSS reference manual, do not need to learn all the attributes and values, but to learn CSS to have some front-end foundation, if you do not have these foundations, you will be difficult to understand it, you can first learn HTML on W3Cschool. This can save a lot of time and a lot of detours.

Cognitive selector (SELECTORS)

The elements in the HTML page are controlled through the CSS selector, which can achieve one-to-one, one-to-many or many-to-one control. The first thing you need to master in learning CSS is the selector. You typically use a class selector (called a "class selector" in the program), or use the HTML element (elements) directly in body (all code from the opening tag (start tag) to the closing tag (end tag). Style, but some of the more complex operations require more advanced selectors, such as objects directly behind the element, or to select odd rows in the table, you need to select the element based on its position in the document.

These selectors are part of the CSS3 specification (you may have heard of them as CSS3 selectors) with excellent browser support. For more information about the various selectors that are available, see W3Cschool's CSS selector.

Some selectors behave as if you have applied "class" to something in the document. For example, p:first-child is like adding a "class" to the first p element. These are called "pseudo-object selectors" (Pseudo-Element Selectors). The pseudo-object selector acts like a dynamic insert element, for example: first-line is similar to wrapping the first line of text in span. However, if the length of the row changes, it will be reapplied, and this will not happen if the element is inserted. Now you may find these selectors very complex, and the following example is an example of a pseudo-element (Pseudo Element) using Pseudo-class. We use the: first-child pseudo class to locate the first p element, and then the:: first-line selector selects the first line of the element as if one had been added around the first line to thicken it and change the color.

HTML Code:

Recognize the CSS selector (SELECTORS)-(yisu.com) @ import url ("style/style.css")

The way of university, in Ming Mingde, in close to the people, in the end in the best.

Know to stop and then have a decision, set and then can be quiet, quiet and then can be safe, and then can worry, worry and then can get. Things have their origins, and things have their beginning. If you know the order of the place, it will be a short way.

In ancient times, those who want to be virtuous in the world should first govern their country; if they want to govern their country, they should first unite their families; if they want to complete their families, they should first cultivate their bodies; if they want to cultivate their bodies, they should first correct their hearts; if they want to correct their hearts, they should first be sincere; if they want to be sincere, they should first tell them what they know. Knowledge is in the lattice. Things then know, know and then sincerity, sincerity and integrity, correct mind and later body cultivation, physical cultivation and then home Qi, family Qi and then country rule, country rule and then peace of the world. From the son of Heaven to the common people, they all take self-cultivation as the foundation.

No, no. What is thick is thin, and what is thin is thick.

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 1.7em 0;} .container {border: 1px solid rgb; border-radius: .5em; padding: 20px; column-count: 1;} .container p:first-child::first-line {font-weight: bold Color: rgb (254 and 106);} inheritance and cascading (INHERITANCE AND THE CASCADE)

Cascading defines which rules should be applied first when multiple style rules are applied to an element. If you can't understand why some CSS doesn't seem to be applied, it may be that cascading is not working well. Cascading is closely related to inheritance, which defines that child elements can inherit style attributes of the parent element. It is also related to specificity, and different selectors have different specificities, and inheritance can determine which rule to apply when there are several selectors that can be applied to an element.

Note: to understand this, it is recommended to read the CSS style cascades in W3Cschool.

If you are trying to apply some CSS to an element, then your browser developer tool (DevTools) is the best choice. Looking at the following example, I used the element selector H2 to set the H2 title to orange. At the same time, I also set the H2 title to purple using the class selector. Because the class has higher priority, the H2 title is purple. In 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 overturned it), you can start to find out why.

HTML Code:

Inheritance and cascading (yisu.com) University

The way of university, in Ming Mingde, in close to the people, in the end in the best.

Know to stop and then have a decision, set and then can be quiet, quiet and then can be safe, and then can worry, worry and then can get. Things have their origins, and things have their beginning. If you know the order of the place, it will be a short way.

In ancient times, those who want to be virtuous in the world should first govern their country; if they want to govern their country, they should first unite their families; if they want to complete their families, they should first cultivate their bodies; if they want to cultivate their bodies, they should first correct their hearts; if they want to correct their hearts, they should first be sincere; if they want to be sincere, they should first tell them what they know. Knowledge is in the lattice. Things then know, know and then sincerity, sincerity and integrity, correct mind and later body cultivation, physical cultivation and then home Qi, family Qi and then country rule, country rule and then peace of the world. From the son of Heaven to the common people, they all take self-cultivation as the foundation.

No, no. What is thick is thin, and what is thin is thick.

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 1.7em 0;} .container {border: 1px solid rgb; border-radius: .5em; padding: 20px; column-count: 1;} .greatlearning {color: rebeccapurple;} H2 {color: orange } Box Model (Box Model)

Css treats html elements as boxes for design and layout. Boxes have their properties, and boxes can be nested between them. The standard CSS box model (CSS Box Model) takes the width of your given element, and then adds an inner border and border to that width-which means that the element takes up more space than the given width.

Attributes: margin, padding, border, content

Depending on the value of the display attribute, for example, block\ inline-block\ inline (default), it can be set to block model\ inline block model\ inline model

Classification: standard model, IE model (instead of box model)

In addition to the standard box model, there is a box model called the IE model (instead of the box model). 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. For more information, please refer to the CSS Box Model (Box Model) on W3Cschool.

The following shows two boxes 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 the total width is 242 pixels, and the second box uses an alternative box model, so it is actually 200 pixels wide.

HTML Code:

CSS box model-(yisu.com) I am the standard box model. I am the replacement box model.

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: 00 1em 0;} .box {border: 1px solid rgb; border-radius: .5em; padding: 20px; width: 200px; margin-bottom: 2mm;} .box2 {box-sizing: border-box;}

The browser developer tool (DevTools) can once again help you understand the box model you are using. In the following figure, I use the developer tool of Firefox browser to use the default content-box box model tool. The tool tells me that this is the box model I am using, and I can see the size and how to add the border and inner border to the specified width.

DevTools can help you understand why the box has a certain size and the box model used

Note: before IE8, if you want to be compatible, you need to use the W3C standard, declaration. In IE8+, which box model is used in the browser can be controlled by box-sizing. The default value is content-box, that is, the standard box model.

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

Regular flow (normal flow)

Some people translate it as "document stream". It doesn't matter what the name is, we just need to understand its principle. The title and paragraph will start with a new line, the word will appear as a sentence, and there is only a space between them. Tags used for formatting, such as em, do not break the sentence flow. This content is displayed as regular flow (normal flow) or Block flow layout (Block Flow Layout). Each part of the content is described as "in flow"; it knows the rest and therefore does not overlap.

If we accept this kind of behavior, it will be easier to learn. This is one of the reasons why it makes sense to start with a properly tagged HTML document. Because browsers follow regular streams and built-in stylesheets, your content starts where it is readable.

Formatting context (FORMATTING CONTEXTS)

Once the content of the document is in the normal process, you may want to change the appearance of some of it. You can do this by changing the format context of the element. To take a very simple example, if you want all paragraphs to be concatenated instead of starting with a new line, you can set the style attribute display:inline of the p element to change the p element from a block-level element to an inline element.

In essence, the formatting context defines external and internal types. Externally controls the behavior of elements and other elements on the page, and internally controls the appearance of child elements. For example, when you set display:flex, you set the external formatting context for the block and set the child element to the flex formatting context.

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

Read more about display on the CSS display display of W3Cschool.

In or out of stream (BEING IN OR OUT OF FLOW)

Elements in CSS are described as "in flow" or "out of flow". The elements in the flow are given space, and the space is affected by other elements in the flow. If you remove an element from the stream by floating or positioning the element, the space of that element will no longer be affected by other flow elements.

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

HTML Code:

CSS flow-(yisu.com)

The Master said, "isn't it also said that you learn and learn from time to time? isn't it a pleasure to have friends coming from afar? isn't it a gentleman that people don't know but don't fuss?

Some Master said, "it is rare for a man to be filial to his younger brother and easy to commit a crime. There are no such people who are not good at committing a crime but easy to commit a riot. A superior man is based on this, standing and moral. Filial piety is also the foundation of benevolence and benevolence!"

The Master said, "clever words are seldom benevolent!"

Zengzi said, "I reflect on myself three times a day: do you plan for others but are unfaithful? do you make friends but don't believe? do you get used to it?"

The Master said, "in the kingdom of a thousand rides, respect and trust, economize and love, so that the people can keep time."

The Master said, "when you enter, you will be filial, and when you go out, you will be filial, earnestly and faithfully, love the masses, and be close to benevolence. If you have more power in practice, you will learn literature."

Zi Xia said, "if you are virtuous and change color, you can do your best to serve your parents; if you serve a king, you will be able to serve your body; if you make friends, you will keep your word." although I have not learned, I must call it learning. "

The Master said, "if the superior man is not important, he will not be powerful, and his study will not be firm. If you are faithful and faithful, if you have no friends, you are not as good as yourself. If you make mistakes, do not be afraid to change."

Zeng Tzu said, "be careful to pursue far away, and the virtue of the people will be thicker."

Zi Jing asked Yu Zi Gong, "Master, as for being a state, you must hear its politics, ask for it, and restrain it." Zi Gong said, "the Master is gentle, kind, courteous and frugal. What the Master asks for is not the same as the sum of people's requests."

The Master said, "if the father is present, observe his will. If the father does not, observe his deeds; if he has not changed the way of his father for three years, it can be described as filial piety."

A Master said, "the use of propriety is precious. The way of the king was beautiful, and it was the reason for being small and great. It is not feasible to know peace and harmony without etiquette."

Some Master said, "Faith is close to righteousness, and words can be answered. Courtesy is close to propriety, which is far from shame. Because he does not lose his relatives, he can also live."

The Master said, "the superior man has no appetite for food, no peace of residence, and is sensitive to things and careful in words. He is virtuous and upright. It can be said that he is eager to learn."

Zi Gong said, "what if you are poor without arrogance, rich without arrogance?" The Master said, "it can be. Not as poor and happy, rich and courteous." Zi Gong said, "Poetry says,'if you are like learning from each other, you are like grinding. 'what do you call it?" The Master said, "when you give it to you, you can say that the poem is over, and you can tell those who have come from the past."

The Master said, "do not suffer from the ignorance of others, but also the ignorance of others."

Absolute positioning and departure from the stream.

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: 00 1em 0;} .container {border: 1px solid rgb; 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 fff; padding: 106Power.9); color: # fff; padding: 20px; width: 200px;}

However, the floating element will also be detached from the stream, but the text of the subsequent element will surround the floating element. You can set the background color of the following elements, and you will see that they will rise and take up the original space of the original floating element.

HTML Code:

CSS flow-(yisu.com) floats and leaves the stream

The Master said, "isn't it also said that you learn and learn from time to time? isn't it a pleasure to have friends coming from afar? isn't it a gentleman that people don't know but don't fuss?

Some Master said, "it is rare for a man to be filial to his younger brother and easy to commit a crime. There are no such people who are not good at committing a crime but easy to commit a riot. A superior man is based on this, standing and moral. Filial piety is also the foundation of benevolence and benevolence!"

The Master said, "clever words are seldom benevolent!"

Zengzi said, "I reflect on myself three times a day: do you plan for others but are unfaithful? do you make friends but don't believe? do you get used to it?"

The Master said, "in the kingdom of a thousand rides, respect and trust, economize and love, so that the people can keep time."

The Master said, "when you enter, you will be filial, and when you go out, you will be filial, earnestly and faithfully, love the masses, and be close to benevolence. If you have more power in practice, you will learn literature."

Zi Xia said, "if you are virtuous and change color, you can do your best to serve your parents; if you serve a king, you will be able to serve your body; if you make friends, you will keep your word." although I have not learned, I must call it learning. "

The Master said, "if the superior man is not important, he will not be powerful, and his study will not be firm. If you are faithful and faithful, if you have no friends, you are not as good as yourself. If you make mistakes, do not be afraid to change."

Zeng Tzu said, "be careful to pursue far away, and the virtue of the people will be thicker."

Zi Jing asked Yu Zi Gong, "Master, as for being a state, you must hear its politics, ask for it, and restrain it." Zi Gong said, "the Master is gentle, kind, courteous and frugal. What the Master asks for is not the same as the sum of people's requests."

The Master said, "if the father is present, observe his will. If the father does not, observe his deeds; if he has not changed the way of his father for three years, it can be described as filial piety."

A Master said, "the use of propriety is precious. The way of the king was beautiful, and it was the reason for being small and great. It is not feasible to know peace and harmony without etiquette."

Some Master said, "Faith is close to righteousness, and words can be answered. Courtesy is close to propriety, which is far from shame. Because he does not lose his relatives, he can also live."

The Master said, "the superior man has no appetite for food, no peace of residence, and is sensitive to things and careful in words. He is virtuous and upright. It can be said that he is eager to learn."

Zi Gong said, "what if you are poor without arrogance, rich without arrogance?" The Master said, "it can be. Not as poor and happy, rich and courteous." Zi Gong said, "Poetry says,'if you are like learning from each other, you are like grinding. 'what do you call it?" The Master said, "when you give it to you, you can say that the poem is over, and you can tell those who have come from the past."

The Master said, "do not suffer from the ignorance of others, but also the ignorance of others."

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: 00 1em 0;} .container {border: 1px solid rgb; border-radius:.5em; padding: 10px; max-width: 500px;}. Item {border-radius:.5em; float: left Background-color: rgba (254 yellow; 106); color: # fff; padding: 20px; width: 100px; margin: 10px;} .container p:nth-of-type (1) {background-color: yellow;}

Note: it is important to keep in mind that if you take an element out of a stream, you need to manage the overlap yourself, because the general rules for block flow layout no longer apply.

Layout (Layout)

In the past, we generally use CSS for layout in HTML, and the common layouts are: single-column layout, two-column adaptive layout, holy flight layout and double-wing layout, pseudo-high layout, adhesive layout. Focus on Flex layout and grid layout:

Flex layout

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

/ / html part as above .parent {display:flex;} .right {margin-left:20px; flex:1;}

It is recommended to get started with the basic layout of Flexbox on W3Cschool, which can help you master Flex better.

Grid layout

Grid layout, is a grid-based two-dimensional layout system, the purpose is to optimize the user interface design.

/ / html part is the same as above. Parent {display:grid; grid-template-columns:auto 1frr; grid-gap:20px} alignment (Alignment)

Most people think of Alignment as part of Flexbox, but these attributes apply to all layout methods and are worth understanding in this case, rather than thinking about "Flexbox Alignment" or "Flexbox Alignment"CSS grid alignment." We have a set of Alignment properties that work in a general way where possible. Then, due to the behavior of different layout methods, they will have some differences.

Dimensions (Sizing)

On web, we are used to setting dimensions with lengths or percentages, which is how we use floats to make grid-type layouts. However, 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 Grid fr units work).

Responsive design (Responsive Design)

In general, 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 the size of viewports or components without requiring us to change the width of the element. However, there are areas where breakpoints need to be added to further enhance the design.

Fonts and typesetting

Like the layout, the use of fonts on the Internet has changed dramatically. Now, variable fonts make a single font file have unlimited changes. To learn what they are and how they work, watch Mandy Michael's wonderful short talk: the Future of variable fonts and Web Design. In addition, I would recommend Jason Pamental dynamic typesetting with modern CSS and variable fonts.

To explore variable fonts and their features, Microsoft offers an interesting demonstration, as well as some playgrounds that try variable fonts-Axis Praxis is the best known (I also like font playgrounds).

The guidelines on MDN will prove that using variable fonts is very useful in the first place. The Firefox DevTools font editor also supports the use of variable fonts.

Deformation and animation

CSS conversion and animation are definitely the foundation I need to know. I don't need to use them very often, and I forget the syntax when I use them. Fortunately, the resources on MDN have helped me, and I suggest 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 transition of CSS.

To find out something possible, check out the Animista website.

One of the things that can be confusing about animation is which approach to take. In addition to the content supported by CSS, you may also need to involve JavaScript, SVG, or Web Animation API, which are often confused. In her speech, choose your animated adventures to be recorded in the event, and Val Head explains these options.

This is the end of the introduction to "how to learn CSS quickly". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.