This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

This course starts with the birth background and basic definition of CSS, and gives a preliminary understanding of CSS. It then explains how to learn CSS correctly and concludes with a few references that you can use to continue learning.

preface

  • What is CSS?
  • How to learn CSS?
  • CSS based
  • CSS advanced

CSS is what

CSS Cascading Syle Sheets, a language for adding styles to structured documents (basically HTML).

For instance,

To select all the paragraph elements in an HTML page and change the text to red, write CSS like this

As you study HTML, you can see the default style that the browser gives to each tag.

With CSS, you can add custom styles to your documents

  • Such as changing the color and size of the title and link.
  • Can also be used to modify the layout
  • For example, change a single column layout to two columns, containing the main content area and a sidebar area for related information.
  • It can also be used for special effects and animation

Background of CSS

Before CSS, all styles were mixed up in HTML. If a heading is to be in italics, red characters, and white background, write this:

With CSS, the style can be separated from the structure of the article.

In addition to separation, CSS as a style language can be separated out to provide greater expression space;

In the example above

CSS syntax can also be written in HTML.

CSS Basic Rules

Let’s take a look at the structure of CSS

The entire structure is called a rule set (often referred to as “rules” for short), and the parts are defined as follows:

  • [Selector] : Selects one or more elements that need to be styled (in this case, the P element)
  • 【 Declaration 】 : A single rule, such as color: red; Use to specify attributes to add style elements.
  • Attributes: Specifies that the HTML element style is to be changed
  • [Attribute value] : Select a value from a number of appearances for the specified attribute (there are many color values besides red)

Note 1

  • Each rule set (except for the selector portion) should be enclosed in pairs of braces{}
  • Use a colon in each statement:Separate the property from its value.
  • Use a semicolon in each rule set;Separate the declarations.

Note 2

  • If you want to modify more than one property at a time, just separate them with semicolons
  • You can also select multiple types of elements and add the same set of styles to them. Separate the different selectors with commas

The selector

There are many different types of selectors. The above only describes the element selector, which is used to select a given element in an HTML document. But the selection operation can be more specific.

Here are some common types of selectors:

Selector name Selected content The sample
Element selectors (also known as tag or type selectors) All HTML elements of the specified type p

On behalf of the selection<p>
The ID selector Elements with specific IDS (in a single HTML page, each ID corresponds to only one element, and each element corresponds to only one ID) #my-id

On behalf of the selection<p id="my-id"> <a id="my-id">
Class selectors Elements with a particular class (a class can have multiple instances on a single page) .my-class

On behalf of the selection<p class= "my-class"> <a class= "my-class">
Property selector An element with a specific attribute img[ src]

On behalf of the selection<img src=" my image.png">Instead of < img>
Pseudo class selector A specific element in a specific state (such as a mouse pointer hovering) a: hover

Select only when the mouse pointer is hovering over the link<a>.

Cascade and inheritance

CSS stands for Cascading Style Sheets, and it’s important to understand that first word, Cascading

  • How cascade behaves is the key to understanding CSS.

The sample

We have two rules for h1. H1 shows [red] at the end

  • These rules have the same priority, but the order is the last to take effect.

Browsers have a selector priority to determine the rule, and basically the more specific the selector, the higher the priority.

  • An element selector is not very specific πŸ‘‰ selects all elements of that type on the page

  • A class selector is a little bit more specific πŸ‘‰ it will select the element one of the page that has a particular class attribute value so it has a higher priority.

The sample

The h1 below will end up in green

Some CSS properties set on the parent element are inherited from the parent element, and some are not.

The sample

If you set a color and a font-family to an element, every element in it will have the same attribute value, unless you set the attribute directly to the element.

Together, these concepts control which elements the CSS rules apply to; It can feel a little complicated at times, but when you have more experience with CSS, you can remember them, and even if you forget the details, you can look them up online.

Let’s do a more complicated example

Color and bold are both inherited; 【 border】 does not (otherwise each child element would have an ugly box), indicating that the browser uses common sense to determine which attributes should be inherited;

How to learn CSS

Free classes

Before going further into the rules of CSS, let’s share a few learning resources. Because CSS is so full of content, it is also great for self-study, so I would like to share with you some free websites that you can continue to learn after class.

【 ε…Έ εž‹ θŒƒ δΎ‹ 1 】 the decademy

Old online programming education website. Full interactive self-service learning experience. Very suitable for CSS to learn while practicing the scene.


Udacity 【 Video 】

It is also an old online programming education website. Although it is a foreign language site, but into the course is full of Chinese.

“Recommended reasons”

  • It’s free;
  • It is a form of video teaching + after-class experiment interaction, which is recommended to students who like to watch the teacher explain.


W3school and runoob

Free, interactive, content is quite comprehensive, good practice field.


【英文 address 】 freecodecamp Or freecodecamp

Most star projects on Github. A comprehensive self-study program for programmers contributed by the community.




How to choose?

The order of recommendation is to recommend from the front to the back. Is a professional online course team produced > self-help learning β‰ˆ community self-help.

If you are a beginner, you should be able to take any of these courses in a weekend or so. Once you have the basics in place, you can look at the documentation when you want to dig deeper into which CSS rules apply in which scenario. You should already know which scene (font, location, color, etc.) to look for and which attributes to look for.

The above is the teacher’s recommendation, personal recommendation, I think which is suitable for their own choice, in fact, knowledge is those, but the learning style is different, so choose their own way can be

Continuous learning

Here are some real learning materials that will last you a lifetime if you’re in the front end of the business.

MDN document

CSS document library. This is the most common place for front-end programmers (HTML, 8 JS rules are also included). At the same time, it has a rich variety of tutorials, as a free exploration site is also quite good.

css-tricks

Another Css document library that organizes Css knowledge in a different form than MDN, and a very active Css community with all kinds of oddities. It is quite appropriate to complement the MDN document.

* the w3c CSS standard

The previous tutorials and documentation will basically teach you how to use them. Most of them are self-explanatory, like color; red; If the text turns red, what bicycle do you need?

But:

  • There are a lot of CSs rules in the real world that behave differently in different scenarios, and a normal document won’t tell you why (or even that)

  • Unlike color, there are a number of CSS rules that work wonders when combined, and you might be wondering why (color affects more than just the color of text, you know?).

W3c documents, is to answer these questions (usually do not browse, encounter problems can be queried here)

conclusion

I participated in byte youth training camp, so I am going to produce a relearning front end series. Due to the time, it may only be a study note.

Update time: try the course day or every other day.

If there are any mistakes above, please let us know in the comments section!

Click “Like” before you go! πŸ˜—