Always write to find some meaning. It has been delayed for nearly half a year. Let’s start with the basics of 0. It’s gonna be one thing after another. This article mainly involves the definition of CSS, role, technical relations, syntax, writing standards, two major focus 6 main parts. Shop first, then gradually refine it. When the foundation doesn’t move, the earth moves.


CSS stands for Cascading Style Sheets


Make web pages look good

Relationship between technology

And HTML and JavaScript to create a web development triad :HTML code is used to build the overall layout of the page,CSS is used to beautify the page, and JavaScript is used to handle interaction

For example, building a house requires steel and cement (HTML code) to build the overall structure of the house, paint and so on (CSS code) to decorate the house, and intelligent interaction (JavaScript code) to improve the comfort of the house.


1. Format

CSS is written in key-value pairs

2. Basic grammar

Definition: A CSS rule-set consists of a selector and a declaration block.


  • Single declaration: Each declaration contains a CSS property name and a value, separated by a colon.
  • Multiple statements: Multiple CSS statements are separated by semicolons (;) and declaration blocks are enclosed in curly braces.

Goal: Know how to use it


  • Inline styles: inline styles are written directly in the style property of the tag
  • In-page style: Write in the style TAB within the head TAB of this page
  • External styles: Written in a separate CSS file and referenced in a web page with the Link tag

Writing standard

The selector must contain Spaces between {. 2. The property name must not contain Spaces after:, and the property value must contain Spaces. When column attribute values are written on a single line, they must be followed by a space indent using 4 Spaces as an indent hierarchy. 2 Spaces or TAB selector 1 is not allowed. When a group declares multiple selectors, each selector declaration must have an exclusive row. 2. Property definitions must start on another line 2. Property definitions must end with a semicolon to clear float 1. Clear fix the pseudo-class by setting clear or triggering the BFC, and try not to add empty labels. 2. You do not need to clearfix the elements that have triggered the BFC. Others 1. The nesting level of the selector should be no more than 3 levels, and the qualification of the position at the back should be as accurate as possible 2. Use attribute abbreviations when possible. 3. When using border/margin/padding abbreviations, pay attention to the influence of the implied value on the actual value. Text content must be surrounded by double quotation marks 5. Units must be omitted when length is 0 6. Paths in url() functions are not quoted 7. The hierarchy (Z-index) must be clear, and the page popup and bubble should be the highest level (999). Different popup bubbles can be adjusted between three digitsCopy the code

Two key

It is used to locate the target element of the setting style. Find the corresponding label setting style through the selector. Technical correlation: it involves "weight calculation"Copy the code

The resources

Netease Cloud – Hiatus college courses