A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
6. CSS attributes in dw4
The CSS style of dreamweaver4 contains all CSS 1 attributes defined by W3C standards. dreamweaver4 classifies these attributes into type, background, and block attributes) box, border, list, positioning, and extensions are described in detail.
The Type Panel mainly sets the font, size, color, effect, and other basic styles of text. When setting, we only set the attribute to be changed, and there is no need to change the attribute.
Font: Set the font family. What is the font family? It refers to setting several fonts for the text. When a text cannot be displayed in the first font, it is automatically displayed in the second or later font of the series. The corresponding CSS attribute is "font-family ".
Size: defines the size of the text. You can select a specific font size by selecting numbers and measurement units, or you can select a relative font size. It is best to use pixels as the unit so that text will not be deformed in the browser. Generally, a small font uses a standard 12px. The corresponding CSS attribute is "font-size ".
Note: The unit of length in CSS is the unit of absolute length and the unit of relative length. Generally, the units of absolute length commonly used include:
Style: defines the font style as normal, italic, or oblique. Italic and oblique are italic fonts. The default value is normal. The corresponding CSS attribute is "font-style ".
Line Height: Set the Row Height of the text. The default value is normal. You can also enter a precise value and select a measurement unit. For example, 140% indicates that the line height is 1.4 times the text size. The corresponding CSS attribute is "line-height ".
Decoration: Add underline, overline, line-through, and blink in the text ). These effects can coexist. Select the check box before the effect. The corresponding CSS attribute is "text-decoration ".
Weight: Specify the pound value of the bold Chinese character for the font. Normal is equivalent to 400; bold is equivalent to 700. Bold is generally used for bold characters. The corresponding CSS attribute is "font-weight ".
Variant: allows you to select a variant of the font. When small-caps is selected, all letters in this style area are capitalized. The corresponding CSS attribute is "font-variant ".
Case: Convert the first letter of each word in the selection area to uppercase, or make all or all words in lowercase. Parameters: Capitalize, uppercase, lowercase, and none ). The corresponding CSS attribute is "text-transform ".
Color: defines the text color. The corresponding CSS attribute is "color ".
2. Background (background)
The background panel is used to set the background of an element, including the background color, background image, and background image control. It is generally set for the body (PAGE), table (table), Div (area.
Background Color: Specifies the background color of an element. The corresponding CSS attribute is "background-color ".
Background Image: sets the background image of an element. The corresponding CSS attribute is "background-image ".
Repeat: determines whether or not the background image is repeated. No repeat: displays the image at the beginning of the element. Repeat: tile the image horizontally and vertically in the background of the element. Repeat-X and repeat-Y: Repeat is displayed both horizontally and vertically. The default value is repeat. The corresponding CSS attribute is "background-repeat ".
Attachment: Fixed background image or scroll with content. The fixed parameter indicates a fixed background, and scroll indicates a background that follows content scrolling. The corresponding CSS attribute is "background-attachment ".
Horizontal: Specifies the horizontal position of the background image. You can specify left, center, right, or a value. For example, 20 PX indicates that the background is 20 pixels away from the left. The corresponding CSS attribute is "background-position ".
Vertical: Specifies the vertical position of the background image. You can specify top, center, and bottom. You can also specify a value. The corresponding CSS attribute is "background-position ".
The block Panel mainly sets the text spacing, alignment, superscript, subscript, arrangement, and indentation of the first line of the object text.
Word Spacing: Set the spacing between words. You can set a negative value. The corresponding CSS attribute is "word-spacing ".
Letter Spacing: Set the spacing between characters. A negative value can be specified. Because Chinese characters are also characters, this parameter can be used to set the spacing between texts. The corresponding CSS attribute is "letter-spacing ".
Vertical align: Specifies the vertical alignment of elements. You can specify sub (subscript), super (superscript), top (aligned with the top), middle (centered), bottom (aligned with the bottom )....... The corresponding CSS attribute is "vertical-align ".
Text align: sets the text arrangement mode. Left, right, center, and justify ). The corresponding CSS attribute is "text-align ".
Text indent: Specifies the indent value of the first line of text. A negative value is used to pull the first line of text outward. To empty two cells before each segment, you can set it to 2em because em is the current font size and 2em is the size of the two words. The corresponding CSS attribute is "text-indent ".
Whitespace: Set how to process blank spaces in an element. There are three Optional options: normal compresses all the blank spaces; Pre processes the blank spaces like the text in the PRE Tag (that is, all the blank spaces, including spaces, labels, press enter, and so on); nowrap specifies that the text will only wrap when the BR label is encountered. The corresponding CSS attribute is "white-space ".
The box Panel mainly sets the boundary, spacing, height, width, and floating mode of the object.
Width: defines the width of an element. The corresponding CSS attribute is "width ".
Height: defines the height of an element. The corresponding CSS attribute is "height ".
Float: defines the floating mode of elements. Left indicates that the object is floating on the left, right indicates that the object is floating on the right, and none indicates that the object is not floating. The corresponding CSS attribute is "float ".
Clear: do not allow floating of elements. Left: Float objects on the left are not allowed; Right: Float objects on the right are not allowed; none: Float objects on both sides are allowed; and both: Float objects are not allowed. The corresponding CSS attribute is "clear ".
Padding: defines the blank distance between the element content and its border (if the element does not have a border, it refers to the blank area of the page side ). You can set the top (upper), right (right), bottom (lower), and left (left) values respectively. The corresponding CSS attributes are "padding; padding-top; padding-right; padding-bottom; padding-left ".
Margin: defines the distance between the border of an element and other elements (if there is no border, it refers to the distance between the content ). You can set values of top (upper boundary), right (right boundary), bottom boundary (bottom boundary), and left (left boundary) respectively. The corresponding CSS attributes are respectively "margin; margin-top; margin-right; margin-bottom; margin-left ".
The following figure shows the relationship between the whitelist, border, and border:
5. Border (Border)
The border panel allows you to set the width, color, and style of the object border.
Width: Set the width of the element edge. You can set the top (top width), right (right width), bottom (bottom width), and left (left width) values respectively. The corresponding CSS attributes are "border; border-top; border-right; border-bottom; border-left ".
Color: Set the border color. You can set the color of each edge separately. The corresponding CSS attributes are "border-color; border-top-color; border-right-color; border-bottom-color; border-left-color ".
Style: Set the border style. It can be set to none, dotted, dashed, solid, double, groove, and ridge), inset (concave side), outset (convex side) and other border styles. The corresponding CSS attribute is "border-style ".
The list panel allows you to set the list item style, list item image, and position.
Type: Set the default tag used by the list item. You can set the following styles: Disc (solid circle), circle (hollow circle), square (square), decimal (Arabic numerals), and lower-Roman (lowercase roman numerals) upper-Roman, lower-Alpha, upper-Alpha, and none ). The corresponding CSS attribute is "list-style-type ".
Bullet image: sets the image of the list item. The URL or path of the image. The corresponding CSS attribute is "list-style-image ".
Position: Set whether the list item is in or out of the text. Inside: The list item tag is placed within the text, and outside: The list item tag is placed outside the text. The corresponding CSS attribute is "list-style-position ".
The positioning panel is equivalent to placing an object in a layer for locating, And it is equivalent to the DIV tag of HTML. You can view the definition as a layer defined by CSS.
Type: sets the object Positioning method. There are three methods: absolute (absolute positioning), relative (relative positioning), static (no special positioning ). The corresponding CSS attribute is "position ".
Visibility: sets the initial display status of the object positioning layer. There are three states: Inherit (inheriting the display attribute of the parent layer), visible (object visibility), and hidden object. The corresponding CSS attribute is "visibility ".
Z-index: Set the order in which objects are stacked. A layer with a large number is displayed on a layer with a small number. The variable value can be a positive value or a negative value. The corresponding CSS attribute is "Z-index ".
Overflow: sets how to process the content of a layer if the content of the layer exceeds the size of the layer. There are four Processing Methods: visible, increasing the layer size to display all the content of the layer; hidden, keep the layer size unchanged, and cut out the content beyond the layer; scroll, the scroll bar is always displayed. Auto displays the scroll bar only when the content exceeds the boundaries of the layer. The corresponding CSS attribute is "overflow ".
Placement: Set the position and size of the object positioning layer. You can set left, top, width, and height respectively ). The corresponding CSS attributes are left; top; width; height ".
Clip: defines the visible area of the positioning layer. The area is not visible and transparent. It can be understood as the effect of placing a rectangular mask on the positioning layer. The corresponding CSS attribute is "clip ".
Note: When absolute positioning is set in type, an absolute positioning layer is added to the object. The layer created by this CSS has an attribute panel like a general layer and is displayed in the layer management panel. You can modify the above parameters by setting the attribute Panel of the positioning layer. However, the changed value in this attribute panel will be added to the object tag as an embedded style, which is the attribute Panel of the positioning layer:
8. Extensions (Extension)
Pagebreak: When printing, it forces a new page before and after the style-controlled object.
Cursor: changes the shape of the mouse when you move the mouse over a style-controlled object. Options include hand, crosshair, text, wait, default, and help) e-resize (East arrow), Ne-resize (northeast arrow), N-resize (North arrow), NW-resize (Northwest arrow), w-resize (West arrow) sw-resize (southwest arrow), S-resize (South arrow), se-resize (Southeast arrow), and auto (auto ).
Filter: add the filter effect to the style. As this attribute contains a lot of content, we will introduce the filter separately in the next chapter.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service