CSS Common Properties

# # # CSS Common Properties
-Color:red/rgb (255,0,0)/#f00;
+ Note that if you have a link, you must set the color of the font in a link, and set the font color in the a link outside;
-font:400 14px/28px "The song Body Microsoft Ya Black";
+ font-weight:400; bold->700;
+ font-size:14px;
+ line-height:28px;
+ font-family: "Song Body"
-Background:url ("relative address") No-repeat left top red;
+ Background-image:url ();
+ background-repeat:no-repeat; Repeat-x; Repeat-y;
+ background-position:0 0; left top;
Note: The sprite in background (sprite chart), mainly through the modification of position and height to show the picture;
-whether the font is tilted
+ font-style:italic tilt/normal;
-Underline and strikethrough
+ Text-decoration:line-through; Delete line;
+ Text-decoration:none; Remove the underline;
+ text-decoration:underline; add underline;
   
Selector in # # # CSS:
-1. Tag Selector: DIV p ul li dt dd em i u del strong b input label from table
+ Disadvantage: can only carry out the common operation, can not be personalized operation;
-2.class selector and 3.ID:
+ '. Class name ', the same page can have countless same class names;
+ ' #id名 ', the same page can have only one ID name; (ID name cannot be duplicated)
+ In the real development process, class is used to set the style, ID is used to get the element;
```
<div class= "Div1 div2 div3" id= "Div1" ></div>
```
-4. Descendant selector: Div p (the P-elements of the descendants are selected under the div container)
-5. Sub-selector: div > P (select Son under Div container); compatible with ie7+;
-6. Intersection selector: div.div1
-7. Set selector: div,p
-8. Wildcard character *: represents all elements;
-9. Sequencer selector: compatible with ie8+;
+ div > P:first-child
+ div > P:last-child
-10. Next Brother selector ul li+li{} compatible ie7+

# # # Development of popular browsers
-Chrome
-Ie7~11
-Firefox;
   
Inheritance and layering of CSS # # #
-Attributes that begin with a font are inherited; line-height
-Color can inherit
-text at the beginning can also be inherited, such as text-align;

# # # CSS Weights
-!important weight infinity; (use less for good)
-The weight of the ID is greater than the weight of class;

# # # CSS Box model
-CSS box model consists of 5 parts:
+ content of wide-height +padding+border+margin;
-center of single-line text: height = line-height
-Multiple lines of text centered, padding and line-height
-padding:
+ padding is the inner margin
+ padding color and content of the same color, background-color filled with border within the color;
+ padding is a composite value
padding:30px; ->pl30; Pt30;pr30;pb30;
padding:20px 30px; Up and down for 20px or so 30px;
padding:10px 20px 30px; 10px around 20px 30px;
padding:10px 20px 30px 10px; Upper right down left;
        
If the padding:30px is now set;
Set padding-left:10px again;
What are the final values?
Left 10px; The others are 30px;
-Margin: Outside frame
-border:
+ border:1px solid #000;
+ Border-width
+ border-style:solid (solid), dashed (dashed), dotted (point)
+ Border-color
# # # Inline elements and block-level elements
-the P tag is a text label, but it can be used as a container, and the P tag must not be placed in a div; P block element; he has a monopoly on one line;
-text element: p span a i em u b strong img
-Container level: div li dt dd H class (not recommended)
-In addition to P, all text elements are inline elements;
-All container-level elements, which are block elements
-Mutual transformation of elements in blocks and in-line
+ Display:inline; In-line
+ display:inline-block;//inner block;
+ Display:block; Block
-About positioning: most of the cases, suggested: Father Shangzi (father: relative positioning, son: absolute positioning)
-about how to break out of document flow
+ Floating float:left; Float:right;
+ Absolute positioning Position:absolute;
+ Fixed positioning position:fixed;
+ Focus: 1) parent Shangzi 2) within the line element a little out of the document flow, you can set the width of the high;
+ Note: Inline elements, once out of the document flow, although can be set wide, but if not set wide, it will default to the same width as the content, and block-level elements, if not set width, the default is the same as the parent block, no parent, the default is as wide as the screen;
-To clear the floating method:
1. Clear:both (Clear:left and Clear:right)
2. Over-flow:hidden; (He is overflow hidden, but can be used to clear the float)
3. Pseudo-Class clear float
ul:after{
height:0;
Content: "";
Display:block;
Clear:both;
}
# # # Most basic development, must first create the project structure
-Images folder: Cut a good picture
-CSS folder: Place CSS file: index.css
-index.html File
# # # project Development Details:
-Www.baidu.com/favicon.ico+enter Key;
-Shortcut keys in PS
+ M: Dashed box;
+ CTRL + C when the desired picture is selected; Ctrl+n;ctrl+v;
+ Save Picture: Ctrl+alt+shift+s
-














   
   
   
   

CSS Common Properties