CSS basic knowledge of composite selector, element display mode, background image position, sprite image
1. Composite selectors
In CSS, selectors can be divided into basic selectors and composite selectors according to the type of selectors. Composite selectors are built on top of basic selectors and are formed by combining basic selectors.
-
Compound selector can select target elements (labels) more accurately and efficiently
-
A composite selector is composed of two or more basic selectors combined in different ways
-
Commonly used compound selectors include: descendant selectors, child selectors, union selectors, pseudo-class selectors, etc.
Second, descendant selectors (important)
descendant selectors, also known as containment selectors, can select children in the parent element element. The writing method is to write the outer label at the front and the inner label at the back, separated by a space. When the label is nested, the inner label becomes the descendant of the outer label.
grammar:
-
Element 1 and element 2 are separated by a space
-
Element 1 is the parent, element 2 is the child, and finally element 2 is selected
-
Element 2 can be a son, grandson, etc., as long as it is a descendant of element 1
-
Element 1 and Element 2 can be any basic selector.
Third, sub-selector (important) The
sub-element selector (sub-selector) can only be selected as the nearest-level child element of an element. The simple understanding is to choose the pro-son element.
Grammar:
-
Element 1 and element 2 are separated by a greater than sign
-
Element 1 is the parent, element 2 is the child, and finally element 2 is selected
-
Element 2 must be a pro-son, his grandson, great-grandson, etc. are not in his control. You can also call him a pro-son selector.
With so much theoretical knowledge, let’s not say much, let’s practice it. The
effect is as follows:
4. Union selector (important) The
union selector can select multiple sets of labels and define the same style for them at the same time. Usually used for collective declarations. The
union selector is formed by connecting selectors with commas (,). Any form of selector can be used as a part of the union selector.
grammar:
-
Element 1 and element 2 are separated by a comma
-
The comma can be understood as a sum
-
Union selectors are usually used for collective declarations
5. Pseudo-type selectors
Pseudo-type selectors are used to add special effects to certain selectors, such as adding special effects to links, or selecting the first and nth elements.
The biggest feature of pseudo-class selector writing is that it is represented by a colon (:), such as: hover, :first-child.
Because there are many pseudo-class selectors, such as link pseudo-classes, structural pseudo-classes, etc., I will first explain the commonly used link pseudo-class selectors.
Link pseudo-class selector
1. Precautions for
link pseudo-class selector . 2. Writing method in actual development of
link pseudo-class selector. Precautions for link pseudo-class selector
- In order to ensure effective, please declare in the order of LVHA: link－:visited－:hover－:active.
- Memory method: love hate or lv bag hao.
- Because a link has a default style in the browser, we need to specify a style separately for the link in actual work.
The link pseudo-class selector is written in the actual work development:
focus pseudo-class selector
focus The pseudo-class selector is used to select the form element that has the focus.
The focus is the cursor, which can only be obtained by form elements in general, so this selector is also mainly for form elements.
6. Summary of compound selector
7. CSS element display mode
What is element display mode? See the picture below:
Hahaha, just like men and women are inseparable in the world, according to different characteristics, we will work together to build a beautiful home.
What is the element display mode?
Function: There are many tags on the web, and different types of tags are used in different places. Knowing their characteristics can better layout our web pages. The element display mode is how the element (label) is displayed, such as
Eight, CSS elements display mode
** block elements: * Common block elements there
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
, of which
<div>
the label is the most typical block elements.
The characteristics of block-level elements:
① More overbearing, on their own.
② Height, width, outer margin and inner margin can all be controlled.
③ The default width is 100% of the container (parent width).
④ It is a container and box in which internal or block-level elements can be released.
note:
- Block-level elements cannot be used in text elements
-
Labels are mainly used to store text, so
Block-level elements cannot be placed inside, especially not
- Similarly,
~
These are all text-type block-level tags, and other block-level
inline elements cannot be placed in them .
Common inline elements are<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>etc. Among them,
tags are the most typical inline elements. In some places, inline elements are also called inline elements.
Features of
in-line elements : ① Adjacent in-line elements are on one line, and one line can display multiple elements.
② The direct setting of height and width is invalid.
③ The default width is the width of its own content.
④ Inline elements can only hold text or other inline elements.
note: - Links can no longer be placed in special circumstances. Block-level elements can be placed in links, but it is safest to switch to block-level mode.
9.
Inline block elements. There are several special tags in inline elements<img />、<input />、<td>. They have both block elements and inline elements. The characteristics of elements, some materials call them inline block elements.
Features of inline block elements:
① It is on one line with adjacent inline elements (inline blocks), but there will be gaps between them. A row can display multiple (characteristics of elements in the row).
② The default width is the width of its own content (characteristics of inline elements).
③ Height, row height, outer margin and inner margin can all be controlled (characteristics of block-level elements).
10. Summary of element display mode
11. Element display mode conversion In
special circumstances, we need the conversion of element mode. Simple understanding: The element of one mode needs the characteristics of another mode. For
example, if you want to increase the trigger range of the link.
Convert to block element: display: block;
Convert to inline element: display: inline;
Convert to inline block: display: inline-block;
the use of a small tool snipaste
Snipaste is a simple but powerful screenshot tool that also allows you to The screenshot is posted back to the screen.
Common shortcuts:
- F1 can take screenshots. At the same time measure the size, set the arrow to write text, etc.
- F3 is displayed on top of the desktop
- Click on the picture, alt can pick the color (press shift to switch the color picking mode)
- Press esc to cancel the image display.
12.
CSS background. You can add background styles to page elements through CSS background properties.
The background property can set the background color, background image, background tile, background image position, background image fixed, etc.
Background image position - The parameter is a position noun
If the two values specified are both position nouns, the order of the two values is irrelevant. For example, left top and top left have the same effect.
If only one position noun is specified and the other value is omitted, the second The value is centered by default - The parameter is the exact unit
If the parameter value is the exact coordinate, then the first one must be the x coordinate, and the second must be the y coordinate
If only one value is specified, then the value must be the x coordinate, and the other is centered vertically by default - The parameter is a mixed unit
If the two specified values are a mixture of precise units and orientation nouns, the first value is the x coordinate, and the second value is the y coordinate.
Through CSS background properties, you can add background styles to page elements.
The background property can set the background color, background image, background tile, background image position, background image fixed, etc.
The background image is fixed (background attachment) The
background-attachment property sets whether the background image is fixed or scrolls with the rest of the page.
Background-attachment can produce the effect of parallax scrolling.
Background composite writing
In order to simplify the code of background attributes, we can combine these attributes and abbreviate them in the same attribute background. Thereby saving the amount of code.
When using abbreviated attributes, there is no specific writing order, the general convention is:
background: background color background picture address background tile background image scrolling background picture position;
background color semi-transparent
CSS3 provides us with the background The color is translucent.
The last parameter is alpha transparency, the value range is between 0~1
We are used to omit the 0 of 0.3 and write it as background: rgba(0, 0, 0, .3);
Note: the background translucency is refers to a translucent background box, inside the box contents are not affected
CSS3 new property, IE9 + version of the browser is only supported
but now the actual development, we are less concerned about the compatibility of the wording, you can rest assured that the use of
background summary
