ID selector: #id {} ID is unique, not repeated class selector: .class {} tag selector hp input ... child selector: .food> li greater than symbol (>), for selecting only specified the first-generation child element tag element descendant selectors: .food li universal selector: * {} matches all html tag element packet selectors: h1 of, span, Li {} pseudo-class selectors: Example: a: hover { color : Red ;} -> mouse-over state set font color red; : link / * not visited link * / : visited / * has visited link * / INPUT: focus {} select obtain focus (cursor) form right label value 1, option character class value 10, ID of a weight of 100 selectors; inline style style weight 1000; succession or 0 * weight change pattern weight: Important >> P! { Color : Red Important! ;} weighted overlay: Compound picker weighted overlay; weights are superimposed, no carry (when the same weight value): laminate is in html file for the same element can have a plurality of css style exists, when the same weight style exists, will be determined according to the order of the front and rear css styles, it is the rearmost css style is applied. Inheritance: Some Styles sub-tab will inherit the parent label, text- font- line- color title tag will not inherit the parent element font size; A label will not inherit the text color of the parent element; Priority: inline style sheets ( internal tag)> embedded style sheet (current file)> external style sheet (external file) text: font-Family: ""; / * set the font * / font-size: 6px; / * set the text size * / Color : Red; / * set the text color * / font-weight: Bold; / * set the font bold * / 400,700 font-style: Italic / * italic * / text attributes ligatures, text size font will be written; the rest do not write to a default complex wording: font: style weight size / height family text: text-Decoration: underline; / * set the text underlined * / ; none / * no decorative thread * / text-indent: 2em; / * indent * / line-height: 2em; 20px / * line spacing (line height) * / Letter-spacing: 10px; / * character spacing * / Word-spacing: 10px; / * letter spacing * / text-align = left: centen; / * block Chinese elements present, center the image * / .oldPrice { text-Decoration : line-through ;} strikethrough Example: <p> List: <span class = "oldPrice" > 300 </ span> yuan price: 230 yuan </ p> Price: 300 yuan price: 230 yuan BACKGROUND: background-Color (transparent transparent ) elemental background color | background-image into image background image background not hold open the box width and height | background-REPEAT-nO REPEAT Do not tile; REPEAT tile; tiled background image repeat-x repeat-y, respectively, and cause image only repeated in the horizontal or vertical direction, no-repeat an image tile is not permitted in any direction | background-position: nouns (left; right; center; top ) xy write only one parameter, the second parameter default vertical change positions in the background image; exact coordinates xy write only one parameter, the parameter for the x-coordinate, perpendicular to a second default parameter; may be used in combination | background-Attachment: scroll (scrolling); fixed (fixed, offset position background image positioned bACKGROUND reference non-box size to the size of the browser whether the reference) as the background image is fixed or the rest of the page scroll. Composite wording: background: The background color background picture tiled background address background image background image scroll position Translucent background background: rgba (0,0,0, .3) ; last parameter alpha (transparency), ranging between 0 and 1, can be used instead .3 0.3 profile: draw a line on the surrounding elements located border peripheral edge, can play a role in highlighting elements Outline setting all profile properties in a statement. outline-color set color of the outline. outline-style styled profile. outline-width of the set width of the outline. Category elements: in the CSS, html tag element is generally classified into three different types: block elements, inline elements (also known as the line element) and inline block elements. Common block element has: display: inline; block transfer inline <div>, <p>, <h1> ... <h6>, <ol>, <ul>, <dl>, <table>, < address>, <blockquote>, < form> conventional inline element has: display: block inline switch block <a>, <span>, <br>, <i>, <em>, <strong>, < label>, <q>, < var>, <cite>, <code> conventional inline block element has: display: inline-block to block inline <img>, <input> block-level elements: display : Inline block transfer block 1, a new line begins, and the subsequent elements are also separate line 2, the element height, width, line height and the top and bottom margins can be set. 3, in the case where the width of the elements is not provided, is the (same width and the parent element) 100% of the parent container itself, unless a set width 4. 3, the width is the width of the element that contains text or images, immutable 4. receiving only text or other inline elements linking the block elements: display : inline-block disposed inline block 1, and the other elements are on a single line; 2, height, width, line height, and a top margin and a bottom element can be set. Box Model: Margin (margins) - clear the area outside the border margins is transparent (allowing block-level box horizontally centered). Border (Borders) - around the inner and outer margins content border. Padding (padding) - clear the area around the content, padding is transparent. The Content (Content) - the contents of the box, text and images border: Border Each frame has three aspects: width, style, and color Example: P { border : 2px dotted #ccc ;} border-width: 2px; border width border-style: solid; dashed (broken line) | dotted (dotted line) | solid (solid lines) border-color: Red; color - the border color values transparent. This value is used to create an invisible frame has a width of complex wording: border: width style color border-collapse: collapse merge adjacent borders (only in the form) of a block element, the width is not set, this block element disposed about padding value, the box will not be softened. padding: padding Example: div border-RADIUS-Top-left, border-Top-right-RADIUS, { padding : 20px 10px 15px 30px ;} on the right- botton- left and right top- left; 5px 10px vertically 5, 10; on the left and right 510 5px 10px 20px 20 is margin: boundary padding in the frame inside, margin outside the border. The easiest way to set the margins is to use margin property. Merge adjacent vertical margins of block elements: possible only to add a margin value box nested block elements collapse vertical margins: 1. set the border element to the parent. 2. Set the margins to within the parent element. 3. overflow: hidden; rounded corners: border-RADIUS: length (or the percent); border-bottom-right-RADIUS and border-bottom-left-radius box shadow: Box-Shadow: H-V-Shadow Shadow Blur spread color inset; Shadow-Box: 0 2px 3px 3px RGBA (0,0,0, 0.1); Color RGBS (translucent) text shadow: text-Shadow: H-V-Shadow Blur Shadow Color Layout Model: 1, flow model (Flow) 2, float model (the float) . 3, the model layer (layer) a. flow (flow) is the default page layout mode. That page in the default HTML page elements are based on the flow model of distributed web content. 1. The block elements are sequentially extending from top to bottom in a vertical profile in which the element comprises, as in the default state, the width of the block elements is 100%. In practice, the element will occupy the position of block in rows. 2. Distribution inline elements are displayed in horizontally from the left which contains the element. b. floating (float) allows massive elements side by side any element can float, the float having a similar row within the block elements of the characteristic block elements no width, the default parent, after addition of floating size based on the content of setting Float, and Levitate in the above general block element (marked off), the floating box does not retain the original position only affects the flow behind the standard floating box, does not affect the front of the standard flow parent element arranged vertical position, the inner sub-element arrangement to take a floating position around Clear float :( parent no cassette stage height; float the child box; Effect layout below) selector{ Clear : Property Value ;} left; right; both (right and left sides simultaneously) Additional labeling: a floating element added to the end null tag (block-level element as required) , such as adding <div style = "clear: both "> </ div>, or other labels (e.g. <br /> etc.) parent added overflow property, hidden (hidden overflow); Auto; Scroll .clearfix: After cleared pseudo-elements (parent class name added clearfix) .clearfix: After { Content : "" ; the display : Block ; height : 0 ; Clear : both ; visibility : hidden ; } .clearfix { / * IE6, proprietary. 7 * / Zoom * : . 1 ; } double dummy elements clear float (parent class name added clearfix) .clearfix: before, .clearfix: After { Content : "" ; the display : Table ; } .clearfix: After { Clear : both ; } . clearfix { * Zoom : . 1 ; } parent box has a height, need not be cleared; Clear float, according to the automatic detection of the parent sub-height of the box; parent high degree, does not affect the flow of the following criteria (c) layer is an image layout model like. as a very popular software PhotoShop editing layers, each layer can pinpoint operations, but in the field of web design, due to the activity of the page size, layout layer could not be favorable. However, for topical use on the page layout or layer has at its convenience. = + Side positioned offset positioning mode Positioning mode: Floating off standard: absolute positioning, fixed positioning off standard element characteristics: the line width and height of the element can be disposed directly; block-level parent element is not the default width, 0 default width and height, width and height distraction contents 1, absolute positioning ( position: absolute) no parent or no parent element is positioned to the browser as a benchmark. Positioning the parent element, parent positioned to recently (ancestor) a reference element is absolute positioning, marked off, not occupy the original position of the child must parent phase 2, the relative positioning (position: relative) reference to their original position movement; to retain its original position (the captive standard) Example: position: relative; Top: 100px; ....... . 3, fixed positioning (position: fixed) to a visual browser window () as a reference off standard, not the position of the fixed position of the right cardiac Version: browser half the width --left50%, margin-left :( width of the box half core part) 4, static position: static; targeting default offset: vertical and horizontal center: Inline elements (text, pictures, etc.), the center line of the horizontal block element to its parent element to -> centered text-align: center block element -> fixed width (fixed width provided) block centered about margin "is" auto " -> variable width block centered 1. Add table tag: using a tag table length --- adaptive i.e. its length does not define the default length of the parent body element (its length table in accordance with its length determined within the text), thus can be seen as a block element of a predetermined width, and then using the method of bulk margin of a predetermined width centered added tag table, the left and right margin setting value Auto 2. set display: inline method: similar to the first display line to the type element attributes set wide adventitious element 3. set position: relative and left: 50%: by using relative positioning mode, the offset 50% of the elements to the left, i.e. to achieve the object of the centered vertical line of text determined by the height of the parent element the method is highly consistent straight centered achieved by setting the height of the parent element and the line-height (height:. height of the element, line-height: As the name suggests, line height (line spacing) In the text refer to the distance between the baseline and the row between rows) when the length of the text is greater than the width of the block, the block will be from the content
Daily Record, engage in active practice.