CSS Tutorial (v) How to create a CSS using DW4

1. CSS Styles Panel

Through the previous chapters of the study, I believe that you have a certain understanding of CSS, this chapter we explain how to use Dreamweaver4 to create CSS. First run Dreamweaver4, after startup, select Menu under Windows->css styles (or press SHITF+F11), the system pops up the CSS Styles Admin panel, as shown in:

In the CSS styles panel, all the custom CSS styles are shown (i.e., the class selector at the beginning of the above point, Dreamweaver4 the class selector starting with a dot as a custom style), You can use the Apply button to apply these CSS styles freely to the text or document area in the page.

Note: The app button has a check box in front of it, and when selected, the button is grayed out, which means it is automatically applied, as long as the mouse click on the custom CSS style is automatically applied to the current element in the page, if the check box is not checked, the Apply button is available, the Apply button is required. When a custom style is applied to an object, it is equivalent to adding class= "..." after the current HTML tag. In addition, there is a "S" type symbol in front of the style, which represents the internal definition style, and if it is a symbol, the style is linked to the external style sheet file.

Note: The CSS Styles panel displays only custom (class) CSS styles, and the redefined HTML tags and other CSS selector styles do not appear on the CSS styles panel, because they can be automatically applied to areas that are controlled by HTML tags. (Redefining HTML markup refers to a CSS style that is a single HTML tag, and is called redefinition because it redefined and changed the style of the original HTML tag.) ）

In the lower right corner there are 4 small buttons, which are the most commonly used commands:

Attach style Sheet: (link to style sheet) when clicked, a Select Style sheet dialog box will pop up, select the previously created external style sheet, and click OK to add the external style sheet to the link. When adding an external style sheet, be careful to use relative paths whenever possible. New style: (new style) we usually create a CSS style sheet with this button.

Edit Style sheet: (edit style sheet) when clicked will pop up the editing Stylesheet dialog box, showing all existing internal and external style sheets, you can create new, edit, delete styles in this dialog box.

Delete: (delete style) Select the custom CSS style you want to delete, then click this button to delete the style.

Dot above the small triangle or click the right mouse button will pop up a menu, the function of the menu is:

Edit: (edit) editing the custom CSS style you currently selected, click to enter the edit this CSS class style definition Style dialog box.

Duplicate: (copy) copies the currently selected custom CSS style class.

Delete: (delete) deletes the currently selected custom CSS style, with the same effect as the button.

Apply: Applies the selected CSS class to the current element in the page. Same as Apply button.

New style: (new style) is equivalent to a button.

Edit Style sheet: (edit style sheet) is equivalent to a button.

Attach style Sheet: (linking to an external style sheet) is equivalent to a button.

Export style Sheet: (export style sheet) exports the internal style sheet from this page as an external style sheet file. Note: DREAMWEAVER4 Export style sheet In addition to this method, you can also use the main menu File->export->export CSS styles Export.

2. Create style sheet types before creating a stylesheet, let's first introduce the three style sheet types of Dreamweaver4, and click the buttons in the CSS styles panel (or the CSS Styles panel menu new style) to pop up the new Style dialog box, such as:

In define, you can choose whether it is an external style sheet or an internal style sheet:

L Choose New Style Sheet file (new style sheet), the system will let you save the stylesheet file, and then define the stylesheet file. The style of the entire page will follow the stylesheet file you created, and then you can link the external stylesheet file to another page so that a stylesheet file can control multiple pages.

If you select this document only (which only exists), you create an internal stylesheet that Dreamweaver4 automatically puts the content of your stylesheet into the <style> tag in the
There are three style sheet types to choose from in type:

L Make Custon Style: (create custom style) customize a style that can be applied to the page as a class attribute.

L Redefine HTML tag: (redefine HTML tag) redefine the default format for the specified HTML tag.

L Use CSS Selector: (using CSS selectors) to format a particular tag combination, or all tags that contain the specified id attribute.

Before we define CSS, we need to consider clearly where this style of definition will be used. What effects do you want to accomplish? Is it defined in a page or in a style that controls multiple pages? Then define the appropriate stylesheet based on your needs.

3. Creating a custom style

On the page, we sometimes want to make some important text or content eye-catching, we need to have these important words or content to define a separate style, to distinguish between the general text, we can create a custom style for the important content of a separate CSS to complete. Let's say that we want to define the color of important text and content in red, and bold to achieve a conspicuous purpose.

Click New Style, pop up new dialog box, in the New Style dialog box, style sheet type make Custon style (class), here we create an internal style sheet, select this Document only, and then in the Name drop-down box above enter your defined style name, We enter ". Emphases" by pressing OK, such as:

Note: The name of the custom style can be set at its own discretion and is generally named according to its style effect. Before the name must be a bit, if the missing write, the system will automatically help you fill up.

Pop-up the Style Definition dialog box, select Type in category, then set the color to red, weight to bold, press OK,

Then a custom style named emphases is added to the CSS styles panel, so a new style is defined:

Let's take a look at the original Code section, and we can see the following stylesheet code in the
<style type= "Text/css" >

<!--

. emphases {font-weight:bold; color: #FF0000}

-

</style>

Now that we've defined the style, we can apply this custom style to where we want it, select the text in the page, and then click the emphases style in the Styles panel. Look, is not the effect you want.

Note: If our selection is a table or a paragraph, then the entire table or paragraph text is defined by the emphases style, from the original code we can see that the <TABLE> or <P> tag added class= "Emphases" parameters, such as:

<table class= "emphases" >

......

Or

<p class= "emphases" >

......

When we add a style to a selected number of text, the text itself is not surrounded by HTML tags and is automatically tagged with the <span> tag, for example:

... <span class= "emphases" > Focus </span&gt .....

Note: The span tag itself has no meaning, it specifically specifies the selection range for the style sheet, and p for the style sheet designation area.

4. Create a redefined style sheet

Redefining a style sheet is a redefinition of the formatting of an HTML tag. For example, we want to reformat the paragraph of the page, empty two spaces before each paragraph, and set the size and line spacing of the paragraph text.

Click New Style, pop up new dialog box, in the New Style dialog box, style sheet type Select redefine HTML Tag, we still create an internal style sheet, select this Document only. When the style sheet type selects redefine HTML tag, the name of the drop-down box above name becomes tag, which means that the input is HTML tag, click the drop-down button, we can see all the HTML tags in the Tag drop-down box, here we select the paragraph mark p:

OK, enter the Style Definition dialog box, in type, we set the font size to 12 pixels, line spacing is 150% of the text size, such as:

In the block section, we set the text indent because the text size is 12 pixels, so the two-character space is 24 pixels:

After pressing OK, the redefined style is complete. At this point in the page each paragraph text size is 12 pixels, line spacing is 150%, but in the Dreamweaver editor we do not see the effect of indentation, it does not matter, as long as the file is saved, and then opened with a browser can see the effect. At this point the original code for the CSS style sheet is:

<style type= "Text/css" >

<!--

. emphases {font-weight:bold; color: #FF0000}

p {font-size:12px; line-height:150%; text-indent:24px}

-

</style>

5. Create a dynamic Link style sheet

Let's create a set of styles that are linked in different states. Click New Style, pop up new dialog box, in the New Style dialog box, style sheet type select Use CSS Selector, we still create an internal style sheet, select this Document only. When the style sheet type chooses use CSS selector, the name of the drop-down box above becomes selector, indicating that the input is a CSS selector, and click the drop-down button to see the 4 states of the dynamic Link:

L a:active Check Hyperlink status

L a:hover cursor moves over hyperlink state

L A:LINK The normal state of the hyperlink, without any action

L a:visited visited Hyperlink status

Next we set the various states, first, select A:link,ok after the pop-up Style definition dialog box, we set no underline, the color is orange, such as:

We use the same method to set the a:visited, set no underline, yellow, such as:

Next, set a:hover, underline and underline, color orange, and set the background to yellow in background:

Here we do not set the a:active, according to the cascading rules A:active style will automatically follow the a:hover. The effect of all the dynamic links is set, and the order of the settings is noted. In the browser we can see: no links on this page are not underlined, orange, the link after the visit is not underlined, yellow, the mouse points to the link when the top, underline, orange, and the background is yellow. The style sheet original code is:

<style type= "Text/css" >

<!--

. emphases {font-weight:bold; color: #FF0000}

p {font-size:12px; line-height:150%; text-indent:24px}

a:link {color: #FF9900; Text-decoration:none}

a:visited {color: #FFFF00; Text-decoration:none}

a:hover {color: #FF9900; text-decoration:underline overline; Background-color: #FFFF00}

-

</style>

When you define a dynamic link, the link effect of the entire page changes, what if I want to define more than two sets of link effects in a page? In the fourth chapter, we're not saying that the mix of classes and pseudo-classes can do different link effects on the same page. Click New Style, in the Selector drop-down box, we enter A.link2:link (of course you can select A:link, then change), such as:

So we've created a new. Link2 class, we set the style for A.link2:link, red, underlined:

Based on the above method we continue to define a.link2:visited and A.link2:hover, we define the a.link2:visited as red underlined, a.link2:hover red without underlining, the background is white. There is a custom style named Link2 in the CSS styles panel. This style is then applied to a dynamic link. Once saved, open with a browser, we can see two completely different link styles. All CSS code is as follows:

<style type= "Text/css" >

<!--

. emphases {font-weight:bold; color: #FF0000}

p {font-size:12px; line-height:150%; text-indent:24px}

a:link {color: #FF9900; Text-decoration:none}

a:visited {color: #FFFF00; Text-decoration:none}

a:hover {color: #FF9900; text-decoration:underline overline; Background-color: #FFFF00}

A.link2:link {color: #FF0000; Text-decoration:underline}

a.link2:visited {color: #FF0000; Text-decoration:underline}

a.link2:hover {color: #FF0000; text-decoration:none; Background-color: #FFFFFF}

-

</style>

6. Definition of other style sheets

We can also enter other CSS selectors in the use CSS selector:

ID selector, defining a style with the "#" sign, for example: "#id-style", and then establishing an ID style with ID id-style, which must be manually added id= "Id-style" property after the HTML tag.

A class selector with HTML tags, for example: "P.red", represents a style that defines a paragraph as the Red class, which is only effective for paragraphs with class= "red" attributes.

The inclusion selector refers to the previous HTML tag that contains the next HTML tag, for example: "P P", which defines the style that contains the paragraph in p.

7. Edit, modify, and delete style sheets

The buttons in the Point CSS Styles panel open the Edit Style Sheet dialog box, such as:

button Function Description:

Link: links to external style sheets, where you can choose to link to an external style sheet and import an external style sheet.

NEW: New style.

Edit: Select a style, then click the editor to make edits.

Duplicate: Copy a style, select a style, click the Duplicate button, pop up a dialog box, and a new name for the copied style, OK.

Remover: Remove a style or an external style sheet, select the style point to remove button, and the style is deleted.

You can see the contents of this style in the style definition bar.

8. External style sheet

Creating an external style sheet is similar to creating an internal style sheet, but only when you create it (new style Sheet file) and save it as a style sheet with a. css extension.

Now, let's export the stylesheet from the example, and then link to another page. Click Export Style Sheet in the CSS Style panel menu, and the system pops up the Style Sheet dialog box, where we save the stylesheet file as Mystyle.css. Open the Mystyle.css file with Notepad to see the following stylesheet code:

. emphases {font-weight:bold; color: #FF0000}

p {font-size:12px; line-height:150%; text-indent:24px}

a:link {color: #FF9900; Text-decoration:none}

a:visited {color: #FFFF00; Text-decoration:none}

a:hover {color: #FF9900; text-decoration:underline overline; Background-color: #FFFF00}

A.link2:link {color: #FF0000; Text-decoration:underline}

a.link2:visited {color: #FF0000; Text-decoration:underline}

a.link2:hover {color: #FF0000; text-decoration:none; Background-color: #FFFFFF}

Then go to the other page, click the link in the CSS style panel to the external style sheet button, link to the style sheet file mystyle.css that you just exported, this style sheet has been applied to the new page. The following code has been added to the
<link rel= "stylesheet" href= "Mystyle.css" type= "Text/css" >

In addition, you can import external style sheets, which are imported as follows:

Click the Edit Style Sheet button, open the Edit Style Sheet dialog box, click the link button, then pop up the "link External style Sheet" dialog box, enter the path of the external style sheet, select Import (Import), OK.

You can see the code in the
<style type= "Text/css" >

<!--

@import "Mystyle.css";

-

</style>