Home > Developer > Web Develop
CSS Common help Document
CSS: Styles and layouts that are used to control multiple Web pages at the same time.
There are 3 types of CSS styles in the HTML page:
1: Write in label
<body style= ' margin o auto; ' >
2:head head tag inside
<style>
body {margin:0 Auto;}
</style>
Introduction of CSS files in 3:head header tags
<link rel= ' stylesheet ' href= ' commons.css '/>
Priority: The style on the label is the highest, the writing order, the nearest principle
CSS Comment method:/* ... */
The
CSS Selector has the following types:
First: ID selector (#i1)
< tag id= ' i1 ';
#i1 {
Background-color: #00000;
height:48px;
}
Second type: class selector
< label class= ' C1 ' ></tag;
. c1{
Background-color: #000 00;
height:48px;
}
Third: Tag Selector
<div></tag;
div{
Background-color: #00000;
height:48px;
}
Fourth: Hierarchical mode (can be multiple levels)
<span><div>test</div></span>
span div{...} Represents a div tag under span using this style
. C1 div{...} for div tag under class C1
Fifth type: Combo selector
<div id= ' I1 ' ></div>
<div id= ' i2 ' ></div>
<div id= ' i3 ' ></div>
#i1, #i2, #i3 {...}
. c1,.c2,.c3{...}
The sixth type: The property selector, the selection to the label through the properties of a race to select
<input type= ' text ';
input[type= ' text ']{width:100px;height : 200px;}
Here are some of the most commonly used CSS styles
border:1px solid red; Border properties in order, border width, border style, border color
Height: Label Heights
Width: Label width (pixels, percent)
Min-height sets the minimum height of the element.
Min-width sets the minimum width of the element.
Line-height: Vertically centered according to label height
Text-aligh:center Horizontal Center
Color: Font Color
Font-size: Font Size
Font-weight: Font Bold
Float: The label is drifting, that is, block-level label stacking, (left Zoo, right-hand drift), note: If the parent is overwritten, the last parameter is used: <style= ' clear:both; ' >
Display: Optional parameters are as follows
-Block: Convert inline tags to block-level labels
-inline: Converting block-level labels to inline labels
-Inline-block: Properties that have both block-level labels and inline tags. (Inline tags do not have padding,margin, high, wide, etc. property settings)
-none: Set the label for this property to disappear
padding: padding, space between element border and element content
Margin: Margin, defines the space around the element, and the overall div is centered (0,auto)
Position: element positioning, parameters are as follows
-Fixed: The invariant element is positioned at the specified position in the viewer window and does not move with the scrolling of the page. Example: (position:fixed,top:0,left:0,right:0)
-relative + absolute: These 2 elements are used together, and the two are relatively positioned
-Relative positioning: Relative positioning element positioning is relative to its normal position.
-Absolute positioning: The position of an absolutely positioned element relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to the
Example:
<div style= ' position:relative; ' >
<div style= ' position:absolute;top:0,left:0; ' ></div>
</div>
The location of the absolute here is relative to the position of the relative label.
Opcity: Transparency, Value range (0-1)
Z-index: Hierarchical order, to be set in conjunction with opcity transparency.
Examples of 2-layer notation:
<div style= ' z-index:10;position:fixed;top:50px;left:100px;background-color:white; ' >
# here in the introduction of a layer, you need to pass the Z-INDEX:10 value of the high and low to determine the priority, the larger the number on the top.
<div style= ' z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;> </div> # This is the set transparency (1 is completely covered)
<div style= ' Height:5000px;background-color:green; ' >sdf</div>
Overflow: Sets what happens when the content of an element overflows its area, with the following parameters
-Auto: When the picture size exceeds the set size, the pulley appears in the set range.
-Hidden: When the size of the picture exceeds the set size, only the Set size window is displayed.
Hover: The following CSS properties take effect when the mouse is moved to the current tab,
notation:. Pg-header. menu:hover{Background-color:blue}
Background-image: Background image. Body {background-image:url (' paper.gif ');}
Background-color: Background color, used in body. Body {background-color: #b0c4de;}
Background-repeat: The background image is added, the parameters are as follows:
-Repeat-x: Only horizontal increase
-Repeat-y: Vertical Increase only
-No-repeat: No stacking
Background-position: Change the position of the image in the background, such as: background-position:10px,10px;
Example: Add a picture to the right of the user name in the Account input box
<div style= ' height:35px;width:400px;position;relative; ' >
<input type= ' text ' style= ' height:35px;width:370px;padding-right:30px; ' >
<span style= ' Position:absolute;right:6px;top:10px;background-image:url (i_name.jpg); height:16px;width:16px; Display:inline-block; ' ></span>
</div>
Skills:
1:CSS Reuse Functionality
<style>
. c{Total}
. c1{Exclusive}
. c2{Exclusive}
</style>
<div class= ' c,c1 ' ></div>
<div class= ' c,c2 ' ></div>
2: The default picture outside the box is 1px, remove: img:{broder:0}
Example: layout of common pages
1: Layout of the master station
<div class= ' Pg-header ' >
<div style= ' width:980px;margin:0 auto; ' > Page Header </div>
</div>
<div class= ' pg-content ' >
<div style= ' width:980px;margin:0 auto; ' > Page Body </div>
</div>
<div class= ' Pg-footer ' >
<div style= ' width:980px;margin:0 auto; ' > End of Page </div>
</div>
CSS Learning Notes
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
