Chapter 2 introduce cascading style sheets. This chapter include content: Cascading style sheet basics, creating styles, using styles, manipulating styles, text formatting with CSS. Inviting you to refer.
Trang 1Introducing Cascading Style Sheets
Trang 2Cascading Style Sheet Basics
Cascading Style Sheet Basics
Trang 3Cascading Style Sheet Basics
CSS has many benefits:
– The pages look great and load faster
– Make updating your site easier
– With CSS, you can control the properties of the HTML tag
– Dreamweaver CS4 is better than ever at displaying complex CSS based designs
Trang 4Cascading Style Sheet Basics
Internal style sheet: new style you create gets
added to a style sheet that’s stored in the Web page itself
– Internal style sheets appear in the <head> portion of a Web page
– It contain styles that apply only to that page
– It is a good choice when you have a very specific formatting task for a single page
Trang 5Internal -External Style Sheets
External style sheet: new style you create gets
added to a style sheet that’s stored in another file – An external style sheet, on the other hand, contains only styles—no HTML—and you can link it to numerous pages
– In fact, you can link it to every page on your Web site to provide a uniform
Trang 6Internal -External Style Sheets
– You can create both types of style sheets easily
Trang 7Types of Styles
Styles come in several different types
– Class styles: is one that you create, name, and attach manually to text or an HTML tag Class styles work much like styles in word processing and page layout programs
– ID styles: format a unique item on a page
Use ID styles to identify an object (or an area
of a page) that appears only once
– Tag style: It applies globally to an individual HTML tag
Trang 8Creating Styles
Phase 1: Set Up the CSS Type have many ways
to create a new style:
– On the CSS Styles panel, click the new style button, or right-click anywhere in the CSS Styles panel, and then, from the menu that appears, select New
– Or choose Format ->CSS Styles ->New
Trang 9Creating Styles
Trang 11– Selector Type:
Choose the kind of style you wish to create:
Class, ID , or Tag
Compound, to create more advanced style
types such as pseudo-classes, attribute selectors and descendent selectors
– Selector Name:
If you selected Class from the Selector Type menu, then style Class style names must begin with a period .ClassName
Trang 12 If you selected the Compound option, then Dreamweaver lets you type any valid CSS selector type in the Selector field
Trang 13file ->external style sheet (saved with the
name ends in css)
Trang 14Creating Styles
Phase 2: Defining the Style
– The CSS Rule Definition window provides access to all the available formatting for styling text and graphics
– The Property inspector’s CSS mode lets you quickly create styles for specific text formatting such as choosing a font or a font size
Trang 15Creating Styles
– The CSS Rule Definition window
Trang 16Creating Styles
– Creating a Style with the Property Inspector
Trang 17Using Styles
– Applying a Class Style: Applying a class style to
text
Select some words
In the Property inspector, select the style name from the class menu or in CSS mode
Trang 18Using Styles
– Applying a Class Style: Applying a class style to
objects
Select the object
Select tag at the bottom of the document window
Then right click on the tag name and select Set Class-> the Style name
Trang 19Using Styles
– Applying IDs to a Tag: To apply an ID to text
Select the text, and use the ID menu in the HTM mode of the Property inspector
Apply each ID name only once per page, this menu lists only IDs that exist in your style sheet but haven’t yet been applied to a tag on the page
Trang 20Using Styles
– Removing a Class Style: To remove a class style
from text
Select the text
In Property inspector choose None from the Class menu (HTML mode) or <Remove Class> from the Targeted Rule menu (CSS mode)
Trang 21Using Styles
– Removing a Class Style: To remove a class style
from another object (like an image):
Select the object, and then, from the Property inspector’s Class menu, choose None
Or Format ➝ CSS Styles ➝ None to remove a style from any selection
Trang 22Using Styles
– Applying IDs to a Tag: For non-text elements:
Select the element, and then, in the Property inspector, type the ID name into the ID field
Can also use the Tag selector, use the Set ID menu in the contextual menu that appears when you right-click (Ctrl-click) the tag
Trang 23Using Styles
– To remove an ID: From a text element
Select the text, and then, from the Property inspector’s ID menu, select None
– To remove an ID: For non-text elements
Just select the element, and then, in the Property inspector’s ID field, delete the ID name
Trang 24Using Styles
Linking to an External Style Sheet:
– Whenever you create an external style sheet, Dreamweaver automatically links it to the current document
– To use its styles in a different Web page, you
must attach it to the page
On the CSS Styles panel,
click the Attach External Style Sheet button
Trang 26Using Styles
– If the style sheet you select is outside the current site, Dreamweaver offers to copy the style sheet file into your site’s root folder ->click Yes
Add as: two different methods of attaching an external style sheet to a Web page (Link or Import)
Media: setting is optional and dictates when the styles from the style sheet are applied
Trang 28Manipulating Styles
Deleting a Style
– Click the name of the style-> Press delete key, or click Trash icon at the bottom of the panel
Trang 29Manipulating Styles
Renaming a Class Style:
– On the Property inspector, in the Class menu, choose Rename
– From the top menu, choose the name of the style you wish to rename
– In the “New name” box, type the new style name ->OK
Trang 30Text Formatting with CSS
Choosing a Font
– Applying font formatting: You can use either
The Font menu in the Property inspector’s CSS mode
Or the CSS Rule Definition window’s family menu
Trang 31Font-Text Formatting with CSS
Choosing a Font
– Creating custom font lists: From the Property inspector’s Font menu, select Edit Font List, select Format Font Edit Font List
Select a first-choice font from the list of
“Available fonts”, or type in the font name
Add the font to custom font list by clicking the << button
Trang 32Text Formatting with CSS
Your first-choice font appears in the “Chosen fonts” list
Repeat steps 2 and 3 for each font you wish to include in your custom list
Trang 33Text Formatting with CSS
Changing the Font Size: You can use one of the two way:
– The Size menu in the Property inspector’s CSS mode
– The CSS Rule Definition window’s Font-size menu
Trang 34Text Formatting with CSS
The Font Size include 4 group:
– None: default size
– The numeric: 9->36 in pixels
– The options xx-small->xx-large indicate fixed sizes, replacing the sizes 1->7 used with the old HTML
– The options: smaller and larger are relative sizes, meaning that they shrink or enlarge the selected text based on the default size
Trang 35Text Formatting with CSS
Picking a Font Color: To set the color of text, use the CSS Color property
– Use the Property inspector’s CSS mode
– Or assign a text color in the Text category of the CSS Rule Definition window
Trang 36Text Formatting with CSS
– Type category lets you set formatting options that affect text
Trang 37Text Formatting with CSS
– Font: choose a font from the Font menu
– Size: pixels, ems, and percentages
– Weight: Weight refers to the thickness of the font
– Style: italic, oblique, or normal
– Variant: normal or small-caps
– Line Height: To create more space between lines
– Case: you can automatically capitalize text
– Decoration: This strange assortment of five checkboxes lets you dress up your text
Trang 38Text Formatting with CSS
Block Properties: settings that affect how letters
and words are displayed
Trang 39Text Formatting with CSS
between words
placement of an object
block-level element like a paragraph or table
browser displays extra white space
Trang 40Text Formatting with CSS
List Properties: To control bulleted and
numbered lists properties
– Type: Select the type of bullet you’d like to use
in front of a list item
disc, circle, square, decimal
Trang 41Text Formatting with CSS
– Bullet image: control of your bullet icon
Click the Browse button, and then, from your site folder, select a graphics file
outside
Trang 42Text Formatting with CSS
– Position: controls how the bullet is placed relative to the list item’s text
The “outside” : the bullet outside the margin
of the text
The “Inside”: bullet within the text margin
Inside