Home > Article > Web Front-end > CSS tutorial (5) How to use DW4 to create CSS
CSS tutorial (5) How to use DW4 to create CSS
- 巴扎黑Original
- 2017-04-01 14:03:142384browse
1. CSS styles panel The above is the detailed content of CSS tutorial (5) How to use DW4 to create CSS. For more information, please follow other related articles on the PHP Chinese website!
After studying the previous chapters, I believe everyone has a certain understanding of CSS. In this chapter, we will explain how to use Dreamweaver4 to create CSS. First run Dreamweaver4. After starting, select Windows->CSS styles under the menu (or press Shitf+F11). The system pops up the CSS styles management panel, as shown in the figure below:
is displayed in the CSS styles panel All custom CSS styles (that is, the class selectors starting with a dot mentioned above, Dreamweaver4 uses such class selectors starting with a dot as custom styles), you can use the Apply button to apply these CSS styles to the page at will. A text or document area in .
Note: There is a check box in front of the Apply button. When selected, the button will be gray and unavailable, indicating automatic application. As long as the mouse clicks, the customized CSS style will be automatically applied to the current element in the page; if The check box is not selected and the Apply button is available. You need to click the Apply button when applying. When a custom style is applied to an object, it is equivalent to adding class="..." after the current HTML tag. In addition, there is an "S"-shaped symbol in front of the style, which indicates an internally defined style; if it is a symbol, it indicates that this style is linked to an external style sheet file.
Note: The CSS styles panel only displays custom (class) CSS styles; redefined HTML tags and other CSS selector styles will not appear on the CSS styles panel because they can be automatically applied to those The area controlled by HTML tags. (Redefining HTML tags refers to the CSS style whose selector is a single HTML tag. It is called redefining because it redefines and changes the style of the original HTML tag.)
There are 4 small buttons in the lower right corner , these are the most commonly used commands:
Attach style Sheet: (Link to style sheet) After clicking, a select style sheet dialog box will pop up. Select the previously created external style sheet and click OK to link. Added this external style sheet. When adding external style sheets, be sure to use relative paths whenever possible. New style: (New style) Generally we use this button to create a CSS style sheet.
Edit style sheet: (Edit style sheet) After clicking, the edit style sheet dialog box will pop up, showing all existing internal and external style sheets. You can create, edit, and delete styles in this dialog box.
Delete: (Delete style) First select the custom CSS style to be deleted, then click this button, and the style will be deleted.
Click the small triangle above or click the right button of the mouse to pop up a menu. The functions of the menu are as follows:
Edit: (Edit) Edit the custom CSS style you currently selected. Click Enter the define style dialog box for editing this CSS class style.
Duplicate: (Copy) Duplicate the currently selected custom CSS style class.
Delete: (Delete) Delete the currently selected custom CSS style, which has the same effect as the button.
Apply: (Application) refers to applying the selected CSS class to the current element in the page. Same as Apply button.
New style: (New style) is equivalent to button.
Edit style sheet: (Edit style sheet) is equivalent to the button.
Attach style Sheet: (Link to external style sheet) Equivalent to button.
Export style Sheet: (Export style sheet) Export the internal style sheet in this page to an external style sheet file. Note: In addition to using this method to export style sheets in Dreamweaver4, you can also use File->Export->Export CSS styles under the main menu.
2. Types of creating style sheets. Before creating a style sheet, we first introduce the three style sheet types of Dreamweaver4. Click the button in the CSS styles panel (or New style in the CSS styles panel menu) to pop up the new style. Dialog box, as shown below:
In Define, you can choose whether it is an external style sheet or an internal style sheet:
l Select New style Sheet File (new style sheet file), the system will first let You save this style sheet file and then define this style sheet file. The style of the entire page will follow the style sheet file you created, and then you can link this external style sheet file to other pages, so that one style sheet file can control multiple pages.
l If you select This Document Only (only this document exists), you will create an internal style sheet, and Dreamweaver4 will automatically put the content of the style sheet you created into the
There are three style sheet types to choose from in Type:
l Make Custon style (class): (Create a custom style) Customize a style, which can be applied to the page as a class attribute middle.
l Redefine HTML Tag: (Redefine HTML tag) Redefine the default format of the specified HTML tag.
l Use CSS Selector: (Use CSS selector) Format definition for a specific combination of tags, or all tags containing the specified ID attribute.
Before defining CSS, we must first consider clearly, where will the defined style be used? What effects are to be achieved? Is it defined in one page or does it control the style of multiple pages? Then define the appropriate style sheet based on your needs.
3. Create custom styles
On the page, we sometimes want to make some important text or content eye-catching. We need to define a separate style for these important text or content to distinguish it from the general text. We can define CSS for the important content separately by creating a custom style. Finish. Suppose we require that the color of important text and content be defined as red and bold to achieve eye-catching purposes.
Click New Style, a new dialog box will pop up. In the New Style dialog box, select Make Custon style (class) for the style sheet type. Here we create an internal style sheet, select This Document Only, and then in the above Enter the name of the style you defined in the Name drop-down box. We enter ".emphases" and press OK, as shown below:
Note: The name of the custom style can be set at will. Generally, it is named according to its style effect. There must be a period before the name. If you miss it, the system will automatically fill it in for you.
The style definition dialog box pops up, select Type in Category, then set the color to red, the Weight to bold, and press OK, as shown in the picture:
Then add more in the CSS styles panel A custom style named emphases is created. In this way, we have defined a new style:
Let’s take a look at the original code part. We can see that the following style sheets are added to the area. Code:
After defining the style, we can now apply this custom style where needed, on the web page Select the text and click the emphases style in the Styles panel. See if it's the effect you want.
Note: If the content we select is a table or a paragraph, then the text in the entire table or paragraph is defined with emphases style. From the original code, we can see that it is in or < The class="emphases" parameter is added after the ;P> tag, such as:
......
or
......
When we add styles to the selected text, the text itself is not surrounded by HTML tags, so The tag will be automatically added, for example:
......Key point......
Note: The span tag itself does not have In any sense, it specifically specifies the selection range for the style sheet, and p also specifies the area for the style sheet.
4. Create a redefinition style sheet
A redefinition style sheet redefines the format of an HTML tag. For example, we want to reformat the paragraphs on the page, leaving two spaces before each paragraph, and set the size and line spacing of the paragraph text.
Click New Style to bring up the New dialog box. In the New Style dialog box, select Redefine HTML Tag as the style sheet type. We still create an internal style sheet and select This Document Only. When the style sheet type selects Redefine HTML Tag, the name of the drop-down box above changes to Tag, indicating that the input content is an HTML tag. Click the drop-down button, and we can see that all HTML tags are in the Tag drop-down box. Here we select Paragraph mark P:
After OK, enter the style definition dialog box. In Type, we set the font size to 12 pixels and the line spacing to 150% of the text size, as shown below:
In the Block section, we set the text indentation. Since the text size is 12 pixels, the space between two words is 24 pixels:
After pressing OK, the redefinition style is completed. At this time, the text size of each paragraph on the page is 12 pixels, and the line spacing is 150%. However, we cannot see the indentation effect in the Dreamweaver editor. It doesn't matter, just save the file and open it with a browser. See the effect. At this time, the original code of the CSS style sheet is:
5. Create a dynamic link style sheet
Let’s create a set of link styles in different states. Click New Style to bring up the New dialog box. In the New Style dialog box, select Use CSS Selector for the style sheet type. We still create an internal style sheet and select This Document Only. When Use CSS Selector is selected as the style sheet type, the name of the drop-down box above changes to Selector, indicating that the input content is a CSS selector. Click the drop-down button and you can see the 4 states of the dynamic link:
l a :active Select the hyperlink state
l a:hover Move the cursor to the hyperlink state
l a:link The normal state of the hyperlink, when there is no action
l a:visited Visited hyperlink status
Next we set these states separately. First, select a:link. After OK, the style definition dialog box pops up. We set no underline and the color is orange, as follows Picture:
We use the same method to set a:visited, set no underline, yellow, as shown below:
Next, set a:hover, with underline and overline, the color is orange, and set the background to yellow in Background:
Here we do not set a:active, according to the cascading rules a:active The style will automatically follow a:hover. In this way, we have set the effects of all dynamic links. Pay attention to the order of setting. In the browser, we can see: unvisited links on this page are not underlined and are orange; visited links are not underlined and are yellow; when the mouse points to the link, there are up and underlines, orange, and the background is yellow. The original code of the style sheet is:
When defining dynamic links like this, the link effect of the entire page will change. If I want to How to define more than two groups of link effects? Didn't we say in Chapter 4 that mixing classes and pseudo-classes can produce different link effects on the same page? Click New Style, and in the selector drop-down box, we enter a.link2:link (of course you can select a:link first, and then change it), as shown below:
In this way we create a new .link2 class , we set the style for a.link2:link, red, underlined:
According to the above method, we continue to define a.link2:visited and a.link2:hover, we define a.link2:visited as Red is underlined, a.link2:hover is red without underlining, and the background is white. There is an additional custom style named link2 in the CSS styles panel. Then apply this style to a dynamic link. After saving and opening it with a browser, we can see two completely different link styles. All CSS codes are as follows:
6. Definition of other style sheets
We can also enter other CSS selectors in Use CSS Selector:
ID selector, define one starting with "#" style, for example: "#id-style", and then create an ID style with the ID id-style. The ID style sheet must manually add the id="id-style" attribute after the HTML tag.
A class selector containing HTML tags, for example: "p.red", indicates a style that defines the paragraph as the red class. This style only has an effect on paragraphs with the class="red" attribute.
Contains selectors, which means that the previous HTML tag contains the next HTML tag, for example: "p p" means that the style defined in p contains a paragraph.
7. Edit, modify, and delete style sheets
Clicking the button in the CSS styles panel will open the edit style sheet dialog box, as shown below:
Button function introduction:
Link: Link to an external style sheet. Here you can choose to link to an external style sheet or import an external style sheet.
New: Create a new style.
Edit: Select a style and click Edit to edit it.
Duplicate: Duplicate a style, select a style and click the Duplicate button, a dialog box will pop up, give the copied style a new name, OK.
Remover: To remove a style or an external style sheet, select the style to be deleted and click the Remove button, and the style will be deleted.
The content of this style can be seen in the style definition column.
8. External style sheet
Creating an external style sheet is similar to creating an internal style sheet. Just select (New style Sheet File) when creating a new one and save it with a .css extension. style sheet file.
Now, we export the style sheet in the example just now, and then link to other pages. Click Export style Sheet in the CSS style panel menu, and the system will pop up the export style sheet dialog box. We save the style sheet file as mystyle.css. Open the mystyle.css file with Notepad and you can see the following style sheet 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 other pages, click the Link to external style sheet button in the CSS style panel, and link to the style sheet file mystyle.css just exported. At this time, this style sheet has been applied to the new page. Added the following code to the area of the new page:
In addition, you can also import external style sheets. The import method is as follows:
Click the Edit Style Sheet button to open the Edit Style Sheet dialog box. Click the LINK button. The "Link External style Sheet" dialog box will pop up. Enter the external style sheet. Path to the style sheet, select Import, and OK.
You can see that the code in the area is: