CSS is introduced

What is CSS?

  • CSS stands for cascading style sheets
  • CSS lets you define how HTML elements should be displayed.
  • CSS allows us to describe effects that we can’t describe in HTML.
  • Using CSS to describe our HTML pages can make our pages more beautiful and improve work efficiency.

The combination of CSS and HTML

The first way is inline/inline style

  • This refers to the CSS code on our HTML tag via the style attribute.
    • Advantages: Simple and convenient
    • Disadvantages: Only one tag can be modified

The second way is internal style sheets

  • We declare our CSS with the <style> tag. In general, we recommend writing the <style> tag between the head and body, which is the “neck” position
    • Advantages: Unified style Settings can be achieved through multiple labels
    • Cons: It can only be modified on this page
    • Syntax: selector {property: value; Property: value}

The third way is external style sheets

  • Use the tag in to refer to external CSS files
  • Another way to import CSS files:
<style> 
@import 'css/css01.css' 
</style>
Copy the code

What is the difference between using external import CSS and @import?

  1. Different loading sequence
  • @import imports load HTML first and then CSS styles, so if network conditions are poor, you will see the undecorated page first and then the decorated page.
  • If we use link, it loads the stylesheet first, which means that all we see is the decorated page.
  1. The @import mode imports CSS styles, which do not support dynamic javascript modification. Link supports.

The priority of the three stylesheets: satisfy the proximity principle

  • Inline > Internal > External

The use of CSS

CSS selector

Element (tag) selector

  • It can uniformly set the same tag on the page, and it describes the name of the tag

Class selectors

  • The class selector is described by a “.” when used. It describes the class attribute value on the element

The id selector

  • It selects only one element, introduces it with “#”, and references the value of the element’s ID attribute.
  • Id selectors, more unique than class selectors

The selector group

  • Comma means who and who.
  • For example, I have a mobile phone, you have a mobile phone, he also has a mobile phone, a piece of writing is too troublesome, can be combined to write
Me, you, him {cell phone}Copy the code

Derived selector

  • 1. The relationship between father and son (regardless of the other generation)
  • Offspring: paternal, great-grandchild, grandchild…

CSS pseudo-classes

  • CSS pseudo-classes can add special effects to CSS selectors
  • Pseudo class attribute list:
    • :active Adds styles to active elements.
    • :hover Adds styles to elements when the mouse hovers over them.
    • :link Adds styles to links that are not accessed.
    • :visited Adds styles to links that have already been visited.
    • :first-child Adds the style to the first child of the element.

Hyperlink pseudo-class: to comply with the order of use, LoVeHAte principle LoVeHAte, lvha

Basic CSS Properties

Text attributes

  • Font-family: value;
  • Font-size: value;
    • P: pixel
    • Em: multiple
  • Font weight: normal/bold;
  • Text color: color: value;
  • Text-align: left/right/center;
  • Text-decoration: none/underline;
  • Line height: line-height: value;
  • First line: text-indent: value (2em);

Background properties

CSS allows the application of solid colors as backgrounds, as well as the use of background images to create quite complex effects.

  • Background-color sets the background color of the element.
  • Background-image sets the image as the background.
  • Background-repeat Sets the wallpaper effect of the background image. Whether and how to repeat
    • Repeat: repeats in the vertical and horizontal directions
    • Repeat -x: repeat only in the horizontal direction
    • Repeat -y: repeats only in the vertical direction
    • No-repeat: displays only once
  • Background-position Sets the starting position of the background image
  • 1: control horizontal X-axis: positive value, move to the right; Negative, move to the left
  • 2: control vertical direction Y axis: positive, moving down; Negative, moving up
  • Whether the background-attachment background image is fixed or scrolls along the rest of the page
    • The default value is scroll: By default, the background will scroll along with the document
    • Fixed: The background image is fixed and does not scroll with the rest of the page. It is often used to implement an image called a watermark

A list of attributes

The CSS list attributes are used as follows:

  • Sets the different list items to be marked as ordered lists
  • Sets different list items to be marked as unordered lists
  • Sets the list item to be marked as an image

There are two types of lists:

  • Unordered list – List items marked with special shapes (small black dots, small boxes, etc.)
  • Ordered list – List items are marked with numbers or letters

Using CSS, you can list further styles and use images as list items.

  • None: indicates no flag. (Remove mark)
  • Disc: default. The label is a solid circle.
  • Circle: Marks are hollow circles.
  • Square: The flag is a solid square.
  • Decimal: Marks are numbers.
  • Decimal-leading-zero: indicates the digit mark starting with 0. (01, 02, 03, etc.)
  • Lower-roman: Lower-case Roman numeral (I, II, III, iv, v, etc.)
  • Upper-roman: Uppercase Roman numeral (I, II, III, IV, V, etc.)
  • Lower-alpha: The marker is lower-alpha (a, B, C, D, e, etc.)
  • Upper-alpha: Uppercase English letters The marker is upper-alpha (A, B, C, D, E, etc.).

Border attribute

The CSS border properties allow you to specify the style and color of an element’s border. Border – style values:

  • None: The default is no border
  • Dotted: Defines a dotted border
  • Bootstrap: Defines a dashed border
  • Solid: Defines a solid border
  • Double: Defines two borders. The width of both borders is the same as the value of border-width
  • Groove: Defines 3D groove borders. The effect depends on the color value of the border
  • Ridge: Defines 3D ridge borders. The effect depends on the color value of the border
  • Inset: Defines a 3D embedded border. The effect depends on the color value of the border
  • Outset: Defines a 3D highlighting border. The effect depends on the color value of the border

Outline of the attribute

An outline is a line drawn around an element, around the edge of the border, to highlight the element. The difference between outline and border:

  • A border can be one or more lines around an element’s content and inside margins;
  • An outline is a line drawn around an element, around the edge of the border, to highlight the element.

The CSS Outline property specifies the style, color, and width of an element’s outline.

The box model

All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout. The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

  • Margin – The distance between boxes
  • Border (border) – The protective shell of the box
  • Padding (Inside margin/Padding) – Padding, the distance between the edges of the box and the content
  • Content – The content of a box, the text or image displayed

The CSS positioning

The default location

  • Block level elements: H1 ~ H6, P, div, etc., top-down, vertical (wrap; You can change the width and height
  • Inline elements: A, B, SPAN, etc., arranged horizontally from left to right (no line breaks; Cannot change width and height
  • Inline block elements: input,img, etc., arranged horizontally from left to right (wrap; You can change the width and height

Floating positioning

  • Let the elements fly. Not just on the left or the right. You can also eliminate the domineering nature of “block level” (standing alone in a row).
  • Float values:
    • None: does not float
    • Left: floats close to the left
    • Right: Float to the right

Relative positioning

  • To move (offset) a position by comparing it with the original position.

Absolute positioning

Distance between this element and the located ancestor element

  • If the parent element is positioned, the parent element is used as a reference.
  • If the parent does not locate, find grandpa, grandpa positioning, with grandpa as a reference.
  • If grandpa does not locate, continue to look up, if there is no positioning, body is the final choice.

Fixed position

  • The content of an element is fixed to a position on the page so that the element box does not move when the user scrolls down the page

z-index

  • If there are overlapping elements, use the Z-axis attribute to define the upper and lower levels.
  • Note:
    • Z-axis attributes are used in conjunction with relative or absolute positioning.
    • Z value does not have rated value (integer type can be used, specific number, you can choose)

CSS3

Rounded corners

  • Border-radius: left upper right upper right lower left lower;
  • Border-radius: four corners;
  • Border – the radius: 50%; circular

Shadow box

  • Box-shadow: 1 2 3 4 5;
    • 1: horizontal offset
    • 2: vertical offset
    • 3: Fuzzy radius
    • 4: Expand the radius
    • 5: color

The gradient

Linear gradient

Background: Linear-gradient ([direction/Angle], color list);Copy the code

Radial gradient

  • Radiates outward from the center of the circle
Background: radial-gradient(color list);Copy the code

background

Background position

Background-origin: Specifies the location of the background image

  • Border-box: The edge of the background border
  • Padding-box: The edge of the inner border of the background paste
  • Content-box: Edge of background post content

Background the cutting

background-clip:

  • Border-box Border cutting
  • Padding-box Margin opening
  • Content-box Content opening and cutting

Background the size

background-size:

  • Cover scales to fully cover the minimum size of the background area
  • Contain zooms to the maximum size of the background area

Transition animations

The transition

  • The intermediate “slow” process of moving from one state to another;
  • The downside is, you can’t control any point in time.
  • Transition {1 2 3 4}
    • 1: Transition or animate simulated CSS properties
    • 2: the time taken to complete the transition
    • 3: transition function
    • 4: Delay time at the beginning of the transition
  • Currently, cSS3 has only developed some transition properties, as shown below:

animation

From one state to another, each point in the process can be controlled.

  • Keys: @ keyframes animation frames {the from {} to {}} or {{} {} 20% 0%… }
  • Animation {1, 2, 3, 4, 5} 1: animation frame 2: execution time 3: transition function 4: animation execution delay (can be omitted) 5: animation execution times