adobe dreamweaver cs5 on demand part 38 doc

ptg Chapter 9 Working with Cascading Style Sheets 231 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 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 attributes 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 From the Library of Wow! eBook ptg 232 Chapter 9 If 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 Typ e 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). ◆ Variant. Click the arrow button, and then select an option (in this example, click small-caps). ◆ Color. Click the arrow button and then select a color (in this example, click Blue (#0000FF)). Click OK. 8 7 6 5 4 3 2 1 5 6 4 3 8 7 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 233 Apply 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 1 1 2 3 From the Library of Wow! eBook ptg 234 Chapter 9 Checking 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 di spl ay the i ssu e in the co de, click the Check Page button on the Document window, and then click Next Issue or Previous Issue. To op en the A dob e CSS Ad vis or Web site, click the link at the bottom right of the Results panel. To ex clu de an is sue fr om fu tur e checking, right-click the issue in the Results panel, and then click Ignore Issue. ◆ To ed it the I gno re Iss ues l ist , click the green arrow in the Results panel, click Edit Ignored Issues List, delete the issue from the Exceptions.xml file, and then save and close the file. 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 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 235 Select 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 vi ew the r epo rt, cl ick t he Browse Report button in the Results panel. To sa ve the r epo rt, cl ick t he Save Report button in the Results panel. 3 2 1 4 3 2 1 2 3 2 3 4 From the Library of Wow! eBook . 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. 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 . 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.