Front-end Learning notes-CSS Starter posts

Say first: I am a rookie, one is all, formerly is now also.

Accounting elements in CSS and inline elements

Block-level element attributes:
Takes up a whole line, always restarts a row, and subsequent elements must be displayed on a different line.
Inline element properties:
and other inline elements appear on the same line.

What is known is that the inline and block-level elements can be converted to each other. tend to the modular construction of the Web page, later in-line conversion to block-level examples will be many.

html are listed as follows:
 div (document partitioning), article (article content), aside (accompanying content), audio (video playback), BLOCKQUOTE (block reference), canvas (drawing graphics), DD (definition of the item description in the list), DL (definition list), FieldSet (form element grouping), figcaption (graphic Information group header), figure (Graphic Information Group), footer (section end or footer), form (form), H1-h6 (title), Header (section header or header), Hgroup (header Group), HR (horizontal split line), NoScript (content displayed when scripting is not supported or disabled), OL (with sequence list), output (form output), p (paragraph), Pre (preformatted text), section (a page segment), Table (table), TFOOT (table footer), UL (unordered list), Vidio (video).

The inline elements are listed as follows:
B (Bold), big (large font), I (Italic), small (small font), TT (equal width), abbr (abbreviation), cite (reference), code (computer code text), DFN (definition Project), EM (accent), kbd (keyboard text), strong (Tone strong ), Samp (sample text), VAR (definition variable), a (link), BDO (element can override default text direction), BR (NewLine), img (image), map (image map), object (object), Q (Reference), script (define client script), span (Combination of inline elements), sub (subscript), SUP (superscript)
button, input (input), label (callout), select (Form Control), TextArea (text field).

Types of CSS Styles

Internal style sheet (<style>...</style>)

External style sheet (<link href= "Style.css" rel= "stylesheet"/>)

Inline style sheet (<p style= "..." ></p>)

Border Property

Border-width: Border width;

Border-style: Border style, (solid solid line, dashed dash, dotted dot line,)

Border-color: Border color;

border: Border width border style border color; (often abbreviated)

Common styles

background: background; border: Border;  padding: padding; margin: margin;

Text style: font-size: Text size (usually even, minimum general setting of 12px) font-family: Font; Color : text colors; line-hight: Row height; text-align: text alignment; text-indent: Text indent (2EM); Font-weight: Writing emphasis; font-style: text tilt; text-decaration: Text decoration (underline, underline, strikethrough) letter-spacing: letter spacing; word-spacing: Word spacing;

Background property

repeat: Duplicate background, default is the background image repetition, there is no-repeat (background image is not duplicated), repeat-x (The horizontal axis of the background on the duplicate), repeat-y (vertical background image repeat) 10px (X-axis), 50px (Y-axis) can also be negative. Center Top (horizontal, vertical, top), fixed (fixed on background, no matter how you drag the scroll bar, the background image is pinned to the appropriate position.) )

Background-size: Set the width height of the background graph;

Selector Selector

Class selector (class selector in CSS style encoding is the most commonly used, can be repeated calls, English dots can be named at the beginning);

ID selectors (in many ways, ID selectors are similar to class selectors, but there are some important differences.) Set id= "ID name" for the label instead of class= "class name"; the ID selector is preceded by the pound sign (#), not the English dot (.). ）

Child selector (There is also a more useful selector sub-selector, the greater than symbol (>), which selects the first generation of child elements of the specified label element. ）

Contains a selector (that is, a space to select the Descendants element under the specified label element. ）

Universal Selector (the most powerful selector, which uses a （*） number designation, which is used to match all tag elements in the HTML)

Pseudo-Class selector (it allows you to set a style for a label that does not exist in HTML (a state of the label)

Front-end Learning notes-CSS Starter posts