In the previous chapters after the Declaration and application of the method and some features, starting from this chapter, you have to formally enter the instructions of the CSS introduction! This chapter has two topics, the first part introduces the color and background of the CSS, its main function is to set the foreground color of the element, background color and background graphics and other style settings, and the second part is for you to control the placement of the elements of the CSS command.
c s S instruction for color background
Color setting foreground color support: IE3, IE4, NC4 apply: All elements may be value:<color> set color, please refer to the first chapter color use of the relevant instructions preset: Depending on the browser and inheritance: There is a general example: SPAN {Color:blue} coaxial example: <span style= "Color:blue" >background-color Set background color support: IE4, NC4 apply: All elements may value:<color> set color, Please refer to the description of color use in chapter one transparent the background of the parent element (color or pattern) is transparent to the preset value: Transparent inheritance: No general example: BODY {Background-color:blue} coaxial example: <body Style= "Background-color:blue" >background-image Set background graphics support: IE4, NC4 apply: All elements may be value:<url> set the map file URL, Please refer to the description of the URL in the first chapter none of the background pattern presets are used: transparent inheritance: No general example: BODY {background-image:url ("Http://yourweb/path/file_name") The same axis 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 repeating background graphic fills the page repeat-x horizontal repeating background graphics repeat-y vertical repeating background graphics no-repeat not repeating background graphics presets: Repeat Inheritance: No general example: BODY { Background-repeat:repeat-x} Coaxial Example: <body style= "background-repeat:repeat-x" >background-attachment setting background with support Hold: IE4, NC4 applicable: All elements possible values: Scroll background graphics scroll with scroll (floating watermark) preset value: Scrool Inheritance: No general example: BODY {background-attachment:fixed} Coaxial Example: < BODY style= "background-attachment:fixed" >background-position set background position support: IE4, NC4 applicable: Chunk element possible value:<percent> x percent Y% The X-y% points of the graph are aligned to the Y-y% position of the element, and the top left corner of the graph is placed in the top left corner of the element, horizontal x vertical Y where the center background graphic is placed in the center left background graphic to the right top background graphic pair Top bottom background graphics to bottom presets: 0% 0% Inheritance: No general example: BODY {background-position:100% 50%} coaxial Example: <body style= "background-position:100% 50% ">background Comprehensive set background nature support: IE3, IE4, NC4 for: all elements Possible values: Background-color setting background color background-image setting background graphic background-repeat setting background repeat background-attachment setting background background-position setting background Position preset: No inheritance: No general example: BODY {Blue URL (image/gif) repeat-x Fixed Center} coaxial Example: <body style= "Blue url (image/gif) repeat-x fixe D Center ">
c S S instruction for position placement
Float Set floating property (more used in the case of text wrap) Support: IE4, NC4 applicable: block element or graph possible values: Left element on the right side, text around the right side of it, text around its left-none in a preset way to display the default value: None Inheritance: No general example: DIV {Float:right} coaxial example: <div style= "Float:right" >clear Set the Purge property (setting whether to allow floating element existence) Support: IE4 for: block element or graph possible values: both if there are floating elements on both sides, The element is moved below the floating element left if there is a floating element on the right, then the element is moved below the floating element. If there is a floating element on the other side, the element is moved below the floating element none displays the preset value in a preset way: none Inheritance: No general example: DIV {clear:right} Coaxial Example: <div style= "Clear:right" >width set width support: IE4, NC4 applicable: block element or graph may value:<length> length units, please refer to the first chapter of the basic unit of the relevant instructions < Percentage> percent, the parent element width is the base auto with a fixed scale automatic change size preset value: Auto Inheritance: No general example: DIV {width:300pt} coaxial example: <div style= "width:300pt" >height Set height support: IE4, NC4 applicable: block element or graph may value:<length> length units, please refer to the first chapter of the basic unit of the relevant description <percentage> percentage, Auto with the parent element width as the base automatic change size preset value: Auto Inheritance: No general example: DIV {height:300pt} coaxial example: <div style= "height:300pt" >position set position support Hold: IE4, NC4 applicable: block element possible value: Absolute with the parent element as the benchmark, the device in a specific location relative the adjacent elements as the benchmark, set in a specific position static preset position, The preset value is determined by the position of the element in the source code: Absolute Inheritance: No general example: DIV {position:static} coaxial example: <div style= "Position:static" >top set top position support: IE4, NC4 applicable: Chunk element possible value: <lenGth> length units, please refer to the description <percentage> percentage of the basic unit of the first chapter, with the parent element width as the reference auto to display the default value in normal way: Auto Inheritance: No general example: DIV {top:30pt} coaxial example:< DIV style= "top:30pt" >left set left position support: IE4, NC4 applicable: block element may value:<length> length units, please refer to the first chapter of the basic unit of the relevant description <percentage> percentage, The default value is displayed in normal mode with the parent element width of auto: Auto Inheritance: No general example: DIV {left:30pt} coaxial example: <div style= "left:30pt" >clip set clipping (setting the shape and size of an area, Area outside permeability) Support: IE4, NC4 applicable: block element possible value: Rect (top,right,bottom,left) set the rectangle on the lower right left length, will automatically compare to the length of the edge is generally written as rect (0, length, length, 0) can not write as rect (0,0, Length, length) Four values can be "auto" instead of auto to display the default value in a normal way: Auto Inheritance: No general example: DIV {clip:rect (0,100px,50px,0)} Coaxial Example: <div style= "Clip:rect ( 0,100px,50px,0) ">overflow set overflow processing (controls how the element content is displayed when it exceeds the size of the element) support: IE4 for: block element Possible value: The visible element will not be displayed according to the set size, And you can see everything. Hidden more than the set size of the element will be hidden from display scroll if necessary, the reel allows the user to see the full contents of auto to display the preset value in a preset way: Auto Inheritance: No general example: DIV {overflow:scroll} Coaxial Example: <div style= "Overflow:scroll" >visibility setting Visibility Support: IE4, NC4 apply: All elements possible values: visible setting the element displays the hidden setting the element is not displayed, But still occupy space inherit determines the default value with the parent element visibility: Inherit inheritance: No general example: DIV {Visibility:hidden} coaxial example: <div style= "Visibility:hidden"Z-index set z-axis parameters (three-degree space) support: IE4, NC4 applicable: The chunk element may value:<number> 10 numeric values, the large number of elements will appear on the value of small elements of the auto when the element position is repeated, The original code is written in the back of the element will appear in the above preset values written in the previous element: Auto Inheritance: No general example: DIV {Z-index:3} coaxial example: <div style= "Z-index:3" >
The above is the fourth chapter color background CSS content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
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
