Dreamweaver8.0 use CSS styles to beautify pages

See the full set of "dreamweaver8.0 tutorials"

In the CSS Rules dialog box, we can beautify our pages with types, backgrounds, blocks, boxes, borders, lists, positioning, and extension settings, of course, when we define a CSS style, we don't need to set every item and what effect it needs. Select the appropriate item to set it up.

1, the Text style setting

Creates a new CSS style, the selector type is a class, and the name "Style1" is defined on the document only. Save to the CSS folder in the root directory of the site, the CSS Rule Definition dialog box appears, and the default display is the type item that sets the text.

Fonts: You can select the appropriate font in the Drop-down menu.

Size: Is the size, you can fill in the number directly, and then select the unit.

Styles: Sets the appearance of text, including normal, italic, and oblique bodies.

Row height: This setting is commonly used in Web page production. Set row height, you can choose "Normal", so that the computer automatically adjusts row height, you can use the combination of numeric values and units to set itself. It should be noted that the unit should be the same as the unit of text, the row height of the value is including the size of the value. For example, the text is set to 12pt, and if you want to create one line of spacing, the row height should be 24pt.

Variables: in English, uppercase letters are generally larger in size, using the "small caps" in the "variable" setting, you can reduce capital letters.

Color: Sets the color of the text.

2. Setting of background style

In HTML, a background can only use a single color or tile with horizontal vertical orientation of the image. With CSS, there are more flexible settings.

Select the background item on the left side of the CSS Rule Definition dialog box to set the background formatting of the CSS style in the right area.

Background color: Select a fixed color as the background.

Background Image: Directly fill in the path of the background image, or click the Browse button to locate the background image.

Repeat: When you use an image as a background, you can use this to set the way the background image repeats, including "Do Not Repeat", "repeat", "repeat horizontally", and "repeat vertically."

Attachment: When you select an image to do the background, you can set the image to follow the page scrolling together.

Horizontal position: Sets the horizontal position, you can align left to right, center. You can also set the way in which values are combined to indicate position, which is more commonly used in pixel units.

Vertical position: You can select top, bottom, center. You can also set the way values and units are combined to represent positions.

3. Block Style Setup

Select the block item on the left side of the CSS Rule Definition dialog box to set the CSS style block format in the right area.

Word spacing "The distance between English words, generally choose the default setting.

Letter spacing: Set English letter spacing, use positive values to increase letter spacing, and use negative values to reduce letter spacing.

Vertical alignment: Sets the vertical alignment of an object.

Text alignment: Sets the horizontal alignment of text.

Text indent: This is the most important item. The first line indent of Chinese text is implemented by it. First fill in the specific value, then select the unit. The indentation and size of the text should be consistent. such as the font size of 12px, like the creation of two Chinese from the indentation effect, text indentation should be 18px.

Space: Control of source code text spaces. Select Normal to ignore all spaces between the source code text. Select retention to retain all the spaces in the source code, including spaces created by the SPACEBAR, tab, and enter.

Show: Determine if and how elements are displayed. Select None to close the display of the elements that it is drawn to. Rarely used in actual control.

4, the box style setting

Before we set the size of the image, set the image horizontal and vertical blank area, set the image has text wrapping effect, and so on. The box settings further refine and enrich these settings.

Select the box item to the left of the CSS Rule Definition dialog box to set the CSS style box format in the right area.

Width: Sets the width of the object by numeric values and units.

High: Sets the height of the object by setting and unit.

Floating: is actually the wrapping effect of objects such as text. Select Align Right and object to the right. Text, and so on, wraps around the object from the other side. Select Align Left. Objects reside on the left, text, and so on from the other side. None cancels the wrapping effect.

Clear: A layer is not allowed on one side of the object. You can select a side that does not allow the layer to appear by selecting Align left and right. If there is a layer on one side of the purge layer, the object is automatically moved below the layer. "Both" refers to the left and right are not allowed to appear layer. "None" is an unrestricted layer of appearance.

Padding and boundaries: If the object has a border, padding refers to an empty area between the border and the contents of it, and "boundary" is a blank area outside the border.

5, Border style settings

Border style settings You can add borders to an object, set the color, weight, and style of the border.

Select the border item on the left side of the CSS Rule Definition dialog box to set the border formatting of the CSS style in the right area.

Style to set the style of the border, if you select the all the same check box, you only need to set the top style, and the other orientation style is the same as on.

Width: Sets the width of the 4-directional border. You can select a relative value: thin, medium, thick. You can also set the width value and units of the border.

Color: Sets the color of the border, and if the all is the same check box is selected, the other orientation is set to the same as on.

6. List style settings

The settings for lists in CSS enrich the appearance of the list. Select the list item on the left side of the CSS Rule Definition dialog box to set the format of the CSS style list in the right area.

Type: Sets the symbol type of the boot list item. You can select dots, circles, squares, numbers, lowercase roman numerals, uppercase Roman numerals, lowercase letters, uppercase letters, no list symbols, and so on.

Bullet Image: You can select an image as the guide symbol for your project, and click the Browse button on the right to locate the image file. Select the UL tag to apply settings to the entire list, and select the LI tag to apply to individual items.

Location: Determines how much the list item is indented. Select "Outside", the list is close to the left border, select "Inside", indent the list. This setting has no effect.

7, positioning style settings

The "position" item is actually a layer setting, but because DW provides a visual layer-making feature, this setting is rarely used in practice.

8, extend the style of the settings

CSS styles can also implement some extension features, which are concentrated on the expansion panel. This panel consists of 3 main effects: pagination, cursors, and filters. Select the extended item on the left side of the CSS Rule Definition dialog box to set the extended format of the CSS style in the right area.

Pagination: Adds a page-sign to a webpage by style. Allows the user to specify that the page is paginated before or after an element. The concept of pagination is to stop at a specified location when you print the contents of a Web page, and then continue to print the next page.

Cursors: Changing the shape of the mouse by using a style, and when the mouse is positioned over the area being decorated by this item, the shape changes. Specific shapes include: Hand (hand), crosshair (cross Cross), text (text selection symbol), wait (Windows hourglass), default (mouse shape), help (with a question mark Mouse), E-resize (East arrow), Ne-resize (arrows pointing to the north-east), N-resize (arrows North), nw-resize (arrows pointing to the northwest), W-resize (arrows to the west), Sw-resize (arrows to the southwest), S-resize (arrows to the south), Se-resize (arrow to the southeast), auto (normal mouse). ）

Filters: Implements filters (filter) effects using the CSS language. Click the button next to the Filter Drop-down list box to see a variety of filter effects to choose from.

Filter effects	Describe
Alpha	Set transparency effects
Blru	Set Blur effect
Chroma	Sets the specified color to transparent
DropShadow	Set projection Shadow
Fliph	Water rehabilitation Turn
Flipv	Vertical inversion
Glow	Increase the light efficiency for an object's outer boundary
Grayscale	Reduce the color of the picture
Invert	Complete reversal of color, saturation and brightness to create negative effects
Light	Set the light projection effect
Mask	Sets the matte effect, color specifies the mask's colors
Shadow	Set Shadow Effects
Wave	Set the horizontal and vertical ripple effects
Xray	Set X Lighting Effect

See the full set of "dreamweaver8.0 tutorials"