Summary of common CSS knowledge points

Web page

1. Composition of web pages

HTML (Hypertext Markup Language) is a language that uses markup tags to describe web pages.
CSS: Cascading style sheets are a computer language for representing file styles such as HTML or XML
Java Script is a lightweight programming language

2. Web pages, websites

An HTML file is a web page. (Every page in the book)

What is a website? There are many pages that make up a website, (book)

3. Common browsers

Chrome :Webkit kernel (V8 engine), now blink
Firefox :Gecko kernel
Internet Explorer :Trident kernel
Opera :Presto kernel
Safari, most domestic browsers (360, Sogou, QQ, UC, Cheetah, Baidu…) , Android and IOS most mobile browsers… It’s all the same as Chrome

HTML

1. Quickly create an HTML file

Create a new file with an HTML suffix of.html or.htm
Press in English input mode! (Enter or TAB)

2. HTML character library

www.w3school.com.cn/html/html_e…

3. Basic structure of HTML

The document statement

Helps browsers display web pages correctly;
Define the type of this document;
Case insensitive;
Must be on the first line (because browsers parse from top to bottom)
You have to document it, and if you don’t, weird things will happen;
It’s not a label, it’s just a statement;

<! < HTML lang="en"> // Language type, lang="en" represents English, open in the browser, Will prompt whether translated into Chinese lang= "zh-cn" or not written to represent the Chinese <head> // character encoding: <meta name="keywords" content=" keywords" /> <meta name="description" content=" description" <title> Basic structure of HTML </title> </head> <body> Visual part </body> </ HTML >Copy the code

4. Semantic HTML tags

What it means: Reasonable labels do reasonable things

Why follow tag semantics?

Good for SEO optimization (that is, search engine crawling, search engine crawlers also rely on tags to determine the context and the weight of each keyword);
When styles are lost, you can still render structure better;
Better support for various terminals, such as accessible reading and audio novels;
Good for team development and maintenance, the W3C set a standard for us, so that teams follow this standard, so that the code differences will be reduced, in the development and maintenance can improve efficiency;

How to follow tag semantics in daily work

Minimize meaningless tags, such as span and div;
Try not to use CSS attributes of the tag itself, such as B, FONT, and S. If these styles are needed, use CSS styles to add them.
Use strong and em for emphasis, but use CSS styles as much as possible.
When building a list, use unordered list, ordered list, custom list;

The label

Label aggregation

P tags

<! <p> </p>Copy the code

H1-h6 title tags

The title tag can be divided into six levels, H1 to H6, which are in bold on the surface, with the size decreasing from small to large
From the perspective of optimization, the importance decreases step by step, with h1 being the most important and usually placed in the part of the logo
Shortcut: h{title}*6

< h1 > title < / h1 > < h2 > title 2 < / h2 > < h3 > title three < / h3 > < h4 > title four < / h4 > < h5 > five < / h5 > title < h6 > title six < h6 >Copy the code

A hyperlink

Href: Url to jump to
- Back to top: href=”#”;
- Reload: href=””;
- Prohibit jumping: href= “javascript:;”
- Anchor jump: click on a link text to jump to the corresponding module, give each module a name with an ID. The href value in the A tag should be # + ID
Targrt:
- Self: Opens in the current window
- Title: Opens in a new window

< a href = "#" > back to top < / a > < a href = "" > refresh file < / a > < a href =" javascript:;" > payment < / a > < a href = "http://www.baidu.com" target = "_black" > baidu black < / a > < a href = "http://www.baidu.com" The self target = "love" > baidu < / a >Copy the code

case

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title>Document</title> <style> div{/* height */ height:500px; line-height: 500px; background:darkturquoise; margin-bottom:20px; /* text-align: center; </style> </head> <body> <div id="goods1"> </div> <div id="goods2" Id = "goods4" > guess you like < / div > < a href = "# goods1" > good live store < / a > < a href = "# goods2" > quality characteristic < / a > < a href = "# goods3" > affordable selling < / a > < a Href = "# goods4" > guess you like < / a > < a href = "#" > back to top < / a > < / body > < / HTML >Copy the code

Img image

SRC: indicates the address of the image
Alt: Substitute text appears next to the image when the image fails to load
Title: The following text appears when the mouse slides over the picture

Big box label

<! <div> Big box </div>Copy the code

Span Small box label

<! <span> </span>Copy the code

formatting

Strong/b bold
I/em in italics
Del strikethrough
small
big

<! -- Formatting tags: Tags come with a certain style --> <! -- Italic --> < I >haha</ I > <em>haha</em> <! -- Bold --> <b> bold </b> <strong> bold </strong> <! -- Delete line --> <del> delete line </del> <s> -- Underline --> <u> underline </u> <ins> underline </ins> <! --> <big> </big> <! -- Reduce size --> <small> Reduce size </small>Copy the code

Pre-formatted: Pre

Will be displayed in the browser according to the preset format, that is, the edit area written how to display on the page

 <pre>
        ***123 ***
        ()123()
        []123
  </pre>
Copy the code

The list of

Unordered list ul Li

<! - the unordered list - > < ul > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < / ul >Copy the code

Ordered list OL Li

<! - an ordered list - > < ol > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < / ol >Copy the code

Custom list DL dt DD

Dl, DT, DD. The next thing to dl can only be DT or DD, but there are other labels you can put inside dt or DD.

A day of 3 eat < / h3 > < h3 > < dl > < dt > < / dt > breakfast soya-bean < dd > < / dd > < / dd > < dd > steamed stuffed bun lunch < dt > < / dt > < dd > over rice < / dd > < / dd > < dd > egg surface dinner < dt > < / dt > < dd > < / dd > small lobsters < DD > Beverage </ DD > </dl>Copy the code

Table form

Caption Indicates the table’s title
Each line tr
Td for every cell
Th header
Thead header
Tbody subject
Tfoot footer
Label defines the annotation (tag) for the input element

< table border = "1" > < caption > score < caption > < thead > < tr > < th > language < / th > < th > mathematical < / th > < th > language < / th > < / tr > < thead > < tbody > < tr > <td>100</td> <td>100</td> <td>100</td> </tr> <tr> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> < td > total score: < / td > < td > total score: < / td > < td > total score: < / td > < / tr > < / tfoot > < / table >Copy the code

input

Type type
- Text Indicates the text input box
- “Password,” password
- Button (value= “pay”)
- Submit to submit
- Reset to reset
- Radio radio
- The checkbox multi-select

<form action=""> <! <input type="text" placeholder=" placeholder "autofocus> <! Input type="password" placeholder=" please input password" required> <! <input type="reset"> <! <input type="submit"> <! - button - > < input type = "button" value = "pay" > < button > button < / button > <! <input type="radio" checked> <! <input type="checkbox" checked disabled> </form>Copy the code

The realization of radio function

Add the same name value to the list of forms that you want to implement radio

Male <input name="sex" type="radio"> female <input type="radio" name="sex">Copy the code

Text association function

Enclose the text with the label and make the value of the for attribute match the id name on the form

<label for="man"> Male </label> <input ID ="man" name="sex" type="radio"> <label for="woman"> female </label> <input ID ="woman" type="radio" name="sex">Copy the code

The button button

<! <button> </button>Copy the code

Textarea text field

Cols: rows
Disable resetting size: resize: None
Remove the blue baseline that appears when clicking: outline: None;

 <textarea name="" id="" cols="50" rows="10"> </textarea>
Copy the code

Select the drop-down box

Option: represents each of the options
Selected: Selected by default
Disabled: Disables the selection

<select name="" ID =""> <option value="" disabled> Please select where you are from </option> <option value=""> </option> <option value="">Copy the code

Form represents an HTML form

H5 Added label

Video video
Audio audio
The header in the head
At the bottom of the footer
Main Main content area
Value the sidebar
Section distinguishes large modules
Nav navigation bar
Figure it out with a caption
The article articles
input
- type
  - The number of digital
  - Tel phone
  - Search search
  - email
  - Color color
  - Scope of the range
  - File Upload file
  - The date date

<! <input type="number"> <! <input type="search"> <! <input type="tel"> <! <input type="color" > <! <input type="range"> <! <input type="file"> <! <input type="date"> <! <input type="email">Copy the code

Characteristics of labels

Keywords (tags) are enclosed in Angle brackets
Usually come in pairs (opening tag, closing tag)
The end tag has one more slash than the start tag

Img, meta, input are called “single tags”, “self-closing tags” and “empty tags”.

Attributes of tags

Attribute of a tag: Used to describe a feature or function, usually placed after a keyword. There are built-in attributes and custom attributes

Form of expression:

Attributes always take the form of name/value pairs, such as name=”value”. (Key-value pairs)
There must be at least one space between properties and properties
Attributes are in no order

In the following example: SRC, Alt is the “attribute name” url, and the child is the “attribute value”.

<img SRC ="http://a.com" Alt ="小 孩">Copy the code

Label division

Block-level elements
- An exclusive line
- You can set the width and height
- Arrangement: from top to bottom
Inline blocks
- You can share a row
- Setting width and height works
- Arrangement: left to right
Inline elements
- You can share a row
- Writing width and height does not work
- The arrangement goes from left to right

layout

floating

Out of document flow
The direction of the float is referenced to its parent
The width is originally inheritable, but the floating element width is the size of the body content
Setting the width and height of an element in a row also takes effect once it floats

Floating problems (height collapse of parent)

Add height to parent
Add overflow: hidden to parent;
Add a div to the end of the parent box and style the div box clear: both
Add the class name clearfix directly to the parent of the floating element (make sure this code is in the CSS)

positioning

Static positioning static
Relative to oneself
Absolute (reference has rules relative to other elements)
- Z-index, the higher the value, the higher it will be at the top, and the lowest value will be at the bottom.
Fixed positioning (relative window)

Flex layout: Compatibility issues, only supported by IE10 and above

Display: flex/inline – flex;
“Container” and “project” two axes
Container properties
- Flex-direction Sets the spindle direction
- The flex – wrap a newline
- Flex-flow Short form of the flex-direction and flex-wrap properties
- Context-content Specifies the alignment of the project’s main axis
- Align-items Aligns the items on the side axis
- Align-content Alignment of items on the side axis for multiple axes combined with flex-wrap: wrap
Properties on the project
- Order: order, the smaller the value, the higher the order
- Scale up of flex-grow projects
- The percentage of flex-shrink projects
- Flex-basis The main axis of space occupied by a project before allocating extra space
- Flex: short for flex-grow flex-shrink flex-basis
- Align-self allows a single item to be aligned differently than other items

The page style

Clear the default styles

The default margin and padding values are 0.

Margin = 0; margin = 0; margin = 0; padding = 0

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

Clear the default style at the front of the list

ul,ol{
list-style: none;
}
Copy the code

Clear the underline of label A

a{
text-decoration: none;
}
Copy the code

The text

Indent: text-indent

Text-indent can be followed by a specific pixel value, or by em, where 2em represents an indentation of two words

<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>
Copy the code

Text color: color

Font: font-family

If the font is Chinese or English and consists of multiple words, use single or double quotation marks

Font-family: 宋体,"Times New Roman",Georgia,Serif;Copy the code

Control text weight: font-weight

400 Normal thickness === Normal
700 ===bold
900 ===bolder

Font weight: normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        font-weight: normal;
    }
</style>
Copy the code

Control text tilt :font-style

font-style:italic; Tilt the text
font-style:normal; Make text normal

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> < span style> span{ font-style: italic; } i{ font-style:normal; } < / style > < / head > < body > < span > span < / span > < I > italics < / I > < / body > < / HTML >Copy the code

The space between letters and words

Letter-spacing —– is the spacing between letters
Word-spacing —— is the spacing between words

p{ word-spacing: 20px; } <p> You are really good! </p> <div>You are really great! </div>Copy the code

Note: for Chinese characters, there must be some spacing between the characters to indicate that they are independent words; otherwise word-spacing does not work.

Single row shows

<style> p{ width:100px; border:1px solid green; /* Overflow: hidden; /* The way text is hidden is... */ text-overflow: ellipsis; /* no newline */ white-space: nowrap; } </style>Copy the code

Multiple lines show

p{ width:100px; border:1px solid green; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; /* Control which line to display... */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; }Copy the code

Disallows the user to select text

body{user-select: none; }Copy the code

background

Background-color: indicates the background color

Background-image :url(” image path “)

Background-position: Position of the background image

Horizontal direction: left, center, right;
Vertical direction: top, center, bottom
Specific pixel value: background-position:50px 50px;
Percentage: BACKground-position: 100% 100%;

Background-repeat :(controls whether the image is tiled and in which direction it is tiled)

No-repeat: not tiled
Repeat -x: horizontal tiling
Repeat -y: vertical tiling

Background-attachment: Sets whether the background image is fixed or scrolls along with the rest of the page.

fixed
Scroll (default)

Background – size: x y; Control the size of the background image;

X represents the width of the background image, and Y represents the height of the background image

Background-size :100px 100px;
Background-size :100% 100%;
Cover: Expands the background image to a size large enough to completely cover the background area. Some parts of the background image may not be displayed in the background location area.
Contain: Expand the image to its maximum size so that its width and height fully fit the content area. (When enlarging a background image, stop enlarging it as long as the width or height is covered on one side of the container.)

In the middle

Margin :0 auto;

div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
Copy the code

Center the text vertically

Height is the same value as line-height

li{
height:35px;
line-height:35px;
}
Copy the code

Center an element horizontally and vertically across the screen or a box

Fixed or absolute positioning;
- Left: 50%; Top: 50%;
- Margin-left: negative half the width of the box; Margin-top: negative half of the height of the box;

<style>
.box{
        width:200px;
        height:200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>
Copy the code

Special color Settings

Linear Gradients

1. Top to bottom by default

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}
Copy the code

From one direction to the other (left, right, bottom, top)

The following example is from left to right

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green); 
Copy the code

3, diagonal, two directions can be combined

For example, the bottom one goes from the top left to the bottom right

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);
Copy the code

4. It can also be an Angle

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);
Copy the code

Radial gradient: The default shape is ellipse and must have at least two color values.

Shape: ellipse (default), circle (circle)

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);
    }
Copy the code

transparency

.opacity{ filter:alpha(opacity=50); /* opacity */ opacity: 0.5; /* Supports opacity browser */}Copy the code

Gaussian blur

<style>
      img{
          filter: blur(50px);
      }
</style>
Copy the code

The selector

Wildcard selector

Wildcard selector: selects all elements
Symbol: *
Weight: 0

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

Label selector

Select this type of tag
Symbol: label
Weight: 1.

P {color: red; }Copy the code

Class selectors

Symbol:.
Weight: 10
Features: The class name can be used repeatedly and multiple names can be separated by Spaces

.abc{ color: yellow; }Copy the code

Property selector

Symbol: self – created class name
Weight: 10

1. Select all elements that have an attribute

[index] {color: tomato; }Copy the code

2. Select the type of element whose attribute name is equal to the value of a specific attribute

[index="a"] {color: teal; } `Copy the code

The id selector

Symbol: #
Weight: 100

Note: Within a document, the ID name cannot be repeated (equivalent to an ID card, which cannot be repeated) but the ID and class name can be repeated

<style> #box1{background:tomato; } </style> <div id="box1" >div</div>Copy the code

Child selectors

Symbol :> (weight 0)
Weight: The sum of the weights of the combined selectors
Action: Selects the child element of the first level of the child element

.main>span { color: thistle; } / * example above weight is about 11 * / < div class = "main" > < div > < div > < span > 111 < / span > < / div > < / div > < span > span1 < / span > < / div >Copy the code

Descendant selector

Symbol: space
Weight: The sum of the weights of the combined selectors
Role: To bring certain offspring (whether sons, grandchildren, great-grandchildren… All descendants) element selected

.main div {
            color: red;
         }
 <div class="main">
        <div>
            <div>
                <span>111</span>
            </div>
        </div>
        <div>span1</div>
    </div>
Copy the code

Packet selector

Symbol:,
Weight: The sum of the weights of the combined selectors
Function: Can extract common code

.box1,
    .box2 {
      background-color: violet;
    }
 <div class="box1">div1</div>
 <p class="box2">p</p>
Copy the code

For example:.box1 span,.box2 {background-color: violet; } in this case, the weight of box1 span is 11

Intersection selector

Symbol: No
Weight: The sum of the combined selectors
Features: composed of multiple selectors

<style>
    .box1.current{
        background:green;
    }
</style>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>
Copy the code

Adjacent sibling selectors

Symbol: +
Weight: The sum of the weights of the combined selectors
Action: Select an element that is adjacent to an element

Note: Looking down, the first P tag in the code below is not selected

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p
Copy the code

Universal sibling selector

Link symbol :~
Weight: The sum of the weights of the combined selectors
Action: Select siblings of an element.

Note: Looking down, the first P tag in the code below is not selected

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

Copy the code

Pseudo class selector

The four states of a label, in a certain order, L, V, H, A is called the “love-hate principle” on the Internet.

<style> a{ font-weight: bold; font-size:100px; } /* Default link text color */ a:link{color:green; } /* A :visited{color:gold; } / / a:hover{color:hotpink; } /* a:active{color:darkcyan; } </style>Copy the code

CSS 3 selector

Nth-child represents the number of children selected
Nth-of-type is the number of selected child elements of a particular type

The path

Absolute path: The real path (URL and physical path) of a file or directory on the home page on hard disk

TXT represents the absolute path to the test. TXT file
www.sun.com/index.htm also generation…

Relative path: path relative to a base directory

Sibling directories: just write the name or./
Next-level directory: Slash indicates the root directory and /
Upper level directory: “.. / “a.. / means back up to the directory, two “.. / “indicates the directory at the upper two levels

The CSS is introduced in four ways

The inline type

<div style="color:deeppink;" Word-wrap: break-word! Important; "> </div>Copy the code

Inline: Write inside the head using the style tag

<style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
</style>
Copy the code

External links, using the link tag in the head to link the style sheet

<link rel="stylesheet" href="index.css">
Copy the code

The import type

<style>
        @import "index.css"
</style>
Copy the code

Three features of the CSS

Inheritance: When a style is set to an element, its descendants can inherit those styles

Inheritable properties: properties that start with color/font/text/line
Element visibility: Visibility
The width of the normal document flow

Cascading: The ability of CSS to handle conflicts between different values for the same attribute and the same element

If the weights are the same, depending on the encoding order of the CSS, the later code overrides the previous one
If the weight is different, who has the most power, listen to who

Priority (weight)

Weight order:! Important (mandatory)> Inline Style > ID > Class > Tags > Wildcard > Inheritance > Browser Default

Note: Use as little as possible! Important and inline styles

The box model

The box model is a way of thinking about writing a web page in which each element is viewed as a box

Components of a box model

Content: Indicates the main content area
Padding: Padding of the element box directly inside the content
Border: Border of the element box
Margin: The distance between elements

The box model calculates the total box size

Total box height = Height of content +padding +border
Total box width = Width of content +padding +border

Box model-related properties

Width the width of the

Min-width Indicates the minimum width
Max-width Indicates the maximum width

Height height

Min-height Indicates the minimum height
Max-height Indicates the maximum height

Within the padding filling

The direction of the padding

Padding: padding – top
Padding: padding – bottom
Left padding: padding – left
Right padding: padding – right

The order of the padding

<style> span{ background:green; /* Top, right, bottom, left */ /* padding:10px 50px 100px 200px; */ /* padding-bottom :10px 50px 100px; */ /* padding:10px 50px; */ /* padding-bottom :50px; padding-bottom :50px; display:inline-block; border:5px solid gold; } </style>Copy the code

margin

Distance from left: margin-left
Distance to left and right: margin-right
Distance from top: margin-top
Distance from bottom: margin-bottom

Border border

Border width: border-width

Specify the border style: border-style

Border color: border-color

Div {border:1px solid green; }Copy the code

border-radius:50%

.box{
        width:300px;
        height:300px;
        background:gold;
        border-radius: 50%;
    }
 
Copy the code

The elves figure

When doing a project, in order to optimize and reduce HTTP requests, many images will be merged into one image, which is called “Sprite map”, also known as “Sprite map”. (Small picture only)
Sprite diagram principle: by changing background-position.
When writing the Sprite, the x and y values of background-position must be negative

Classification of box models

Standard box (default) : box-sizing: content-box;

Under the standard box model: The width and height written in the code refer to the width and height of the Content part of the box model

Box-sizing: border-box;

In the Ie box model: the width and height in the code refer to the width and height of the total box. If the padding and border are used, the browser automatically subtracts the contentThe interview question has a margin of penetration

Margin value merge problem

display

Display several common values

Inline: Converts to inline elements (usually not, if you need to use inline elements directly)
Block: Converts to block-level elements
Inline-block: converts to an inline block
None: disappear

Want two block-level elements to appear on a line, conversion to inline block problems

– There are gaps between two block-level elements (caused by carriage returns)

Solution

Eliminates line breaks in structures
Font-size :0; If you need to set the text size for a child element, set it separately.

If text is set in one and text is not set in the other, the default is baseline alignment, it will fall down.

/* vertical-align: top; /* vertical-align: bottom; /* vertical-align: bottom; /* vertical-align: baseline;Copy the code

Summary of common CSS knowledge points

Summary of common CSS knowledge points

Web page

1. Composition of web pages

2. Web pages, websites

3. Common browsers

HTML

1. Quickly create an HTML file

2. HTML character library

3. Basic structure of HTML

4. Semantic HTML tags

Why follow tag semantics?

How to follow tag semantics in daily work

The label

Label aggregation

P tags

H1-h6 title tags

A hyperlink

Img image

Big box label

Span Small box label

formatting

Pre-formatted: Pre

The list of

Table form

input

The realization of radio function

Text association function

The button button

Textarea text field

Select the drop-down box

Form represents an HTML form

H5 Added label

Characteristics of labels

Attributes of tags

Label division

layout

floating

Floating problems (height collapse of parent)

positioning

Flex layout: Compatibility issues, only supported by IE10 and above

The page style

Clear the default styles

The default margin and padding values are 0.

Clear the default style at the front of the list

Clear the underline of label A

The text

Indent: text-indent

Font size

Text color: color

Font: font-family

Control text weight: font-weight

Control text tilt :font-style

The space between letters and words

Single row shows

Multiple lines show

Disallows the user to select text

background

Background-color: indicates the background color

Background-image :url(” image path “)

Background-position: Position of the background image

Background-repeat :(controls whether the image is tiled and in which direction it is tiled)

Background-attachment: Sets whether the background image is fixed or scrolls along with the rest of the page.

Background – size: x y; Control the size of the background image;

In the middle

Margin :0 auto;

Center the text vertically

Center an element horizontally and vertically across the screen or a box

Special color Settings

Linear Gradients

1. Top to bottom by default

From one direction to the other (left, right, bottom, top)

3, diagonal, two directions can be combined

4. It can also be an Angle

Radial gradient: The default shape is ellipse and must have at least two color values.

transparency

Gaussian blur

The selector

Wildcard selector

Label selector