Home > Developer > Web Develop
CSS style Sheets
Style sheet classification
1. Inline style sheet
combined with HTML display, the control is accurate, but reusability is poor, redundancy is many.
!doctype html><HTML><Head> <MetaCharSet= "UTF-8"> <title>CSS Inline styles</title></Head><Body><styletype= "Text/css">#div{width:100px;Height:100px;background:Red;}</style><DivID= "Div"></Div>></Body></HTML>
2. Inline style sheet
embedded in a Web page as a separate area must be written inside the head tag.
!doctype html><HTML><Head> <MetaCharSet= "UTF-8"> <title>CSS Inline styles</title></Head><Body><styletype= "Text/css">#div{width:100px;Height:100px;background:Red;}</style><DivID= "Div"></Div>></Body></HTML>
3. 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.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>CSS Inline styles</title> <Linkrel= "stylesheet"type= "Text/css"href= "Ccss.css"></Head><Body><DivID= "Div"></Div>></Body></HTML>css file #div{width:100px;height:100px;background:red;}
CSS Selector
written in <style type= "text/css" ></style> inside
1. Tag Selector
Match all elements that use a tag, such as the <p> tag:
p {font-size:2em;}2.class selector
Matches all elements of the class attribute that contain XXX, such as info:
. info {background: #ff0;}3.ID Selector
Matches all elements of the id attribute equal to XXX, such as info:
#info {background: #ff0;}4. Composite Selector
1) separated by "," to indicate the juxtaposition
Matches all A or B elements together, A and b are separated by commas, such as div,p:
div,p {color: #f00;}2) separated by spaces, indicating descendants
Matches all B elements that are descendants of the a element, separated by a space between A and B, such as the <p> tag in <a>:
A P {font-weight:bold;}3) Filter "."
Match all the A tags of class selector B, such as the <a> tag class selector for AA:
A.AA {background: #ff0;}Style properties
Background and foreground and backgroundCommon Properties/* Background color, style sheet high priority */background-image:url (path); /* Set background picture (default) */background-attachment:fixed; /* Background is fixed, do not scroll with the font */background-attachment:scroll; /* Background scrolls with font */background-repeat:no-repeat; /*no-repeat, uneven paving, repeat, tiled, repeat-x, horizontal tile, repeat-y, vertical tile */background-position:center; /* Background chart centered, when setting the background map position, repeat must be "no-repreat" */background-position:right top; /* The background map is placed in the upper right corner (azimuth can be changed) */Background-position:left 100px top 200px; /* 100 pixels from the left, 200 pixels from the top (can be set to a negative value) */
Font
FontCommon PropertiesFont-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 a percentage */font-weight:bold; /*bold is bold, normal is regular */font-style:italic; /* tilt, normal is not tilted */color: #03C; /* Color */text-decoration:underline; /* underline, overline is underlined, Line-through is strikethrough, none is to remove the underscore */text-align:center; /* (Horizontal alignment) center aligned, left aligned, right is aligned/vertical-align:middle; /* (vertical alignment) is centered, top is aligned to the front, and bottom 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. */
Borders and Borders
Borders and BordersCommon PropertiesBorder (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 border is similar to */margin:20px 0px 20px 0px; /* on-right-bottom-left, four-sided border clockwise order */padding:10px; /* The four-sided spacing between content and border is 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 */
Lists and squares
Lists and squaresCommon Propertieswidth, height, (top, bottom, left, right) can only be used 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 (picture address); /* Picture do serial number */list-style-position:outside; /* Serial number is outside the content */list-style-position:inside; /* Serial number with content together */
October 27, 2016--CSS style sheet
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
