In the previous chapter after the introduction of the Declaration and application methods and some features, starting from this chapter, it will be formally entered the instructions of the CSS introduction! There are two topics in this chapter, the first part introduces the color and background CSS, its main function is to set the foreground color of the elements, background color and background graphics and other style settings, and the second part for you is to control the placement of elements of the CSS instructions.
|
|
Color Set foreground colors support: IE3, IE4, NC4
Applicable: All elements
Possible values:
| <color> |
To set the color, please refer to the first chapter color use of the relevant instructions |
Preset values: Depending on the browser
Inheritance: Have
Generic example: SPAN {color:blue}
Coaxial Example: <span style= "Color:blue" >
Background-color Set Background color support: IE4, NC4
Applicable: All elements
Possible values:
| <color> |
To set the color, please refer to the first chapter color use of the relevant instructions |
| Transparent |
Transparent the background of a parent element (color or pattern) |
Preset value: Transparent
Inheritance: None
General Example: body {background-color:blue}
Coaxial Example: <body style= "Background-color:blue" >
Background-image Set Background graphics support: IE4, NC4
Applicable: All elements
Possible values:
| <url> |
To set the map file URL, please refer to the description in the first chapter URL |
| None |
Do not use a background pattern |
Preset value: Transparent
Inheritance: None
General Example:
Body {background-image:url ("Http://yourweb/path/file_name")}
Coaxial Example:
<body style= "Background-image:url (' Http://yourweb/path/file_name ')" >
Background-repeat Set Background repeat support: IE4, NC4
Applicable: All elements
Possible values:
| Repeat |
Repeat Background Graphic fill page |
| Repeat-x |
Horizontal repeat background graphic |
| Repeat-y |
Repeat background graphic vertically |
| No-repeat |
Show background graphics without repeating |
Preset value: Repeat
Inheritance: None
General Example: body {background-repeat:repeat-x}
Coaxial Example: <body style= "Background-repeat:repeat-x" >
Background-attachment setting background with support: IE4, NC4
Applicable: All elements
Possible values:
| Scroll |
Background graphics scroll with scroll |
| Fixed |
Background graphic scrolling with scroll (floating watermark) |
Preset value: Scrool
Inheritance: None
General Example: body {background-attachment:fixed}
Coaxial Example: <body style= "background-attachment:fixed" >
Background-position Set Background position support: IE4, NC4
Applicable: block elements
Possible values:
| <percent> percent x Y% |
Percent x y% position of x y% points on the graph |
| <length> X Y |
Place the upper-left corner of the graphic at the top-left corner of the element and the horizontal x vertical y |
| Center |
The background graphic is placed in the center |
| Left |
Background graphic to left |
| Right |
Background graphic to right |
| Top |
Background graphic to top |
| Bottom |
Background graphic to bottom |
Preset value: 0% 0%
Inheritance: None
General Example: Body {background-position:100% 50%}
Coaxial Example: <body style= "background-position:100% 50%" >
Background Set background nature support: IE3, IE4, NC4
Applicable: All elements
Possible values:
| Background-color |
Set Background color |
| Background-image |
Set Background graphic |
| Background-repeat |
Set Background repeat |
| Background-attachment |
Set background attached |
| Background-position |
Set Background position |
Preset values: None
Inheritance: None
General Example:
Body {BLUE URL (image/gif) repeat-x Fixed Center}
Coaxial Example:
<body style= "BLUE url (image/gif) repeat-x Fixed Center" >
|
|
Float to set the floating property (more for the case of the text-wrap) Support: IE4, NC4
Applicable: block elements or graphics
Possible values:
| Left |
Elements to the left, text around their right |
| Right |
element to the right, text around its left |
| None |
Display in a preset way |
Preset values: None
Inheritance: None
Generic example: DIV {float:right}
Coaxial Example: <div style= "Float:right" >
Clear sets the Purge property (setting whether the presence of floating elements is allowed) support: IE4
Applicable: block elements or graphics
Possible values:
| Both |
If there are floating elements on either side, the element is moved below the floating element |
| Left |
If there is a floating element on the left, the element moves below the floating element |
| Right |
If there is a floating element on the right, the element moves below the floating element |
| None |
Display in a preset way |
Preset values: None
Inheritance: None
Generic example: DIV {clear:right}
Coaxial Example: <div style= "Clear:right" >
Width Set breadth support: IE4, NC4
Applicable: block elements or graphics
Possible values:
| <length> |
Length units, please refer to the first chapter of the basic units of the relevant instructions |
| <percentage> |
Percent, base on parent element width |
| Auto |
Automatically change size in fixed proportions |
Preset value: Auto
Inheritance: None
Generic example: DIV {width:300pt}
Coaxial Example: <div style= "width:300pt" >
Height set high support: IE4, NC4
Applicable: block elements or graphics
Possible values:
| <length> |
Length units, please refer to the first chapter of the basic units of the relevant instructions |
| <percentage> |
Percent, base on parent element width |
| Auto |
Automatically change size in fixed proportions |
Preset value: Auto
Inheritance: None
Generic example: DIV {height:300pt}
Coaxial Example: <div style= "height:300pt" >
Position set position support: IE4, NC4
Applicable: block elements
Possible values:
| Absolute |
Set at a specific location, based on the parent element |
| Relative |
Based on adjacent elements, set in a specific position |
| Static |
The preset position, based on the position of the element in the original code |
Preset Value: Absolute
Inheritance: None
Generic example: DIV {position:static}
Coaxial Example: <div style= "Position:static" >
Top set Position support: IE4, NC4
Applicable: block elements
Possible values:
| <length> |
Length units, please refer to the first chapter of the basic units of the relevant instructions |
| <percentage> |
Percent, base on parent element width |
| Auto |
Display in normal mode |
Preset value: Auto
Inheritance: None
Generic example: DIV {top:30pt}
Coaxial Example: <div style= "top:30pt" >
Left set position support: IE4, NC4
Applicable: block elements
Possible values:
| <length> |
Length units, please refer to the first chapter of the basic units of the relevant instructions |
| <percentage> |
Percent, base on parent element width |
| Auto |
Display in normal mode |
Preset value: Auto
Inheritance: None
Generic example: DIV {left:30pt}
Coaxial Example: <div style= "left:30pt" >
Clip Set Cutting (set the shape and size of a region, external permeability) support: IE4, NC4
Applicable: block elements
Possible values:
| Rect (Top,right,bottom,left) |
Sets the right bottom left length above the rectangle, and automatically pairs the edge length
The general wording is rect (0, length, length, 0)
Can not be written as rect (0,0, length, length)
All four values can be "auto" instead |
| Auto |
Display in normal mode |
Preset value: Auto
Inheritance: None
Generic example: DIV {clip:rect (0,100px,50px,0)}
Coaxial Example: <div style= "Clip:rect (0,100px,50px,0)" >
Overflow set overflow handling (controls how the element content is displayed when the element is larger) support: IE4
Applicable: block elements
Possible values:
| Visible |
The element will not display according to the set size, but will see all content |
| Hidden |
The portion of the set size that exceeds the element will be hidden and not displayed. |
| Scroll |
If necessary, the scroll allows the user to see all the content |
| Auto |
Display in a preset way |
Preset value: Auto
Inheritance: None
Generic example: DIV {overflow:scroll}
Coaxial Example: <div style= "Overflow:scroll" >
Visibility set Visibility support: IE4, NC4
Applicable: All elements
Possible values:
| Visible |
Set the element to display |
| Hidden |
Set this element to not display but still occupy space |
| Inherit |
Determined by the visibility of the parent element |
Preset value: Inherit
Inheritance: None
Generic example: DIV {Visibility:hidden}
Coaxial Example: <div style= "Visibility:hidden" >
Z-index set z-axis parameters (three-degree space) support: IE4, NC4
Applicable: block elements
Possible values:
| <number> |
Decimal value, the value of the element will appear in the small number of elements above |
| Auto |
When the element position repeats, the underlying element in the original code appears above the preceding element |
Preset value: Auto
Inheritance: None
Generic example: DIV {z-index:3}
Coaxial Example: <div style= "Z-index:3" > |
|
