9. CSS attribute
Summary of CSS refinement knowledge points
1. Inline style: only works on the elements it modifies
Syntax: style = "attribute 1: value 1; Property 2: value 2 Attribute n: value n
2. Style priority: when multiple styles act on the same element, whoever is close to the element will use whose style, that is, whoever is close will have higher priority
3. Length unit em: 1em is the size of the current font, text indent: 2em; Indent text by 2 characters
4. Three representations of color:
1. RGB color representation: rgb (red, green, blue), where three parameters represent the intensity of three colors, and the value is [0255]
2. Hexadecimal representation: color is represented by hexadecimal value, #rrggbb
3. English word representation: use English words to represent color, for example, red is red
5. Foundation selector: 1 Tag selector: use the element name as the selector to select all elements with matching names on the web page
2. The class selector is used in two steps:
2.1. Add a class attribute to the element to be selected in the format class = "value"
2.2. Declare class selector, class selector Name: Class attribute value
The class selector can select multiple elements with the same class name
3. The ID selector is used in two steps:
3.1. Add ID attribute to the element to be selected, format id = "value"
3.2. Declare ID selector, ID selector Name: #id property value
According to the H5 standard, the ID of each element is unique, and the ID selector can only select one element
4. Wildcard selector *: select all elements on the web page
6. Relationship selector: 1 Intersection selector: it is directly composed of two selectors. The selected element range is the common part of their respective elements, i.e. intersection
2. Union selector: multiple selectors are connected together by commas. These elements can be any basic selector. The range of elements selected by union selector is the union of elements selected by all selectors (combined together)
3. Descendant selector: select all descendant elements of the reference element,
Syntax: e f, that is, select all descendant f elements (including sons and grandchildren) of all e selector matching elements
4. Parent-child selector: select all parent-child elements of the reference element,
Syntax: e > F, that is, select all direct child elements f (excluding child elements) of all e selector matching elements
7. Attribute and pseudo class selector: 1 Attribute selector: selects an element based on its attributes
Syntax 1: [attr]: select all elements with attr attribute on the web page, regardless of the value of attr attribute
Syntax 2: e [attr]: select all e elements with attr attribute, regardless of the value of attr attribute
Syntax 3: e [attr = value]: select all e elements with attr attribute and attribute value is value
Syntax 4: [attr = value]: select all elements with attr attribute and attribute value is value
Note: if the attribute value value has no special characters such as / and:, then the value can be wrapped without double quotes
2. Pseudo class selector:
2.1.: Active: the state when the mouse is pressed over an element
2.2. : Hover: the state in which the mouse hovers over the element
8. Priority of selector: 1 Simple selector priority order:! Important > ID selector > class selector > label selector > wildcard selector if you add a style in the simple selector! Important, then its priority is the highest at this time
2. When the selector of the modified element is a composite selector, first compare the number of times the ID selector appears, whose ID selector has more times and whose priority is higher; When the number of ID selectors is the same, compare the number of class selectors. Who has more class selectors and whose priority is higher
9. CSS attribute
Background properties
You can use the background attribute instead of the background image, background repeat, and background position attributes
skill:
Set the background picture to be centered horizontally and vertically
2) Set the position of the background picture to 50% or 50% center
(1) Background repeat: sets the background picture repeat. The default value is repeat (tiled horizontally and vertically)
*Repeat-x: tile horizontally
*Repeat-y: tile vertically
*No repeat: not tiled, only one is displayed
(2) Background position: center center; the background picture is centered. By default, it can only be centered horizontally
(3) Background attachment: fixed; fixes the background image and does not disappear as the document scrolls
Text properties
(1) Opacity: set the opacity. The range is [0,1]. 1 means completely opaque, the clearest. 0 means completely transparent, and the element is hidden
(2) Font style: italic; font style, italic is italic
(3) Font weight: bold; font weight, bold and bold are bold
(4) Text decoration: line through; text decoration: text decoration, which can define the underline, upper dash or middle dash of the text
(5) Letter spacing: letter spacing: spacing between words
(6) Height: 50px; line height: 50px; when the row height and height in the element are the same, the text in the element can be centered in the vertical direction
(7) Text align: text align: sets the horizontal alignment of text within block level elements
(8) Overflow: hidden: contents beyond the element box will be trimmed and cannot be seen
Scroll: if the redundant content can be seen, a scroll bar will appear
Auto: Auto adaptation. If the element height is not enough, a scroll bar will appear, otherwise there will be no scroll bar
li
List style type: upper - alpha: the symbol of the list item is an uppercase English letter
11. Element classification:
(1) Block level element: an element that monopolizes a row and cannot share a row with adjacent elements, such as h1-h6, P, div, ol, UI, Li, pre, table, etc
(2) Inline elements: elements that can share a row with adjacent elements, such as span, a, IMG, etc
Features: do not set the width and height of the elements in the line. It is useless to set them. The width and height automatically adapt to the content, except img (it can set the width and height)
(3) Conversion of inline and block level elements:
display:inline
display:block
(4) Intra row block level element: it has the characteristics of existing intra row elements (it can share a row with adjacent intra row elements),
The display attribute, with the value of none, hides the element and does not preserve the physical space of the element, and the elements adjacent to it will be crowded
The visibility attribute, with the value hidden, hides the element, but preserves the physical space of the element
12. CSS positioning
(1) Absolute positioning (position: absolute;): sets the absolute positioning. At this time, the element will be separated from the document flow, and its original physical space will be occupied by adjacent elements. During the movement process, the absolutely positioned element is translated with reference to the nearest parent element
Left: how many pixels does the element move to the right
Top: how many pixels does the element move down
The element will leave the document stream and the elements adjacent to it will squeeze in
Fixed positioning: a special absolute positioning. Its reference is the body element (the ancestor element of all elements on the web page)
(2) Relative positioning: positioning is performed by referencing the current position of the element. Relative positioning elements need to be positioned in combination with left, right, top and bottom. Relatively positioned elements do not break away from the document flow. Physical space is reserved in the positioning process and will not be occupied by adjacent elements
Absolute positioning. The reference is the nearest parent element
Relative positioning: positioning by referencing the current position of the element
(3) Z-index attribute: the stacking order on the z-axis (visual line). The larger the value, the closer it is to our eyes
Left: set the element to float to the left, and move to the left of the parent element by referring to the upper left corner of the parent element
Right: set to float to the right,
The physical space of the floating element disappears and will be occupied by adjacent elements -- the floating element is separated from the document flow
Note: floating elements are also separated from the document flow
Clear floating: let the floating element return to the document flow again, regain the physical space, and clear the floating step
Set the clear style. The value is left / right / both. Left is to clear the floating elements on the left. Right is to clear the floating elements on the right. Both is to clear the floating elements on both sides
14. CSS box model
(1) Inner margin padding:
Left inner margin, that is, the distance from the content to the left border
padding-left:20px ;
Right inner margin, that is, the distance from the content to the right border
padding-right:20px ;
Upper and inner margins, that is, the distance from the content to the upper border
padding-top:40px ;
The bottom inner margin is the distance from the content to the bottom border
padding-bottom:40px;
Uniformly set the inner margin in 4 directions
padding: 40px;
(2) Border border:
Set border in 4 directions, value: border width style color dashed: dashed border solid: solid border
border-top:20px solid red;
border-bottom: 20px solid red;
border-left:20px solid red;
border-right: 20px solid red;
Uniformly set borders in 4 directions
border:10px solid red;
(3) Outer margin
margin-top:20px;
margin-bottom: 20px;
margin-left:20px;
margin-right: 20px
Set the outer margin in 4 directions
margin: 20px;
(4) Clear the default style and make full use of the whole body
Clear the default style and make full use of the whole body
(1) Set fillet border: border radius: 20px;
(2) @ r_556_2419 @ - Shadow: attribute adds one or more shadows to the box.
10. List properties
There are two ways to hide elements:
13. CSS float: float
(5) Center block level elements
Setting the margin around the block level element to auto will automatically adapt to the parent element and center it horizontally
15. New knowledge of CSS3
Note: extension: text shadow adds text shadow
(3) The @ r_556_2419 @ - sizing attribute allows you to define specific elements that match a region in a specific way.
Standard box model: the width and height attributes set the width and height of the content area.
Weird box model: the width and height properties set the width and height of the content area, inner margin and border.
(4) Excess of CSS3
With CSS3, we can add effects to elements when they change from one style to another without using flash animation or JavaScript.
transition: property duration timing-function delay;