1.
style sheet Cascading Style Sheet
CSS Benefits:
Separation of content from performance
Web page performance is unified, easy to modify
Rich styling to make Web page layouts more flexible
Reduce the amount of Web page code, increase the browsing speed of Web pages, save network bandwidth
Use Web-independent CSS to facilitate web pages to be indexed by search engines
Embed id> external id> embed class> external class> embed tags > external tags
1.1 Introduction method
Four kinds
Style= "" In-line style sheet
<style> Internal style sheet
<link rel= "stylesheet" href= ""/> External style sheet (most used)
<style> @import "" </style> Import mode, try not to use!!!
1.2 Introduction-mode Priority
inline > Internal > External > Import
1.3 The difference between a link and an import:
The <link/> tag belongs to XHTML, @import belongs to CSS2.1;
Use the <link/> link CSS file to load the Web page first, then compile the display;
Using @import imported CSS file, the client displays the HTML structure, and then loads the CSS file into the Web page;
@import is CSS2.1 unique, for incompatible CSS2.1 browser is invalid;
2. selector
2.1 What kinds of selectors and its priority
ID Selector # There can be only one ID in an HTML document with the same name
Class selector. can have multiple
Element P
Wildcard characters *
2.2 Priority of selectors
ID > CLASS > Element > *
3. Basic Several styles (commonly used for text, pictures, lists)
Background background
1.background-color Background Color (16 binary RGB rgba English name)
2.background-image Background Map
3.background-size background size (pixels, percent)
4.background-repeat (repeat-x repeat-y no-repeat)
5.background-position (specified by a direction value, specified by a percentage, specified by the exact pixel value)
whether the 6.background-attachment is scrolled with the browser, the picture will be pinned relative to the browser (bg-position and bg-attachment do not work together)
7.background Composite Properties can define the previous attribute in this one, "General writing Order: color, picture, whether duplicate, fixed, position"
Color colors
color Specifies the colors of the text
Opacity set element transparency, 1 opaque 0 fully transparent
Font fonts
Font-style the font style of the specified text ( normal, italic )
FONT-VARIANT Specifies whether the text is a small capital letter (works with English)
Font-weight the thickness of the specified text ( only two styles ) bold Bold
Font-size Specifying text font size
Font-family defining text using a font
Chinese font font-family common list Http://www.php.cn/xiazai/sucai/ziti
Font Composite Properties
General Order: Font style, whether it is lowercase, font weight, size, font
Text Property
Color, text-align, Line-height, letter-spacing, Vertical-align, Text-indent, text-decoration;
-----"vertical-align----->1. Commonly used for text box input, 2. Combine {Display:table-cell;} Can be used to center the picture vertically "
-----"valign-----> applies only to cells in table, such as <td valign= ' top ' height= ' 100px ' >this is cell</td>"
-----"align-----> for <HR/>, for example:
<table>, for example: <table border= "1" width= "+" align= "center" > </table>;
, for example: <span> text display </span> relative to the top of the picture;
····· And so on, no longer enumerated; "