Author: Unknown Source: 5D Multimedia includes all CSS1 properties in the W3C specification defines CSS styles in Dreamweaver, Dreamweaver These attributes are classified into Type (type), Background (background), Block (block), Box (box), Border (Border), List (List), eight parts, such as the following picture, below. We will explain in detail. 1. TYPE TYPE panel is mainly set of basic styles such as font, size, color, and effects of text. When setting, we only set the properties to be changed, and there is no need to change the properties. Note: The property name * is that the style effect cannot be displayed when editing the document, and it is necessary to open with a browser to see the effect. Font: Set the word system. What is the character series? It means that a few fonts are set to the text, and when the text that cannot be displayed, the second font or the fonts in the series are automatically displayed. Compared to the CSS attribute is "font-family". Note: Dreamweaver4 has built out 6 series of English fonts, and the general English fonts we have better looks with "Verdana, Arial, Helvetica, Sans-Serif". If you don't need these font series, you need to edit the word system yourself, you can create a new font series through the drop-down "Edit Font List", you can also manually write the font name in the drop-down box, the font is used Common spaced apart. Chinese page default font is a Song, usually do not choose any font. Size: Defines the size of the text. You can choose the specific font size by selecting numbers and metrics, or you can also choose a relative font size. It is best to use Pixels as a unit so that you don't deform in the browser. Generally small fonts with a comparison standard 12px. The corresponding CSS attribute is "font-size". Note: CSS long unit points absolute length unit and relative length units, usually we often use: PX: (pixels) determine the length according to the resolution of the display. PT: (font size) determines the length according to the size of the Windows system defined. MM, CN, IN: (mm, cm, and in) determine the length according to the actual size displayed. Such units do not change with the resolution of the display. The relative length unit is: EM: the size of the current text. For example: {font-size: 2em} means that the text size is 2 times. EX: The height of the current letter "X" is generally half of the font size. %: The size is defined as the percentage of the current text. For example: {font-size: 300%} means 3 times the text size is the original. Small, large: Indicates the size than the current small level or a large level. Style: Defines the font pattern to Normal, Italic, or Oblique. Italic and Oblique are slope fonts. The default is set to Normal. The corresponding CSS attribute is "font-style". Note: Italic and Oblique are both oblique fonts. They are different, italic is a bevel word, while oblique is a tilted text, which should use Oblique for fonts without a bevel.
Line Height: Sets the row of the line in the text. The default is Normal, you can also type a precise value and select a unit of measure. It is more intuitive way to write, for example, 140% is 1.4 times that of the medium is high. The corresponding CSS attribute is "line-height". Decoration: Add underline, overline, line-through, blink (flashing effect) in text. These effects can be present at the same time, and select the check box before the effect. The corresponding CSS attribute is "text-decoration". Note: The default setting for the link is underline, we can remove the underline by choosing None. Blink (flashing effect) is only available in the NC browser. Weight: Specifies the pound value of the crude body word to the font. Normal is equivalent to 400; bold is equivalent to 700. Set crude characters generally use bold. The corresponding CSS attribute is "font-weight". VARIANT: Allows you to select a font variant, select all letters in this style area in this style area. The corresponding CSS attribute is "font-variant". Case: Transfer the first letter of each word in the selection to uppercase, or write all uppercase or lower-write words. Parameters: Capitalize (word first letters), Uppercase (converted to capital), LowerCase, NONE (no conversion). Compared with the CSS attribute is "text-transform". COLOR: Defines the text color. The corresponding CSS attribute is "color". Note: There are three representations of the color in the CSS: L #RRGBB format, which is combined by the value of the three colors of red and blue, and the value of each color is "00 - ff" two hexadecimal integers. For example: # ff0000 means red, # fff00 represents yellow. L RGB (R, G, B) format, RGB is a three-color value, take 0 to 255, for example: RGB (255, 0, 0) means red, RGB (255, 255, 0) indicates yellow. l Use the color name. CSS can use the already defined color name. For example: Red represents red, YELLOW represents yellow. 2. Background (Background) Background panel is mainly set of elements, including background color, background image, background image control. Generally, the Body settings are set to the BODY. Background Color: Set the background of elements. The corresponding CSS property is "Background-Color". Background image: Set the background image of the element. The corresponding CSS attribute is "background-image". REPEAT: Determines whether the background image and how to repeat. NO REPEAT: Displays an image at the beginning of the element. REPEAT: The image in the background part of the element and the vertical tile image. REPEAT-X and REPEAT-Y: Duplicate display in horizontal and vertical directions, default is REPEAT. The corresponding CSS attribute is "background-repeat".
Note: If the body of the defined element, you can control whether the page background is repeated. Attachment: fixed background image or follow the content scroll. Parameters fixed indicates a fixed background, and scroll indicates the background that follows the content scrolling. The corresponding CSS attribute is "background-attachment". Note: If the body of the defined element, you can fix the background background. HORIZONTAL: Specifies the horizontal position of the background image. It can be specified as Left (left), center, Right (right); you can specify a value, such as 20px means 20 pixels on the left side of the background. The corresponding CSS attribute is "background-position". Vertical: Specifies the vertical position of the background image. Can be specified as top (top), center, Bottom, or specify a value. The corresponding CSS attribute is "background-position". Note: The horizontal position and vertical position use the same CSS attribute, pay attention to when setting. 3. Block (block) Block panel mainly sets the text spacing, alignment, subscript, subscript, arrangement method, first line indentation, etc. Word spacing: Set the spacing between words. You can set a negative value. The corresponding CSS attribute is "word-spacing". Note: In general, IE does not support this property, only IE4 available on the Mac platform. Letter Speacing: Set the spacing between characters. You can specify a negative value. Because Chinese is also a character, this parameter can set the spacing between texts. Compared with the CSS attribute is "letter-spacing". Vertical Align: The vertical alignment of the specified element. You can specify a SUB (subscript), super (marketer), TOP (aligned with the top), Middle, Bottom (aligned with the bottom) .... The corresponding CSS attribute is "vertical-align". Text Align: Sets the arrangement of text. Left (left alignment), Right (right alignment), center, Justify (aligned). The corresponding CSS attribute is "text-align". Text Indent: Sets the indentation value of the first line of the text. Negative value is used to pull the text first line. To set two in front of each paragraph, it can be set to 2 eM because the EM is the current font size, 2em is the size of two words. The corresponding CSS attribute is "text-indent". Whitespace: Set how to handle the blank characters in the element. There are three options optional: Normal will compress the blank characters; pre-handle these blanks like the text within the process of processing the pre-tab (that is, all blanks, including spaces, labels, Enter, etc. Keep); NOWRAP specifies that the text will only be wrap when the BR tag is encountered. The corresponding CSS attribute is "White-Space". 4. Box (box) BOX panel mainly sets the boundary, spacing, height, width, and floating methods of the object. Width: Defines the width of the element.
Compared with the CSS attribute is "width". HEIGHT: Defines the high elements. The corresponding CSS attribute is "Height". Note: The width and high definitions are mostly pictures, tables, layers, etc. Float: Defines the floating way of the element. LEFT indicates that the object floats on the left, and the Right represents the object floats on the right, and NONE indicates that the object does not float. The corresponding CSS attribute is "float". CLEAR: The elements are not allowed to float. LEFT means that there is no floating object on the left. The corresponding CSS attribute is "clear". Padding: Defines the empty position of the element content and its border (if the element is not border, it means the blank of the page). You can set the value of TOP (upper filler), Right (right permeable), Bottom (lower whitening), Left (left filler). The corresponding CSS attribute is "Padding; Padding-top; Padding-Right; Padding-Bottom; Padding-LEFT". Margin: Defines the distance between the edge of the element and other elements (if no border is the distance between the content). You can set the value of TOP (upper boundary), Right (right boundary), Bottom (lower boundary), Left (left boundary), respectively. The corresponding CSS attribute is "margin; margin-top; margin-right; margin-bottom; margin-left". The following is the relationship between the filler, the border, the boundary. Figure: 5. Border (Border) Border panel can set the width, color, and style of the object border. Width: Set the width of the edge of the element. You can set the value of TOP (upper width), Right (right width), Bottom, Left (left width), Left (left width). The corresponding CSS attribute is "Border; Border-Top; Border-Right; Border-Bottom; Border-Left". Color: Sets the color of the border. You can set color to each side, respectively. The corresponding CSS attribute is "Border-Color; Border-Top-Color; Border-Right-Color; Border-Bottom-Color; Border-LEFT-color". Note: We can make the effect of bright edges and dark edges by setting different colors, so that the elements look stereo. STYLE: Sets the border pattern. Can be set to None, Dotted, Dashed, Solid, Double (Double Line), Groove, Ridge (Slot), INSET, Outset and other border patterns. Compared with the CSS attribute is "border-style". Note: Dotted, DASHED (Diabed) must have IE5.5 or more or the MAC platform support, otherwise the effect is a solid line. 6. List List panel Sets the list items, list items, and location.
TYPE: Sets the preset tags used by the list item. The styles that can be set include: DISC (solid circle), Circle (hollow circle), Square (square), Decimal (Arabic), Lower-Roman (lowercase Roman), Upper-Roman (uppercase Rome), Lower-Alpha (Lowercase English letters), Upper-alpha (capital English letters), NONE (no project symbol). The corresponding CSS attribute is "List-style-type". Bullet Image: Sets the image of the list item. The value is the URL address or path of the image. The corresponding CSS attribute is "List-Style-Image". Position: Setting the list item or outside the text. Inside: The list item is placed within the text, Outside: The list item is placed outside of the text. The corresponding CSS attribute is "List-style-position". 7. Positioning The positioning panel is equivalent to the object placed in a layer, which is equivalent to the HTML DIV tag. You can see definition as a layer defined by a CSS. TYPE: Set the location of the object. There are three ways: absolute (absolute positioning), Relative (relative positioning), static (no special positioning). Compared with the CSS attribute is "position". Visibility: Sets the initial display status of the object positioning layer. There are three states: inherit (inherited the parent layer display attribute), Visible (object visual), Hidden hidden objects. The corresponding CSS attribute is "Visibility". Z-Index: Sets the laminated order of the object. The larger number of numbered layers will appear on the layer of smaller numbers. The variable value can be a positive value or a negative value. The corresponding CSS attribute is "z-index". OVERFLOW: Sets how if the content of the layer exceeds the size of the layer. There are four ways of processing: Visible, increasing the size of the layer, thereby displaying all the contents of the layer; Hidden, the size of the retaining layer does not change, cut off the content of the layered layer; Scroll, always display the scroll bar; auto, only The scroll bar is displayed when the content exceeds the layer. The corresponding CSS attribute is "overflow". Placement: Set the position and size of the object positioning layer. LEFT (left positioning), Width (Width), Height (High) can be set separately. The corresponding CSS attribute is "Left; Top; Width; Height". CLIP: Defines the visual area of the positioning layer. The part outside the area is an invo-visible area, which is transparent. It can be understood as an effect of placing a rectangular mask on the positioning layer. The corresponding CSS attribute is "clip". Note: This parameter is valid when absolutely positioning. Note: After setting an absolute positioning in Type, a absolute positioning layer is added to the object. The layer created by this CSS is the same attribute panel as the general layer, and is also displayed in the layer management panel.
You can modify the above parameters by setting the properties panel of this positioning layer, but the value in this property panel will be added behind the object tag as an inline style, and the figure below is the property panel of the positioning layer: 8. Extensions PageBreak : Forcing the object before rear after printing when printing. Before: Set the page split before the object appears. When set to always, you always insert a page split before the object. The corresponding CSS attribute is "page-break-before". After: Set the page split on the appearance of the object. When set to always, you always insert a page split after the object. Corresponding CSS attributes are "'>. Note: The above IE5 only supports AlWays values and blank values (NULL). Cursor: Change the mouse shape when the mouse slip-by-controlled object. Can be set to HAND (hand type), Crosshair ("Ten" type), Text ("I", Wait, Wait, Default (default), Help, E-Resize, NE-Resize (Northeast Arrow), N-Resize North Arrow), NW-Resize, W-Resize, Sw-Resize, S-Resize, SE-Resize (Southeast Arrow) and Auto (Auto). Filter : Plus the filter effect in the style. Since this property is more, we will introduce the filter separately. Second, the filter CSS provides some built-in multimedia filters special effects, using this technology Visual filters and conversion effects are added to a standard HTML element, such as pictures, text containers, and others. Dreamweaver4 provides 16 filters to choose from, as shown below: Below, let's take a look at Dreamweaver4 How to make it easy to use these CSS filters. Create a custom style ".filter", select the alpha filter in the Filter drop-down box, we will "alpha (opacity =?, Finishopacity = ?, style =? The Opacity parameter of starty = ?, finish =?) "Is set to 50, and the back parameters are deleted, as shown below: After the OK has established a" .filter "custom style, we put this Style is applied to the picture, the picture is a translucent. If this style is applied to the table, the form also has become a translucent state. Note that all filter effects must be seen in the browser. Below is the original Code:
