Quick CSS Manual (5)

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. 1. Type) 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. Note: The property name with * indicates that the style effect cannot be displayed when you edit the document. You must open it in a browser to see the effect. 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 ". Note: dreamweaver4 has six built-in English fonts. Generally, we use the "verdana, Arial, Helvetica, sans-serif" series for English fonts. If you do not need these font series, you need to edit the font series by yourself. You can create a new font series by using the "Edit font list" at the bottom of the drop-down box, you can also manually enter the font name in the drop-down box, separated by commas. The default font for Chinese Web pages is, which is generally empty. Do not select any font. 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: Px: (pixel) determine the length based on the display resolution. PT: (font size) determine the length based on the font size defined by windows. Mm, CN, in: (millimeters, centimeters, inches) determine the length based on the actual size of the display. This type of unit does not change with the display resolution. Unit of relative length: EM: the size of the current text. For example, {font-size: 2em} indicates that the text size is twice the original size. Ex: The height of the current letter "X", generally half of the font size. %: The size is defined as the percentage of the current text. For example, {font-size: 300%} indicates that the text size is three times the original size. Small and large: indicates a dimension smaller than the current size. 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 ". Note: italic and oblique are both italic fonts. The difference between them is that italic is italic, while oblique is italic, and oblique should be used for fonts without italic. 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 ". Note: The default link setting is underline. You can remove the underline by selecting none. Blink is only visible in the NC Browser. 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 ". Note: The color values in CSS Have Three Representation Methods: L # rrggbb format, which is a combination of red, green, and Blue values. The values of each color are two hexadecimal Integers of "00-FF. For example, # ff0000 indicates red, and # FFFF00 indicates yellow. L RGB (R, G, B) format, RGB is a three-color value, take 0 ~ 255. For example, RGB (255,255, 0) indicates red, RGB (, 0) indicates yellow. L use the color name. CSS can use a defined color name. For example, red indicates red, and yellow indicates yellow. 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 ". Note: If you define the body of an element, you can control whether the page background is repeated. 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 ". Note: If the defined element's body is used, the page background can be fixed. 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 ". Note: The horizontal and vertical positions use the same CSS attribute. Pay attention to the setting. 3. Block) 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 ". Note: Generally, Internet Explorer does not support this attribute and is only available on the Mac platform. 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 ". 4. Box) 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 ". Note: Most of the objects defined by width and height are images, tables, and layers. 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 ". Note: We can set different colors to make the effects of bright and dark edges, so that the elements look three-dimensional. 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 ". Note: dotted (DOT line) and dashed (dotted line) must be supported by ie5.5 or later or by the Mac platform; otherwise, the effect is solid line. 6. List) 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 ". 7. Positioning) 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: this parameter is valid only when it is absolutely located. 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. Before: Set the page delimiter that appears before the object. When set to always, the page Delimiter is always inserted before the object. The corresponding CSS attribute is "Page-break-before ". After: Set the page delimiter that appears after the object. When set to always, the page Delimiter is always inserted after the object. The corresponding CSS attribute is "Page-break-after ". Note: ie5 supports only the always and blank values (null ). 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.