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 app
Trang 1A 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;
}
Trang 2Descendant 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 thehrefattribute 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;
}
Trang 3In 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 only 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 theclassandid
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 whosidattribute value matched the Rule name, an
example of which 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
Trang 4First Child Pseudo Class
The first-child pseudo class allows you to indicate that the rule should select the 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 that the style should be applied to the first paragraph tag found within
any element with anidattribute value oftitle In the following HTML, that means that the textFirst
Childwould have the style applied to it:
<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 an element, activating an element, or giving an
element focus
a:hover
{
color:Maroon;
}
a:active
{
color:Silver;
}
a:focus
Trang 5color: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, thelangpseudo class is used to set the quotes for a Web page that is German Thelang
pseudo class is not supported by IE 7
Pseudo Elements
CSS also includes several pseudo elements, which allow you to make selections of items in the 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 pseudobeforeandafterelements 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
Trang 6Selector 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 theClassattribute 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
Trang 7Listing 18-5: Merging styles 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
Trang 8You 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 theid,class, andstyleattributes, 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
Trang 9{ 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, andnewproduct— 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 though the summer class is last in
the list of classes defined in the Class attribute, thenewproductrule overrides the summer Rules color
property because thenewproductRule 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 thefont-familyproperty of a paragraph type selector
rule, defined in three different locations, could be overridden by other style rules
Figure 18-6
Trang 10As 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 thefont-familystyle 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 the box model Once an element’s box behavior
has been determined, it can be positioned using several different techniques