Home > Developer > Web Develop
CSS(cascading style Sheets, cascading style sheets), the function is to beautify the HTML page.
/* Comment */comment syntax
1. Style sheet Classification① Inline style Sheet
combined with HTML display, the control is accurate, but reusability is poor, redundancy is many.
Example:<p style= "FONT-SIZE:14PX;" > Inline style sheets </p>
② Inline style Sheet
embedded in a Web page as a separate area must be written inside the head tag.
<style type= "Text/css" >
P//Format works on p tags
{
Style ;
}
</style>
③ external style sheet
Create a new CSS file to place the style sheet. If you want to call a style sheet in an HTML file, you need to right-click in the HTML file →css style → attach the style sheet. The link connection method is generally used.
Some labels have default margins, which are usually removed (and other styles can be set) when writing style sheet code , as follows:
<style type= "Text/css" >
*//format works on all labels
{
margin:0px;
padding:0px;
}/* means to remove margins and spacing for all labels */
</style>
2. Selector1, Tag Selector. Use the tag name to make the selector.
<style type= "Text/css" >
P//format works on P tags
{
Style
}
</style>
2, class selector. It's all "." Beginning.
<style type= "Text/css" >
. Main/* Define Style */
{
height:42px;
width:100%;
Text-align:center;
}
</style>
<body>
<div class= "main" > <!--call class style--
</div>
</body>
3. ID selector. Start with "#"
<div id= "style name" >
<style type= "Text/css" >
#main/* Define Style */
{
height:42px;
width:100%;
Text-align:center;
}
</style>
<body>
<div id= "main" > <!--Call ID style-
</div>
</body>
4, composite selector.
1), separated by ",", to indicate juxtaposition.
<style type= "Text/css" >
P,span/* tag P, span the same style */
{
Style
}
</style>
2), separated by a space, indicates descendants.
<style type= "Text/css" >
. Main P/* finds a label that uses the style "main", which uses the style in the P tag of the label */
{
Style
}
</style>
3), filter ".".
<style type= "Text/css" >
P.SP/* The label of the class= "SP" in the label P, perform the following style */
{
Style
}
</style>
3. Style properties3.1 Background and prospects/* Background color, style sheet high priority * /
Background-image:url (path ); /* Set background picture (default)* /
background-attachment:fixed; /* Background is fixed, does not scroll with the font * /
Background-attachment:scroll; /* Background scrolls with font * /
Background-repeat:no-repeat; /*no-repeat, uneven paved,repeat, tiled,repeat-x, horizontally tiled,repeat-y, tiled vertically * /
Background-position:center; /* Background image is centered,repeat must be "no-repreat" * * when setting the background map position
Background-position:right top; /* Background map to the upper right corner (bearing can change itself)* /
Background-position:left 100px top 200px; /* 100 pixels from the left, 200 pixels from the top (can be set to a negative value)* /
Font
Font-family: "New song Body "; /* Font. Commonly used Microsoft Ya hei, song body. */
font-size:12px; /* Font size. Common pixels 12px,14px,18px. You can also use "em","2.5em" that is: 2.5 times times the default font . You can also use percentages * /
Font-weight:bold; /*bold is bold,normal is OK * /
Font-style:italic; /* tilt,normal is not tilted * /
Color: #03C; /* Color * /
Text-decoration:underline; /* underline,overline is underlined,Line-through is strikethrough , none is remove underline * /
Text-align:center; /* (Horizontal alignment) center aligned,left aligned,right justified * /
Vertical-align:middle; /* (vertical alignment) is centered,top is aligned to the front, andbottom is the bottom alignment. Generally set the line height after use. */
text-indent:28px; /* First Line Indent * /
line-height:24px; /* Row height. Typically 1.5~2 times the font size. */
Display:none; /*none, do not display,Inline-block, display as block, do not wrap, width height can be set, block, display as block, wrap,inline, effect with span label, do not wrap, wide height is not set. */
Visibility:hidden; /* Visibility. Hidden, hiding but occupying space;visible, showing. */
3.2 borders and BordersBorder (table border, style, etc.),margin (out-of-table spacing),padding (content and cell spacing)
BORDER:5PX solid blue; /* Four border:5 pixels wide, solid line, blue (equivalent to the following three lines)* /
border-width:5px;
Border-style:solid;
Border-color:blue;
BORDER-TOP:5PX solid blue; /* Top border:5 pixels wide, solid line, blue (write as above)* /
BORDER-BOTTOM:5PX solid blue; /* Bottom border:5 pixels wide, solid line, blue (write as above)* /
BORDER-LEFT:5PX solid blue; /* Left frame:5 pixels wide, solid line, blue (write as above)* /
BORDER-RIGHT:5PX solid blue; /* Right border:5 pixels wide, solid line, blue (write as above)* /
margin:10px; /* The outer border is 10 pixels wide. Auto, centered. */
margin-top:10px; /* The upper border is 10 pixels wide and the other three-side borders are similar * /
margin:20px 0px 20px 0px; /* Upper -Right -bottom -left, four-sided border clockwise order * /
padding:10px; /* Content and border have a four-sided spacing of 10 pixels * /
padding-top:10px; /* The top spacing between the content and the border is 10 pixels; Other three-side spacing is similar * /
padding:20px 0px 20px 0px; /* Up -Right -bottom -left, content and border with four-sided spacing in clockwise order * /
3.3 lists and squareswidth,height, (top,bottom, left,right) are used only in the case of absolute coordinates
List-style:none; /* Cancel serial number * /
List-style:circle; /* number becomes circle, style is unordered * /
List-style-image:url (image address ); /* Picture do serial number * /
List-style-position:outside; /* Serial number outside the content * /
List-style-position:inside; /* Serial number with content together * /
3.4
linked to style :
A:link The hyperlink is pre-state.
a:visited Post-click status of Hyperlinks
a:hover when hovering over a hyperlink
a:active When you click the hyperlink
When defining these states, there is a sequence l v H a
0811 CSS style sheet basic
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
