What is CSS

CSS is used in conjunction with HTML to create the layout of a web page, much like modeling, by giving a framework and then implementing that framework. Like you bought a house in city, to take over as a just with HTML build by laying bricks or stones good wool embryo room, at this time will need to decorate decorate master CSS to well, open a skylight hanging inside the room a lamp, buy some furniture, the furniture is put in the place where you want to, then brush the wall on the color you like or picture of the painting you like, Decorate the whole house the way you like it, that’s what CSS does.

How does HTML link CSS

That to decorate the house, it is necessary to let the decoration master CSS into the HTML, then at the moment you need to link the HTML and CSS, there are three ways to link.

  • The first is inline, where the style attributes are written directly into the HTML tagstyleAttribute, but this affects only one element, and each element is scattered throughout the HTML document, which is not easy to centralized management, and the style of each element should not be too complex, or it would be difficult to write, but it has the advantage of not defining a selector, but it is still not recommended.

For example, the container

contains child elements

<figure>
    <div style="width: 50px; height: 50px; background-color:aqua; border-radius: 50%; margin-bottom: 10px;"></div>
        <div style="width:50px; height: 100px; background-color:coral; border-radius: 10px;"></div>
        </figure>
Copy the code
  • The second is to combine all the elements of a web page into a single style called<style>Since the styles are not written in the attributes of the elements, give each element a name, such as table or chopsticks, and place it in front of the DOM structure<style>Inside the tag, each style is written by the name of the element. But every TIME you write an HTML, you need to add CSS styles in front of the DOM. One CSS can only correspond to one HTML, which is relatively troublesome.

Such as:

<style>
    .main{
        color:yellow;
    }
    <style>
  <body>  
 <figure class="main"></figure>
 </body>
Copy the code
  • The third is external stylesheets, and by far the most common, used directly<link>Mark the link, then store the CSS content you want to express in a separate file with the extension xx.css<head>In the use<link>Import the CSS file, which separates the DOM structure from the CSS style. In this way, one CSS can be used in more than one HTML, which is much more convenient
<link rel="stylesheet" href="./xx.css"   />
Copy the code

What are the common CSS selectors

CSS also has a number of selectors for flexibility in choosing which elements to style,

  • Tag selector (div)

    • Select label as<div>Although it is convenient to use, there must be more than one tag with the same name in a complex structure. Once you define a tag, all tags with the same name will change.

  • Class selector (.main)

    • You can assign the same class name to elements that share the same attribute. You can also assign multiple class names to an element, separated by Spaces

Select all elements of class main as follows

   <fiure class="main"></figure>
Copy the code
.main{
    height: 1300px;
    width: 200px;
    }
Copy the code

  • ID selector (#box)

    • By giving the element a unique ID name, which is then used in CSS#idReferences elements in the form of
<div id="box">
Copy the code
#box{
     height: 300px;
     width: 460px;
     }
Copy the code

  • Pseudoclass selector (P :hover)

    • Pseudo-class selectors are used to select elements in a particular position or state, such as the first or last element in a set of elements, or one element after another, with the mouse pointer hovering over the element.
    .p:hover{
 transition: 0.5 s ease-out;

 background-color: lightcoral;
 border-radius: 50%;
 }
Copy the code

    Of course, selectors have different priorities: ID selectors > Class selectors > tag selectors > child selectors > descendant selectors > pseudo-class selectors

The difference between em and REM

CSS also has many common units, such as PX, EM, rem, etc. The em and REM units have the advantage of changing the size of an element in a page by changing the size of the text in < HTML >

/*em */
div{
    font-size:12px;
}
div>p{
    width:10em;
    height:10em;
}
Copy the code
/*rem */
html{
    font-size:14px;
}
div{
    font-size:12px;
}
div>p{
    width:10rem;
    height:10rem;
}
Copy the code

The box model

In the home if you want to draw a piece of space for entertainment, then at this moment you need the box master to draw a place for you, box model is divided into standard boxes and weird boxes.

  • In the standard box model, width=content specifies the width of the content. When setting width and height values, the padding and border are not included in the defined width and height valuesThe box - sizing: content - boxSaid. The formula for the total area isWidth /height+padding* 2+ border* 2+margin*2.
  • Weird box model width = content + padding + border, content width by padding and border is small, that is to say the width already includes the value of the padding and border, usebox-sizing:border-boxWeird box; The total area formula isThe width/height + margin * 2.

Pseudo elements

In the decoration of the room, it is necessary to use false elements to show the effect after you decorate.

  • Pseudo-elements are ::before, ::after, ::first-letter and ::first-line.
  • The syntax for pseudo-elements is the element followed by a double colon followed by the keyword of the pseudo-element; The single colon is used for pseudo-classes
  • All pseudo-elements declare the reference content with the content attribute. The ::before reference text appears before the paragraph and the ::after reference text appears after the paragraph

A border

Border-style, border-width, border-color, and border-radius indicate the style, width, color, and rounded corner of the border respectively

Shadows, clipping, and filters

  • Each small object will reflect a shadow under the light, and the distance from the light source will affect the size and clarity of the shadow,box-shadowAttributes are descriptions of these phenomena.

Box-shadow has the following five different parameters

h-shadow Required. Position of horizontal shadows. Allow the negative
v-shadow Required. Position of vertical shadows. Allow the negative
blur Optional. Fuzzy distance is actually the degree of ambiguity
spread Optional. Size of shadow
color Optional. Shadow color. Color values in CSS are required by the complete list of color values
  • Create a clipping region within the elementclip-pathAnd then those outside the clipping region will be hidden

Let’s use the inset() function to cut a rectangle

{
    width:10em;
    height:10em;
    clip-path:inset(1em 2em 3em 4em);
}
Copy the code
  • clip-pathThe following functions all represent different shapes
Inset (): cuts a rectangle circle() : cuts a circle ellipse() : cuts an oval polygon() : cuts a polygonCopy the code
  • If you want to see a variety of visual effects from a variety of angles, you need to use our filters
  • A filter function that represents transparencyopacity()Represents, the parameter value received by the function is from zero to one indicating whether it is transparent or not, where 0 indicates complete transparency and 1 indicates opacity;
  • For a filter that represents blurringblur()The parameter received by the function is a length value, which represents the fuzzy radius, and the whole element is blurred
  • The hue-rotate() function represents a hue filter. The function accepts an Angle value as an argument. A positive value indicates that the hue is searched in the clockwise direction and a negative value indicates that the hue is searched in the anticlockwise direction
  • Also can be infilterProperty to use multiple filters at the same time, multiple functions separated by Spaces can be done
It's almost transparentdiv:nth-child(1) {filter:opacity(0.2); } has no blur effectdiv:nth-child(1) {filter:blur(0px); }Copy the code

counter

  • Counter (n); counter(n); counter(n);
  • Counter-reset is defined in the parent container; Counter -increment is defined in a child element; Content :counter() is used to read the value of the counter. The content property is used to read the value of the counter in the pseudo-element
   .container{
    font-size: 10px;
    width: 50em;
    display: grid;
    grid-template-columns: repeat(7.1fr);
    grid-gap: 1em;
    counter-reset: n 1;
    
}
.container div{
    width: 3em;
    height: 3em;
    background-color: rosybrown;
    border-radius: 50%;
    position: relative;
    counter-increment: n 2;
}
.container div::before{
    content: 'x';
    position: absolute;
    font-size: 1.5 em;
    font-family: sans-serif;
    width: inherit;
    line-height: 2em;
    text-align: center;
    color: white;
    content: counter(n);

} 
Copy the code

Transform, slow and animate

If you think of the house as a number line and you translateX() horizontally, and if you translateY() vertically, you write X and Y in capitals. The rotate() function is used to rotate an element. The arguments received indicate the Angle by which the element is rotated. Positive numbers are rotated clockwise and negative numbers are rotated counterclockwise

It means horizontal translationdiv:nth-child(1) {transform:translateX(100%); } represents counterclockwise rotation45°
    div:nth-child(1){transfrom:rotate(-45deg)
Copy the code

Transition is used when an element goes from one state to another with a transition in between,

Transition-property can be used to remove elements that we don't want it to participate in the slowing, but it is rarely used aloneCopy the code
  • Animation - duration ` ` and animation - timing - functionDefine the animation time and time function;animation-iteration-countDefines how many times the animation is executed, property valuesinfiniteRepresents infinite times;animation-directionDefine the direction of the animation;animation-delayDefines the animation’s delayed startup time,
  • Animation-direction has four valuesnormal,alternate,reverse,alternate-reverse, respectively means that the animation moves from the beginning to the end, the animation moves from the beginning to the end and then comes back to the beginning, the animation moves from the end to the beginning, the animation moves from the end to the beginning, and then comes back to the end.
  • from… to… The key frame represents the start and end of the animation
@keyframes shift{
    from{
        transform:translateX(-6em); }}Copy the code

You can also use percentage keyframes, 0% for from, 100% for to.

  • Keyframes also have some disadvantages, for example, keyframes only care about the percentage value, not the specific time, so if you want to adjust the animation length, you have to modify the percentage value of the keyframe; It is not clear how long the interval between two animations should be. The time must be counted into one animation to make the duration of the animation longer