CSS Basics (Part 2)

review

The basic understanding of CSS in the last CSS is used for what, as well as the general type and basic style and number to write specifications such as things, important or for the basic front-end staff a necessary skill: Chrome debugging tool, this is very important, if you do not understand or not familiar with the basics of CSS, it is recommended to take a look at the CSS first thing, this one then CSS began to talk about.

Common CSS selectors

In CSS, in addition to class selectors and ID selectors, there are common descendant selectors and child element selectors, intersection selection union selectors and so on.

Descendant selector

Descendant selectors are usually selectors that wrap a tag around a div.

// Descendant selector. Con a {color: red; }Copy the code

Subclass selector

Subclass selectors generally mean if you have two layers, you need to use the > symbol

<div> </strong> </strong> </div> // subclass selector, usually only one layer of div> strong {}Copy the code

Intersection selector

An intersection selector is a name that is both a label and has a class or ID

<p class="red"> red </p>Copy the code

Union selector

Union selectors are important, because they will be used in the future, and union selectors denote that they affect both p and class= “red”

p,
.red{
  color: red
}
Copy the code

Note: Always remember that structure is more important than style when writing CSS in the future. If the structure is not well written and you do not write according to the needs of the page, it does not matter how well the style is written, so it is better to have a clear structure diagram in mind when you get the design draft and then write the style

Link pseudo-class selectors

Link pseudoclass selectors are also very important, there are the following kinds, focus on remember: hover

  • A :link———— Unaccessed links
  • A: Visited ———— A link already visited
  • A :hover———— mouse move to a link
  • A: Active ———— Selected link

Try pasting the following code into the editor and running it over the A TAB to see what happens!

<! 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> </head> <body> <div class="wrapper"> <a href="http://www.baidu.com" Class ="wrapper "> </a> </div> </body> </ HTML > <style>. Wrapper {color: red; Wrapper -a:hover {color: pink; } </style>Copy the code

Compound selector summary

  • Descendant selector: Used to select element descendants ———— separated by Spaces
  • Child selector: Select the nearest level 1 element ———— > separate
  • Intersection selector: Select the part of the intersection of two tags ———— “p.ne”
  • Union selectors: Select some selectors of the same style ———— separated by a comma
  • Link pseudoclass selector: Change the link state ————a: hover

Block-level elements and inline elements

Block-level elements: Like divs, each occupies a single line

  • Common block-level elements: H1 ~h6, P, div, ul, OL, li
  • Features:
  1. An exclusive line
  2. Height, width, margins, and margins are all controllable
  3. The width defaults to 100% of the container (parent width)
  4. Is a container box that can release inner or block-level elements

Note: p, h1~h6, dt do not put div inside

Inline elements: Similar to span, many can be placed on a single line

  • Common inline elements: A, strong, B, em, I, del, S, ins, U, span
  • The characteristics of
  1. A row can contain multiple inline elements
  2. The height and width are invalid when set directly
  3. The default width is its own content width
  4. Inline elements can only hold text or other inline elements

Note: links cannot be placed inside links

Inline fast elements: Similar to img, multiple elements can be placed in a row

  • Common inline fast elements: img, input, TD
  • The characteristics of
  1. And adjacent (inline fast) elements on a line, but with a gap between them. Multiple elements can be displayed on a line
  2. The default height is the height of the content itself
  3. Height, line height, margins, and margins are all controllable

Summary of three types of elements

  • Block-level elements: Only one block-level element can be placed in a row
  • Inline elements: A row can contain multiple inline elements
  • Inline fast elements: Multiple inline fast elements can be placed on a single line
Label display mode conversion
  • Label display mode conversion: display
  • Block level inline: display: inline;
  • Inline block level: display: block;
  • Block, inline elements converted to inline fast: display: inline-block

CSS Background

Background is a common type in CSS

  • Background-color: indicates the background color
  • Background-image: url (image location)
  • Background-repeat: Background Ping Po
    1. Default is repeat (Ping Po)
    2. Background: no-repeat
    3. Background Horizontal Flat Po: repeat-x
    4. Background Vertical Flat Po: repeat- Y
  • Background – attachment: acroll | fixed
    1. Scroll: Background image to scroll with the image content
    2. Fixed: The background image is fixed
  • Background-position: the position of the background
    1. Position: top | center | | bottom left | right
    2. Background-position: x coordinates && y coordinates

    Note: In the background position, the entire coordinate: from the top left corner (x), (y) to the bottom right corner

  • Background-position: 50px (coordinates), 10px (y coordinates); ———— Exact location

– Background brief:

  • Background: Background color Background image address Background Pingpo background Scroll background position
  • Example: Background: # CCC URL (images/ S.jpg) no-repeat fixed top center

Set ping Po + scroll as shown below: 

<! 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> </head> <body> <div class="wrapper"> </div> </body> </ HTML > <style>.wrapper  { width: 1900px; height: 1080px; border: 1px solid pink; /* Set horizontal axis: center vertical axis: top */ /* background: URL (./ simg.jpg) no-repeat fixed center top; */ /* Set horizontal axis: 100px vertical axis: 200px */ /* BACKGROUND: URL (./ simg.jpg) no-repeat fixed 100px 200px; */ /* Background: URL (./ simg.jpg) Fixed Center top; */ /* Background: url(./ simg.jpg) center top; */ } </style>Copy the code

Set x=100px and y=200px as shown

The rest you can try

Ununderline a link

  • The text – decoration: none; ———— ununderline a link

A links usually have an underscore, which is usually removed for user experience

The background transparent

  • Background: rgba (0,0,0,0.3) ———— indicates the transparency of the color

Background to summarize

  • Background-color: indicates the background color
  • Background-image: URL () : indicates the background image
  • Background-repeat: background-repeat (repeat/no-repeat/repeat-x/repeat-y)
  • Background-position: Background position (Center Center)
  • Background-attachment: Scroll /fixed
  • Background: Background color Background Picture address Background Pingpo background Scroll background position

CSS priority problem

CSS full weight calculation is also very important, will affect the layout, the following image is the CSS weight calculation. Try it out in the editor

Well, the second lecture of CSS is over, this content is still very much and very important, friends can have a good review review. What don’t know welcome comment area discussion