Applying Internal CSS Styles Apply a Paragraph Style Open the Web page you want to apply a paragraph style.. Apply a Character Inline Style Open the Web page you want to apply a charact
Trang 1Cascading Style Sheets function and perform just like their counter-parts in word-processing applications For example, you could create a character style in Microsoft Word that specifies text be Garamond, 12 point, bold, and the color black When the style is applied to the text it will immediately take on those characteristics If you access the style and change it (for example, change the color to red), all text associated with that style would change CSS works the same way: You create a style for the text and apply the style to the Web document Changing the style would subsequently change all text associated with that par-ticular style However, the difference between word-processing styles and CSS styles is that paragraph and character styles are one in the same For example, if you select a word or group of words and apply a CSS style, the style is applied only to the selected text (also called an inline style) However, if you click within a paragraph (add an insertion point), the CSS style is applied to the entire paragraph Generally, inline styles are frowned upon because of the amount of effort it takes to apply and modify the items on an item-by-item basis Instead, you can convert an inline style to a CSS rule located in the head of the page or
in an external style sheet, which is cleaner and easier to use
Applying Internal
CSS Styles
Apply a Paragraph Style
Open the Web page you want to
apply a paragraph style
Click within a specific paragraph,
to create an insertion point
NOTE Do not select any text
Click the Format menu, point to
CSS Styles, and then select a
user-defined CSS style
TIMESAVER In the Properties
panel, click CSS, click the
Targeted Rule list arrow, and then
select the CSS style you want
The CSS style is applied to the
entire paragraph
NOTE A paragraph is defined as
the information contained between
two carriage returns
3
2
Click the Targeted Rule list arrow, and then select a style.
Trang 2Apply a Character (Inline) Style
Open the Web page you want to
apply a character style
Select a word or words within the
text document
Click the Format menu, point to
CSS Styles, and then select a
user-defined CSS style
The CSS style is applied to the
selected text
Convert Inline CSS to a CSS Rule
Open the Web page with the style
you want to change
Click the View menu, and then
click Code.
Select the entire <style> tag that
contains the inline CSS you want
to convert
Right-click (Win) or Control-click
(Mac) the selection, point to CSS
Styles, and then click Convert
Inline CSS To Rule.
Click the Convert to list arrow,
select a convert type, and then
enter a class name for the new
rule
Specify a style sheet or select the
head of the document as to where
you want the new CSS rule
Click OK.
7
6
5
4
3
2
1
3
2
5
6 7
See Also
See “Moving CSS Rules” on page 226
for information on moving CSS rules to
a style sheet
Trang 3When you start to modify an external style sheet, you really begin to see the awesome power of using CSS An external style sheet normally contains all of the formatting options for one or more Web pages When you attach the style sheet to the document, the style sheet controls the formatting of the document For example, if you had a style sheet that modified the <body> tag to use the Helvetica font, centered, and 12 point, when the style sheet was attached to the HTML document, all text defined by the <body> tag would change, according to the rules set up by the style sheet Since the style sheet is only a text document it's easy to make changes (they can even be made in a text editor) For example, you could access the style sheet and change the formatting
of the text from centered to left, and then save the style sheet The next time the Web page opens, all the <body> tag text will be left justified In addition to this power, you can use more than one style sheet within a Web page For example, you can have a style sheet that defines all your headings, one that defines the look of the page, and another that defines body text Cascading Style Sheets separate the page content from the formatting, and give you total control over your designs
Applying and
Modifying External
CSS Styles
Attach an External Style Sheet
Open the Web page you want to
attach an external style sheet
Click the Format menu, point to
CSS Styles, and then click Attach
Style Sheet.
Select from the following options:
◆ File/URL Enter the path and file
name of the external style
sheet, or click Browse to select
a file
◆ Add As Click the Link option to
create a link from the page to
the external style sheet
(recommended), or click the
Import option to write the style
sheet directly into the page
◆ Media Click the Media arrow
to select the media type
associated with this particular
page (Default: All)
◆ Preview Click Preview to view
the effects of the external style
sheet on your page
3
2
3
Trang 4Open and Modify an External
Style Sheet
Open the Web page you want to
modify an external style sheet
Any associated files, such as an
external style sheet and scripts,
with the main document are
automatically available on the
Related Files toolbar
Click the external style sheet file
on the Related Files toolbar
Modify the document to reflect the
changes required
Click the File menu, and then click
Save.
To view the main document, click
Source Code on the Related Files
toolbar
When you display the main
document, the formatting reflects
the changes made to the attached
style sheet
5
4
3
2
1
Did You Know?
You can use a Dreamweaver sample
style sheet Dreamweaver provides
sample style sheets you can apply to
your Web pages or use it as a starting
point to create your own style sheet
Click the Window menu, click CSS
Styles, click the Attach Style Sheet
button, click the Sample Style Sheets
link, select the sample style sheet you
want, click Preview to apply it to the
current Web page, and then click OK
2 Related Files toolbar
Filtering Files on the Related Files toolbar
The Related Files toolbar displays static and dynamically-related files for a Web page Status files appear first starting from the left, followed by external files (such as css and js), and concluding with dynamic path server included files (such as php, inc, and module)
When the Related Files toolbar contains too many files to fit on the toolbar, scroll arrows appear to access files To help you reduce the number of files on the toolbar, you can filter files by type to hide the ones you don’t want to display Click the Filter Related Files button
(New!) on the Related Files toolbar, and then select the file types you want to filter (checked to show or unchecked to hide) or click Show All File Types to show all files The list of file types on the menu is built based on the file types connected to the current open document, which varies You cannot filter out all the file types
When you get to the last file type, it will be grayed out in the menu
When you close a document, the filter settings are not saved
For Your Information
Filter Related Files button
Trang 5You can remove a style from any tag, you can delete the redefined tag,
or you can even edit the existing style to reflect different formatting
Once again this reflects the versatility of using style sheets over stan-dard HTML coding When you remove a style from a Web document the item or text will revert back to its original formatting For example, if you remove a style from a section of body text, the text will revert back to the default for that particular tag If, however, you have an external style sheet attached to a document, and you have applied a local class
or attribute (internal) style to the text, when you remove the localized style, the text will revert back to the rules supplied by the external style sheet
Removing Internal
Styles
Remove an Internal Style
Open the Web page you want to
remove an internal style
Select the stylized text, or place
the insertion point in a paragraph
containing stylized text
Click the Format menu, point to
CSS Styles, and then click None.
TIMESAVER In the Properties
panel, click CSS, click the
Targeted Rule list arrow, and then
click None
The CSS style is removed from the
selected text
3
2
Did You Know?
You can rename a CSS class style.
Click the Window menu, click CSS
Styles, right-click (Win) or control-click
(Mac) the CSS class style you want to
rename in the CSS Styles panel, click
Rename Class, enter a new name, and
then click OK
Trang 6Dreamweaver gives you complete control over internal and external styles with the CSS Styles panel The CSS Styles panel lists all the inter-nal and exterinter-nal styles attached to the active Web page In addition to displaying the styles, known as rules, the CSS Styles panel gives you the ability to attach style sheets, modify existing styles (internal or external), disable or enable CSS properties (New!), and even remove styles
Using the CSS Styles
Panel
Use the CSS Styles Panel
Open the Web page that contains
the stylized text you want to view
Click the Window menu, and then
click CSS Styles or click the CSS
button in the Properties panel
The following options are available
on the CSS Styles panel:
◆ All or Current Shows all of the
active document's style rules,
or the currently selected rule
◆ Rules Window Displays a list
of the active document's rules
◆ Properties Window Displays a
list of the properties for the rule
selected in the Rules window
◆ Show Category View Displays
the properties for the selected
rule by categories
◆ Show List View Displays the
properties for the selected rule
in List view (color, font, etc.)
◆ Show Only Set Properties.
Displays only set properties
◆ Attach Style Sheet Attaches
an external style sheet
◆ New CSS Rule Creates a new
CSS rule
◆ Edit Style Sheet Opens a
dialog box to edit styles
◆ Disable/Enable CSS Property
Disables or enables the
selected CSS property (New!)
◆ Delete CSS Style Sheet.
Deletes the selected rule or
property
3
2
Rules window
Properties window
Use to change property view
Use to manage style sheets, rules, or properties
External CSS rules
Internal CSS rules