DIV common attributes collection

1. Property List

Copy code

The code is as follows:

color : #999999 text color
font-family: Songti font
font-size : 10pt text size
font-style: itelic text italic
font-variant:small-caps Small font
letter-spacing: 1pt
line-height : 200% Set the line height
font-weight:bold Text bold
vertical-align:sub subscript
vertical-align:super superscript
text-decoration:line-through add?h to remove the line
text-decoration:overline
text-decoration:underline Add underline
text-decoration:none ?h except for the connecting bottom line
text-transform : capitalize
text-transform: uppercase English capitalization
text-transform : lowercase English writing
text-align:right text*right aligned
text-align:left Text*left aligned
text-align:center Text is centered. 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 fixed background
background-repeat: repeat Repeat arrangement-webpage preset
background-repeat : no-repeat Do not repeat
background-repeat : repeat-x repeats on the x-axis
background-repeat : repeat-y repeats on the y-axis
background-position : 90% 90% The x and y position of the background image is linked
A All hyperlinks
A:link Hyperlink text format
A: visited link text format
A:active Press the connected format
A:hover the mouse to the connection border
border-top : 1px solid black top frame
border-bottom : 1px solid #6699cc bottom border
border-left : 1px solid #6699cc left border
border-right : 1px solid #6699cc right border
border: 1px solid #6699cc four border dashed lines
<TEXTAREA STYLE="border:1px dashed pink">
Solid Line
<TEXTAREA STYLE="border:1px solid pink">
Just set the height of the div to the same as the line height of the text, that is, the values of line-height and height are the same, and finally give the div an overflow: hidden to hide the excess part.

2. Common attributes

Copy code

The code is as follows:

1. Height: set the height of DIV; Width: set the width of DIV.
2. Margin: used to set the outer margin of DIV, that is, the distance to the parent container. Margin: followed by four distances, which are the distance to the top, right, bottom and left of the parent container; margin: [top][right][bottom][left]
You can set them separately: margin-left: the distance to the left border of the parent container; margin-right: the distance to the right border of the parent container; margin-top: the distance to the top border of the parent container; margin-bottom: the distance to the bottom border of the parent container.
3. Padding: used to set the inner margin of DIV (such as the distance between the child elements and the DIV border). padding: is followed by four distances, namely the distance to the top, right, bottom and left of the parent container; margin: [top][right][bottom][left]: It should be noted that the distance set by padding is not included in the width and height of the DIV itself (in IE7 and FF). For example, if the width of a DIV is set to 100px and padding-left is set to 50px, then the DIV will be displayed as 150px wide on the page.
4. border: set the border style of DIV; display: set the display properties. Its values include block and none; float: sets the flow direction of DIV on the page. Its values include left (display on the left), right (display on the right), and none;
background: Set the background style of DIV; background can be followed directly by background color, background image, tiling method and other styles. You can also set them individually using the following properties.
background-color: set the background color; background-attachment: the way the background image is attached, its values are scroll and fixed; background-image: specify the background image to use; background-repeat: the way the background image is tiled. Its values include no-repeat (no tiling), repeat (tiling in both directions), repeat-x (tiling in horizontal direction), and repeat-y (tiling in vertical direction); background-position: locate the background position in DIV. Its values can be different combinations of top, bottom, left and right. You can also specify a specific location using coordinates.
5. Position: Set the positioning method of DIV. The properties of position include static, fixed, relative, and absolute. Relative and absolute are commonly used. If static is specified, DIV follows HTML rules; if relative is specified, top, left, right, and bottom can be used to set the offset of DIV in the page (relative to its own offset), but layers cannot be used at this time; if absolute is specified, top, left, right, and bottom can be used to absolutely position DIV (relative to its nearest parent element); if fixed is specified, the position of DIV is fixed relative to the screen in IE7 and FF, and has no effect in IE6 (for some reason).
6. font: specifies the style of the text in DIV, which can be followed by multiple text styles. font-family: sets the name of the font to be used; font-weight: specifies the thickness of the text, its values include bold, bolder, lighter, etc.; font-size: specifies the size of the text; font-style: specifies the text style, its values include italic, normal, oblique, etc.; color: specifies the text color; text-align: specifies the horizontal alignment of the text, its values include center, left, right, justify; text-decorator: used for text decoration; its values include a combination of none, underline, overline, line-through and blink; text-indent: sets the indentation of the text; text-transform: sets the case of the text. Its values are lowercase uppercase capitalize (first letter capitalized) none; direction: the direction of the content flow. Its values include ltr (left to right) and rtl (right to left); line-height: specifies the line height of the text; word-spacing: word spacing.
7. overflow: content overflow control, its values include scroll (always display scroll bar), visible (no scroll bar, but the exceeding part is visible), auto (display scroll bar when content exceeds), hidden (hide content when exceeding).

3. Some special effects:

1. z-index: Set the stacking order of DIV. When using the z-index property, position must be specified as absolute.

2. cursor: Set the cursor style on DIV.

3. clip: Set the clipping rectangle. clip:rect(top right bottom left); sets the distance between the top, bottom, left and right sides, but at this time, the position must be specified as absolute.

4. opacity filter:alpha(opacity=value) eg: filter:alpha(opacity=50);opacity:0.5;

4. Positioning and Control

Absolute and relative positioning

Absolute positioning:

Positioning attributes will be the key for netizens to open the door to happiness:

H4 { position: absolute; left: 100px; top: 43px }

This CSS rule tells the browser to position the <H4> element to start exactly 100 pixels from the left side of the browser and 43 pixels from the top. Note that the only settings here are the left and top, that is, the text will be loaded into the browser window from left to right and from top to bottom.

The left and top properties are very intuitive. The left (left) sets the distance of the element from the left side of the browser window, and the top (top) sets the distance from the top of the browser window. When setting these distances, you can use the various degree units or ratio values you have learned. When using a proportional value, the proportional value is relative to the size of the parent element.

What can you target? Anything! Paragraphs, words, GIF and JPEG images, QUICKTIME movies, etc.

Relative positioning:

Absolute positioning allows you to precisely position an element at an independent location on a page, regardless of the positioning settings of other elements on the page. Relative positioning means that the position of the element you are positioning is relative to the position assigned in the document. example:

I { position: relative; left: 40px; top: 10px }

The key to relative positioning is that the position of the positioned element is relative to where it would normally be. Relative positioning elements appear between the lines of ordinary static positioning elements, and do not completely separate themselves from the static positioning elements when positioning. If you stop using relative positioning, the text will return to normal display position. Be careful when using relative positioning, otherwise it is easy to make the page very messy.

In addition to relative and absolute positioning, you can also use the static parameter value. Static is the default value for the position property. Its usage is the same as the positioning method in ordinary HTML, and no special positioning settings can be added. That is, the positioning of a cell cannot be affected by margin properties or by floating the cell using the float property.

Control of positioning unit (width, height, visibility)

In addition to controlling the position of the top-left corner of the positioning unit, you can also control the width and height of the unit, as well as the visibility of the unit on the page.

Width: Positioned elements will still appear from left to right on the page. The width attribute can be used to set the limit of the character flow to the right, that is, to set the width of the element.

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

When the browser receives this rule, it displays the text as specified by the rule and also limits the maximum horizontal size of the paragraph to 150 pixels.

The width attribute only applies to absolutely positioned elements. You can use any of the length units we've learned, or you can set the width using a proportional value, which is a ratio relative to the parent element. In IE 4, this property also applies to images. You can artificially widen or compress the image using the width setting.

Height: In theory, the height should be set similarly to the width, but in the vertical direction:

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

I used "in theory" here because some browsers don't support the height attribute.

Visibility: Using CSS, you can hide elements, making them invisible on the page. This property applies to both located and unlocated features.

H4 { visibility: hidden }

Options:

visible makes the element visible

hidden makes the element hidden

inherit means it will inherit the visibility setting of the parent element.

The value inherit is the default. This makes the cell inherit the visibility of its parent cell. So, if a paragraph is hidden, any inline cells it contains are also hidden. This inheritance can be overridden by explicitly specifying visibility. For example, if an EM unit within a paragraph is designated as visible, and the paragraph is hidden, all other content within the paragraph disappears and only the text within the EM unit is visible.

When an element is hidden, it still occupies the original space in the browser window. So, if you wrap text around a hidden image, the resulting display will be that the text surrounds a blank area. This news

This attribute is useful when writing languages and using dynamic HTML. For example, you can make a paragraph or image appear only when the mouse moves over it.

Cell hierarchy (z-index)

The z-index property is used to stack elements on the screen. By default, cells are stacked in the order in which they appear in the HTML tag—that is, cells that appear later are stacked on top of cells that appear earlier. The z-index property actually defines the stacking order of sibling cells and the stacking of cells relative to their parent cell. According to the draft specification, groups of cells with positive z-index values are stacked on top of their parent cells, and their own stacking order is determined by the size of their values (cells with larger values are on top). Likewise, groups of cells with negative z-index values are stacked below their parent cells, and their own stacking order is determined by the size of their values (cells with larger values are on top, for example, cells with a value of -1 are above cells with a value of -2).

This parameter value uses a pure integer. z-index is used for absolutely or relatively positioned elements. You can also set the z-index of the image. (For Communicator, it is better to wrap the <IMG> tag inside a <SPAN> or <DIV> tag and then apply z-index to the <SPAN> or <DIV>.)

Clip absolute positioning unit (clip)

Absolutely positioned cells can be clipped - that is, the area displayed to the user is clipped, showing only part of the cell and making the rest transparent. For traditional text and image based web pages, this is not a very useful feature. But it is useful if multimedia pages are required. For example, Netscape Communivator 4 and Internet Explorer 4 both support multimedia pages. They dynamically adjust the clipping area around the unit through the document's script interface, thereby enabling display features such as solid text "scratch-in" and image fading.

In CSS, clipping is controlled through the clip property, which can only be used for absolutely positioned elements. Its default value is auto, which clips the element according to its outer edges (effectively equivalent to no clipping). In addition, the clipping frame can be set by the following expression:

clip : rect(top,right.bottom,left);

Among them, top, right, bottom and left are the positions of the top, right, bottom and left sides of the rectangular clipping box relative to the upper left corner of the clipped unit. The values of top, right, bottom, and left can be any absolute or relative length value (but not percentage values), or the keyword auto. A value of auto means that once the edges of the clipping region are in place, any content in the clipped unit will not extend beyond this region.

Control unit overflow

Fixing the width and height of an absolute or relative positioning unit may cause the unit content to overflow because the specified area cannot meet the needs of the actual content of the unit. You can use overflow to specify how the browser handles overflow: the value none (the default) allows the browser to display overflowing content, so the unit can overflow the specified area. The value clip requires the browser to clip the cell content at the bottom and right of the cell, so that cell content that exceeds the specified area will not be displayed. The value scroll also instructs the browser to clip the cell contents at the bottom and right of the cell (same as clip). However, the browser should (if possible) provide scroll bars for the cell so that the user can scroll to view the clipped content.

<<: Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

>>: How to use Cron Jobs to execute PHP regularly under Cpanel