After introducing the declaration and application methods and some features in the previous chapters, starting from this chapter, we will officially enter the introduction of the ＣＳＳ command! This chapter has two introduction topics. The first part introduces the CSS of color and background properties. Its main function is to set the properties of style settings such as foreground color, background color and background graphics of elements; and the second part introduces the properties of color and background properties of CSS. Part of the introduction to you is the CSS instructions used to control the position of placed elements.
Color background ＣＳＳ command
color Set the foreground color Support: IＥ３, ＩＥ４, ＮＣ４ Applicable: all elements Possible values: To set the color, please refer to Chapter 1 Color Instructions for use Default: Depends on browser Inheritance: Yes General example: SPAN { color : BLUE } Coaxial example: background-color Set background color support : IE4, NC4 Applicable: All elements Possible values: To set the color, please refer to the relevant instructions on color use in Chapter 1 transparent. Make the background of the parent element (color or pattern) transparent. Default value: transparent Inheritance: No general example: BODY { background-color : BLUE } Coaxial example: background-image Set background graphics Support: IE4, NC4 Applicable: all elements Possible values: < ;url> To set the image URL, please refer to the relevant instructions on URL representation in Chapter 1 none Do not use the background pattern Default value: transparent Inheritance: None General example: BODY { background-image : URL("http://yourweb /path/file_name") }Coaxial example: background-repeat Set background repeat support: IE4, NC4 Applicable to: All elements Possible values: repeat Repeat the background graphic to fill the page repeat-x Repeat the background graphic in the horizontal direction repeat-y Repeat the background graphic in the vertical direction no-repeat Do not display the background graphic repeatedly Default value: repeat Inheritance: None General example: BODY { background-repeat : repeat-x } Coaxial example: background-attachment Set background attachment support: IE4, NC4 Applicable: all elements Possible values: scroll The background graphic scrolls with the scroll fixed The background graphic scrolls with the scroll (watermark) Default value: scroll Inheritance: None General example: BODY { background-attachment : fixed } Coaxial example: background-position Set the background position Support: IE4, NC4 Applicable: block elements Possible values: % position Value: 0% 0% Inheritance: None General example: BODY { background- position : 100% 50% } Coaxial example: background Comprehensive setting background Property support: IE3, IE4, NC4 Applicable: all elements Possible values: background-color Set the background color background-image Set the background image background-repeat Set the background repeat background-attachment Set the background attachment background-position Set the background position Default: None Inheritance: None General example: BODY { BLUE url(image/gif) repeat-x fixed center } Coaxial example:
Position placement command
float Set the floating property (mostly used when text wraps around images) Support: IE4, NC4 Applicable to: block elements or graphics Possible values: left element to the left, text around its right right element to the right, text around its left none or Default method to display default value: none Inheritance: none General example: DIV { float : right } Coaxial example:
clear Set clear properties (set whether to allow floating The existence of the element) Support: IE4 Applicable: block elements or graphics Possible values: both If there are floating elements on both sides, the element will be moved below the floating element left If there is a floating element on the left, the element will be moved below the floating element right If there is a floating element on the right If there is a floating element, the element will be moved below the floating element none to display the default value in the default method: none Inheritance: none General example: DIV { clear : right } Coaxial example:
width Setting width supports: IE4, NC4 Applicable: block elements or graphics Possible values: Length unit, please refer to the relevant instructions on basic units in Chapter 1 Percentage, based on the width of the parent element Baseline auto automatically changes size at a fixed ratio Default value: auto Inheritance: None General example: DIV { width: 300pt } Coaxial example:
height Setting height support: IE4, NC4 is applicable to: block elements or graphics. Possible values: length unit, please refer to the related instructions of basic units in Chapter 1. Percentage, based on the width of the parent element, auto automatically changes the size at a fixed ratio. Default value ：auto Inheritance: None General example: DIV { height : 300pt } Coaxial example:
position Set position Support: IE4, NC4 Applicable: block element Possible values: absolute Based on the parent element, it is placed at a specific position relative. Based on the adjacent element, it is placed at a specific position. static. The default position is based on the position of the element in the source code. Default value: absolute Inheritance: None General example: DIV { position : static } Coaxial example:
top Set the top position Support: IE4, NC4 Applicable: Block element Possible values: Length unit, please refer to Chapter Chapter Description of basic units Percentage, based on the width of the parent element auto displays the default value in the normal way: auto inheritance: none General example: DIV { top : 30pt } Coaxial example:
left Setting the left end position supports: IE4, NC4 Applicable: Block element Possible values: Length unit, please refer to the relevant description of the basic unit in Chapter 1 Percent, to The width of the parent element is based on auto and the default value is displayed in the normal way: auto Inheritance: None General example: DIV { left : 30pt } Coaxial example:
clip Set clipping (set Determine the shape and size of a certain area, transparent outside the area) Support: IE4, NC4 Applicable: block element Possible values: rect (top, right, bottom, left) Set the length of the top, right, bottom and left of the rectangle, and it will automatically compare The side length is generally written as rect(0, length, length, 0) and cannot be written as rect(0, 0, length, length). All four values can be "auto" instead of auto to display the default value in the normal way: auto inheritance : None General example: DIV { clip : rect(0,100px,50px,0) } Coaxial example:
overflow Setting overflow processing ( Controls the display method when the content of an element exceeds the size of the element) Supported: IE4 Applicable: block elements Possible values: visible elements will not be displayed according to the set size, but all content hidden that exceeds the set size of the element will be visible copies will be hidden and will not be displayed scroll If necessary, a scroll will appear so that the user can see all the content auto Display in the default way Default value: auto Inheritance: None General example: DIV { overflow: scroll } Coaxial example ：
visibility Set visibility Support: IE4, NC4 Applicable: all elements Possible values: visible Set the element to be displayed hidden Set the element not to be displayed, but still occupy space inherit Determine the default value based on the visibility of the parent element: inherit inheritance: none General example: DIV { visibility : hidden } Coaxial example:
z-index Set the Z-axis parameter ( Three-dimensional space) Support: IE4, NC4 Applicable: Block element Possible values: decimal value, elements with large values will appear above elements with small values auto When the element position is repeated, the original code is written in The following elements will appear above the previous elements. Default value: auto Inheritance: None General example: DIV { z-index : 3 } Coaxial example:
The above is the content of the CSS of color background in Chapter 4. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
