Home > Developer > Web Develop
styles: CSS (cascading style Sheets, cascading style sheets), which is useful for beautifying HTML pages .
In style, use */*/to annotate.
1. Basic concept of Style sheet 1.1, style sheet classification1. 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>
2. 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>
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 a 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;
}
</style>
1.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. (and set selector)
<style type= "Text/css" >
P,span/* tag P, span the same style */
{
Style
}
</style>
2), separated by a space, indicates descendants.
(Sub-selector: This is the only selector that has an effect on the immediate offspring, but not on "grandson" and on the descendants of a layer.)
The format is as follows: P>span{color:blue;} ）
<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 ".". (intersection selector)
<style type= "Text/css" >
P.SP/* The label of the class= "SP" in the label P, perform the following style */
{
Style
}
</style>
2. style attribute 2.1, background and foreground (foreground: refers to text)/* 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, 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. (for inline elements can be set to block, block-level elements can be set to inline) */
| block Element | Inline Elements |
|---|---|
| address-Address BLOCKQUOTE-block Reference Center-lift to aligning Dir-directory list Div-Common block-level easy, also CSS Layout main label DL-definition list Fieldset-form control group form-interactive form H1-Big title H2-subtitle h3-3 level title H4-4 level title H5-5 level Title H6-6 level title hr-Horizontal divider Isindex-input prompt Menu-menu list Noframes-frames Optional content (for browsers that do not support frame, display this chunk content noscript-Optional script content (this content is displayed for browsers that do not support script) ol-ordered form P-paragraph Pre-formatted Text Table-table ul-unordered list |
a-anchor Point ABBR-abbreviation acronym-First word B-bold (not recommended) Bdo-bidi override Big-Large font BR-line break CI Te-refer to code-computer codes (required when referencing source) DFN-Define fields Em-accent Font-font settings (not recommended) I-Italic img-picture Input-input box K BD-Define keyboard text Label-table label Q-Short reference S-Medium dash (not recommended) Samp-Define sample computer code Select-Project selection Small-Small font text span-in common Inline container, define text within chunk Strike-underline Strong-bold accent Sub-subscript sup-superscript TextArea-multiline text input box TT-Telex text U-underline var -Define variable |
Visibility:hidden; /* Visibility. Hidden, hiding but occupying space; visible, showing. */
Display differs from visibility:
A, display's property value
Block
/* behaves as a block-level element (typically exclusive line) */
When display is set to block, all elements in the container will be treated as a separate block, like the <DIV> element, which is placed on the page at that point. (You can actually set the <span> display:block so that it can work like <DIV>.)
Inline
/* behaves as a row-level element (not a single line in general) */
Setting display to inline will make its behavior as inline as the element---even if it is an ordinary block element such as <DIV>, it will also be combined to image <span> that output stream.
None
/* element is not visible and does not hold the appropriate location for it */
Finally, display is set: None, when the element is actually removed from the page, and the element underneath it is automatically padded.
B, Display of the use
1), display default attribute values are block-level elements:
Adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
Dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
Menu,ol,p,plaintext,pre,table,td,th,tr,ul
2), display the element with the default property value of None:
Br,frame,nextid,tbody,tfoot,thead
3), Li element Display property default value is: List-item
4), other elements display property default value is inline
C, display of the characteristics
Changing the display property of an element will have an effect on the surrounding elements:
1. Add a new row after the element with the attribute value set to block
2. Delete a row from the line where the attribute value is set to inline
3. The hidden attribute value is set to the element of none and frees the physical space that the element occupies in the document, which, for other elements, is equal to the element that does not exist, so that the position of the element is replaced by other elements
D, Visibility property values
visibility:visible/* element Visible, default value */
The visibility:hidden/* element is not visible, but still retains the appropriate space for it */
Visibility:collapse
/* works only on table objects, removing rows or columns without affecting the layout of the table. If this value is used on an object other than table, it behaves as hidden. */
Visibility:inherit
/* Inherit the visibility value of the ancestor element. */
E,visibility characteristics
Used to determine whether the element is displayed or hidden, which is represented by the visibility= "Visible|hidden", the visible display, and the hidden to hide. When visibility is set to "hidden", the element is hidden, but it still occupies its original position.
F, from the above can understand the difference between Visibility:none and Display:hidden
Display:none;
When this property is used, various attribute values, such as the width and height of the HTML element (object), are "lost";
Visibility:hidden;
With this property, the HTML Element (object) is simply visually invisible (completely transparent), and the space it occupies still exists, that is, it still has a property value such as height and width.
G, when to use visibility or display properties?
Although both the visibility and display properties can achieve the purpose of hiding page elements, they differ in how they respond to normal document flow.
If you want to hide an element, but keep the element's space on the page, you should use Visibility:hidden. You should use Display:none if you want to hide an element while the other content fills the blanks.
In reality more inclined to use the display attribute (believe this is also the habit of most people, bolo note). When you decide to use Display:none to hide an element, you must know that the rest of the content will be populated with the empty space left by that element, altering the layout of the page.
H, considerations for using visibility or display properties
Display:none:
1), JS read element attribute value
If the element is hidden in the style file or in the page file code directly with Display:none, after loading the page, without using the JS setting style to make the element display, the JS code will not be able to get some properties of the element correctly, such as offsettop, Offsetleft and so on, the returned value will be 0, the value can be obtained correctly after the element is displayed by JS setting style.display.
2), SEO optimization needs attention
The use of Display:none hidden elements will not be Baidu and other search site retrieval, will affect the site's SEO, in some cases can use left:-100000px to achieve the same effect.
3), Style file
If the display:none style of the element is set by a style file or <style>css</style>, the JS setting style.display= "" does not make the element display, You can use block or inline equivalents instead. There is no problem with setting the style= "Display:none" directly on the element
4), In some cases, you can use style.visibility instead of style.display, but be aware that style.visibility hides elements while preserving the space occupied by the elements on the page, Style.display hides the elements and makes up the occupied page space.
Visibility:hidden:
If you want a piece of code in the foreground does not display, the simplest way is to use the CSS Display:none, so that the bottom of the content will automatically fill the gap. But in some special cases, we only need to hide this element, but its position cannot be occupied, then Visibility:hidden can achieve this requirement.
2.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 */
2.3. List and blockwidth, height, (top, bottom, left, right) are only useful 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 */
HTML Basic Learning 3-CSS style sheet for Web page making
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
