1. font properties 1.1 text font: font-family can put multiple font names as a "fallback" to save the system. If your browser does not support the first font, it tries the next one. The browser uses the first value it recognizes. * { Font-Family : "in the Microsoft YaHei", "Microsoft elegant black", "Arial", Sans-serif } * indicates that all text fonts are the same style 1.2 font size: If set to inherit represent inherit the parent element font size value. P { font-size : 14px ;} 1.3 word weight (thickness): font-weight is used to set the font of the word weight (thickness). Value Description normal default value, the standard thickness bold Bold bolder thicker lighter finer 100 to 900 to set a specific thickness, equivalent to the normal 400, and 700 is equivalent to bold the inherit inherit the parent element font weight value p{ Font-weight : Lighter } 1.4 text color 1.4.1 hexadecimal value - such as: # FF0000 preceding two figures represent the red, the middle two numbers represent green, the last two numbers represent Blue 1.4.2 a RGB value - such as: RGB (255,0,0) 1.4.3 color names - such as: Red 1.4.4 there rgba (255,0,0,0.3), a fourth value of alpha, the designated color transparency / opacity, it in the range of 0.0 to 1.0. P { Color : RGB (255,0,0) } P { Color : # FF0000 } 2. Text attributes 2.1 text-align: text-align Value Description left left justified Default right right alignment center center aligned ends justify alignment P { text-align = left : Center } 2.2 Decorative text: text-decoration Value Description none default. Text defined criteria. a line defined in underline text. a line is defined on the overline text. line-through line is defined through the text. Inherited values inherit text-decoration property of the parent element. P { text-Decoration : underline } used to remove a default tag underlined: a { text-Decoration : none ; } 2.3 line indent: text-indent the first line of a paragraph indent 32 pixels to the right: If the font is 16 pixels, 32 pixels to the right there are two indented font in P { text-indent : 32px ; } 3. background property background 3.1 background color: color background- div { background-color : Red } 3.2 background image: background-image, the local network pictures and pictures can div { background-image : URL ( "1.jpg") } 3.3 repeating background: background-rEPEAT rEPEAT (default): background image tile the entire page filled repeat-x: tiled background image only in the horizontal direction repeat-y: tiled background image only in the vertical direction no-repeat: Do not tile background image .c1 { width : 600px ; height : 600px ; background-Image : URL ( "1.jpg") ; background-REPEAT : NO-REPEAT ; } 3.4 BACKGROUND positions: background-position .c1 { width : 600px ; height : 600px ; background-Image : URL ( "1.jpg") ; background-REPEAT :REPEAT-NO; position-background : Center } Center centrally; 50% 50% are centered; 200px 200px located 200 pixels vertical 200 pixels lateral position; right top top right 3.5 abbreviation: background: Red URL ( "1.jpg") NO-right REPEAT top; use of background image a common case is that many sites will allow many small icon on a picture, and then to display pictures based on location. Reduce the frequency of image requests 3.6 Example: background does not move, other content may scroll up and down: HTML: <body> <div class = "C1"> </ div> <div class = "C2"> </ div> <div = class "C3"> </ div> </ body> CSS: .c1 { height : background-color:red } .c2{ height:300px; background:url("4.jpg") no-repeat center; background-attachment:fixed } .c3{ height:300px; background-color:green } 4. 边框 border 4.1 边框属性 border-width: 2px border-color: red border-style: solid Shorthand: border: 2px Red Solid; 4.2 border-style border-style, solid more commonly used. Value Description none rimless dotted dashed border dotted dashed rectangle dashed border solid solid border border-style: solid addition to the outer frame may also be uniformly set for a single setting a border style, as follows: border-right commonly used border- Top-style: Solid border-bottom-style: Solid border-left-style: Solid border-right-style: Solid border-Top-Color: Red border-bottom-Color: Red border-left-Color: Red border-right -color: Red Top-width-border: 2px border-bottom-width: 2px border-left-width: 2px border-right-width: 2px abbreviation: border-right: 2px Red Solid 4.3-RADIUS border with rounded corners to achieve the property of effect. The border-radius set to be longer or to obtain a high half circle. 4.4 display attribute value significance display: none HTML document element exists, but does not display in the browser. JavaScript code typically used for mating. display: block by default occupy the entire width of the page, if you specify the width of the set, with the margin remaining part will be filled. display: inline by displaying inline elements, then re-set the element's width, height, margin-top, margin-bottom and float property will not be affected. display: inline-block elements also has features that the inline elements and block-level elements. Example: <body> <UL> <li> mobile phone accessories </ li> <li> PC </ li> <li> Home Appliances </ li> <li class = "c1"> tour </ li> </ ul> </ body> ul { list- type-style : none / * cancel dot previous list * / } Li { the display : inline ; / * Li is a block-level tag, the list may be replaced by a vertical transverse element displayed by inline * / border-right : Red Solid 2px / * Add the right block * / } .c1{ border-right :none / * Last Unselect right border * / } 5. The the CSS box model margin (outer frame): the distance between the element and the element for controlling, spaced apart from the purpose of the viewing angle. Border (Borders): around the inner and outer margins content border. padding (inner fill): the distance between the content and the frame for controlling; the Content (Content): Content box, displaying text and images. 5.1 margin outer border .margin-Test { margin-Top : 5px ; margin-right : 10px ; margin-bottom : 15px ; margin-left : 20px ; } order abbreviated: right lower left .margin-Test { margin : 5px 10px 15px 20px ; } about the common center: the width of the intermediate browser .mycenter { margin : 0 Auto ; } common shorthand manner: a, for four sides; margin: 5px provide two, for the first - the second for left - right; margin: 5px 10px if provided three, one for the first, second for left - right, for the third; providing four parameter values, will be on - Right - lower - left order to act on the four sides; example: div nested inside labels a and b, a and b are inline tags, placed sideways here, b is a distance 200px. <body> <div> <a href=""> AAA </a> <B> BBB </ B> </ div> </ body> div> A { margin-right : 200px } within 5.2 padding filling .padding-Test { padding-Top : 5px ; padding-right : 10px ; padding-bottom : 15px ; padding-left : 20px ; } shorthand order: right lower left .padding-Test { padding : 5px 10px 15px 20px ; } common shorthand way: A, for four sides; padding: 5px provide two, one for the first - next, the second for left - right; padding: 5px 10px if provided three, one for the first, second one for the left - right for the third; providing four parameter values will be on - Right - lower - left order to act on the four sides; example: <body> <div> I div </ div> </ body> div { width : 300px by ; height : 200px ; margin : 5px ; border : 10px Red Solid ; padding:10px; }