CSS (how CSS is introduced, CSS selectors, text styles, backgrounds, borders, pseudo-class pseudo-elements, CSS box model, margin folding issues, advanced selectors, floating, flex layout)

CSS

css3, cascading style sheets, styling and layout

Three ways to introduce

?Inline style (inline style): Use the style attribute of the HTML tag to define the CSS style

Internal style: use?

External styles (connected): use tags to trigger external CSS style sheet components

Inline styles

<p style="color: aqua;font-size: 40px;">This is a paragraph tag</p>

Attributes:

background-color: background color
Font style: font-family, color, and font-size
Text alignment: text-align

shortcoming:

To set the style for each tag, you need to add the style attribute
Putting styles in HTML tags will reduce the cost of later maintenance, that is, when modifying the page, you need to open each modification of the page one by one.
Adding multiple internal styles will increase the page size. If the user website is written in this way, it will waste server bandwidth and traffic.

External styles

External style (link style)

Composed of three parts: selector, attribute, value
Linking external style files to HTML documents through the link tag in HTML is the most commonly used method for websites on the Internet, and it is also the most practical method. This method completely separates HTML documents and CSS files, achieves complete integration of the structure layer and presentation layer, and enhances the scalability of the web page structure and the maintainability of CSS styles.
Benefits of external styling
- CSS files can be placed in different HTML formats to make all pages of the website consistent and improve code reusability.
- Easy to manage and reduce code and maintenance time
- When a CSS file is modified, all HTML files that apply this file will be updated, without having to retrieve all pages from the server and then upload them after modification.

Internal styles

Internal styles usually write css between and . Usually surrounded by style tags in HTML tags

Features: Can only be used on this page to solve the problem of writing inline styles multiple times

css selector

Tag selector

The tag selector can match all tags with the same name in the document through a specific tag name.

p{<!-- -->
 color: blue;
}

The p selector matches all p tags in the document

ID selector

The ID selector is used to match tags with the specified ID attribute in HTML documents.

#nav{<!-- -->
 color: aqua;
}

The #nav selector can match tags with the id=”nav” attribute in the document

Class selector

Class selectors can match specific HTML tags based on the class attribute

 .list{<!-- -->
 color: darksalmon;
}

The .list selector can match all tags in the document that have the class=”black” attribute

Priority of selectors

id selector > class selector > tag selector

Style

Text style

font-family: “宋体”; the font is changed to 宋体
font-weight: ; text thickness
- 100-900 values: 100, 200, 300, 400, 500, 600, 700, 800, 900
- bold bold text
- bolder bolder text
- lighter thinner text
- normal regular text (default)
font-size:; font size, unit px
font-style: ; font style
- italic: italic, a separate font style
- oblique: an oblique version of normal text
- normal: normal font
font: order font-style||font-weight||font-size||font-family
- The font attributes must be used in order, and the two attributes font-size and font-family cannot be ignored.
- Only one value is allowed per parameter in the font attribute. With the exception of the font-size and font-family properties, ignored properties will be set to their respective default values.

Width and height of background and elements

Background

background-color sets the background color of the element
- color name
- hexadecimal code
- rgb() function
- rgba() function (one more transparency than rgb)
background-image sets the background image of the element
- url(“url”): url() function, the URL in brackets is the specific path of the image
- none: Default value, do not display the background image
background-repeat controls whether the background image is repeated
- repeat: Default, the background image will repeat vertically and horizontally
- repeat-x: Repeat horizontally only
- repeat-y: Repeat only in the vertical direction
- no-repeat: The background image is only displayed once and does not repeat in any direction
background-size sets the size of the background image
- contain: The size and height of the background image completely adapt to the content area, and the image will not be deformed; when the aspect ratio of the element it belongs to is different from the aspect ratio of the background image, white space will appear.
- cover: The background image expands and covers the entire element area, and the excess part will be hidden.
Abbreviation for background property, you can set all background properties in one statement
- Sequence: background-color||background-image||background-repeat

The width and height of the element

width: You can set the width of the element’s content area
- length: Use a specific value with units such as px, cm, etc. to define the width.
- %: Width based on percentage of parent element width
height: defines the height of the element’s content area
- length: Use a specific value with units such as px, cm, etc. to define the height.
- %: Width based on percentage of height of parent element
display attribute: controls the display and hiding of elements

? Changes to block-level elements and inline elements
- none: The setting element will not be displayed
- inline: The element is displayed as an inline element
- block: The element will be displayed as a block-level element
- inline-block: inline block element
text-indent attribute: first line indent
- px: will not change with the font size
- em: Automatic indentation based on font size, etc.
list-style attribute: modification of list items
- none: remove small dots
- inside: The small dot is placed inside the list item

Border

border-style: Set the border style, such as solid line, dotted line, etc.
- border-top-style: top border style
- border-bottom-style: bottom border style
- border-right-style: right border style
- border-left-style: left border style
- border-style: Set four border styles
Style value:
- none: no border
- solid: implement borders
- dashed: dashed border
- dotted: dotted border
- double: double border
- hidden: Same as none, applies and resolves border conflicts
  - The attribute value is none: In this case, if the background image is not set, even if the value of border-width has been specified before, its
    
    The value is still 0. In the case of overlapping cell borders, none has the lowest priority, so if there are other overlapping borders, it will
    
    Show other borders
    
    ● The attribute value is hidden: In this case, if the background image is not set, even if the value of border-width has been specified before, it
    
    The value is still 0. In the case of overlapping cell borders, hidden has higher priority, so if there are other overlapping borders,
    
    other borders will not be displayed
border-width: Set the width of the border
- border-top-width: top border width
- border-bottom-width: bottom border width
- border-right-width: right border width
- border-left-width: left border width
- border-width: Set the width of four borders
Style value:
- thin: thinner border
- medium: medium width border
- thick: wider border
- length: value px sets the border width
boeder-color: Set the color of the border
- border-top/bottom/right/left-color: Set the top, bottom, right and left widening color
- border-color: Set four border colors
Style value:
- color name
- hexadecimal
- rgb() function
border:the three abbreviations above

Order: border:border-width border-style border-color
border-radius: You can set a rounded border for an element, and set various rounded corners such as a circle, a semicircle, an ellipse, etc.

border-radius: value px;

Pseudo-class pseudo-element

Pseudo-class

Syntax format:

Selector name: pseudo-class name {

? //Style

}

style:

:link eg:a:link
- Unvisited a link status
:visited eg:a:link
- Add status to a visited link
:hover eg: a:hover
- The state when the mouse is hovering over the element
  - cursor attribute: change mouse style
    
    default:arrow style
    
    pointer: small hand style
    
    wait: loading status
    
    help: help
    
    text: indicates the document
    
    crosshair: cross
:active eg:a:active
- Clicked connection status
:focus eg: a:focus
- The state of the input element that has received focus
:checked eg: a:checked
- The state when the input element is selected
:disabled eg: a:disabled

The status of each disabled element

Pseudo-element

Syntax format:

Selector name::pseudo-element name{

? //Style

}

In css3, single colon and double colon are used to distinguish pseudo classes and pseudo elements.

::first-line is used to add styles to the first line of text and can only be used on block-level elements.
::first-letter is used to add special styles to the first letter of text
::before is used to add content before the element content
::after is used to add some content after the element

CSS box model

Content area/web element

The content area is the center of the entire box model, where the main elements of the web page are stored.
The content area has three attributes: width, height, and overflow.
- overflow attribute:
  1. hidden: hide the overflow part
  2. visible: display the overflow part (the overflow part is displayed outside the box)
  3. scroll: Add a scroll bar to the content area. You can use the scroll bar to view all the contents of the content area.

Padding

padding-top/bottom/left/right: distance from the border in all directions

padding abbreviation:

Four values: top, right, bottom, left
Two numbers: up, down, left and right
A numerical value: the same margins in the four directions of top, bottom, left and right

External margin

margin–top/bottom/left/right: outer margins in all directions, that is, controlling the distance between boxes

margin abbreviation:

Four values: top, right, bottom, left
Two numbers: up, down, left and right
A numerical value: the same margins in the four directions of top, bottom, left and right

margin:100px auto; //Set the element to be horizontally centered

Element width and height

When the width and height attributes in CSS set the width and height of an element, what is actually set is only the width and height of the content area of the element. The actual width and height of the element also depend on other factors.

Total width: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total height: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
*{

padding:0px;

margin:0px

}Remove all border margins

Margin folding problem

Vertical direction!
1. element itself
  
  When an element does not have content, width, height, and borders set, it will not be displayed on the page.
2. between parent and child elements
  
  When margin-top is set on a child element, the parent element will move with it.
3. between adjacent elements
  
  When the first element sets margin-bottom and the second element sets margin-top, one of the two element value setting items is selected at the same time; if the two values are different, the maximum value is selected.

Advanced Selector

Basic selectors: tag selector, class selector, id selector

Union selector

Multiple selectors are connected by commas.

p,div{

}

Intersection selector

Two selectors are connected, and the communication between the two ranges is selected.

There cannot be a space between the two selectors
The first must be a tag selector and the second must be a class selector or id selector

eg: div.one{

? }

? div#one{

? }

Descendant selector

Separate each basic selector with a space (can be written across codes)

div h2 a{

} //Select the a link of the h2 tag in the div

Child element selector

Separate each selector with > (cannot be written across codes)

div>h2>a{

} //Select the a link of the h2 tag in the div

Attribute selector

Selector [property name]{

? //Style

? }

Selector [attribute name=”attribute value”]{

//style

}

Float

float attribute

left: element floats to the left
right: The element floats to the right

Clear the floating clear attribute. After setting, it is equivalent to moving the element to the left or right.

left: No floating elements are allowed on the left side
right: Floating elements are not allowed on the right side
both: Floating elements are not allowed on the left and right sides

Position

Syntax format:

position:property;
top:;
bottom:;
left:;
right:; //Use numerical values for up, down, left and right + px

static positioning static

Static positioning means there is no positioning and the document will be output in the standard document stream.
relative positioning relative

Relative positioning, positioning relative to the normal position of the element. Set the offset of the element relative to its normal position through the four attributes of up, down, left, and right. This process will not affect other elements
Absolute positioningabsolutr

Absolute positioning, positioning relative to the first non-statically positioned parent element, uses the four attributes up, down, left, and right to set the offset of the element equivalent to the position of the parent element. If there is no satisfying parent element, it will be relative to browser window to locate. Allow absolutely positioned elements to have no impact on other elements
Fixed positioning fixed

Fixed positioning, positioning relative to the creation of the browser, you can use the four attributes up, down, left, and right to define the position of the element relative to the browser window. Using fixed-positioned elements, the position of the element remains fixed no matter how you scroll the browser window.

flex layout

display:flex defines flex layout

flex-wrap:wrap;

If one line cannot fit, whether to wrap it
justify-content:space-evenly;

Control how elements are arranged
align-items:center;

Set the element to vertical center