Master css-Note 1 basics

The first part. Basic Knowledge

Chapter1

All the sample code in this book can be visited at www. cssmastery. com/www. friendsofed. com.

Named classes and IDs: Use lowercase, using-hyphens.

Micro format: A set of developer-developed sets of naming conventions and tagging patterns that can be used to tag people, places, or dates. In short, a set of naming rules.

DOCTYPE currently has two styles: strict (strict) and transition (transitional). The transition allows the use of deprecated elements and is strictly disallowed.

Browser mode: Standard and promiscuous modes (quirks mode). In standard mode, the browser renders the page according to the specification, and in promiscuous mode, the page is displayed in a more relaxed backward-compatible manner. Mozzilla and Safari also have a third mode: "Almost standard mode", there are only a few subtle differences in the way the table is processed.

DOCTYPE does not exist or is incorrect in form, causing HTML and XHTML documents to be rendered in promiscuous mode.

Chapter2. CSS Selector

2.1 Commonly used selectors:

Type selectors (such as P, H1), descendant selectors (such as BLOCKQUOTE p), ID selectors (#id), Class selectors (. Class).

Use a class or ID for their ancestors, and then locate them using the descendant selector.

Pseudo-Class:: Link and: Visited are called linked pseudo-classes and can only be applied to anchor elements. : hover,: Active and: Focus is called dynamic Pseudo-class and can theoretically be applied to any element. IE7 Ignore: Active and: Focus.

By connecting pseudo-classes together, you can create more complex behaviors, such as implementing different rollover effects on already visited and unlinked links, A:visited:hover, a:link:hover.

2.2 Universal Selector: *

2.3 Advanced Selector//ie6-not supported

If the browser does not understand a selector, the entire style is ignored. However, you should avoid using these advanced selectors on elements that are important for site functionality or layout.

Sub-selectors and neighboring sibling selectors:

The child selector selects only the immediate descendants of the element, such as #nav>li. ie7+ support, but there is a bug in the IE7, and if there is an HTML comment between the parent and child elements, there will be a problem. In ie6-, you can set all the Li styles through #nav li{}, and then overwrite the style with #nav Li *{}.

Adjacent sibling selector: used to locate an element after an element under the same parent element, such as h2+p. If there is a comment between the target elements, IE7 also has a bug.

Property selector:

You can find an element based on whether a property exists or the value of the property.

Select whether an element has a property, such as: Select an element that has the title attribute acronym can be written as Acronym[title]{},acronym[title]:hover, acronym[title]:focus{}.

Based on one of the attribute values of the element: a [rel = "nofollow"]. ie7+ support. This can also be used [rel = "nofollow"] and this uses [title].

If the attribute has more than one value, the property selector allows the element to be found based on one of the attribute values: a[rel~= "Co–worker"].

Pseudo element selector:

Like p:first-letter{}, add a special style to the first letter of the P element;

Like p:first-line{}, add a special style to the first line of the P element;

such as P:before{content:url (logo.gif);}, adding content before the P element;

such as P:after{content:url (logo.gif);}, adding content after the P element;

Stacking and particularity:

Cascade: There are several ways to find the same element, and CSS handles this conflict through a process called cascading. Cascading assigns an important degree to each rule. Importance in large dimensions: User styles labeled!important > Author styles labeled!important > Style written by site developers (author style) > Browser user customizations (user styles) > Browser style sheets.

Importance in small dimensions: determines the order of rules based on the specificity of the selector. Particularity: Special selector > General selector. If the specificity of the two rules is the same, then the rule after the definition takes precedence.

The style (author style) written by the site developer, in-line style priority > others. The ID selector > class, Pseudo class, and property selector > type selector and pseudo element selector (neighboring sibling selectors, sub-selectors are not considered as priority objects).

Inherited:

Descendants of an element that applies a style inherit certain properties of the style, such as color and size. IE and netscapes have a bug in inheriting the table font size.

Any style that is applied directly to an element, including the browser's default style, always overrides the inherited style (since the particularity of the inherited style is empty).

2.4 Plan, organize, and maintain style sheets (how to manage code)

It is recommended to use a single CSS inline style sheet. However, it is recommended that you split the code within this style sheet. Start with/* and annotate with */results.

Design the structure of the code:

The most common rule/*group general styles-----*/: Body style, global reset, links, headings, other elements, etc.

Auxiliary Styles/*group Helper Styles-----*/: Forms, notifications and errors, consistent entries.

The page structure is/*GROUP page structure-----*/: Title, footer, and navigation; layout; Other page structure elements.

Page Component/*group Page Components-----*/: individual pages.

Finally, cover the/*group overrides-----*/: Use a large comment block with a uniform style to separate each part.

Use annotations for self-alerting: @colordef/@todo/@bugfix/@workaround, for example:/* @todo: Just write some words to remember something */.

Chapter3 floating, positioning and box models

3.1 Box Model Overview

*{margin:0;padding:0;} Do not set this.

The box model of ie6-is different from the box model in the standard, and avoids this problem: instead of adding an inner margin with a specified width to an element, try adding padding or margins to the element's parent or child elements.

Margin overlay (vertical margin of a block box in a normal document flow): When two or more vertical margins meet, they form an outer margin and are equal to the larger of the two height of the margin where the overlay occurs. Two element positions can be arranged up or down, or an element enclosing another element. It is also the same element: an empty element with an outer margin without Borders, in which case the top margin and the bottom margin come together and overlap; even if this happens, it will overlap when another element is encountered.

3.2 Overview of positioning (position)

Display:none does not occupy space in the document and does not display.

3 positioning mechanisms in CSS: normal flow, floating, and absolute positioning.

Block-level box (Display:block): Margin overlay, arranged vertically from top to bottom.

The inline element (inline box Display:inline) feature allows you to set the internal and external margins, borders, but not the width of the horizontal direction. The settings in the vertical direction are not displayed. A horizontal box formed by a row is called a row box, the height of the row box is large enough to hold all the inline boxes, or you can set the row height for the row box. The size of the inline box can be modified: row height, horizontal border, horizontal inside and outside margins.

Display:inline-block elements: Ability to set width, height, vertical and horizontal margins and vertical and horizontal padding, and horizontal alignment. ie8+ support.

Anonymous block Box: When you add some text to a block-level element's switch, it is treated as a block-level element. You cannot apply a style directly to it. But you can also use: first-line pseudo-element selectors.

Relative positioning position:relative: relative to its own position changes, but the original space still exists (and will still overlap), will overwrite other boxes, Left/top/right/bottom, the default z-index is 0;

Absolute positioning Position:absolute: Out of normal document flow. The position is set relative to the closest positioned ancestor element. If none, the relative canvas or HTML element (the initial containing block). There is a bug in ie6-.

Fixed position position:fixed: an absolute positioning, out of normal document flow, relative to the viewport (viewport). Ie6-not supported, IE7 partial support.

Normal document Flow position:static.

Floating float:left/right: Out of normal document flow, flowing left and right to the outer edge touching the edge of the containing box or another floating box. The box behind the floating element behaves as if the float does not exist, but the contents of the box are affected by the floating element, and the 妤 marquee is shortened to make room for the floating element.

Clear floating Clear:left/right/both/none: When you clean an element, the browser adds enough margin to the top of the element until it drops below the floating box.

Using the overflow overflow:hidden/auto/visible (default)/scroll:hidden/auto property value has a side effect that automatically cleans up any floating elements that are contained.

Use pseudo-classes: after and content "."; Height:0;visibility:hidden;display:block;clear:both; to clean up. Ie6-not supported.

Use JS.

Master css-Note 1 basics