CSS Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS for example, the selector td h2 applies when-ever an h
Trang 1CSS Advanced styles redefine the formatting
for a particular combination of elements, or
for other selector forms as allowed by CSS
(for example, the selector td h2 applies
when-ever an h2 header appears inside a table cell)
This is accomplished through the
associa-tion of styles to HTML tags through ID
attrib-utes and ID selectors ID attribattrib-utes in HTML
tags uniquely identify that tag with a name
Styles can be linked to that ID just like they
can with classes The big difference is that ids
cannot be used on more than one tag This
also means that style definitions for ids only
relate to one tag per page You should never
run into the need to apply an ID selector more
than once Should you need to use an ID
selector on more then one occasion in any
given page, you will need to re-plan your
CSS
For example, an ID can be applied to the
h1 tag of a document containing heading text
The tag will be given the ID "master-heading"
indicating that it is the sole and primary
head-ing of the page As such it will also receive a
unique style
Advanced styles can also redefine the
for-matting for tags that contain a specific id
attribute (for example, the styles defined by
#myStyle (user defined) apply to all tags that
contain the attribute-value pair id="myStyle")
The following example is an ID selector:
#MyID {
color: #0033ff;
}
The primary difference between a Class and ID selector is that the first character is a hash or pound sign (#)
Creating advanced styles also helps when Web pages are converted into text docu-ments For example, if ID's are selected for various heading, body, and sub text, these unique names can be used to help convert the Web text to print text
In addition to ID selectors, CSS specifica-tions refer to link styles as Pseudo-classes
These are special classes that describe styles for elements that only apply under certain cir-cumstances For example, the four default pseudo-classes you will find in the Advanced menu are:
◆ a:link Describes any hyperlink that has not been visited by the user's browser In other words, the page linked to is not present in the browser's local memory
◆ a:visited Describes any hyperlink that has been visited and is present in the browser's local memory
◆ a:hover Describes a hyperlink while the user's mouse happens to be hovering over it This class is recognized by all version 4 and higher browsers, except Netscape 4
◆ a:active Describes a hyperlink that has been clicked but not yet released
NOTE The hover class is recognized by all version 4 and higher browsers, except Netscape
Working with ID Selectors
Trang 2If you want to define the formatting for a combination of tags, you can use the Advanced option to create an ID selector You can specify one
or more HTML tags to create an ID selector or select one from the menu, which includes a:active, a:hover, a:link, and a:visited After you specify the tags you want to use, you can define the formatting associ-ated with it When you’re done, you can apply the ID selector to other elements
Creating and Applying
an ID Selector
Create an ID Selector
Open the Web page you want to
create an ID selector
Click the Format menu, point to
CSS Styles, and then click New.
Click the Select Style list arrow,
and then click ID.
Enter a style name in the Selector
Name box (in this example,
#mainBody), or select one from
the list IDs must begin with a
pound (#) sign
Click the Define In list arrow, and
then select a new or existing
external style sheet or (This
Document Only).
Click OK.
Click the Type category, and make
the modifications you want Some
include the following:
◆ Font Click the arrow button,
and then select a font (in this
example, click Verdana, Arial,
Helvetica, sans-serif)
◆ Size Click the arrow button,
and then select a size (in this
example, enter 24 pixels)
7
6
5
4
3
2
1
5
6
4 3
7
Trang 3Apply an ID Selector
Click to place the insertion point
into a portion of the text that you
want to apply the ID selector
Right-click one of the tags in the
quick tag selector (in this example,
the <p> tag)
Point to Set ID, and then select
from the available ID selector
options (in this example,
paragraphText)
The selected paragraph now
changes to the modifications made
to the #paragraphText ID selector
3
2
Trang 4Checking for CSS
Browser Compatibility
Check for CSS Browser
Compatibility Issues
Click the File menu, point to Check
Page, and then click Browser
Compatibility.
The Results panel appears with
the Browser Compatibility Check
tab, indicating any problems
Double-click an issue to select it
Information about the potential
problem appears to the right in the
Results panel
To display the issue in the code,
click the Check Page button on the
Document window, and then click
Next Issue or Previous Issue.
To open the Adobe CSS Advisor
Web site, click the link at the
bottom right of the Results panel
To exclude an issue from future
checking, right-click the issue in
the Results panel, and then click
5
4
3
2
1
The Browser Compatibility Check (BCC) analyzes the HTML and CSS on the open page and determines whether it has problems in certain browsers Browser targeting checks your pages for all popular plat-forms and browsers, including Firefox, Internet Explorer (Mac and Win), and Safari When you run the BCC, it scans the open page and reports any potential CSS problems in the Results panel Each potential prob-lem is given a confidence rating, a circle The amount of the circle filled in—quarter, half, three-quarters, or full—determines the occurrence probability level of the problem Browser problems fall into three cate-gories: serious (visible problem), warning (not supported), and informa-tional (no visible effect) A direct link to documentation and solutions related to the problem is also provided on the Adobe CSS Advisor Web site
2
1
5
3
4
Trang 5Select Browsers to Check
Click the Check Page button on
the Document window, and then
click Settings.
The Target Browsers dialog box
opens
Select the check boxes next to the
browsers you want to check and
clear the ones you don’t want to
check
Click the Version list arrow for
each browser to select the version
you want
Click OK.
View and Save a BCC Report
Click the File menu, point to Check
Page, and then click Browser
Compatibility.
◆ You can also click the Window
menu, point to Results, and
then click the Browser
Compatibility.
The Results panel appears with
the Browser Compatibility Check
tab, indicating any potential
problems
To view the report, click the
Browse Report button in the
Results panel
To save the report, click the Save
Report button in the Results panel.
3
2
1
4
3
2
1
2 3
4