Starting from scratch, learn the CSS basics of Web front-end __web

CSS Origin
In the early days of the web (1990-1993), HTML was a very limited language. Almost entirely composed of structured elements that describe paragraphs, hyperlinks, lists, and headings. With the advent of the World Wide Web (enhanced user interaction experience), there is an urgent need for HTML to add new elements to accomplish a particular function.
As HTML grows, HTML adds a lot of display capabilities to meet the requirements of the page designer. But as these features grow, HTML becomes more cluttered and HTML pages become bloated. So the CSS was born.
CSS provides a style description for the HTML markup Language, which defines how the elements are displayed. CSS is a breakthrough in the field of web design. It enables you to modify a small style to update all of the page elements associated with it.

CSS Concepts
CSS: Cascading style sheets (cascading style Sheets) (cascading style sheets)

CSS Features
1 rich style definition
CSS provides a rich look at the document style, and the ability to set text and background properties; Allows you to create a border for any element, as well as the distance between the element border and other elements, and the distance between the element border and the element content, allowing you to arbitrarily change the capitalization, decoration, and other page effects of the text.

2 easy to use and modify
CSS can define styles in the style attribute of an HTML element, or it can be defined in the header portion of an HTML document, or it can be declared in a specialized CSS file for HTML page references. In summary, a CSS stylesheet can store all the style declarations uniformly and manage them uniformly.

3 Multi-page application
CSS stylesheets can be stored separately in a CSS file so that we can use the same CSS style sheet on multiple pages. CSS style sheets are not theoretically part of any paging file and can be referenced in any paging file. This will enable the unification of multiple page styles.

4) Cascade
To put it simply, a cascade is the same style that sets a single element more than once, which uses the last set of property values. For example, when you use the same set of CSS style sheets for multiple pages in a site, and some elements in some pages want to use a different style, you can define a style sheet to apply to the page separately for those styles. These later-defined styles override the previous style settings, and in the browser you will see the style effects set by the last side.

5) Page Compression
In Web sites that use HTML to define page effects, it is often necessary to have large or repetitive forms and font elements that form a variety of text styles, which results in a large number of HTML tags, which increases the size of the paging file. Putting a style declaration in a CSS stylesheet can greatly reduce the volume of the page, so that the time to load the page is greatly reduced. In addition, the reuse of CSS style sheets reduces the volume of the page, reducing the time of downloading.

* Style Sheet Writing location *
inline style

 
External chain style
Written in head, <link rel= "stylesheet" href= "1.css" >

 
Inline style sheet (written directly inside the tag)

<li style= "float:left;margin-left:50px;" >
      
</li>
 
three characteristics of writing:
Inline writing, the style only works on the current file, does not really realize the separation of structural performance.
Outside the chain of writing, the scope of the current site, who calls who is effective, a wide range of real structural performance separation.
Inline style sheets, scoped to the current label, with a small range and a mix of structural performance. (Not recommended)

CSS Basic writing
Selector: {
Properties: value;
Properties: Value
}

selector
Selector can refer to Selector

CSS Properties
CSS properties have a lot, you can see the CSS reference manual

Common basic Properties:
width:20px; Wide
height:20px; High
background-color:red; Background color
font-size:24px; Text Size
Text-align:left | center| Horizontal alignment of Right content
Text-indent:2em; First Line Indent
color:red; Text color
Background-color background Color
Background-image background picture
Background-repeat repeat (default) | No-repeat | Repeat-x | Repeat-y Background Tile
Background-position Left | Right | Center | Top | Bottom background positioning
Background-attachment Background Scrolling Scroll | Fixed

......... And so on base selector

Tag Selector
Notation: Tag {attribute: value;}

HTML {
    width:100%;
    height:100%;
    Overflow:hidden;
    }

body {
    width:100%;
    height:100%;
    Overflow:hidden;
    Background: #060C19;
}

 p{
    font-size:20px;
    color:red;
}
 
Feature: After the tag selector is defined, all elements of the page are executed with this label style.

class Selector
Custom class Name (attribute: value;)

Features: Who calls, who takes effect.
A label can be multiple class selectors.
Multiple labels can call the same class selector

Class selector naming rules:
You cannot define a class name with a plain number or beginning of a number.
You cannot use special symbols (except _) to define class names.
It is not recommended to use Chinese characters to define class names.
It is not recommended to use label names, attributes, and property values to define class names.

. name {
        color:white;
        Font-weight:bold;
        font-size:60px;
        Text-align:center;
        letter-spacing:5px
    }

    . btndiv {
        text-align:center;
        min-width:500px;
        margin-top:60px;
    }
 
ID Selector

Writing: #自定义名 {property: value;}

Features: Who calls, who takes effect.
A label can only call an ID selector.
An ID selector can only be called once on a page.

#superContainer {
    height:100%;
    position:relative;
    -ms-touch-action:none;
    Touch-action:none
}
 
Composite Selector 
Two or more than two base selectors are connected together in different ways

intersection selector

Tag + class (ID) Selector {property: value;}
Feature: That is a label, and this tag calls the class (ID) Selector

<! DOCTYPE html>
 

descendant Selector

Selector + Space + Selector {property: value;}

Basic requirements for descendant selectors: include (nested) relationships.
Characteristic: The father is in the front, the son in the rear.
Unrestricted generation.
As long as this tag can be represented, it can be a tag selector, a class selector, and a free combination of ID selectors.

<! DOCTYPE html>
 

descendant Selector

Selector > Selector {property: value;}
Features: The choice is the direct next generation. There are restricted generations.

<! DOCTYPE html>
 

and set selector

Selector +,+ Selector +,+ {property: value;}

html,body,div,span{
                margin:0;
                padding:0;
            }
 
Classification of labels 
block Element

Typical representative: Div,h1-h6,p,ul,li
Characteristics:
-Exclusive Line
-Can set wide height
-Nested (included), the width of the child block element (not defined) is the same as the width of the parent block element.

<! DOCTYPE html>
 

Inline Elements
Typical representatives: Span, a,, strong, EM, del, INS
Characteristics:
-Display on a single line
-Can not directly set the width of the height
-The width and height of the element is the wide height of the content distraction.

<! DOCTYPE html>
 

Inline block Element (inline element)
Typical representative input img
Characteristics:
-Display on a single line
-Can set wide height

<! DOCTYPE html>
 

converting elements through the display property

display:none;//This element is not displayed.
display:block;//This element will appear as a block-level element with line breaks before and after this element.
display:inline;//Default. This element is displayed as an inline element with no line breaks before and after the element.
display:inline-block;//converts elements into inline block elements
 
<! DOCTYPE html>
 
 
CSS three major features 
Cascade Sex

When more than one style acts on the same (same class) label, the style conflicts and always executes the following code (the code at the front of the code behind the stack). is not related to the order in which the label invokes the selector.

<! DOCTYPE html>
 

Inheritance of
Inheritance occurs on the premise that it contains (nested relationships)
1 text color can be inherited
2 text size can be inherited
3 font can be inherited
4 font weight can be inherited
5 Text style can be inherited
6) Row height can be inherited
Summary: All attributes of text can be inherited.
Special case:
The H series cannot inherit text size.
A label cannot inherit text color.

<! DOCTYPE html>
 

Weights and priorities

View weight precedence from CSS code location: inline styles > Internal style Sheets > Outreach style Sheets.

weight Priority from selector: important > Inline style > ID > class > Label | pseudo Class | attribute selection > Pseudo object > Inherits the > wildcard character.

the weight of important is 1,0,0,0
The weight of the ID is the weight of the 0,1,0,0 class is the weight of the
0,0,1,0
label is