CSS Learning Notes

1. Depending on the CSS, child elements inherit attributes from the parent element. (Some browsers do not support)
2. There is an easy-to-overlook aspect of the descendant selector, that is, the level interval between two elements can be infinite.
For example, if you write UL em, this syntax selects all EM elements inherited from the UL element, regardless of how deep the nesting level of EM is.
3. Child selectors can only select elements that are child elements of an element, as compared to descendant selectors.
H1 > Strong {color:red;}
4. The adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element.
H1 + P {margin-top:50px;}
This selector reads: "Select the paragraph that appears immediately after the H1 element, and the H1 and P elements have a common parent element."
5. Unlike class selectors, ID selectors cannot be used in conjunction because the ID attribute does not allow a space-delimited list of words.
6. In HTML, a class value may contain a list of words separated by spaces.
<p class= "Important warning" ></p>
7. By linking the two class selectors together, you can select only the elements that contain these class names (the order of the class names is unlimited).
8. Attribute Selector
[attribute] is used to select the element with the specified attribute.
[Attribute=value] is used to select an element with the specified attributes and values.
[Attribute~=value] is used to select the element in the attribute value that contains the specified vocabulary.
[Attribute|=value] is used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[Attribute^=value] matches the property value to specify each element at the beginning of the value.
[Attribute$=value] matches the property value to specify each element at the end of the value.
[Attribute*=value] matches each element of the property value that contains the specified value.
9, do not leave a space between the attribute value and the unit.
"Margin-left:20 px" is wrong, it only works in IE 6
"margin-left:20px" to
10. How to insert a style sheet
(1) External style sheet: Each page is linked to a style sheet using <link> tags. <link> tags in the header (document)
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css"/>
(2) Internal style sheet
<style type= "Text/css" >
hr {Color:sienna;}
</style>
(3) Inline style: To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties.
(4) Multiple styles if certain attributes are defined by the same selector in a different style sheet, the property value is inherited from a more specific style sheet.
11, background color: Background-color cannot inherit, its default value is transparent.
12. CSS Background Properties:
Property Description
The background shorthand property, which is to set the Background property in a declaration.
Background-attachment whether the background image is fixed or scrolls along with the rest of the page.
Background-color sets the background color of the element.
Background-image set the image to the background.
Background-position sets the starting position of the background image.
Background-repeat sets whether and how the background image repeats.
13. Set the style of the link
A:link-Generic, inaccessible links
A:visited-The user has visited the link
A:hover-the mouse pointer is over the link
A:active-the moment the link is clicked
14. Display Properties: The Display property specifies the type of box that the element should generate.
None this element is not displayed.
Block this element will be displayed as a block-level element with a newline character before and after this element.
Inline default. This element is displayed as an inline element with no line break before or after the element.
Inline-block the inline block element. (CSS2.1 new value)
List-item This element is displayed as a list.
Run-in this element is displayed as a block-level element or inline element based on the context.
The compact CSS has the value compact, but has been removed from CSS2.1 due to a lack of broad support.
Marker CSS has a value of marker, but it has been removed from CSS2.1 due to a lack of extensive support.
Table This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table.
Inline-table This element is displayed as an inline table (similar to <table>) and there are no line breaks before or after the table.
Table-row-group This element is displayed as a grouping of one or more rows (similar to <tbody>).
Table-header-group This element is displayed as a grouping of one or more rows (similar to <thead>).
Table-footer-group This element is displayed as a grouping of one or more rows (similar to <tfoot>).
Table-row This element is displayed as a table row (similar to <tr>).
Table-column-group This element is displayed as a grouping of one or more columns (similar to <colgroup>).
Table-column This element is displayed as a cell column (similar to <col>)
Table-cell This element is displayed as a table cell (similar to <td> and <th>)
Table-caption This element is displayed as a table header (similar to <caption>)
Inherit specifies that the value of the display property should be inherited from the parent element.
15. The position attribute specifies the positioning type of the element.
This property defines the positioning mechanism used to create the element layout. Any element can be positioned, but an absolute or fixed element creates a block-level box,
Regardless of the type of the element itself. Relative positioning elements are offset relative to their default position in the normal flow.
Value Description
Absolute generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor.
The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
(the element box is completely removed from the document flow and is positioned relative to its containing block.) The containing block may be another element in the document or an initial containing block.
The space that the element originally occupied in the normal document flow is closed as if the element did not exist.
The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. ）
Fixed generates an absolutely positioned element that is positioned relative to the browser window.
The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
(the element box behaves like the position is set to absolute, but its containing block is the window itself.) ）
The relative generates relatively positioned elements that are positioned relative to their normal positions.
Therefore, "left:20" adds 20 pixels to the left position of the element.
(the element box offsets a distance.) The element still retains its pre-positioned shape, and the space it originally occupies remains.
static default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
(the element box is generated normally.) Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element. ）
Inherit specifies that the value of the position property should be inherited from the parent element.
16. Z-index sets the stacking order of the elements. Can be used after an element is placed on another element.
17. CSS Floating:
The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.
Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.
18. The Clear property specifies which side of the element does not allow other floating elements.
19. Use the margin property to align horizontally:
The left and right margins are set to auto, which specifies that the available margins are equally allocated. The result is the centered element. (Tip: If the width is 100%, alignment has no effect.) ）
20, A{display:block;} Explanation: display:block-displaying a link as a block element allows the entire link area to be clicked (not just text).
21. Horizontal Navigation Bar:
There are two ways to create a horizontal navigation bar. Use inline or floating list items.
Both methods are good, but if you want the link to have the same size, you must use a floating

CSS Learning Notes