Professional ASP.NET 3.5 in C# and Visual Basic Part 92 pptx

Evjen c18.tex V2 - 01/28/2008 3:01pm Page 867 Chapter 18: HTML and CSS Design with ASP.NET A rule is made up of two parts, the Selector and the Properties. Figure 18-4 shows an example of a CSS rule. Figure 18-4 Selectors The Selector is the portion of the rule that dictates exactly how the Web browser should select the elements to apply the style to. CSS includes a variety of types of selectors, each of which defines a different element selection technique Universal Selectors The Universal Selector indicates that the style should apply to any element in the Web page. The sample that follows shows a Universal Selector, which would change the font of any element that supports the font-family property to Arial. * { font-family:Arial; } Type Selectors The Type Selector allows you to create a style that applies to a specific type of HTML element. The style will then be applied to all elements of that type in the Web page. The following sample shows a Type Selector configured for the HTM paragraph tag, which will change the font family of all < p > tags in the Web page to Arial. p { font-family:Arial; } 867 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 868 Chapter 18: HTML and CSS Design with ASP.NET Descendant Selectors Descendant Selectors allow you to create styles that target HTML elements that are descendants of a specific type of element. The following sample demonstrates a style that will be applied to any < span > tag that is a descendant of a < div >. div span { font-family:Arial; } Child Selectors The Child Selector is similar to the Descendant Selector except unlike the Descendant Selector, which searches the entire descendant hierarchy of an element, the Child Selector restricts its element search to only those elements who are direct children of the parent element. The following code shows a modification of the Descendant Selector, making it a Child Selector. div > span { font-family:Arial; } Attribute Selectors An Attribute Selector allows you to define a style that is applied to elements based on the existence of element attributes rather than the actual element name. For example, the following sample creates a style that is applied to any element in the Web page that has the href attribute set. *[href] { font-family:Arial; } Note that Attribute Selectors are not supported by Internet Explorer 6 or earlier, or by the Visual Studio 2008 design surface. Adjacent Selectors Adjacent selectors allow you to select HTML elements that are immediately adjacent to another element type. For example, in an unordered list, you may want to highlight the first list item and then have all the following items use a different style. You can use an Adjacent Selector to do this, which is shown in the following sample: li { font-size:xx-large; } li+li { font-size:medium; } 868 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 869 Chapter 18: HTML and CSS Design with ASP.NET In this sample, a default Type Selector has been created for the list item element (< li >), which will change the font size of the text in the element to extra, extra large. However a second Adjacent Selector has been created, which will override the Type Selector for all list items after the first, changing the font size back to normal. Class Selectors Class Selectors are a special type of CSS selector that allows you to apply a style to any element with a specific Class name. The Class name is defined in HTML using the Class attribute, which is present on almost every element. Class Selectors are distinguished from other Selector types by prefixing them with a single period (.). .title { font-size:larger; font-weight:bold; } This CSS rule would then be applied to any element whose class attribute value matched the rule name, an example of which is shown here: <div class="title">Lorum Ipsum</div> When creating Class Selectors, note that the class name may not begin with a numeric character. Also, CSS class names can contain o nly alphanumeric characters. Spaces, symbols and even underscores are not allowed. Finally, you should make sure that you match the casing of your class name when using it in the HTML. While CSS itself is not case sensitive, some HTML DocTypes dictate that the class and id attributes be treated as case sensitive. ID Selectors ID Selectors are another special type of CSS Selector that allows you to create styles that target elements with specific ID values. ID Selectors are distinguished from other Selector types by prefixing them with a hash mark (#). #title { font-size:larger; font-weight:bold; } This CSS rule would be applied to any element whos id attribute value matched the Rule name, an example of w hich is shown here: <div id="title">Lorum Ipsum</div> Pseudo Classes CSS also includes a series of pseudo class selectors that give you additional options in creating Style rules. Pseudo classes can be added to other selectors to allow you to create more complex rules. 869 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 870 Chapter 18: HTML and CSS Design with ASP.NET First Child Pseudo Class The first-child pseudo class allows you to indicate that the rule should select t he first child element M of an element N. The following is an example of using the first-child pseudo class: #title p:first-child { font-size:xx-small; } The Rule defined above states t hat the style should be applied to the first paragraph tag found within any element with an id attribute value of title . In the following HTML, that means that the text First Child wouldhavethestyleappliedtoit: <div id="title">Lorum <p>First Child</p><p>Second Child</p> Ipsum</div> Note that the Visual Studio 2008 design surface does not support the first-child pseudo class; therefore, even though the style may be rendered properly in the browser, you may not get an accurate preview on the design surface. Link Pseudo Classes CSS includes a number of pseudo classes specifically related to anchor tags. These special pseudo classes allow you to define styles for the different states of an anchor tag. a:link { color:Maroon; } a:visited { color:Silver; } In this sample, two rules have been created, the first of which applies a style to the unvisited links in a page, while the second applies a different style to the visited links. Dynamic Pseudo Classes The dynamic pseudo classes are special CSS classes that are applied by the browser based on actions performed by the end user such as hovering over a n element, activating an element, or giving an element focus. a:hover { color:Maroon; } a:active { color:Silver; } a:focus 870 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 871 Chapter 18: HTML and CSS Design with ASP.NET { color:Olive; } While the sample demonstrates the use of the dynamic pseudo classes with the anchor tag, they can be used with any HTML element. Note, however, that support for the dynamic pseudo classes in different browsers varies. Language Pseudo Class The language pseudo class allows you to define specific Rules based on the end user’s language settings. :lang(de) { quotes: ’  ’’  ’’ \ 2039’ ’ \ 203A’ } In this sample, the lang pseudo class is used to set the quotes for a Web page that is German. The lang pseudo class is not supported by IE 7. Pseudo Elements CSS also includes several pseudo elements, w hich allow you to make selections of items in t he Web page that are not true elements. The pseudo elements available are: first-line, first letter, before, and after. The following samples demonstrate the use of these. p:first-line { font-style:italic; } p:first-letter { font-size:xx-large; } The pseudo first-line and first-letter elements allow you to apply special styling to the first line and first letter of a content block. p:before { content: url(images/quote.gif); } p:after { content: ’<<end>>’; } The pseudo before and after elements allow you to insert content before or after the targeted element, in this case a paragraph element. The content you insert can be a URL, string, Quote character, counter, or the value of an attribute of the element. 871 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 872 Chapter 18: HTML and CSS Design with ASP.NET Selector Grouping When creating CSS rules, CSS allows you group several selectors together into a single rule. The following sample demonstrates a single rule that combines three type selectors: h1, h2, h3 { color:Maroon; } This rule then results in the fore-color of the text content of any h1, h2 or h3 tag being maroon. Selector Combinations CSS also allows you to combine multiple Selector types. For example, you can create Class selectors that target specific HTML elements in addition to matching the Class attribute value. Listing 18-4: Combining multiple Selector types in a single CSS rule <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <style type="text/css"> .title { font-family:Courier New; } div.title { font-family:Arial; } </style> </head> <body> <form id="form1" runat="server"> <p class="title">Lorum Ipsum</p> <div class="title">Lorum Ipsum</div> </form> </body> </html> Merged Styles CSS also merges styles when several style rules are defined that apply to a given HTML element. For example, in the sample code that follows, a Class Selector and a Type Selector are defined. Both of these selectors apply to the paragraph element in the HTML. When the browser interprets the styles, it will merge both onto the element. 872 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 873 Chapter 18: HTML and CSS Design with ASP.NET Listing 18-5: Merging s tyles from multiple rules onto a single element <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <style type="text/css"> .title { font-family:Courier New; } p { color:Green; } </style> </head> <body> <form id="form1" runat="server"> <p class="title">Lorum Ipsum</p> </form> </body> </html> As you can see in Figure 18-5, both the font and the color of the single paragraph element have been styled, even though there were two separate style rules that defined the style. Figure 18-5 873 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 874 Chapter 18: HTML and CSS Design with ASP.NET You can also merge multiple styles by defining multiple rules using different Selector types. If a single HTML element matches all of the rules, the styles from each rule will be merged together. Listing 18-6 shows an example where a single element matches multiple rules. Listing 18-6: Multiple Selector matches on a single element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>CSS Inheritance Sample</title> <style type="text/css"> p { font-family:Arial; color:Blue; } p#book { font-size:xx-large; } p.title { font-family: Courier New; } </style> </head> <body> <form id="form1" runat="server"> <p id="book" class="title" style="letter-spacing:5pt;">Lorum Ipsum</p> </form> </body> </html> In this case, because the paragraph tag defines the id , class ,and style attributes, each of the Style rules match; therefore, each of their styles get merged onto the element. Finally the class attribute itself can be used to merge multiple styles onto the same element. The class attribute allows you to specify multiple class names in a space-delimited string. Listing 18-7: Assigning multiple Class Selectors to a single element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>CSS Inheritance Sample</title> <style type="text/css"> p.title 874 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 875 Chapter 18: HTML and CSS Design with ASP.NET { font-family: Courier New; letter-spacing:5pt; } p.summer { color:Blue; } p.newproduct { font-weight:bold; color:Red; } </style> </head> <body> <form id="form1" runat="server"> <p class="title newproduct summer">Lorum Ipsum</p> </form> </body> </html> In this case, the three classes — title , summer ,and newproduct — have all been defined in the class attribute. This means that these three styles will be merged onto the paragraph element. Note that, in this case, the order in which the CSS classes are defined in the internal stylesheet also influences how the styles are merged onto the paragraph tag. Even t hough the summer class is last in the list of classes defined in the Class attribute, the newproduct rule overrides the summer Rules color property because the newproduct Rule is defined after the summer rule in the internal style sheet. CSS Inheritance CSS includes the concept of style inheritance. This works because the browser views the different loca- tions that a style can be defined in (external, internal, or inline) as a hierarchical structure. Figure 18-6 shows this inheritance by demonstrating how the font-family property of a paragraph type selector rule, defined in three different locations, could be o verridden by other style rules. Figure 18-6 875 Evjen c18.tex V2 - 01/28/2008 3:01pm Page 876 Chapter 18: HTML and CSS Design with ASP.NET As you can see from the figure, the rule of thumb is that the closer the style definition is to the element it applies to, the more precedence it will take. In this case, the paragraph text would ultimately be displayed using the Courier New font family because that is defined in the inline style. Inheritance not only applies to styles kept in separate file locations, but also applies to styles within the same location, which means that sometimes you also need to think about the order in which you define your styles. For example, Listing 18-8 shows a style sheet that contains two Type Selectors, both targeting the paragraph element, both setting the font-family style property. Obviously both of these cannot be applied to the same element, so CSS simply chooses the Selector that is closest to the paragraph tags. Listing 18-8: Using style overriding within the same Internal style sheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style type="text/css"> p { font-family:Arial; } p { font-family: Courier New; } </style> </head> <body> <form id="form1" runat="server"> <p>Lorum Ipsum</p> </form> </body> </html> Running this sample, you will see that the font applied is the Courier New font. Note that you should be careful when combining styles from external style sheets and internal style sheets. Remember that the browser will ultimately choose the style that is defined closet to the specific elements. This means that as the browser begins to parse the Web page, internal styles defined before external styles are considered further away from the HTML elements. Thus, the browser will use the styles located in the external style sheet. If you plan on storing style rules in both internal and external style sheets, you should remember to include the external style sheets <link> tags before the internal style sheets <style> block in your Web page. Element Layout and Positioning CSS is useful not only for styling elements in a page, but also for positioning elements as well. CSS actually gives you a much more flexible system for positioning elements than HTML itself. CSS bases the positioning of elements in a Web page on something called t he box model. Once an element’s box behavior has been determined, it can be positioned using several different techniques. 876 . - 01/28/2008 3: 01pm Page 8 73 Chapter 18: HTML and CSS Design with ASP. NET Listing 18 -5: Merging s tyles from multiple rules onto a single element <html xmlns="http://www.w3.org/1999/xhtml"> <head. 01/28/2008 3: 01pm Page 872 Chapter 18: HTML and CSS Design with ASP. NET Selector Grouping When creating CSS rules, CSS allows you group several selectors together into a single rule. The following sample. storing style rules in both internal and external style sheets, you should remember to include the external style sheets <link> tags before the internal style sheets <style> block in