CSS Common Properties

Source: Internet
Author: User

# # # 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

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 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: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
Content: "";
# # # 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.