Home > Developer > Web Develop
CSS Chinese interpretation: Cascading style sheet, the HTML compared to the puppet, CSS is the puppet's clothes, his external can be modified by CSS, JS can be HTML to move up. Generate user interaction ...
1.1CSS style sheet type CSS style: inline style: Inner style: External style (recommended):<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <!--external styles: write CSS directly to a CSS file, load with <link rel="stylesheet"href="Css/top.css"> <style>/*internal styles: Writing styles to a style in the head*/#pg-index{Background-color: #00AA88; } </style>"Pg-index"style="color:red"></div></body>1.2css Selector Type Tag selector: (HTML tag) category selector: (class selector) ID selector: Hierarchy selector: Group selector: Universal selector:<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <!--external style: writes CSS directly to the CSS file, loads the use - <Linkrel= "stylesheet"href= "Css/top.css"> <style> /*internal styles: Writing styles to a style in the head*/ *{ /*Universal Selector*/font-family:"Microsoft Yahei", "Hiragino Sans GB"; }Body{ /*Tag Selector*/margin:0; }#pg-index{ /*ID Selector*/Background-color:#00AA88; }. Pg-index2{ /*class selector (classes selector)*/float: Right; }#pg-index P{ /*Hierarchy Selector*/font-size:20px; }#pg-index,.pg-index2{ /*Group Selector*/Margin-left:10px; }#pg-index p:hover{ /*Pseudo class Selector*/Background-color:#00CC00; } </style></Head><Body> <!--inline style: writes CSS styles directly to the inside of the tag - <DivID= "Pg-index"class= "Pg-index2"style= "Color:red"> <P>Main content</P> </Div></Body></HTML>Pseudo-Class selectors:: Link defines the default style for hyperlinks: visited defines the styles that are visited: hover defines the style that the Mouse has passed: Active defines the style that the mouse pressed a:link {color: #ff0000;} /* Default style, the hyperlink text is red */a:visited {color: #00ff00;} /* After access, the hyperlink text is green */a:hover {color: #0000ff;} /* mouse over, hyperlink text is blue */a:active {color: #ffff00;} /* When the mouse is pressed, the hyperlink text is yellow */
The 1.3CSS syntax structure of each CSS style consists of two components: selectors and declarations. Declarations also include property and property values. End with a semicolon after each declarationIn the three components of CSS, "object" is important, it specifies which page elements to set, so it has a dedicated name-selector (selector) 1.4CSS selector priority <styletype= "Text/css">#show1{Color:Gold;}. Show{Color:Pink;}H1{Color:Red;} * {Color:Green;} </style> </Head> <Body> <H1ID= "Show1"class= "Show"style= "Color:gray;">This is the selector-priority test</H1> </Body>1.5css text paragraph properties and border border settings: border
width, style, color (border:1px solid red;) Text line height: line-height
Syntax: line-height: Row high value (pixels) Horizontal alignment: Text-align
Left: right-aligned;
Right: Justify
Center: Center Alignmentbody{/ * Tag Selector */ border:1px solid red; width:100%; Text-align:center; height:50px; line-height:50px; margin:0; }
1.6css text attribute font size: font-size
Syntax: font-size: value of size (pixel value) text color: color
Syntax: color: How colors are evaluated
Color: #292378; 6 hexadecimal digits to get a color
Color: #A64; #AA6644的缩写
color:red;//color keyword definition color
Color:rgb (100,159,170); RGB definition Color 1.7CSS Background Property background color: Background-color
Keywords: red pink orange background Image: Background-image
Use the Background-image property to set the background image of an element.
Syntax: Background-image:url (image address) background repetition: background-repeat
Syntax: background-repeat: Take value
Repeat (default) Background image flat layout full page
Repeat-x background image is only tiled horizontally;
Repeat-y background images are only tiled vertically.
No-repeat background image uneven background position: background-position
background-position-x:200px;
background-position-y:100px;1.8css Background Image Instance<style>#myimg{Border:1px solid Red;Height:18px;width:18px;Background-image:url (' 2.png ');background-position-y:138px; }</style><Body> <DivID= "Myimg"> </Div></Body>1.9css Position Properties Margin Padding propertyMargin properties
Margin is the distance from the external element to control the floating position of the element itself.
Four-sided margin margin
Top Margin Margin-top
Bottom Margin Margin-bottom
Left margin Margin-left
Right margin Margin-right
Margin 10px 20px 30px 40px;
Provide one, for the four sides;
Available in two, first for up-down, second for left-right;
If three are supplied, the first one is used on, the second one is for left-right, and the third one is used for the next;
Provides four parameter values, which are applied to four edges in the upper-right-bottom-left order;
Center Display
Padding padding PropertiesPadding is an internal element that controls the position of elements inside an element
Four-sided filling padding
padding on Padding-top
Under Fill Padding-bottom
Left padding Padding-left
Right padding padding-right
padding 10px 20px 30px 40px;
Provide one, for the four sides;
Available in two, first for up-down, second for left-right;
If three are supplied, the first one is used on, the second one is for left-right, and the third one is used for the next;
Provides four parameter values, which are applied to four edges in the upper-right-bottom-left order;
2.css Floating Properties2.1CSS Display PropertiesDisplay Show Properties: Block: Change elements to block-level labels, set height and width inline: change element to inline label, cannot set height and width inline-block: There are two types of none: the label disappears < style= "background-color:gray;height:70px;width:20px;" > Inline label </span>
2.2css Overflow Handling2.3css Position Properties2.4CSS Hierarchy PriorityReference Links:http://www.w3school.com.cn/
http://css.doyoe.com/
Http://www.runoob.com/cssref/css-reference.html
HTML Learning-css
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
