Some things about CSS and HTML

Css

Cascading Style Sheets CSS Comment format/**/HTML comment tag is <!--xxx-->   three ways to add a style: lower priority1 written in the element tag, inline style {<p style= "font-size:12px;" >xxx</p>} overrides the embed style and link style 2 The embedding style is in style and is written between the head. p{color:red;} with a style tag, the link style will not be loaded 3 link style is also between head, <link href= "Style.css" rel= "stylesheet" type= "Text/css" > 4 Write before other styles are not loaded @import URL (css/styles2.css)

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior. <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development). In fact, in summary, that is-the nearest principle (the higher the priority level from the Set element ).

CSS rule naming1.P {color:red;} 2.H1, H2, h3 {color:red;} 3. Write a rule for H3 h3 {font-size:10px;} The Line spacing label is Line-height There are three types of selectors: Context ancestor FellowSelector: descendant element selection SpaceSeparated (including the first generation of child elements); The first generation of child elements section>h2; close to fellow h2+p; General compatriots H2~p; * General distributionAll the tag elements in the HTML, p* Select grandson element, not child element. multiple label elements set the same style, use the group selector comma(,) ID and Class attribute selection, cannot be named with a numeric special symbol; class selector is a dot plus class name, only the label with that class is selected label plus class nameWrite a piece. multiple class names are placed in a single parenthesis, separated by spaces,Select an element that has two class names at the same time:. class name 1. Class Name 2ID selector with #. The difference between ID and class is that an ID can only be used once in an HTML document. Class can be used more than once, both of which can be used on any element. The URL (#clip) means that the target ID is in the current page. If there is only one # in the href attribute of the link, then clicking the link will return to the top of the page. <a href= "#" >back to top</a>Use the class toelements with different tag names apply the same styleBecome possible. You can assign multiple classes to an element, separated by a space between multiple class names, set multiple styles for an element at the same time, or you can assign a class to multiple elements. However, each element can have only one ID, and this ID can only appear once throughout the page. attributes have none and feature selection。 Property name Selection Img[title]{xxx} The label with the title property is selected, and the property value selector img[title= "Red" pseudo-class does not actually have a class attached to the tag in the markup. The actual non-existent label, which is a state of the label, is divided into user interface UI and structured pseudo-class UI based on state application style, link pseudo-class a:link,a:visited was previously clicked, a:hover Mouse Hover, the a:active is being clicked on without releasing. P:hover paragraph mouse hover when adding style: Focus pseudo class, E means any element e:focus focus E:t Arget link <a href= "#info" >vvv</a> target is an element style inheritance with ID info in the page, some CSS styles such as color support inheritance, border not supported.

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. When you add different styles to the same label, you use the corresponding style according to the weights, and the same weights apply to the style that is at the back, which overrides the previous style. This is the style cascade. The inherited weights are the lowest. to 0.1. p{color:red!important;} Set the maximum weight for the style, which is higher than the user's own style set in the browser.

Italic italic underline text-decoration:underline; strikethrough Text-decoration:line-through; paragraph indent text-indent:2em;2em is twice times the size of the text. The Paragraph line spacing setting is line-height:1.5em; The letter interval setting is letter-spacing:50px, word spacing word-spacing:50px; text and picture in block elements are centered text-align:center; display:block; Displays the inner element as a block-level element. Inline sets the block-level element as an inner element. Inline-block sets the element to inline block elements such as IMG input. Box model: The page element div is a box, the content can be text picture tag element, inside fills padding, margin margin, border border all have four direction top bottom left right. Block-level elements have the characteristics of a box model.

1. Border-style (border Style) common styles are: dashed (dashed line) | Dotted (point line) | Solid (solid line).

The width of the border-width (border width) can also be set to: Thin | Medium | Thick (but not very common), most often with pixels (px).

BORDER-BOTTOM:2PX solid red; Sets the bottom border only. padding fills can be divided into top, right, bottom, and left (clockwise). If the same as 10 or so the same as 20 can be written as padding:10px 20px; Margin is similar. The CSS layout model is built on the basis of the box model.

    Font-style:italic;    Font-variant:small-caps;     Font-weight:bold;     font-size:12px;     line-height:1.5em;     font-family: "Song Body", Sans-serif;

can be abbreviated as: (at least size and family)

Font:italic  small-caps  bold  12px/1.5em  "song Body", Sans-serif;

There are three types of elements in the Web page Layout Model：
1. Flow model: Is the default page layout mode, block element Top DownSequential vertical Extension Distribution width 100%; Internal elements from left to rightHorizontal distribution display.
2. Floating model (float): block elements display the set element floating float:left;
3, Layer Model (layer): Similar to the PS in the precise positioning of the operation, CSS position attributes to support the layer layout model, absolute absolute positioning, relative relative positioning, fixed positioning. left is used when the parent contains the block relative to its upper and lower positions, and the usual is the opposite. Absolute drag the element out of the document stream, and then use the property, such as left right, to absolutely position it relative to the parent containing block of its closest location property, if no such block exists relative to body, which is the browser window. Relative determines the offset of an element in the normal document stream by using the left property. The first element is generated in static mode and then moved relative to the previous position, and the position before the move is left intact. Fixed positioning, like absolute positioning, is dragged out of the document stream, not affected by document flow and drag scrollbars, but the relative movement of coordinates is the view window itself of the in-screen page. Reference is not a browser, can be set freely, relative to other elements of positioning: referring to the positioning element is a relative positioning elements of the predecessor element, and the reference element is relative, relative positioning element is absolute can use the top and other properties to offset positioning. Right and bottom are 0 words in the lower-left corner. The Length value unit setting has pixels, em, and percentages, both of which are relative positions. 90 pixels is an inch, text-indent the first line of text indents, and when the font-size is set to EM, the font-size of the parent element of P is calculated as the basis. Percentages are similar. Inline Element Center Text-align:center, block element: Fixed width block set left and right margin for auto implementation Center, indefinite wide block: Add Table tag, set Display:inline, Set position:relative and left:50%. Display:table;clear:both;As follows: Add Table tag: Add Table label (TBODY TR TD) to center element, set left and right Magin Center for table. Center element Set Display:inline parent tag text-align:center the implementation is centered. The parent element sets the float as well as position:relative and left:50%, and the child elements set position:relative and left:-50% are horizontally centered. Parent element Height-determined Single lineThe text is centered vertically: The parent element sets the height and Line-height heights to be implemented consistently. Parent element Height-determined Multiple LinesText picture blocky elements are centered vertically: Method 1: Insert Table (TBODY tr TD) and set Vertical-align:middle. Must be used in combination.  Method 2: Set the block element Display:table-cell; Vertical-align:middle. Implicit change display:position:absolute/float:left or right to set element width heightHTML

The purpose of CSS is to add a style to the HTML tag and set the page layout. The most commonly used HTML tags describe headings, paragraphs, links, and pictures . HTML5 a new set of structured tags for grouping related content labels to better standardize the overall structure of the page. These new tags include header,nav,article,section,aside,footer.

HTML tags and their properties http://htmldog.com/reference/htmltags

Block-level Tags: The default is filled with whole rows, stacked downward with each other.

HTML entity <blockquote>&ldquo;tianxiaodi&rdquo;</blockquote> result is "Tianxiaodi"

Inline labels: parallel to each other, only if the dimensions exceed the width of the line to wrap <a>...<em> to emphasize, the General browser uses italic notation. <strong><abbr><cite><q> span, BR, I, label, VAR, cite, code.

<abbr title= "As soon as possible" >ASAP</abbr>

Inline block Tag element: IMG input.

Block-level element features:

1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)

2, the height of the element, width, row height, and the top and bottom margin can be set.

3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.

Inline element Features:

1, and other elements are on one line;

2, the height of the element, width, row height and the top and bottom margin is not set;

3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.

Inline-block Elemental Features:

1, and other elements are on one line;

2, the height of the element, width, row height, and the top and bottom margin can be set.

HTML tag with head and body two sub tags, head contains meta and title . HTML comment tags are <!--xxx-->

Document flow: HTML elements flow from top to bottom of the page in the order in which they appear in their markup.

The display property of almost any HTML element is either a block or inline,table element with its own display property value.

Article label

Install Web Developer: View HTML CSS JS Tool >firefox Toolbar--add-ons--add-ons manager Search Web Developer installation.

Document Object Model--dom: Parent element, child element, sibling element, descendant element, ancestor element

Some things about CSS and HTML