CSS Authoritative guide notes (knowledge points summary)

First chapter CSS and documentation

1. Replace elements with non-replacement elements, replace elements such as IMG input, and most HTML elements are non-replacement elements.

2. Block-level elements and inline elements?, block-level elements automatically fill the content box of the parent element, the table is consistent with other block-level elements, and the only difference is that the table generates a marker, which is a small black dot. Block-level elements cannot inherit inline elements in HTML, meaning block-level elements cannot be nested inside inline elements, but block-level elements in CSS can inherit the style of inline elements.

3.link contains the following properties, rel: source; href: path; media: All (General browser support all, print, screen), and one property is title, generally not, but will be useful later, His main role is to allow the reader to choose the desired style, the browser has a view to control the CSS style, readers can choose the appropriate CSS style according to their own needs.

[email protected] must be in the first place. such as the @import URL (sheet.css) @import and link between the link and sometimes some style text is not used, but @import is bound to use, and can write a lot of @import?

Chapter II Selector

1. Each rule is divided into 2 pieces, one is the selector, and the other is the declaration block. Selectors and declarations can be grouped.

2. Linking 2 selectors together, you can select only the elements that contain these class names (the order of class names is not limited), such as "P class=" warning Urgent ">

"can be written as. Warning. urgent{}.

Class 3.4 Property Selector,                                                          ,         &N Bsp                          ,         &NB Sp    1. Simple attribute selector, such as: h1[class]{}, img[alt]{}, A[href][title]                / nbsp                    2.? Specific property value selector such as: h1[class= ' name ']{}                           nbsp                          ,         &NB Sp;3. Based on a partial attribute value selector such as: p[class~= ' warning ']{}  img[title~= "page"]   represents all p elements that contain the word ' warning '.                       &NBSp                          ,         &NB Sp                        ?p[class^= "Bar"]{} represents all elements in class that start with bar and nbsp                          ,         &NB Sp                  p[class$= "Bar"]{} represents all elements in class that end with bar       &N Bsp                          ,         &NB Sp            p[class*= "bar"]{} means all elements in class that contain bar strings                                             4. Depending on the particular property value selector such as: *[lang|= "en"]{}   represents all elements in the lang attribute that begin with en, which generally match the language value.

4. The child selector can be expressed in >, but here is a note, suppose a DIV has 3 p, if written div>p+p{color:red}; display result is the second and the third P will show red, if only want the second P show red must be written as a Div >p:first-child+p{color:red}

5.a element If it is a link, be sure to take a:link{}, because if not, it will affect the style of other a elements in the document, so it is best to use: link. : Link and: Visited are static pseudo-classes, generally used once and no longer change the original document style, and: Focus:hover:active? belongs to the dynamic pseudo-class.

6. Set the first child element: First-child, set the first letter: First-letter set the first line: First-line?

Chapter III Structure and CASCADE

1. Special inline style specificity is 1 0 0 0 ID 0 1 0 0 Class class Property value 0 0 1 0 Element label attribute value 0 0 0 1 wildcard character 0 0 0 0, note that 0 0 1 0 is more specific than 0 0 0 13. The attribute value of id= "KK" is 0 1 0 0, and the property value of [id= "KK"] is 0 0 1 0, which is also to be noted. Pseudo-class elements have no specificity.

2. Importance? The document will be there! Important put in a group, and put No! Important in the other group, there! The level of important is always higher than no! Important, so to apply a CSS style, the first comparison has no importance, followed by the comparison of particularity.

3. Weight Reader Important Statement > creator IMPORTANT Statement > Creator General statement > Reader General statement

4. Cascade is actually the order of the simple point is the back will cover the previous style (other such as importance, particularity, weight, source consistent case). Here is a case where the pseudo-class is ordered according to the order of: Link:visited:hover:active, because these four are 0 0 1 0; If you click on a link that is not visited, it will trigger: link:hover:active these 3 styles, What we want to get is: The active style, this time because of the order reason, will appear: The active style, if does not follow this sort, may appear: hover or: Link's style.

Fourth chapter value and unit

The value of 1.em ex px Em will change as the value of the element px changes. Ex is the height of the small write x in the font used.

2.em default to 16px;em will inherit the font size of the parent element?

3.rem is new in CSS3, it is based on the font size of the root, has a relative size and absolute size characteristics.

Fifth Chapter Font

1. In font-family, when a space appears in the font name, such as new time or a symbol such as $, and the font name is a keyword, you need to enclose its table in quotation marks?

2.font-weight inside 100-400 may display the same effect, 500-600 display effect may be the same, 700-900 display effect may be the same.

3. In Fon-size, the ratio of CSS1 to top 2 connected font sizes is 1.5 (UP) or 0.66 (down), for example, when the medium is set to 10px, the value of larger is 15px;? But in fact, the default zoom factor is 1.2 times times.

4. In the font settings, the first 3 values can be replaced arbitrarily, but the position of the font-size and font-family cannot be changed, and must have, if there is line-height, it must be written behind the font-size.

5.font-style font-varient font-weight font-size line-height font-family;?

[email protected] has been deleted in css2.1, @font-face{font-famil y; Microsoft Jacob Black; Src:url (www.baidu.com)}? The meaning of this is to download the Microsoft Ya-hei font from the URL's address.

Sixth Chapter Text Properties

? 1.text-index this attribute can only be applied to block-level elements, not to inline elements. This property can be inherited.

2.text-align This property is also inline content that is applied to block-level elements.

3.line-height all elements of the scope (except for replacement elements). In fact, line-height only affects inline elements and does not affect block-level elements. The gap between the line-height and the font height is the line spacing. When Line-height is applied to block-level elements, it represents the minimum distance between adjacent baselines. When the text is defined in an inline element, the baseline distance is higher than line-height, so line-height just defines a minimum distance between the text baselines, not an absolute value

4. The inline box is the content box of the element (in the absence of other conditions), and the line-height can increase or decrease the inline box by increasing or decreasing the spacing between lines.

5. For block-level elements, the line spacing is equal to the value of line-height. The line-height is set in relation to its own font-size. Assume

, this time the value of Line-height is 20px.

6. Line-height can inherit, in inheritance it is best to be set to a scaling factor, such as line-height:1.5, so that its children inherit 1.5 times times the height of the child element itself, if set to Line-height : 1.5e (assuming 20px), the child element inherits the value of the parent element, and if the child element font-size is more than 20px (for example, 25px), the word is partially overlapped.

7.vertical-align is only scoped inline element and replacement element, cannot inherit? When his value is bottom, the line is aligned to the point where the value is Text-bottom, the bottom of the text is aligned. Its value can also be numeric (such as 5px), which indicates that the height of the 5px is increased relative to the previous alignment. You can use it when setting up the picture and text alignment.

8.letter-space will not be affected by text-align:justify, and Word-space will be affected by text-align:justify.

9.white-space:normal pre equivalent, if set to pre, his format will follow the content format we entered, without change.

The seventh chapter is based on visual formatting

1. The element box represents the contents of the containing element, margins, padding, and edges. The element width refers to the distance from the inner margin to the inner margin.

2.padding has no auto properties, only the width and left and right margins have auto properties.

3.margin-left and Margin-right are set to auto, they will be centered horizontally, but if margin-top and Margin-bottom are set to auto, they will default to 0, which means they will not be centered vertically. The only way to keep the block vertically centered is margin-top:25%.

The 4.em box represents the box in which the font is formed (each word has its EM box), and sometimes the glyph exceeds the EM box

5. The Content box contains all the EM boxes.

5. For non-replacement element line-height height is the height of the inline box, margin, padding, border does not affect the height of non-replacement elements. For the replacement element, the height of the content box is the height of the line-height. The height of the Replace element inline box is equal to the height of the content box + margin + padding + border

6. The replacement element has no line spacing because it does not wrap, but line-height can change its height.

7. The line box is studied as a row object, and its height is the highest and lowest of many inline boxes within it.

Eighth chapter inner margin border and margin

1.border-color also has 4 values, its usage and margin are the same, if there is no color, the default is the foreground color. You cannot set more than one style for it, because this causes it to ignore the style.

2. Transparent frame, can be used border-color:transparent.

3. This is particularly true, if the border attribute is set for a non-replacement element in the row, if the upper and lower (top,bottom) width is sufficient for the Assembly to cover the other content, the left and right 2 sides will not overwrite other content even though the width is very very large. This time is somewhat similar to the Padding-left or Padding-right style.

4.padding-left, Padding-right, if set in percent, is set according to the width of the containing block.

Nineth Chapter Colors and backgrounds

1. Use the background:red URL ("Images/2.png")? If there is a gap in the background picture, you will see red.

2.background-position applies to block-level elements and to replacement elements. 4 attribute values top button left right center, such as Background-position:top right;background-position:0% 0%, if used as a percentage, both for the picture and for the element, Represents the center point of the picture and (the rectangle aligned with the four corners of the image), example: The center of the Superman image is run on a yellow rectangle, and when set to 0% 0%, the center of the image is aligned with the upper-left corner of the yellow. 100% 100% When the image Center is aligned with the lower-right corner of the yellow picture. Assuming only one value is provided, the second value defaults to center. If it is a numeric value, it means how much horizontal offset the upper left corner of the relative element is, and how much it is offset vertically.

?

Tenth chapter floating and positioning

1. Floating elements are not merged with the outer margins of the surrounding elements. If the floating element is a non-replacement element, you must give him a width value and a height value.

2. Floating elements automatically generate a block-level element, regardless of whether the element was preceded by a block-level element or an inline element.

3.1 The left and right borders of a floating element cannot exceed the left and right padding of the parent element.

3.2 The left outer border of the floating element must be behind the right outer border of the previously floating element, unless a newline occurs?.

3.3 Left floating elements and right floating elements do not cross each other

3.4 The top of a floating element cannot be higher than the top of its parent element padding,

3.5 The top of the floating element cannot be above the top of the floating element before it.

The top of a 3.6 floating element cannot be higher than the previous floating element that contains the fast top.

3.7 Floating element If there is a floating element a before, its left margin cannot exceed? A element contains the right side of the block.

3.8 Floating elements should be as high as possible.

3.9 left floating elements as far as possible to the left, there are floating elements as far as possible to the right.

4 The floating element can exceed its own height of the containing block, so it has been previously emphasized that it cannot exceed the left and right padding of its containing block, but the omission of the description cannot exceed its padding.

5,. If an element is a floating element, you can choose to turn the floating element into a floating element if you want it to include a block that calculates the height of the floating element.

A 6 negative margin can be a floating element that exceeds its containing block element.

7. When the inline box and floating element intersect, its border, background, contents are above the floating element, if the block level element and the floating element intersect, its background and border are under the floating element, but the content is above the floating element.

8. Floating element If the vertical margin is set to Margin:auto 0, it will be centered in the vertical direction.

11th Chapter Table Layout

1 CSS internal table elements have no margins

2 the height of each row in the table can be set to different.

? 3. If the structure is not perfect, HTML will be automatically added to make the structure perfect, such as missing table, then the rendering will be automatically supplemented

4 border-sapcing can be used to control the gap between cells.

5 empty cell can be clear cells?

12th Chapter? List and build content

1. System font keywords. Caption (title control) icon (operating System icon) menu (drop-down menu) message-box (dialog font) small-caption (Small Control label font) status-bar (window status bar font)?

? 2. List-type-image can add pictures in front of UL or OL

3 change List-style The distance of the black point can be set with ul{margin-left:40px}, the default user agent is the value of 40px?

4 list-style-position set to inset or outside

5. Counter for similar to 1.1 1.12.?

13th Chapter user Interface style 14th? Non-screen Media

CSS Authoritative guide notes (knowledge points summary)