1. What is CSS

How to Learn CSS

2. How to use CSS (quick start) 3. **CSS selector (key + difficult points) ** 4. Beautify images (text, shadows, hyperlinks, lists, gradients...) 5. Box model 6. Float 7. Position 8.Copy the code

1.1. What is CSS

Cascading Style Sheet

CSS: Presentation (beautifying web pages)

Font, color, margins, height, background image, page positioning, page float…

1.2 history of Development

CSS1.0

CSS2.0 DIV (block) +CSS, HTML and CSS combined with the idea of separation of web pages simple, conducive to SEO (Search engine optimization)

CSS2.1 Floating + Positioning

CSS3.0 Rounded Border, Shadow, animation…. Browser compatibility

1.3. Advantages of CSS

Separation of content and presentation
Web page structure unified, can realize reuse
The style is very simple
CSS files independent of HTML are recommended
Conducive to SEO

1.4. Three import modes of the CSS

The HTML file

< HTML > <head> <meta charset=" utF-8 "> <title> <link rel="stylesheet" href=" CSS /index.css"> <! <style>. InnerClass {position: absolute; top: 30%; left: 50%; transform: translate(-50%,-40%); width: 400px; height: 400px; border: 1px red solid; text-align: center; } h2{ color: pink; } a{ color: rgb(3, 16, 29); } #innerId{ color: pink; } </style> <! -- Priority: nearest principle --> </head> <body> <! <a href="javascript:;" >submit</a> <div class="innerClass"> <! "> < span style="color: red; > I'm inline style < / h1 > < h2 > I am internal style < / h2 > < h3 id = "innerId" > I am id selector < / h3 > < / div > < / body > < / HTML >Copy the code

CSS file [CSS /index.css]

* {margin: 0;
  padding: 0;
}
body{
  background-color: black;
}
a{
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  background: linear-gradient(100deg.#03a9f4.#f441a5.#ffeb3b.#03a9f4);
  background-size: 400%;
  width: 400px;
  height: 100px; 
  line-height: 100px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  border-radius: 50px ;
  z-index: 1;
}
a::before{
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  bottom: -5px;
  right: -5px;
  /* border: 1px red solid; * /
  background: linear-gradient(100deg.#03a9f4.#f441a5.#ffeb3b.#03a9f4);
  background-size: 400%;
  border-radius: 50px ;
  filter: blur(20px);
  z-index: -1;
}
a:hover ::before{
  animation: sun 8s infinite;
}
a:hover{
  animation: sun 8s infinite;
}
@keyframes sun {
  100%{
    background-position: -400% 0; }}Copy the code

Extension: Two ways to write external styles

Link type

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

Import type [CSS2.1 unique]
```
<style>
  @import url('css/index.css');
    <! -- here CSS omit code -->
</style>
Copy the code
```
The difference between link tag and import tag
- Link is an HTML tag, while @import is provided by CSS
- When the page is loaded, link is loaded at the same time, and the CSS referenced by @import is loaded after the page is loaded.
- Link is an HTML tag, so it is not compatible, while @import is only recognized above IE5.
- Link style has a higher weight than @import.

2. The selector

** Selects one or a class of elements on a page

2.1 basic selectors

Tag selector [select a type of tag usage: tag name {}]

h2{
  color: pink;
 }
<h2> I am internal style </h2>
Copy the code

Class selector (select consistent tag usage for all class attributes. Class name {})

 .innerClass{
	text-align: center;
 }
 <div class="innerClass"></div>
Copy the code

Id selector (globally unique usage #id name {})

#innerId{
	color: pink;
}
<h3Id ="innerId"> I am an ID selector </h3>
Copy the code

Priority: ID > Class selector > Tag

2.2. Hierarchy selector

1. The descendant selector places a space after an element, for example: grandpa grandpa Dad you {}

2, descendant selector, generation: son

<! -->body>p{}Copy the code

3, brother selector peer

<! -- neighbor sibling selector: only one neighbor down -->. Active + p{}Copy the code

4. Universal selector (peer)

<! -- Universal sibling selector for all sibling elements below the currently selected element -->. Active ~p{}Copy the code

2.3. Structure pseudo-class selector

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style> } .testList li:last-child{ background: pink; } */ /* li:nth-child(2){ background: pink; } */ p:nth-child(1){color: pink; color: pink; } /* Universal selector select all (level) */ /*. Active ~p{color: pink; } */ /* Sibling selector selects the adjacent one down */ /*. Active +p{color: pink; } */ /* body p{ color: pink; } */ /* body>p{ color: pink; } * / < / style > < / head > < body > < h1 > 888 < / h1 > < p > 888 < / p > < p class = "active" > 888 < / p > < p > 888 < / p > < p > the list 1 < / p > < ul Class = "testList" > < li > 555 < / li > < li > 66666 < / li > < li > 7878778 < / li > < li > ooiii < / li > < li > JJJJJJJ < / li > < / ul > < p > list 2 < / p > < ul class="testList2"> <li>555</li> <li>66666</li> <li><7878778/li> <li>ooiii</li> <li> <ul> <li><p>66666</p></li> <li><p>66666</p></li> </ul> </li> </ul> <p>888</p> <p>888</p> <p>888</p></body></html>Copy the code

2.4. Property selector

P = "active" [id] {} / / supports regular expressions of p/class * = "active" p [class ^ = "active"] p/class $= "active"Copy the code

3. Font styles

The font-family: font

Font size: The size of the font

Font-weight: the weight of a font

Color: indicates the font color

<style> body{font-family: Arial Black", regular; color:blue; } h3{ font-size:50px; } .p1{ font-weight:bolder: }</style>Copy the code

The text style

Color 【color, RGB,rgba】
【text-align=center】
【text-height:30px】
【text-decoration:none】
【 Line-height :90px】
Text picture alignment: vertical-align:middle;

The list of

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, < span style> div[id="title"] {background-color: #FBDA61; background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%); width: 300px; } #detailTitle { font-size: large; color: #ffffff; Font-family: Arial, Regular script; text-indent: 1em; vertical-align: middle; line-height: 50px; */ BACKGROUND :transparent URL ("image/ mirror.svg ") 217px 2px no-repeat; /* background-repeat: repeat; */ background-size: 50px; /* background-repeat: no-repeat; */ } ul{ background-color: #FAACA8; background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%); background-color: bisque; /* width: 300px; */ list-style: none; } ul li{ line-height: 30px; Background: transparent URL (image/ shop.svg) 228px 7px no-repeat; background-size: 20px; } a{ text-decoration: none; text-indent: 1em; } /* hover{color: rebeccapurple; font-size: large; } a:active{ color: pink; } < / style > < / head > < body > < div id = "title" > < h1 id = "detailTitle" > sword save < / h1 > < ul class = "LI" > < LI > < a Href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a Href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a href = "#" > zero god you this picture is too top end < / a > < / li > < li > < a Href = "#" > zero god you this picture is too top end < / a > < / li > < / ul > < / div > < div > < / div > <! Change the size of the image using third-party software such as a drawing tool --> <! - < img SRC = "image/boss&leader. Jpeg" Alt = "image" > -- > <! - < img SRC = "image/boss&leader 1. JPG" Alt = "image" > -- > < / body > < / HTML >Copy the code

rendering

4. Box model

Margin – Clears the area outside the border. The Margin is transparent.
Border – The Border around the inside margin and around the content.
Padding – Clears the area around the content. The Padding is transparent.
Content – The contents of the box, displaying text and images.

5, positioning

Static location – The default value of an HTML element, that is, no location, following the normal document flow object. Statically positioned elements are not affected by top, bottom, left, and right.

Fixed Position – The position of the element is fixed relative to the browser window. Even if the window is scrolling it doesn’t move.

<! DOCTYPE html><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> } div:nth-of-type(1){ position: absolute; width: 100px; height: 100px; background-color: pink; bottom: 0px; right: 0px; } div:nth-of-type(2){ position: fixed; width: 50px; height: 50px; background-color: red; bottom: 0px; right: 0px; z-index: 1; } div:nth-of-type(3){ position: fixed; width: 30px; height: 30px; background-color: black; bottom: 0px; right: 0px; z-index: 1; Opacity: 0.5; } </style></head><body> <div></div> <div></div> <div></div></body></html>Copy the code

An element is positioned relative to its normal position. Move the relative positioning element, but the space it originally occupies does not change.

<! DOCTYPE html><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> #box{border: 2px solid rebeccapurple; width: 300px; height: 300px; margin: 10px; padding: 10px; } a{ display: block; text-decoration: none; width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; } .a2,.a4{ position: relative; left: 200px; top:-100px } .a5{ position: relative; left: 100px; top:-300px } a:hover{ color: powderblue; background-color: purple; } < / style > < / head > < body > < div id = "box" > < a href = "#" class = "a1" > link 1 < / a > < a href = "#" class = "a2" > link 2 < / a > < a href = "#" 3 class = "a3" > link < / a > < a href = "#" class = "a4" > link 4 < / a > < a href = "#" class = "a5" > link 5 < / a > < / div > < / body > < / HTML >Copy the code

Absolute – The absolute position of an element relative to its positioned parent. If an element has no positioned parent, its position is equivalent to

6, floating,

Block level element, exclusive row

h1~h6 p div li...
Copy the code

Inline elements do not occupy a row

span a img strong...
Copy the code

Inline elements can be contained within block-level elements and vice versa

Parent border collapse problem

Add an empty div after the float (clear:both), but try to avoid empty divs in your code
```
<div id="clear"><div>#clear{	clear:both;	margin:0;	padding:0;	}
Copy the code
```
Sets the height of the parent element (elements are limited if they do not have a fixed height)

Add a pseudo-class: after, and set clear: both

#father:after{ content:''; display:block; clear:both; }Copy the code

Setting overflow properties

Add a overflow: Hidden to the parent elementCopy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Learning CSS

1. What is CSS

1.1. What is CSS

1.2 history of Development

1.3. Advantages of CSS

1.4. Three import modes of the CSS

2. The selector

2.1 basic selectors

2.2. Hierarchy selector

2.3. Structure pseudo-class selector

2.4. Property selector

3. Font styles

The text style

The list of

4. Box model

5, positioning

An element is positioned relative to its normal position. Move the relative positioning element, but the space it originally occupies does not change.

6, floating,

Parent border collapse problem

Learning CSS

1. What is CSS

1.1. What is CSS

1.2 history of Development

1.3. Advantages of CSS

1.4. Three import modes of the CSS

2. The selector

2.1 basic selectors

2.2. Hierarchy selector

2.3. Structure pseudo-class selector

2.4. Property selector

3. Font styles

The text style

The list of

4. Box model

5, positioning

An element is positioned relative to its normal position. Move the relative positioning element, but the space it originally occupies does not change.

6, floating,

Parent border collapse problem

Related Posts

【 Front end 】 Detailed configuration process of WebPack Loader

Shutter effect HTML + CSS

React Scaffolding – Create projects from scratch