The CSS to review

What is CSS

Cascading Style Sheets, the addition of HTML styles to spruce up your page, is not a programming language. What is Style? Simply speaking, your eyes are elements and your eyes are big.

The introduction of the style

Inline style

<h1 style="color:red;">Heaven line, the gentleman to unremitting self-improvement</h1>
Copy the code

Inline style

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
</body>
</html>
Copy the code

External style

Link styles (best for CSS, check your reasons)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"> 
    <! Href = "rel" href = "href" >
    </style>
</head>
<body>
    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
</body>
</html>
Copy the code

Write in the style.css file

h1{
    color: red;
}
Copy the code

Import the style

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
		@import url(style.css)
    </style>
</head>
<body>
    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
</body>
</html>
Copy the code

Write in the style.css file

h1{
    color: red;
}
Copy the code

The selector

What is a selector? Look at the composition of CSS

The ones inside {} are called declarations. The purpose of the selector is to indicate which HTML tag the declaration is

Wildcard selector

    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2>Terrain kun, the gentleman to social virtue</h2>
    <div>To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
* {color: red;
}
/* Select all */
Copy the code

Label selector

    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2>Terrain kun, the gentleman to social virtue</h2>
    <div>To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
h1{
    color: red;
}

h2{
    color: green
}

div{
    color: blue;
}
/* Select the corresponding label */
Copy the code

Class name selector

    <h1 class="a">Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2 class="b d">Terrain kun, the gentleman to social virtue</h2>
    <div class="c">To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
.a{
    color: red;
}

.b{
    color: green
}

.c{
    color: blue;
}
.d{
    background-color: black;
}
/* Select the corresponding class name, preceded by a dot, a tag can have multiple class names */
Copy the code

The id selector

    <h1 id="a">Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2 id="b">Terrain kun, the gentleman to social virtue</h2>
    <div id="c">To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
#a{
    color: red;
}

#b{
    color: green
}

#c{
    color: blue;
}

/* Select the corresponding ID name, preceded by #, a tag can only have one ID */
Copy the code

Property selector

    <h1 name="a">Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2 name="b">Terrain kun, the gentleman to social virtue</h2>
    <div id="c">To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
h1[name]{
    color: red;
}
h2[name='b']{
    color: green;
}
/ * [name ^ = 'XXX'] beginning including XXX $= 'XXX' [name] end including XXX [name * = 'XXX'] include XXX [name ~ = 'XXX'] together include XXX * /

/* Select the corresponding attribute name, [attribute name] */
Copy the code

Pseudo class selector

<a href="#">Heaven line, the gentleman to unremitting self-improvement</a>
Copy the code
a:link{
    color: red;
    /* Unclicked appearance */
}
a:visited{
    color: green;
    /* Click the end of the look */
}
a:hover{
    color: yellow;
    /* Mouse over */
}
a:active{
    color: grey;
    /* What it looks like when clicked */
}
Copy the code

This looks like you have a look, pseudo class is followed by: conditions, there are many pseudo class selector, check it yourself

Pseudo element selector

 <div>Heaven line, the gentleman to unremitting self-improvement</div>
Copy the code
div::before{
    /* is equivalent to adding an element */ to the front of the element
    content:"Front";
    color:red;
}
div::after{
    /* adds an element */ to the end of the element
    content:"Behind";
    color:green;
}
Copy the code

Selector grouping

    <h1 >Heaven line, the gentleman to unremitting self-improvement</h1>
    <h2>Terrain kun, the gentleman to social virtue</h2>
    <div>To follow the wind, the gentleman to act</div>
    <span>Gradually thunder shock, the gentleman to fear repair province</span>
Copy the code
h1.h2.div{
    color:red;
}
/* Select several elements at a time and set the same style */
Copy the code

Child selector

The first thing we need to know is what are children

  <div class="header">
        <h1>Men can not handsome, but must be SAO</h1>
       <p>Come on, have fun. We got plenty of time</p>
    </div>
    <! Div wraps around h1 and p, so h1 and P are the children of div, and div is the parent of h1.
Copy the code

Then add the CSS style

.header>h1{
    color: red;
}
/* use > to refer to their children */
Copy the code

Descendant selector

What is offspring

    <div class="header">
        <h1>Men can not handsome, but must be SAO</h1>
        <p>Come on, have fun. We got plenty of time</p>
        <dl>
            <dt>How handsome</dt>
            <dd>Drive fast and look good</dd>
            <dd>Under heaven, I am the only one</dd>
        </dl>
    </div>
  <! Dl is a descendant of div, but DT and dd are not, and dl, dt, dd are all descendants of div.
Copy the code
.header dd{
    color: greenyellow;
}
Copy the code

Adjacent sibling selectors

    <div class="header">
        <h1>Men can not handsome, but must be SAO</h1>
        <p>Come on, have fun. We got plenty of time</p>
        <dl>
            <dt>How handsome</dt>
            <dd class="first">Drive fast and look good</dd>
            <dd>Under heaven, I am the only one</dd>
        </dl>
    </div>
  <! Dd = dd; dd = dd;
Copy the code
.first+dd{
    color: red;
}
/* The element next to the element */
Copy the code

Weight and Inheritance

inheritance

Whether the text font of the element is visible, etc., will be inherited by the child after the parent is set

    <div class="header">
        <h1>Men can not handsome, but must be SAO</h1>
        <p>Come on, have fun. We got plenty of time</p>
        <dl>
            <dt>How handsome</dt>
            <dd class="first">Drive fast and look good</dd>
            <dd>Under heaven, I am the only one</dd>
        </dl>
    </div>
Copy the code
.header{
    color: red;
}
Copy the code

The weight

When two styles conflict, only one of them can be chosen based on the weight

Introduce styles: inline > Inline > External

Introduce style at the same time:! Important >id> clAA > Tags >*> Inheritance

When several selectors together, such as adding children or something to check yourself

When everything is the same: the back is taller than the front

Generally, the more specific the weight is higher

The text style

About text Styles

The font-family: fonts,

Font-weight: normal/bold/bolder/lighter

The font – size: size

Size in units: px, indicating pixels, em, size of the font relative to the parent element, percentage, size relative to the parent element

Color: color

RBG (0, 0, 0), rgba (0, 0, 0, transparency 0~1)

The line – height: line height

Font-size: normal/italic

Font – Variant: Uppercase normal/small-caps

Font: font-family: verb-font-family, verb-style, verb-variant, verb-weight, verb-size

Font size and line-height can only be separated by a slash /.

2. The order cannot be changed. This shorthand only works if you specify both font size and font family attributes. Also, if you do not set font-weight, font-style, and font-varient, they will use the default values

Text-decoration: none/underline/overline/line-through

Text-shadow: text shadow color, right bias, bottom bias, blur degree

White-space: saves Spaces and newlines normal/pre/nowrap

Text-indent: indent the first line

Text-align: left/right/center

Vertical-align: align the baseline with middle

Single line text omitted

  <div class="header">Day does not give birth to my programmer, key way as long as night, key to! The top of the fairy, the proud! With my keyboard, there is a day! Keys of the River from the sky! A key across the world! To break the world of mortals! To kill fairy! A key in hand, cut nine days! What if there were no true fairies? I would like to hold the key into fairy!!</div>
Copy the code
.header{
   width: 200px;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
}
Copy the code

The box model

To show you the power of a div, a div consists of content +padding +border +margin.

There are some differences between the normal box and the IE box, and I’m just going to talk about the normal box

The properties of conten

Width: the width of the

Height: height

The properties of the padding

Padding-bottom: Lower inner margin

Padding-left: left inside margin

Padding-right: right inner margin

Padding-top: Upper inner margin

Padding: short for inside margin. There are four ways to write it

  • One piece of data: four sides
  • Two numbers: up, down, left and right
  • Three data points: up, left, right, down
  • Four data points: up, right, down, left

Box-sizing: border-box Because the inside margin automatically covers the content size, it does not affect the conten size

The attribute of border

Border-style: border style

Border-top: top border border style width color

. Next left and right not to write…

Border: short for direct four border style width color

Border – the radius: rounded corners

Border-top-left-radius: indicates that the upper left corner is rounded

. I’m not going to write the other three angles…

The properties of margin

Margin-top: margin-top

. Next left and right not to write…

Margin: the outer margin, in the same format as the inner margin

Watch out for margin collapse

Block-level elements, inline elements, and inline block elements

Inline elements:

  • Side by side with other inline elements
  • The width and height cannot be set. The default width is the width of the text

Block-level elements:

  • Occupy a line that cannot be juxtaposed with any other elements.
  • Can accept width and height, if the width is not set, then the width defaults to 100% of the parent.

Inline block elements

  • It can set width and height side by side

But the three formats are convertible

Display: block (block level) /inline (line level) /inline-block (inline block)

Show and hide

When display is none, the element disappears, nothing

The hidden element is still there, but it’s not visible

Opacity: 0 to 1

Overflow: Hidden overflow scroll /auto scroll /hidden overflow unviewable

Shadow box

Box-shadow: the color of the box shadow to the right and down

The mouse

The mouse can look different on different elements

Cursor: mouse style

background

Background-color: indicates the background color

Background-image: background image url(image address)

Background-repeat: The image repeats

Background-attachment: Fixed background, not with scrolling

Background-position: Position of the background image

Background-size: indicates the size of the background image

Background: [background-attachment] [background-repeat] [background-attachment] [background-position]

Background: Liner-gradient linear gradient effect

Background: radial-gradient(size/position, how much color to start gradient percentage, color, color

floating

The purpose of floating is to keep the elements that occupy a row side by side. Before I clean up the float, I still want to say that my current feeling of floating is rubbish. There are inline blocks on the top and Flex on the bottom

Float: Float left/right

After floating, it will leave the standard flow and float to the top of the parent element side by side and not occupy the position, the parent element cannot sense height

So when we run out of floats, we have to clean up floats

Remove the floating

Clear: Clears floating left, right, and both

Or use BFC

positioning

Sometimes you want to add other elements to the original element, but the location is difficult to control

Postion: positioning

Left: the distance to the left

The other three sides are omitted…

2. I’m not in a relative position

Absolute: Absolute position, changed relative to the first position, not used relative to the root element, the original position is not

Fixed: Fixed position relative to the visible window, that is, how to move the scroll bar, the position is the same

Sticky: sticky positioning, start scrolling together behind the visual window to change position position unchanged