CSS tutorial (6) Detailed explanation of CSS properties in DW4

The CSS style of Dreamweaver4 contains all CSS1 properties defined by the W3C specification. Dreamweaver4 divides these properties into Type, Background, Block, Box, and Border. , List (list), Positioning (positioning), and Extensions (extensions) eight parts, as shown below, we will explain them in detail below.

1. Type

The Type panel is mainly used to set basic styles such as text font, size, color, and effects. When setting, we only set the attributes that need to be changed, and leave the attributes that do not need to be changed empty.

Note: The attribute name with * means that the style effect cannot be displayed when editing the document. You must open it with a browser to see the effect.

Font: Set the font family. What is a font family? It refers to setting several fonts for text. When encountering text that cannot be displayed in the first font, the second font or subsequent font in the series will be automatically displayed. The corresponding CSS property is "font-family".

Note: Dreamweaver4 has built-in 6 series of English fonts. Generally, we use the "Verdana, Arial, Helvetica, sans-serif" series of English fonts that look better. If you do not use these font families, you need to edit the font series yourself. You can create a new font family through "Edit Font List" at the bottom of the drop-down box, or you can directly write the font name in the drop-down box manually, using separated by commas. The default font for Chinese web pages is Song Dynasty. Generally, leave it blank and do not select any font.

Size: Define the size of the text. You can choose a specific font size by selecting a number and measurement unit, or you can choose a relative font size. It is best to use Pixels as units so that the text does not distort in the browser. Generally, the relatively standard 12px is used for small fonts. The corresponding CSS property is "font-size".

Note: The units of length in CSS are divided into absolute length units and relative length units. Generally, the absolute length units we commonly use are: px: (pixel) The length is determined according to the resolution of the display.

pt: (font size) determines the length according to the font size defined by the windows system.

mm, cn, in: (millimeters, centimeters, inches) Determine the length based on the actual size shown. Such units do not change as the resolution of the monitor changes.

The relative length units are:

em: the size of the current text. For example: {font-size:2em} means that the text size is twice the original size.

ex: The height of the current letter "x", generally half the font size.

%: Defines the size as a percentage of the current text. For example: {font-size:300%} means that the text size is 3 times the original size.

small, large: indicates a size one level smaller or one level larger than the current size. style: Define 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 both italic fonts. The difference between them is that Italic is an italic font, while Oblique is an italic font. For fonts without italics, Oblique should be used.

Line Height: Set the line height of the line where the text is located. The default is Normal, but you can also enter a precise value yourself and select a unit of measurement. A more intuitive way of writing is to use percentages. For example, 140% means that the line height is equal to 1.4 times the text size. The corresponding CSS property is "line-height".

Decoration: Add underline, overline, line-through, and blink to the text. These effects can exist at the same time, just select the checkbox before the effect. The corresponding CSS property is "text-decoration".

Note: The default setting for links is Underline. We can remove the underline by selecting none. Blink (flash effect) can only be seen in NC browser.

Weight: Specify the point size of bold text for the font. Normal is equivalent to 400; Bold is equivalent to 700. For bold characters, bold is generally used. The corresponding CSS property is "font-weight".

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

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

Color: Define text color. The corresponding CSS property is "color".

Note: There are three ways to express the color value in CSS:

l #RRGGBB format is a combination of red, green and blue color values, and the value of each color is "00 – FF" is a two-digit hexadecimal positive integer. For example: #FF0000 means red, #FFFF00 means yellow.

l rgb(R,G,B) format, RGB is the value of three colors, ranging from 0 to 255, for example: rgb(255,0,0) means red, rgb(255,255,0) means yellow .

l Use color names. CSS can use already defined color names. For example: red means red, yellow means yellow.

2. Background

The Background panel is mainly used to set the background of elements, including background color, background image, and background image control. Generally, it is the setting of BODY (page), TABLE (table), and p (area).

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

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

Repeat: Determines whether and how the background image repeats. No Repeat: Display the image once at the beginning of the element. Repeat: Tiles the image horizontally and vertically across the background portion of the element. Repeat-x and Repeat-y: Repeat in the horizontal and vertical directions respectively. The default is 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 repeated.

Attachment: Fixed background image or scrolling with the content. The parameter fixed indicates a fixed background, and scroll indicates a background that scrolls with the content. The corresponding CSS property is "background-attachment".

Note: If the BODY of the element is defined, the page background can be fixed.

Horizontal: Specifies the horizontal position of the background image. You can specify left (left), center (center), right (right); you can also specify a numerical value, such as 20px means that the background is 20 pixels from the left. The corresponding CSS property is "background-position".

Vertical: Specify the vertical position of the background image. It can be specified as top (top), center (center), bottom (bottom); a numerical value can also be specified. The corresponding CSS property is "background-position".

Note: The horizontal position and vertical position use the same CSS property, so pay attention when setting it.

3. Block

The Block panel is mainly used to set the text spacing, alignment, superscript, subscript, arrangement, first line indentation, etc. of the object text.

Word Spacing: Set the spacing between words. Negative values ​​can be set. The corresponding CSS property is "word-spacing".

Note: Generally, IE does not support this attribute and is only available in IE4+ on the MAC platform.

Letter Spacing: Set the spacing between characters. Negative values ​​can be specified. Because Chinese characters are also characters, this parameter can set the spacing between characters. The corresponding CSS property is "letter-spacing".

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

Text Align: Set the arrangement of text. Left (left alignment), right (right alignment), center (center), justify (justify both ends). The corresponding CSS property is "text-align".

Text Indent: Set the indent value of the first line of text. Negative values ​​pull the first line of text outward. To leave two spaces before each paragraph, set it to 2em, because em is the current font size, and 2em is the size of two characters. The corresponding CSS property is "text-indent".

Whitespace: Set how to handle whitespace characters within the element. There are three options to choose from: Normal will compress all whitespace characters; Pre will process these whitespace characters just like the text in the pre tag (that is, all whitespace characters, including spaces, tabs, carriage returns, etc. will be compressed) Reserved); Nowrap specifies that the text will wrap only when it encounters the br tag. The corresponding CSS property is "white-space".
4. Box

The Box panel mainly sets the boundary, spacing, height, width, and floating method of the object.

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

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

Note: The objects defined by width and height are mostly pictures, tables, layers, etc.

Float: Define how the element floats. left means the object floats on the left, right means the object floats on the right, and none means the object does not float. The corresponding CSS property is "float".

Clear: Floating of elements is not allowed. left means that floating objects are not allowed on the left side, right means that floating objects are not allowed on the right side, none means that floating objects are allowed on both sides, and both are not allowed to have floating objects. The corresponding CSS property is "clear".

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

Margin: Defines the distance between the element's border and other elements (if there is no border, it means the distance between the content). You can set the values ​​of top (upper border), right (right border), bottom (lower border), and left (left border) respectively. The corresponding CSS properties are "margin; margin-top; margin-right; margin-bottom; margin-left".

The following is the relationship diagram between filler, border and border:

5. Border

The Border panel can set the width, color and style of the object border.

Width: Set the width of the element side. You can set the values ​​of Top (top width), Right (right width), Bottom (bottom width), and Left (left width) respectively. The corresponding CSS properties are "border; border-top; border-right; border-bottom; border-left".

Color: Set the color 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 create bright and dark edges by setting different colors, so that the elements look three-dimensional.

style: Set the border style. Can be set to none (no border), dotted (dotted line), dashed (dashed line), solid (solid line), double (double line), groove (groove), ridge (convex groove), inset (concave edge), Outset (convex edge) and other border styles. The corresponding CSS property is "border-style".

Note: dotted (dotted line) and dashed (dashed line) must be supported by IE5.5 or above or the MAC platform, otherwise the effect will be a solid line.

6. List

The List panel can set the list item style, list item image, and position.

Type: Set the preset tag used by the list item. The styles that can be 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 letters), upper-alpha (uppercase English letters), none (no bullets). The corresponding CSS property is "list-style-type".

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

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

7. Positioning

The Positioning panel is equivalent to positioning the object in a layer. It is equivalent to the p tag of HTML. You can think of definitions as a layer of CSS definitions.

Type: Set the positioning method of the object. There are three methods: Absolute (absolute positioning), Relative (relative positioning), and Static (no special positioning). The corresponding CSS property is "position".

Visibility: Set the initial display state of the object positioning layer. There are three states: Inherit (inheriting the display properties of the parent layer), Visible (the object is visible), and Hidden. The corresponding CSS property is "visibility".

Z-Index: Set the stacking order of objects. Layers with higher numbers appear above layers with lower numbers. Variable values ​​can be positive or negative. The corresponding CSS property is "z-index".

Overflow: Set how to handle if the content of the layer exceeds the size of the layer. There are four processing methods: visible, which increases the size of the layer so that all the contents of the layer are displayed; hidden, which keeps the size of the layer unchanged and cuts off the content beyond the layer; Scroll, which always displays scroll bars; Auto, which only Scroll bars are only displayed when the content exceeds the bounds of the layer. The corresponding CSS property is "overflow".

Placement: Set the position and size of the object positioning layer. You can set left (left positioning), top (top positioning), width (width), and height (height) respectively. The corresponding CSS properties are "left; top; width; height".

Clip: Define the visible area of ​​the positioning layer. The part outside the area is an invisible area and is transparent. It can be understood as the effect of placing a rectangular mask on the positioning layer. The corresponding CSS property is "clip".

Note: This parameter is only valid during absolute positioning.

Note: When absolute positioning is set in Type, an absolute positioning layer will be added to the object. The layer created by this CSS has a property panel like a normal layer and is also displayed in the layer management panel. You can modify the above parameters by setting the property panel of this positioning layer, but the value changed in this property panel will be added as an inline style after the object tag. The following picture is the property panel of the positioning layer:

8 . Extensions (Extensions)

Pagebreak: Force page breaks before and after the style-controlled object when printing.

Before: Set the page separator that appears before the object. When set to always, a page separator is always inserted before the object. The corresponding CSS property is "page-break-before".

After: The page separator that appears after setting the object. When set to always, page breaks are always inserted after the object. The corresponding CSS property is "'>.

Note: The above IE5 only supports always value and blank value (null).

Cursor: changes when the mouse slides over the object controlled by the style Mouse shape. Can be set to hand (hand type), crosshair ("ten" type), text ("I" type), wait (wait), default (default), help (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 filter effects to the style. Since this attribute has a lot of content, we will introduce filters separately in the next chapter.

2. Filters

CSS provides some built-in multimedia filter effects. Using this technology, you can add visual filters and transformation effects to a standard HTML element, such as Images, text containers, and other objects. Dreamweaver4 provides 16 filters to choose from, as shown below:

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

Create a custom style ".filter", select the Alpha filter in the Filter drop-down box, we will "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=? , FinishX=?, FinishY=?)"'s Opacity parameter is set to 50, and all subsequent parameters are deleted, as shown below:

After pressing OK, a custom style of ".filter" is created. We Apply this style to an image and the image will be semi-transparent. If you apply this style to a table, the table will also become semi-transparent. Note that all filter effects can only be seen in the browser. The following is the original code:



Note: In this example we did not use the following parameters, only the Opacity parameter, so Delete other parameters.

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 represents completely transparent, 100 represents completely opaque.

FinishOpacity: When setting the transparency effect of the gradient, it is used to specify the transparency at the end, and the range is also 0 to 100.

style: Set the gradient transparent style. A value of 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle.

StartX and StartY: represent the starting X and Y coordinates of the gradient transparency effect.

FinishX and FinishY: represent the X and Y coordinates of the end of the gradient transparency effect.

2. BlendTrans: The fade-in and fade-out effect between images

BlendTrans(Duration=?)

Duration: The fade-in or fade-out time.

Note: This filter must be used with JS to create a picture sequence to create effects between pictures.

3. Blru: Create a blur effect

Blur(Add=?, Direction=?, Strength=?)

Add: Whether to blur in one direction, this parameter is a Boolean value, true (not 0) or false (0).

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

Strength: represents the blurred pixel value.

4. Chroma: Set the specified color to be transparent

Chroma(Color=?)

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

5. DropShadow: Create a shadow effect

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color: Specify the color of the shadow.

OffX: Specifies the horizontal offset of the shadow relative to the element, an integer.

OffY: Specifies the vertical offset of the shadow relative to the element, an integer.

Positive: It is a Boolean value. When the value is true (non-0), it means establishing an outer shadow; when it is false (0), it means establishing an inner shadow.

6. FlipH: Flip the element horizontally

7. FlipV: Flip the element vertically

8. Glow: Create an outer glow effect

Glow(Color=?, Strength=?)

Color: specifies the color of light.

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

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

10. Invert: Invert the color of the image, producing a film-like effect

11. Light: The effect of placing a light source, which can be used to simulate the projection effect of a light source on an object.

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

12. Mask: Create a transparent mask

Mask(Color=?)

Color: Set the background color to make the part of the object covering the background transparent.

13. RevealTrans: Create switching effect

RevealTrans(Duration=?, Transition=?)

Duration: is the switching time, in seconds.

Transtition: It is the switching method and can be set from 0 to 23.

Note: If you want to switch between pages, you can add a line of code in the area: . If the element is used in the page, it must be used with JS.

14. Shadow: Create another shadow effect

Shadow(Color=?, Direction=?)

Color: refers to the color of the shadow.

Direction: Sets the direction of the projection. 0 degrees means vertically upward, and every 45 degrees is a unit.

15. Wave: Ripple effect

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: Indicates whether Display the original object, 0 means not to display, non-0 means to display the original object.

Freq: Set the number of fluctuations.

LightStrength: Set the light intensity of the wave effect, from 0 to 100. 0 represents the weakest, and 100 represents the strongest.

Phase: The initial phase angle of the wave. Percent value from 0 to 100. (For example: 25 is equivalent to 90 degrees, and 50 is equivalent to 180 degrees.)

Strength: Set the amplitude of the wave sway.

16. Elements without areas such as text and paragraphs cannot use CSS filters. For such elements, we can set the Height and Width styles or coordinates of the elements to achieve this.

Look at the example below. We create a shadow effect (dropshadow) on a line of text, create a new custom style.shadow, and select "DropShadow(Color=?, OffX=?, OffY=?, in the filter drop-down box). Positive=?)", we set it to "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)". Then when we apply the defined style to the page, we find that the text in the table has a shadow, but the text in the paragraph has no shadow. Click the Edit Style Sheet button in the CSS styles panel and add the Hight attribute to the style:

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

The above is the detailed content of CSS tutorial (6) Detailed explanation of CSS properties in DW4. For more information, please follow other related articles on the PHP Chinese website!