css| Mouse
CSS Mouse Properties
Accustomed to using Windows users to a variety of mouse style must not be unfamiliar, when the mouse moved to different places, when the mouse needs to perform different functions, when the system is in a different state, will make the mouse shape changes.
Although there are various types of mouse downloads on the web, graphics are diverse, but in the default system of Windows, these graphics are fixed. Change the properties of the mouse, simply said that when the mouse moved to different elements of the object, so that the mouse with different shapes, patterns display. This style is done by changing the "cursor" property. The following table lists the complete deployment of the mouse for reference:
EXPLANATION and Legend of keywords
Keyword explanation
The auto mouse changes its style according to its default state based on the elements on the page.
Crosshair accurately locates the word "ten".
Default pointer
Hand hand shape
Move moves
E-resize Arrow to the right
Ne-resize Arrow to top right
Nw-resize Arrow to top left
N-resize Arrow Upwards
Se-resize arrow to the lower right
Sw-resize arrow to the lower left
S-resize Arrow Downward
W-resize Arrow toward Left
Text text "I" form
Wait for
Help helps
CSS Rating Properties
Users who have used Word know that there is a "bullets and numbering" feature. In an HTML document, the designer does not need to use some of the font, color, and container properties mentioned earlier to format the object's font, color, margins, padding, and so on. Because in CSS, you have already provided a dedicated hierarchical attribute for grading. It is important to note that, at any rate, these properties can only be used for the element in which the "column item" value is "displayed."
Display
Attribute Value: Block | inline | List-item | None
Initial value: Block
Apply to: all elements
Inheritance: No
Percent value: not applicable
The first three properties of these properties are not supported in Internet Explorer 4.
If "block", then a new "container" is opened on the page, and the container is positioned relative to the neighboring "container" and follows the CSS format model. When you use "block" as a property value, a break occurs before and after the element. If it's "List-item," it has some similarities to the effect of "block," except for a column item tag that is added to it. If you use "inline" as the property value for display, the elements are not preceded or preceded by a break. If it is "none", then the name implies that the element will not be displayed.
List-style-type
Attribute Value: Disc | Circle | Square | decimal | Lower-roman | Upper-roman | Lower-alpha | Upper-alpha | None
Initial value: Disc
Applies To: "Display" value is "List-item" element
Inheritance: Yes
Percent value: not applicable
Before a column item, you typically add bullets or numbering to each item to distinguish between different column items. There are nine keywords that can describe the symbol or number of "List-style-type", and the description and legend are as follows:
Keyword description legend
Disc Disc L
Circle Circle M
Square Square N
Decimal decimal number 1, 2, 3, 4, 5 、..........
Lower-roman lowercase Roman Numerals I, II, III, IV, v 、..........
Upper-roman Capital Roman numerals I, II, III, IV, V 、.........
Lower-alpha small letters A, B, C, D, E 、..........
Upper-alpha Capitals A, B, C, D, E 、...........
None does not show bullets and numbering without
List-style-image
Attribute Value:<url> | None
Initial value: None
Applies To: "Display" value is "List-item" element
Inheritance: Yes
Percent value: not applicable
In front of the project, not only can you use "list-style-type" plus bullets and numbering, you can also use "list-style-image" to add picture symbols to your project. When you load a picture, the browser uses a picture instead of a bullet or number, regardless of whether the "List-style-type" attribute is defined.
List-style-position
Attribute value: Inside | Outside
Initial value: Outside
Applies To: "Display" value is "List-item" element
Inheritance: Yes
Percent value: not applicable
"List-style-position" has two values: "Inside" or "outside", where the "outside" value is the default value. They determine the starting position of the second line of text in the column item.
CSS Container Properties
For CSS to precisely define the style of a Web page, when formatting a Page object, CSS places all elements in a "container", the "container" called Box. CSS provides a powerful support for the format of containers, and now, first, look at the properties associated with formatting containers.
The properties of the container have the following categories:
The properties of the L margin (margin) class set an element to the margins of the browser window or superior element in four directions. It is used to control the position of an element on the page.
The attributes of the L padding distance (padding) class determine how much space should be inserted between the border and the content.
The properties of the L border (border) class define the style of an element margin.
The remaining categories include width and height attributes, as well as floating and scavenging properties.
Margin-top
Attribute Value:<length> | <percentage> | <auto>
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This property sets the margin at the top of an element that can be relative to the browser window border or relative to the ancestor element. For example: body{margin-top:0px} is to keep the contents of the browser window close to the top edge of the window.
Note: This attribute can be negative, but unfortunately Netscape 4 does not support this negative margin value.
Margin-right
Attribute Value:<length> | <percentage> | Auto
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This property sets the margin to the right of an element that can be relative to the browser window border or relative to the ancestor element.
Note: This property can be a negative value.
Margin-bottom
Attribute Value:<length> | <percentage> | Auto
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This element sets the margin at the bottom of an element that can be relative to the browser window border or relative to the ancestor element.
Note: This property can be a negative value.
Margin-left
Attribute Value:<length> | <percentage> | Auto
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This element sets the margin to the left of an element that can be relative to the browser window border or relative to the ancestor element. The above four properties can be understood in the following example.
<HTML>
<title>css demo</title>
<style type= "Text/css" >
p{
Margin-top:0em;
Margin-right:2em;
Margin-bottom:3em;
Margin-left:6em;
}
</style>
<body>
<p>this is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings.</p>
</body>
</HTML>
Padding-top
Attribute Value:<length> | <percentage>
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This property sets the top padding distance for an element. Its property value can be specified using either a length value or a percentage value. But its value cannot be negative, and if a negative is specified, the browser will turn it into the closest value it can support when it executes: 0
P{PADDING-TOP:15PX}
Padding-right
Attribute Value:<length> | <percentage>
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This property sets the right padding distance for an element. Its property values can be specified using either a length value or a percentage value, but negative values cannot be used.
Padding-bottom
Attribute Value:<length> | <percentage>
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
Using these mice properly in a dynamic page can sometimes be an unexpected effect. For example, there is a link to the goal of the Help file, so you can use the Help form of the mouse. And in some pages that need to use mouse events, if you want to tell the user where to click the mouse, so long as a specific location on the page to make the mouse into a hand, the user will be able to identify the active area on the page.
This property sets the bottom padding distance for an element. Its property values can be specified using either a length value or a percentage value, but negative values cannot be used.
Padding-left
Attribute Value:<length> | <percentage>
Initial value: 0
Apply to: all elements
Inheritance: No
Percent value: Refer to the width of the parent element
This property sets the bottom padding distance for an element.
Its property values can be specified using either a length value or a percentage value, but negative values cannot be used. The four properties described above can be seen in the following examples:
<HTML>
<title>css demo</title>
<style type= "Text/css" >
p{
Padding-top:0em;
Padding-right:2em;
Padding-bottom:3em;
Padding-left:6em;
}
</style>
<body>
<p>this is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings. This is sample text shows the margin settings.</p>
</body>
</HTML>
Border-top-width
Attribute Value: Thin | Medium | Thick | <length>
Initial value: "Medium"
Apply to: all elements
Percent value: not applicable
Inheritance: No
The element sets the width of the top border of the element, and its property values can be specified using keywords or numbers. There are three keywords: the thin is represented as the most slender border, thick is the thickest, and the medium is medium width.
Border-right-width
Attribute Value: Thin | Medium | Thick | <length>
Initial value: "Medium"
Apply to: all elements
Percent value: not applicable
Inheritance: No
The element sets the width of the right border of the element, and its property values can be specified using keywords or numbers.
Border-bottom-width
Attribute Value: Thin | Medium | Thick | <length>
Initial value: "Medium"
Apply to: all elements
Percent value: not applicable
Inheritance: No
The element sets the width of the bottom border of the element, and its property values can be specified using keywords or numbers.
Border-left-width
Attribute Value: Thin | Medium | Thick | <length>
Initial value: "Medium"
Apply to: all elements
Percent value: not applicable
Inheritance: No
This element sets the width of the left border of the element, and its property values can be specified using keywords or numbers.
Border-color
Attribute value: <color>{1,4}
Initial value: Value of ' color ' property
Apply to: all elements
Inheritance: No
Percent value: not applicable
The border color property can set the color of the four border of the element, and when you give the four color attribute values, the order of their representation is up, right, down, and left. If only one value is given, the color of the four borders is the same. If two or three values are given, the color of the missing edges is fetched from the edge. If no color value is given when the border is specified, the color of the border is equal to the color of the element's "color" property value.
Border-style
Property value: None | Dotted | Dashed | Solid | Double | Groove | Ridge | Inset | Outset
Initial value: None
Apply to: all elements
Inheritance: No
Percent value: not applicable
"Border-style" determines the style of the border. If the value of the border width is 0, the property values are not valid. In other words, this property must be used for visible borders.
The "Border-style" property value has nine keywords to describe, and their names and definitions are as follows:
Keyword explanation
None does not draw a border, regardless of the width of the border-width, the border is not displayed.
The style of the dotted border is a dotted line consisting of dots.
The dash border is styled as a dashed line consisting of dashes.
The solid border is a solid line.
Double border lines are two lines. The double line plus the width of the blank portion between them equals border-width width.
Groove 3D groove-like border.
Ridge 3D Ridge-shaped border.
Inset 3D inline border (darker color)
Outset 3D outer-nested border (lighter color)
A property value can specify one, two, three, or four. If only one attribute value is given, then all borders are this style, and if four values are given, they are used for the top, right, bottom, and left four borders respectively. If only two or three values are given, the property value of the missing edge is fetched from the edge.
Width
Attribute Value:<length> | <percentage> | Auto
Initial value: Auto
Applies To: block-level elements and replaceable elements
Inheritance: No
Percent value: Refer to the width of the parent element
All block-level elements and replaceable elements have a width (width) attribute. Width You can define the width of an element with a length value, a percentage value.
Height
Attribute Value:<length> | Auto
Initial value: Auto
Applies To: block-level elements and replaceable elements
Inheritance: No
All block-level elements and replaceable elements can have the height attribute. Its definition is similar to the Width property. However, it should be noted that the height property cannot be specified with a percentage value. If you combine height with width, you can control the height and width values of an element well. When height and width are "auto", changing any of them can proportionally scale the picture accordingly.
Float
Property value: Left | Right | None
Initial value: None
Apply to: all elements
Inheritance: No
Percent value: not applicable
Use the float element to wrap text around four weeks of an element. When the property value is right or left, the element appears appropriately on the right-hand or the edge, that is, the text wraps around the element's left-hand or right side.
Clear
Property value: None | Left | Right | Both
Initial value: None
Apply to: all elements
Inheritance: No
Percent value: not applicable
This property is related to float, which specifies whether to allow wrapping text (or other objects) to appear on one side of an element. If the specified property value is right, then all space on the right-hand side of the element is not placed in any object. If the property value is "None", then the element is surrounded by object wrapping, which is also the default property value.
