CSS Tutorial (vi) A detailed description of CSS properties in DW4

The CSS style in Dreamweaver4 contains all the properties of the CSS1 defined by the code, Dreamweaver4 these attributes into type (type), Background (background), block (block), Box (box), Border (border), List (list), positioning (positioning), Extensions (extension) Eight parts, for example, we explain in detail below.

1. Type (types)

The type panel is mainly about the font, size, color, effect and other basic styles of text settings. When set, we only set the properties to be changed, and the properties that are not necessarily changed are empty.

Note: A property name with an * number refers to a style effect that cannot be displayed when the document is edited, and is opened in a browser to see the effect.

Font: Sets the family of fonts. What is a font family? Refers to setting several fonts on text, which is automatically displayed with the second or subsequent font in the series when it encounters text that the first font cannot display. The corresponding CSS property is "font-family".

Note: Dreamweaver4 has a built-in set of 6 series of English fonts, General English font we use "Verdana, Arial, Helvetica, Sans-serif" This series is more beautiful. If you do not use these font family, you need to edit the font family, you can use the drop-down box, the bottom of the "edit font List" to create a new font family, you can also directly manually in the drop-down box to write the font name, separated by commas between the fonts. The default font for Chinese web pages is Arial, which is generally empty. Don't select any fonts.

Size: Defines how large the text is. You can select a specific font size by selecting numbers and units of measure, or you can choose a relative font size. It is best to use pixels as the unit so that the text in the browser does not deform. The general small body uses the comparison standard 12px. The corresponding CSS property is "Font-size".

Note: The length of the CSS in the units of absolute length units and relative length units, generally we commonly used absolute length units are: px: (pixels) According to the resolution of the display to determine the length.

PT: (font size) determines the length based on the font size defined by the Windows system.

MM, CN, in: (millimeters, centimeters, inches) determine the length according to the actual size of the display. Such units do not change with the resolution of the display.

Relative length units are:

EM: The size of the current text. For example: {font-size:2em} refers to twice times the original text size.

Ex: The height of the current letter "X", typically half the size of the font.

%: Defines the dimensions as a percentage of the current text. For example: {font-size:300%} refers to 3 times times the original text size.

Small, large: represents the size of a level or a level larger than the current one. Style: Defines the font style as normal, Italic, or oblique. Italic and oblique are italic fonts. The default setting is Normal. The corresponding CSS property is "Font-style".

Note: Italic and oblique are italic fonts. And they are different, italic is italic, and oblique is italic text, for no italic font should use oblique.

Line height: Sets the row height of the line where the text is located. The default is normal, and you can type an exact value yourself and select a unit of measure. The more intuitive use of percentages, such as 140%, refers to 1.4 times times higher than the text size of the line. The corresponding CSS property is "Line-height".

Decoration: Add underline (underscore), overline (underline), Line-through (underline), Blink (flicker) in the text. These effects can exist at the same time, and the check boxes before the effects are selected. The corresponding CSS property is "Text-decoration".

Note: The default setting for the link is underline, we can remove the underscore by selecting none. The Blink (flashing effect) is visible only in the NC browser.

Weight: Specifies the number of points in bold for the font. Normal equals to 400;bold equivalent to 700. Bold is generally used. The corresponding CSS property is "Font-weight".

Variant: Allows you to select a variant of the font, and when selected Small-caps (small capital letters), all the letters in this style area are capitalized. The corresponding CSS property is "Font-variant".

Case: Capitalize the first letter of each word in the selection, or make the word all uppercase or lowercase. Parameters: Capitalize (capitalize the first letter of the word), uppercase (converted to uppercase), lowercase (convert to lowercase), none (not converted). The corresponding CSS property is "Text-transform".

Color: Defines the text color. The corresponding CSS property is "color".

Note: There are three ways to represent color values in CSS:

L #RRGGBB格式, is a combination of the values of the three colors of red, green and blue, and the value of each color is a two-bit hexadecimal positive integer of "00–ff". For example: #FF0000表示红色, #FFFF00表示黄色.

L RGB (R,G,B) format, RGB is a three-color value, take 0~255, for example: RGB (255,0,0) is red, RGB (255,255,0) indicates yellow.

l Use color name. CSS can use a color name that is already defined. For example: Red indicates a color, and yellow is yellow.

2. Background (background)

Background panel is mainly to set the background of the elements, including background color, background image, background image control. It is generally set to Body (page), table (table), p (region).

Background color: Sets the background color of the element. The corresponding CSS property is "Background-color".

Background Image: Sets the background image of the element. The corresponding CSS property is "Background-image".

Repeat: Determines whether and how the background image repeats. No Repeat: Displays the image once at the beginning of the element. Repeat: Tiles the image horizontally and vertically in the background part of the element. Repeat-x and repeat-y: repeated in horizontal and vertical directions, respectively, by default to Repeat. The corresponding CSS property is "Background-repeat".

Note: If you define the body of the element, you can control whether the page background is duplicated.

Attachment: Fixed background image or scrolling following content. The parameter fixed represents a fixed background, and scroll represents the background that follows the content scrolling. The corresponding CSS property is "Background-attachment".

Note: If you define the body of the element, you can make the page background fixed.

Horizontal: Specifies the horizontal position of the background image. You can specify left, center (centered), right, or value, such as 20px, which refers to 20 pixels to the left of the background distance. The corresponding CSS property is "Background-position".

Vertical: Specifies the vertical position of the background image. can be specified as top (top), center (center), Bottom (bottom), or value can be specified. The corresponding CSS property is "Background-position".

Note: The same CSS properties are used for both horizontal and vertical positions and should be noted when setting.

3. Block (block)

The block panel mainly sets the text spacing, alignment, superscript, subscript, arrangement, first line indent, etc.

Word Spacing: Sets the spacing between words. You can set a negative value. The corresponding CSS property is "word-spacing".

Note: In general, IE does not support this property, only ie4+ available on Mac platforms.

Letter Spacing: Sets the spacing between characters. You can specify a negative value. Because Chinese is also a character, this parameter can set the spacing between words. The corresponding CSS property is "letter-spacing".

Vertical Align: Specifies the vertical alignment of the element. You can specify sub (subscript), super (superscript), top (aligned to top), middle (centered), bottom (aligned to bottom) .... The corresponding CSS property is "Vertical-align".

Text Align: Sets how text is arranged. Left (justified), right (justified), center (center), justify (justified). The corresponding CSS property is "Text-align".

Text Indent: Sets the indent value for the first line of text. Negative values are used to pull the first line of text outward. To empty two cells in front of each paragraph, can be set to 2EM, because EM is the current font size, 2EM is the size of two characters. The corresponding CSS property is "Text-indent".

Whitespace: Sets how to handle white space characters within an element. There are three options: Normal will compress all whitespace characters, and pre will process these whitespace characters just like the text in the pre tag (that is, all whitespace characters, including spaces, labels, carriage returns, etc.); Nowrap Specifies that text wraps only when it encounters a BR tag. The corresponding CSS property is "White-space".
4. Box (boxes)

The box panel mainly sets the bounds, spacing, height, width, and floating mode of the object.

Width: Defines the width of the element. The corresponding CSS property is "width".

Height: Defines the height of the element. The corresponding CSS property is "height".

Note: The width and height of the defined objects are more like pictures, tables, layers, etc.

Float: Defines how elements are floated. Left indicates that the object floats on the right, that the object is floating on the rightmost, and none indicates that the object does not float. The corresponding CSS property is "float".

Clear: Elements are not allowed to float. Left indicates that floating objects are not allowed on the right side, that a floating object is not allowed on either side, none means that floating objects can be allowed on both sides, and that both does not allow floating objects. The corresponding CSS property is "clear".

Padding: Defines the space between the content of the element and its border (if the element has no border, it refers to the margin of the page). You can set the value of top (top filler), right (padding), bottom (lower padding), left (padding) separately. The corresponding CSS properties are "padding; Padding-top; Padding-right; Padding-bottom; Padding-left ".

Margin: Defines the distance between the border of an element and other elements (if no border refers to the distance between the contents). You can set the value of top (top boundary), right (border), bottom (lower boundary), left (border) separately. The corresponding CSS properties are "margin", respectively; Margin-top; Margin-right; Margin-bottom; Margin-left ".

Here is a diagram of the padding, borders, and boundaries:

5. Border (Border)

The border panel lets you set the width, color, and style of the object's border.

Width: Sets the thickness of the edge of the element. You can set the value of the top (top width), right (width), Bottom (bottom width), left (width), respectively. The corresponding CSS properties are "border; Border-top; Border-right; Border-bottom; Border-left ".

Color: Sets the colors of the border. You can set the color for each edge individually. The corresponding CSS properties are "border-color; Border-top-color; Border-right-color; Border-bottom-color; Border-left-color ".

Note: We can make the effect of bright and dark edges by setting different colors so that the elements look solid.

Style: Sets the border style. It can be set to none (no border), dotted (dotted), dashed (dashed), solid (solid), double (two lines), Groove (Groove), Ridge (convex), inset (concave), outset (convex), and other border styles. The corresponding CSS property is "Border-style".

Note: Dotted (dotted lines), dashed (dashed lines) must be IE5.5 above or supported by the Mac platform, otherwise the effect is a solid line.

6. List (lists)

The list panel allows you to set the item style, list item picture, and position.

Type: Sets the preset tag used by the list item. The styles you can set are: disc (solid circle), Circle (Hollow Circle), Square (square), decimal (Arabic numerals), Lower-roman (lowercase roman numerals), Upper-roman (uppercase Roman numerals), Lower-alpha (lowercase English alphabet), Upper-alpha (uppercase English alphabet), none (no bullets). The corresponding CSS property is "List-style-type".

Bullet Image: Sets the images for the list item. The value is the URL address or path of the image. The corresponding CSS property is "List-style-image".

Position: Sets whether the list item is inside or outside the text. Inside: The list item tag is placed within the text, Outside: The list item tag is placed outside the text. The corresponding CSS property is "List-style-position".

7. Positioning (positioning)

The positioning panel is the equivalent of an object placed in a layer to locate, which is equivalent to the P tag of the HTML. You can see the definition as a layer of CSS definition.

Type: Sets how the object is positioned. There are three ways: Absolute (absolute positioning), Relative (relative positioning), Static (no special positioning). The corresponding CSS property is "position".

Visibility: Sets the initial display state of the object's positioning layer. There are three states: Inherit (Inherits the display properties of the parent layer), Visible (object visual), hidden hidden objects. The corresponding CSS property is "visibility".

Z-index: Sets the stacking order of objects. A larger numbered layer appears on top of the lower numbered layer. The value of a variable can be positive or negative. The corresponding CSS property is "Z-index".

Overflow: Sets What to do if the content of the layer exceeds the size of the layer. There are four kinds of treatment: visible, increase the size of the layer, so that all the content of the layer is displayed, hidden, keep the size of the layer, cut out the content of the layer, Scroll, always show the scroll bar, Auto, only when the content beyond the boundaries of the layer to display the scroll bar. The corresponding CSS property is "overflow".

Placement: Sets the position and size of the object's positioning layer. You can set the left side, top (top position), Width (width), height (height), respectively. The corresponding CSS properties are "left", respectively; Top Width Height ".

Clip: Defines the visible area of the positioning layer. The part outside the area is not visible, and is transparent. Can be understood as the effect of placing a rectangular matte on the positioning layer. The corresponding CSS property is "clip".

Note: This parameter is only valid when absolutely positioned.

Note: When absolute positioning is set in type, an absolutely positioned layer is added to the object. The layer created by this CSS has the same properties panel as the normal layer and is also displayed in the Layer Management panel. You can modify the above parameters by setting the properties panel for this location layer, but the changed values in this property panel are added as inline styles after the object tag, which is the properties panel for the anchor layer:

8. Extensions (Extended)

PageBreak: Forces the page to be changed before and after the object of the style control when printing.

Before: The page delimiter that appears before the object is set. Always inserts a page break before an object when it is set to never. The corresponding CSS property is "Page-break-before".

After: The page delimiter that appears after the object is set. Always inserts a page break after an object when it is set to never. The corresponding CSS property is ' > '.

Note: The above IE5 only supports the always value and the white space value (NULL).

Cursor: Changes the mouse shape when the mouse hovers over the object controlled by the style. Can be set to hand (hand type), Crosshair ("ten" type), text ("I" type), wait (wait), default (defaults), 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 a filter effect to the style. Because this property is more informative, we'll go to the next chapter to introduce the filters separately.

Second, filter

CSS provides a number of built-in multimedia filter effects that can be used to add visual filters and conversion effects to a standard HTML element, examples, text containers, and other objects. DREAMWEAVER4 offers 16 filters to choose from, such as:

Below, let's take a look at how to use these CSS filters conveniently in Dreamweaver4.

To create a custom style ". Filter", select the Alpha filter in the Filter drop-down box and we'll "alpha (opacity=, finishopacity=, style=, startx=, starty=?, finishx=? , finishy=?) " The opacity parameter is set to 50, and the following parameters are deleted, such as:

After pressing OK, a custom style of ". Filter" is created, and we apply this style to the image, which is translucent. If you apply this style to a table, the table becomes translucent. Note that all filter effects are visible in the browser. The following is the original code:

<style type= "Text/css" >

<!--

. filter {Filter:alpha (opacity=50)}

-

</style>

Note: This example does not use the following parameters, only the opacity parameter, so the other parameters are deleted.

Let's explain the effects and parameters of each filter:

1. Alpha: Set Transparency

Alpha (opacity=, finishopacity=, style=?, startx=?, starty=?, finishx=?, finishy=?)

Opacity: Transparency level, range is 0-100, 0 is fully transparent, and 100 is completely opaque.

Finishopacity: When you set the transparency effect of a gradient, you specify the transparency at the end, ranging from 0 to 100.

Style: Sets the style of the gradient transparency, with a value of 0 for the uniform shape, 1 for the line, 2 for the radial, and 3 for the rectangle.

StartX and Starty: Represents the start x and y coordinates of the gradient transparency effect.

Finishx and Finishy: represents the coordinates of the gradient transparency effect ending with x and Y.

2. Blendtrans: Fade-in and fade-out effects between images

Blendtrans (duration=?)

Duration: Time to fade in or fade out.

Note: This filter must be combined with JS to create a sequence of images to make the effect between pictures.

3. BLRU: Creating a blur effect

Blur (add=, direction=?, strength=?)

ADD: Whether single direction blur, this parameter is a Boolean value, True (not 0) or False (0).

Direction: Sets the direction of the blur, where 0 degrees represents a vertical upward and then every 45 degrees is a unit.

Strength: Represents the blurred pixel value.

4. Chroma: Set the specified color to transparent

Chroma (color=?)

Color: Refers to the colors to be set to transparent.

5. DropShadow: Create Shadow Effect

DropShadow (color=, offx=, offy=?, positive=?)

Color: Specifies the colors of the shadow.

OFFX: Specifies that the shadow is offset in the horizontal direction relative to the element, Integer.

Offy: Specifies that the shadow is offset in the vertical direction relative to the element, Integer.

Positive: Is a Boolean value that is true (not 0) when it is represented as an established vulva shadow; False (0), which is expressed as an inner shadow.

6. FLIPH: Invert the element horizontally

7. FLIPV: Invert the element vertically

8. Glow: Create an external luminous effect

Glow (color=, strength=?)

Color: is the colour that specifies the glow.

Strength: The intensity of light, which can be any integer between 1 and 255, the larger the number, the greater the luminous range.

9. Gray: Remove the color of the image and display it as a black and white image

Invert: Invert the color of the image to produce a film-like effect

Light: The effect of placing lights, can be used to simulate the light source on the object of the projection effect

Note: This effect requires JS to set the position and intensity of the light.

Mask: Create a transparent matte

Mask (color=?)

Color: Sets the background to allow the object to cover the part of the background with transparency.

Revealtrans: Creating a toggle Effect

Revealtrans (duration=, transition=?)

Duration: Is the switching time, in seconds.

Transtition: Is the switch mode, can be set from 0 to 23.

Note: If you make a switch between pages, you can add a line of code to the
Shadow: Create another Shadow effect

Shadow (color=, direction=?)

Color: Refers to the colour of the shadow.

Direction: is the direction in which the projection is set, 0 degrees represents the vertical upward, and then every 45 degrees is one unit.

Wave: Ripple Effect

Wave (add=, freq=, lightstrength=?, phase=?, strength=?)

ADD: Indicates whether the original object is displayed, 0 is not displayed, and not 0 indicates that the original object is to be displayed.

Freq: Sets the number of fluctuations.

Lightstrength: Sets the light intensity of the wave effect from 0 to 100. 0 represents the weakest and 100 is the strongest.

Phase: The starting phase angle of the wave. A percentage value from 0 to 100. (For example: 25 equals 90 degrees, and 50 equals 180 degrees.) ）

Strength: Sets the amplitude of the wave swing.

Xray: Showing the outline of the image, the X-ray effect

Note: When using CSS filters, you must use the elements that are in the area, such as tables, pictures, and so on. Instead of using CSS filters for elements that have no area, such as text or paragraphs, we can set the element's height and width style or coordinates.

Look at this example, we do a shadow effect on a line of text (DropShadow), create a new custom style. Shadow, in the Filter drop-down box, select "DropShadow (color=, offx=, offy=, positive=?)", We set it to "DropShadow (color=999999, offx=2, offy=2, positive=1)". Then we apply the defined style to the page, we find that the text in the table has a shadow, and the text in the paragraph has no shadow. Click the Edit Style Sheet button in the CSS Styles panel to add the Hight property to the style:

To not affect the height of the original object, we cannot set the height beyond the height of the font itself. After OK, you can see in the browser that the text in the paragraph also has a shadow.