CSS Basics (Part 1)

The opening words

If YOU are not familiar with HTML, it is recommended to take a good look at the previous two chapters. After that, we will open up a new knowledge point, that is, CSS. CSS is so important to the whole front end that it needs to be studied and reviewed. The CSS part is divided into 7 lectures, are to elaborate on the basic use of CSS, CSS knowledge is still very much compared to HTML. After I am familiar with CSS, I will add an article to explain SCSS separately. This is very useful for the future work, and it is also required to master things in the work. Basically, SASS/SCSS is used in the work, so I need to learn it well.

What is CSS?

CSS can be said to be a beautician, because of HTML knowledge structure, so in the simple structure needs to add clothes (CSS) to decorate, which gives rise to CSS, CSS is generally called – cascading style sheets, CSS’s biggest contribution is to let HTML from the style, to achieve the separation between the two. HTML focuses on rendering structure, while CSS focuses on rendering style.

The way CSS is introduced

Introducing CSS styles generally falls into three categories (see Figure 1 for details)

  • Inline: Inline style sheets – set by the inside of the TAB. Generally, styles here only affect this folder
  • Internal style sheets: Inline style sheets. This usually means setting the style in the head
  • External style sheets: External style sheets, where true style and structure are completely separated

CSS writing Style

Maintaining good writing habits is also very important, and there are several basic writing habits that need to be followed in CSS

  • The selector user specifies the HTML tag that the CSS style will apply, with the style set to the object in curly braces
  • Properties and property values appear as key-value pairs
  • Properties are style properties, such as font size, text color, and so on, set for a specified object
  • Attribute and attribute value are separated by colons (:)
  • Multiple key-value pairs end with an English “; “. To distinguish between

CSS selectors

Class selectors

Class selectors are usually selected with a dot (.). Tags use class for example:

<div class="content"> I am content </div><style>
.content {
	color: red;
}
</style>
Copy the code

The selected div font will turn red as shown in Figure 2

In addition to that,You can also add whitespace to the class selector and write multiple classes, such as:

<div class="content center"> I am content </div><style>
.content {
	color: red;
}
.center{// Add onetext-alignText-align: center; text-align: center; }</style>
Copy the code

See Figure 3 below

The id selector

In addition to the class selector, there is an ID selector. The ID selector is selected with “#”, add id= “” to the tag, and then select” # “to add style in style

<div id="blue"> I am content </div><style>
#blue{
	color: blue;
}
</style>
Copy the code

See Figure 4 belowNote: The biggest difference between id selectors and class selectors is the number of times they are used

  • Class selector: represents the name (can be called repeatedly)
  • Id selector: Similar id cards can only be called once, even if multiple calls are valid, but this is not recommended.

Wildcard selector

“*” indicates that all selections in the page have been changed. In general, wildcard characters are used to change all margin and padding initialized to 0 for better control. Because margin and padding have value in the browser at first. Try it out in your own code and see how different your tags look when you add this.

* {margin:0;
	padding: 0
}
Copy the code

Summary of base selectors

  • Tag selector: can select all the same tags, for example: p{}
  • Class selector: can select one or more labels, for example: class = “”
  • Id selector: select only one label at a time, for example: id = “”
  • Wildcard selector: selects all labels, for example: *{}

CSS font style learning objectives

Font learning

  • Font-size: 20px;
  • Font-family: ‘Microsoft Yahei’;
  • Font weight: font size for example: font weight: 400;
  • Font style
  • Font-size: 16px; “> < font style =” font-size: 16px;
  • Font-size: normal;

Note: In actual development, the body of all fonts will be set to 16px. If multiple font names are set in font-family, they will be searched and selected one by one. If you find a font, just use it. There’s no need to look it up. If you don’t find it, keep looking

Font comprehensive writing method
  • Font has a synthesis
  • Font-size: 16px; font-family: ‘Helvetica, sans-serif’;
  • Font: font style Font size/line height set the type of font;

Note: Use the comprehensive writing method, must be in order, each attribute separated by a space, which does not need to be set can be omitted, but must retain the font size and font family attribute

CSS Appearance Style

  • Color: Text color — hexadecimal requires “#”
    • Predefined color notation: color: red; Etc.
    • Hex: # FFFFFF;
    • Color: RGB (255,255,255)
  • Line-height: indicates the line spacing
    • In general: line spacing 7 or 8 pixels larger than the type is normal
    • Height: 24px;
  • Text-align: indicates the text alignment
    • Left: left-aligned
    • Right: Align it right
    • Center: center
  • Text-indent: indent the first line
    • The text text-indent: 2 em; (An EM is a word)
  • Text-decoration: text decoration
    • Text-decoration: Remove the underline to define the standard text
    • Text-decoration: underline: Define a line under the text
    • Text-decoration: overline: Defines a line on the text
    • Text-decoration: line-through: Defines a line through the text

Developer Tools (Chrome)

Debugging tool – Chrome in the front-end development of Chrome debugging tool is very debugging value, you can use it to test whether right or wrong. Therefore, mastering Chrome debugging tools is one of the necessary skills for front-end development.

Ok, CSS first on the end, what do you not understand welcome comment discussion