Who invented CSS

CSS was first proposed by Sir Lee’s colleague, Mr Lai

The concept of CSS

  • Syntax of CSS:

Grammar:

Selector {property name: property value;/ * comment * /
}
Copy the code

Grammar two:

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {}Copy the code
  • Cascading styles; You can layer the same style multiple times, as shown in the code below. First draw one in HTMLdiv“, then set the CSS style to be 50px wide, and then set the style to be 50ox high. You can also put them together. The advantage of this (as far as you can think) is that when there are many and complex styles of an element, the styles of different effects can be categorized.
<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="demo1">
  <div class="demo2">
  </div>
</body>
</html>
Copy the code
.demo1 {
    width : 50px;
}
.demo1 {
    height : 50px
}
.demo1 {
    width : 50px;
    height : 50px
}
Copy the code
  • Selector cascade: You can use different selectors to declare the style of the same element, still using the one abovedivFor example, if you want a black and red square, you can match all of themdivSet it to a square and add color to each orthographic shape
div {
    width : 50px;
    height : 50px
}
.demo1 {
    blackground : black;
}
.demo1 {
    blackground : red;
}
Copy the code
  • The version of CSS

How browsers render

When a client requests a page and the server responds, the browser first processes the HTML markup and builds a DOM tree. Then in the processing of CSS to build a CSSOM tree, and finally according to the construction of DOM tree and CSSOM tree combined into a Render tree for style overlay, layout and rendering, after successful rendering, the page will finally be displayed on the browser.

  • Two ways to animate CSS

The principle of animation: when many still pictures of different frames are continuously played at a certain speed, the naked eye will have an illusion due to the visual tragedy and mistake it as an active picture

  1. Transition: Drawing an intermediate frame from a known starting and ending state, usually used with a transform. Its syntax is:Transition: Indicates the delay of the attribute name duration. It is important to note that not all of them can be transitioned. For example:display : none => blockThere is no transition from nothing to something. When there are multiple animations, multiple Transforms can be used to play multiple animations.
  2. Animation: Define the animation by declaring key frames. For example, draw a beating heart one by one. Draw a normal heart first, and then draw an enlarged heart
animation : heart 800ms infinite alternate;
}

@keyframes heart {
  0% {
    transform : scale(1.0);
  }
  100% {
    transform : scale(1.5); }}Copy the code

Use skills

  • Use caniuse.com to quickly find out which browsers support which features
  • When writing CSS, use the border debugging method for debugging