Some attributes are often used in the div layout process. This article lists some common layout-related attributes. If you need them, you can refer to them and hope to familiarize yourself with common div attributes.
I. attribute list
The Code is as follows:
Color: #999999 text color
Font-family: text font
Font-size: 10pt text size
Font-style: itelic text oblique sports
Font-variant: small-caps small font
Letter-spacing: 1pt text spacing
Line-height: 200% sets the Row height.
Font-weight: bold text in bold
Vertical-align: sub subscript
Vertical-align: superscript
Text-decoration: line-through plus? H Division
Text-decoration: overline
Text-decoration: underline and bottom line
Text-decoration: none? H Remove Connection bottom line
Text-transform: capitalize capital
Text-transform: uppercase in uppercase
Text-transform: lowercase written in English
Text-align: right text * right-aligned
Text-align: left text * left aligned
Text-align: align center text
These are some simple text effects that can be applied to css pages.
Background
Background-color: black background color
Background-image: url (image/bg.gif) background image
Background-attachment: fixed background
Background-repeat: repeat arranged repeatedly-webpage presets
Background-repeat: no-repeat is not arranged repeatedly
Background-repeat: repeat-x is arranged repeatedly on the x axis
Background-repeat: repeat-y in the y axis
Background-position: 90% 90% position of the background image x and Y axis
Link
A All hyperconnections
A: link hyper-connection text format
A: The format of the connected text browsed by visited
A: active press connection format
A: hover move the cursor to the connection
Border
Border-top: 1px solid black
Border-bottom: 1px solid # 6699cc
Border-left: 1px solid # 6699cc left box
Border-right: 1px solid # 6699cc right box
Border: 1px solid # 6699cc four border
Dotted Line
Solid line
Set the height of p to be the same as the Row height of the text, that is, the line-height and height values are the same, and finally give p A over-flow: hidden, hide the excess parts.
Ii. common attributes
The Code is as follows:
1. Height: Set the DIV Height. Width: Set the DIV Width.
2. margin: used to set the extension margin of the DIV, that is, the distance to the parent container. Margin: the distance between the backend and the left side of the parent container is the distance from top to right to bottom of the parent container. margin: [top] [right] [bottom] [left]
You can set the distance: margin-left: To the left border of the parent container, margin-right: To the right border of the parent container, and margin-top: to the border of the parent container; margin-bottom: the distance from the bottom border of the parent container.
3. padding: used to set the inner margin of a DIV (for example, the distance between the child element and the DIV boundary ). Padding: the distance between the backend and the left side of the parent container is the distance from top to right to bottom of the parent container. margin: [top] [right] [bottom] [left]: it should be noted that the distance set by padding is not included in its own width and height (in IE7 and FF). For example, if the width of a DIV is set to 100px, if the padding-left parameter is set to 50px, The DIV will display a width of 150px on the page.
4. border: Set the DIV border style; display: Set the display attribute. Its values include block and none; float: sets the direction of the DIV on the page. Its values include left (displayed on the left), right (displayed on the right), and none;
Background: Set the background style of the DIV. After the background, you can directly follow the background color, background image, tile mode, and other styles. You can also set them with the following attributes.
Background-color: Specifies the background color. background-attachment: Specifies the appending method of the background image. The value options include scroll and fixed. background-image: Specifies the background image to be used. background-repeat: tiled background image. Its values include no-repeat (not tiled), repeat (tiled in two directions), repeat-x (horizontally tiled), repeat-y (vertically tiled), and background-position: locate the background position in the DIV. Its values are different combinations of top bottom left right. You can also use coordinates to specify the specific position.
5. position: Set the position of the DIV. Position has four attributes: static, fixed, relative, and absolute. Commonly used relative and absolute. If static is specified, DIV follows the HTML rule. If relative is specified, you can use top, left, right, and bottom to set the offset of DIV on the page (relative to its own offset ), however, the layer is unavailable at this time. If it is specified as absolute, you can use top, left, right, and bottom to absolutely locate the DIV (the parent element closest to yourself ); if it is specified as fixed, the position of the DIV in IE7 and FF remains unchanged from that on the screen. IE6 has no effect (for some reason ).
6. font: Specify the text style in the DIV, followed by multiple styles in the text. Font-family: Set the font name to be used; font-weight: Specifies the text width, which has bold bolder lighter values; font-size: Specifies the text size; font-style: specify the text style, whose values include italic normal oblique, color: Specify the text color, text-align: Specify the horizontal alignment of the text, whose values include center (center) left right justify; text-decorator: used for text modification; its values include a combination of none underline overline-through and blink; text-indent: set text indent; text-transform: set the uppercase and lowercase letters of the text. The value is lowercase uppercase capitalize (uppercase) none; direction: the flow of content. The values include ltr (from left to right), rtl (from right to left), line-height: The Row height of the specified text, and Word-spacing: the padding.
7. overflow: Controls content overflow. Its values include scroll (always display the scroll bar), visible (not display the scroll bar, but visible beyond part), and auto (display the scroll bar when the content exceeds the limit) and hidden (when the content exceeds the upper limit ).
Iii. Special Effects:
1. z-index: Set the sequence of DIV cascade. When using the z-index attribute, the position must be specified as absolute.
2. cursor: Set the style of the cursor on the DIV.
3. clip: Set the editing rectangle. Clip: rect (top right bottom left); specifies the distance between top, bottom, and left. However, set position to absolute.
4. opacity transparency filter: alpha (opacity = value) eg: filter: alpha (opacity = 50); opacity: 0.5;
Iv. Positioning and Control
Absolute and relative positioning)
Absolute positioning:
The positioning attribute will be the key for the net worms to open the door to happiness:
H4 {position: absolute; left: 100px; top: 43px}
This CSS rule allows the browser to precisely set the starting position to 100 pixels on the left of the browser and 43 pixels on the top of the browser. Note that the only setting here is the left and top. That is to say, the text will be loaded from left to right into the browser window from top to bottom.
The properties on the left and top are intuitive. The left is the distance between the elements on the left and the top of the browser window. When setting these distances, you can use the units or proportions of the learned degrees. When the ratio value is used, the size of the ratio value is relative to the parent element.
What can you find? Anything! Paragraphs, words, GIF and JPEG images, and QUICKTIME movies.
Relative positioning:
Absolute positioning allows you to precisely locate the independent location of elements on the page without considering the positioning settings of other elements on the page. Relative positioning refers to the location of the element you locate relative to the location allocated in the file. Example:
I {position: relative; left: 40px; top: 10px}
The key to relative positioning is that the location of the positioning element is usually relative to the location where it should be located. The relative positioning unit appears in the line of a common static positioning unit. When positioning, the unit is not completely separated from the static positioning unit. If you stop using relative positioning, the text display position will return to normal. Be careful when using relative positioning; otherwise, the page may be messy.
In addition to relative positioning and absolute positioning, you can also use static parameter values. Static is the default value of position. Its usage is the same as that in common HTML, and special positioning settings cannot be attached. That is to say, in addition to the margin feature or the float feature, floating units can affect the positioning of units.
Control of positioning unit (width, height, visiblility)
In addition to controlling the position in the upper left corner of the positioning unit, you can also control the width and height of the unit and the visibility of the Unit on the page.
Width: The positioned elements are still displayed from left to right when displayed on the page. You can use the width attribute to set the limit on the movement of characters to the right, that is, to set the width of the elements.
DIV {position: absolute; left: 200px; top: 40px; width: 150px}
When the browser receives this rule, it displays the text according to the rule, and limits the maximum horizontal size of the paragraph to 150 pixels.
The width attribute applies only to absolute positioning elements. You can use any length unit we have learned, or use a ratio value to set the width. the ratio value refers to the ratio to the parent element. In IE 4, this attribute can also be used for images. You can set the width to artificially pull the width or compress the image.
Height: In theory, the height should be similar to the width setting, but only in the vertical direction:
DIV {position: absolute; left: 200px; top: 40px; height: 150px}
Here I use "Theoretically speaking" because some Browsers Do not support high attributes.
Visibility: with CSS, you can hide elements to make them invisible on the page. This attribute applies to the located and unpositioned elements.
H4 {visibility: hidden}
Option:
Visible allows elements to be seen
Hiding Elements
Inherit indicates that it inherits the visibility settings of the parent element.
The value inherit is the default value. This allows the unit to inherit the visibility of the parent unit. Therefore, if a segment is hidden, any inter-line Unit contained in it is also hidden. This inheritance can be replaced by explicitly specified visibility. For example, if the EM unit in a segment is specified as visible, if the segment is hidden, all other content in the segment will disappear, and only the text in the EM unit is visible.
When an element is hidden, it still occupies the original space in the browser window. Therefore, if you enclose the text in a hidden image, the display effect will be that the text is surrounded by a blank area. This news
This attribute is useful when writing languages and using dynamic HTML. For example, you can display a paragraph or image only when the mouse slides.
Unit level (z-index)
Feature z-index is used to stack cells on the screen. By default, unit stacks appear in the order of HTML tags-that is, the Unit stacks appear in the beginning. The Z-index feature actually defines the stacking sequence of the same sibling unit and the stack of the unit relative to the parent unit. According to the draft Specification, unit groups with positive z-index values are stacked on the parent unit, their stacking order is determined by the value (the unit with a large value is on the upper layer ). Similarly, unit groups with Negative z-index values are stacked under the parent unit, and their stacking order is determined by the value size (units with large values are on the upper layer, for example, a unit with a value of-1 is above a unit with a value of-2 ).
This parameter uses a pure integer. Z-index is used for absolute or relative positioning. You can also set the z-index for the image. (For Communicator, it is best to package tags in Or label, and then apply the z-indexOr .)
Clip)
The absolute positioning unit can be edited-that is, the area where the clip is displayed to the user. only part of the unit is displayed and the rest is transparent. This is not a very useful feature for traditional text and image-based Web pages. However, it is useful to request a Multimedia Page. For example, Netscape Communivator 4 and Internet Explorer 4 both support multimedia pages. They dynamically adjust the editing area around the Unit through the script interface of the document, in this way, the real-line text is displayed as "drag" and the image is gradually displayed.
In CSS, the clip is controlled by the clip feature. This feature can only be used for absolute positioning units. The default value is auto, and the clip unit is based on the outer edge of the Unit (which is actually equal to no clip ). In addition, you can use the following expression to set the editing box:
Clip: rect (top, right. bottom, left );
Top, right, bottom, and left are the top, right, bottom, and left of the rectangular editing box relative to the upper left corner of the clip unit. The Top, right, bottom, and left values can be any absolute or relative length value (but cannot be a percentage value), or the keyword auto. If the value is auto, it means that after each side of the editing area is placed, NO content in the Editing Unit will exceed this area.
Overflow)
Fixed the width and height of the absolute or relative positioning Unit. It is likely that the specified area cannot meet the actual content needs of the unit, resulting in the overflow of the unit content. In this case, you can use overflow to specify how the browser handles overflow: the value of none (default) allows the browser to display overflow content, so the unit can overflow the specified area. The clip value requires the browser to edit the unit content at the bottom and right of the unit, so that the unit content beyond the specified area is not displayed. Scroll also requires the browser to edit the unit content (same as clip) at the bottom and right of the unit. However, the browser should (if possible) provides a scroll bar for units so that users can scroll through the edited content.
