HTML, CSS knowledge points, interview development will need--no.2

No.2 CSS

1. Selector type

Selector types include: Type, class, ID.

2. Referencing an external CSS file

Using the link element, add the rel and href attributes: <link rel= "stylesheet" href= "Main.css"/>.

3. Reset the browser's CSS style

(1) Why reset: Each browser has its own default selector style settings, such as the margin and padding of the element. In order to maintain the unity of the site, we need to reset the CSS style.

(2) How to reset: Add the following CSS style to the defined CSS file, it needs to be placed in the front of the CSS file.

/*http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 license:none (public domain)*/html, body, Div, span, applet, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,A, ABBR, acronym, address, BI  G, cite, Code,del, DFN, EM, img, INS, KBD, Q, S, Samp,small, Strike, strong, sub, SUP, TT, VAR,B, u, I, CENTER,DL, DT, DD,  OL, UL, Li,fieldset, form, label, Legend,table, Caption, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, Embed, figure, figcaption, footer, Header, Hgroup, menu, nav, output, Ruby, section, Summary,time, mark, audio, video {margin:0;padding:0;Border:0;font-size:100%;Font:Inherit;vertical-align:Baseline;}/*HTML5 display-role reset for older browsers*/article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section{Display:Block;}Body{Line-height:1;}OL, UL{List-style:None;}blockquote, Q{Quotes:None;}Blockquote:before, Blockquote:after,q:before, Q:after{content:"';content:None;}Table{Border-collapse:collapse;border-spacing:0;}

4.CSS Cascade

(1) Selector priority: Type<class<id. For example, define the style of the HTML element <p id= "Food" >...</p>:

{background: green;}  {background: orange;}

Even though the type selector is placed behind the ID selector, the ID selector weights are higher than the type selector.

(2) Associative selector: The combined selector should be read from right to left and the rightmost selector as the primary selector.

(3) Case study:

{    background: Brown;}  {    background: yellow;}

The first binding selector, the primary selector is the type P, and all p elements under the class Hotdog element are selected. The second binding selector, the primary selector is an element of type P and the class type is mustard, and the result is an element of type P and class mustard that is selected under Class Hotdog.

(4) Reduce the weight of the selector method: Set the style through a multi-level class. The cases are as follows:

{    font-size: 16px;}  {    background: red;}  {    background: green;}

5. Color

(1) Color representation: keywords, hex tags, RGB, HSL values.

(2) Keywords: direct use of keywords to represent color, such as red, blue and so on. Keywords can be consulted: http://www.w3.org/TR/css3-color/.

(3) 16 binary: If it is a 6-bit mark, the first two represent red, the middle two is green, and the last two represent blue.

(4) RGB: Three numbers for color, three numbers for red, green, blue values, respectively. For example: Background:rgb (128, 0, 0).

(5) RGBa: Similar to RGB, with a more transparency parameter, a for alpha transparency, and a range of values from 0 to 1 for transparency.

6. Length Units

(1) Absolute length: expressed in pixels, PX is the unit.

(2) Relative length: percentages percentage, e.g. width:50%.

(3) Em relative length unit: relative to the text within the object font-size, if not set font-size is relative to the browser font default size, often used for spacing, margin and padding.

The 7.css3 property uses

(1) Prefix guaranteed compatibility: Before CSS3 became the standard, many browsers started to support the CSS3 property, but because CSS3 was not standard at the time, operators were supported by adding prefixes. For example, the setting of the Box-sizing property:

{    -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;     box-sizing: content-box;}

(2) each operator prefix:

Chrome (Google browser):-webkit-safari (Apple browser):-webkit-firefox (Firefox):-moz-ie (IE):-ms-opera (open Gate Browser):-o-

HTML, CSS knowledge points, interview development will need--no.2