Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
0,99 MB
Nội dung
476
P a r t I I : C o r e S t y l e
476
P a r t I I : C o r e S t y l e
As these examples have shown, classes can be used to significantly reduce the number
of style rules necessary in a document.
Contextual Selection
Although the class and id attributes provide a great deal of flexibility for creating style
rules, many other types of rules of equal value exist. For example, it might be useful to specify
that all <strong> tags that occur within a <p> tag get treated in a certain way, as compared to
the same elements occurring elsewhere within the document. To create such a rule, you must
use contextual selection. Contextual selectors are created by showing the order in which the
tags must be nested for the rule to be applied. The nesting order is indicated by a space
between each selector. For example, given the rule
p strong {background-color: yellow;}
all occurrences of the strong element within a p element have a yellow background. Other
occurrences of strong without a p ancestor element might not necessarily have the yellow
background.
TIP Be careful about the use of the space and comma in CSS selectors; it is easy to turn grouping
into contextual selection or vice versa with a simple typo.
Contextual selection does not require a direct parent-child relationship with elements.
For example, with the rule in the preceding example, you would find that given
<p>This <span>is not <strong>directly</strong>within</span>
the paragraph.</p>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
477
PART II
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
477
the nested <strong> tag will still have a yellow background even though it is not directly
within the
<p> tag. What you are seeing here is that the rule really says that all <strong>
tags that are “descendents” of a <p> tag are given a yellow background:
Descendent selection is not limited to a single level, nor does it require just generic
element selection; for example, here we say that links inside of unordered lists found inside
of the
div element with the id of “nav” should have no underlines:
div#nav ul a {text-decoration: none;}
It is also possible that using a wildcard selector may be useful with contextual selection.
The rule
body * a {text-decoration: none;}
would select only <a> tags that are descendents of some tag found under the body element.
While using multiple elements together can be quite powerful, more specific selections
require other CSS selector syntax.
p strong {background-color: yellow;}
Not Yellow
Not Descendent of P
Yellow
Dir
ect Descendent
Yellow
Indirect descendent
div
strong
body
p
strong
body
p
span
body
strong
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
478
P a r t I I : C o r e S t y l e
478
P a r t I I : C o r e S t y l e
Direct Descendent Selector
CSS2 introduced the child selector specified by the greater than symbol (>) to form a rule
to match only elements that are directly enclosed within another element. Consider the
following rule:
body > p {background-color: yellow;}
Here we find that only paragraphs that are the direct children of the body element have a
yellow background:
<body>
<p>I have a yellow background</p>
<div><p>I do not have a yellow background.</p></div>
</body>
Adjacent Sibling Selectors
A similar rule called the adjacent-sibling selector is specified using the plus sign (+) and is
used to select elements that would be siblings of each other. For example, consider the
following rule:
h1 + p {color: red;}
This states that all paragraph elements that are directly after an <h1> are red, as indicated
by this markup:
<h1>I am a heading</h1>
<p>I am an adjacent paragraph so I am red!</p>
<p>I am not adjacent so I am not red.</p>
h1
p
p
body
h1 + p {color: red;}
Red - Adjacent to h1
Not Red - Not Adjacent to h1
p
div
p
body
p strong {background-color: yellow;}
Yellow - Direct Descendent
Not Y
ellow - Not Direct Descendent
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
479
PART II
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
479
General Sibling Selectors
A CSS3 selector (~) can be used to select elements that happen to have a particular element
preceding them as a sibling directly. For example,
h1 ~ p {color: red;}
would mean that <p> tags that eventually follow at the same tag nesting level as <h1> tags
would be red:
<p>I am not red.</p>
<h1>Heading 1</h1>
<p>This is red.</p>
<h2>Heading 2</h2>
<p>I am red too.</p>
<div><p>Not me as I am not a sibling given that I am one level down.</p></div>
NOTE Advanced contextual selectors like direct child selectors are not supported under some
relatively recent Internet Explorer versions, notably IE 6 and earlier.
A summary of all the core element selectors discussed so far can be found in Table 4-6.
Attribute Selectors
Attribute selectors, first introduced in CSS2, allow rules to match elements with particular
attributes or attribute values. For example, a rule such as
a[href] {background-color: yellow;}
would match all <a> tags that simply have the href attribute, whereas a rule such as
a[href="http://www.htmlref.com"] {font-weight: bold;}
would match only those <a> tags that have an href value set to the book’s support site URL.
p
h1
body
h1 ~ p {color: red;}
Red
Not Red
p
h2
Red
p
div
p
Not Red
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
480
P a r t I I : C o r e S t y l e
480
P a r t I I : C o r e S t y l e
TABLE 4-6 Core CSS Selectors
Selector Description Example Defined In
E
Selects all elements of
the name E specified
in the rule
h1 {color: red;}
/* makes all h1 tags red */
CSS1
*
Selects all elements
* {color: blue;}
/* makes all elements blue */
CSS2
E, F, G
Applies the same rules
to a group of tags E, F,
and G
h1,h2,h3 {background-color: orange;}
/* sets the background color of all
h1, h2, and h3 elements to orange */
CSS1
#id
Selects any tag with an
id attribute set
#test {color: green;}
/* makes a tag with id='test' green */
CSS1
E#id
Selects the specified
element E with the
given id attribute set
h3#contact{color: red;}
/* sets the color to red on the h3
tag with the id equal to contact */
CSS1
.class
Selects all tags with
the specified class
value
.note {color: yellow;}
/* makes all tags with class='note'
yellow */
CSS1
E.class
Selects the specified
elements of type E
with a particular class
value
h1.note {text-decoration: underline;}
/* underlines all h1 tags with
class='note' */
CSS1
E F
Selects descendent
tags where F is an
eventual descendent
of element E
p strong {color: purple;}
/* sets all strong tags that are
descendents of p tags purple */
CSS1
E > F
Selects direct
descendents
body > p {background-color: yellow;}
/* makes all p tags that have the
body tag as their immediate parent
have the background color yellow */
CSS2
E + F
Selects adjacent
siblings
h1 + p {color: red;}
/* makes all p tags that are
immediately preceded by an h1 tag
red */
CSS2
E ~ F
Selects siblings
p ~ strong {font-style: italic;}
/* sets the font style to italic on
all strong tags that have a p tag
as a preceding sibling */
CSS3
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
481
PART II
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
481
It is possible to match multiple attribute values or even pieces of the attribute values.
For example, to match a value in a space-separated list, you might use a rule like this:
p[title~="Larry"] {font-style: italic;}
This rule would match
<p title="Larry Curly and Moe">This is italic.</p>
<p title="Larry">This is italic.</p>
<p title="Larry-The-Stooge">This is not italic.</p>
To match an attribute value separated by dashes, which is common in language values
(for example, en-uk, en-us, and so on), use a rule like this:
p[lang|="en"] {color: red;} /* English text in red */
This rule would then affect English paragraphs but not paragraphs that have no language
specified or a different value than an English variation:
<p lang="en">This is English and red.</p>
<p lang="en-uk">This is British English and red.</p>
<p>Not red no lang specified.</p>
<p lang="fr">C'est Francais. (Not red)</p>
Later we will see an alternate form of language selection using a CSS3 pseudo-class
called :lang(). We’ll save that for later when we discuss other pseudo-classes, but while
we’re on the topic of CSS3, let’s see what attribute selection possibilities this emerging
specification introduces.
CSS3 Attribute Selectors
CSS3 introduces a number of new attribute selectors. For example, you can now match
attributes that start with a particular value using [attr^=value]. Here we match
paragraphs that have title attributes that start with “Start match”
p [title^="Start match"] {background-color: red;}
and apply them to the following markup:
<p title="Start match">This should be red.</p>
<p title="No Start Match">This should not be red.</p>
Using [attr$=value], we can match the end of an attribute value. For example, here
we match paragraphs with title attributes that end with “match end”
p.group4[title$="match end"] {background-color: red;}
which is demonstrated with this markup:
<p class="group4" title="This should match end">This should be red.</p>
<p class="group4" title="This won't match end!">This shouldn't be red.</p>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
482
P a r t I I : C o r e S t y l e
482
P a r t I I : C o r e S t y l e
Finally, we can look over an attribute value and find matches within it using
[attr*=value]. Here we match paragraph elements with the word “found” present in the
title attribute:
p [title*="found"] {background-color: red;}
This will match
<p title="The match is found in here">This should be red.</p>
but not match this paragraph
<p title="No match can be seen here">This shouldn't be red.</p>
as it is missing the word we match on. However, note that this isn’t really a word match but
more a substring match as it will match the following markup:
<p class="group4" title="*foundinside*">This should be red.</p>
However, as a pattern match, it is susceptible to casing, so this markup
<p class="group4" title="*Foundinside*">This shouldn't be red.</p>
wouldn’t match. If you are familiar with regular expressions and start to imagine a complex
CSS selector system with case-sensitivity wildcards and more. If you have bad dreams
about regular expressions, you might guess where this trend may end up someday.
Multiple Attribute Selectors
As you learn about more selectors, always remember that you can combine previous ideas
together. For example,
p.group1[title] {background-color: red;}
would match any <p> tag with the class “group1” and with the title attribute set.
Contextual selection also could be applied, where
#nav a[href="http://"] {font-weight: bold;}
would match any <a> tags which are descendents of some element with an id value of
“nav” that have href values that start with “http://” and make them bold.
We can also match multiple attribute characteristics at once. Consider the following:
p[title="Test Selector"][lang|="en"] {border: 2px solid black; }
This rule would match a <p> tag with a title set to “Test Selector” and a lang value in the
English family. To experiment with attribute selectors, see the example online at http://
htmlref.com/ch4/attributeselectors.html. Table 4-7 presents all the attribute selectors
together.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
483
PART II
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
483
Selector Description Example Defined In
E[attr]
Selects all elements of
E that have the given
attribute attr
a[href] {background-color:
yellow;}
/* sets the background color
to yellow for all a tags
that have an href attribute
*/
CSS2
E[attr=value]
Selects all elements of
E that have set the given
attribute attr equal to
the given value
a[href="http://www.htmlref
.com"] {font-weight: bold;}
/* sets the font-weight to
bold on all a tags that have
their href attribute set to
http://www.htmlref.com */
CSS2
E[attr|=value]
Selects all elements of
E that have an attribute
that contains a value
that starts with a
value that is a list of
hyphen-separated values
p[lang|="en"] { color: red;}
/* English text in red */
CSS2
E[attr~=value]
Selects all elements
of E that have a space-
separated list of values
for attr where one of
those values is equal to
the given value
p[title~="Test"]
{font-style: italic;}
/* sets the font style to
italic on all p tags that
have one word in their title
equal to Test */
CSS2
E[attr^=value]
Selects all elements of
E that have the attribute
attr that begins with the
given value
p[title^="HTML"]{color:
green;}
/* sets the color to green
if the title starts with
HTML */
CSS3
E[attr$=value]
Selects all elements of
E that have the attribute
attr that ends with the
given value
p[title$="!"]{color: red;}
/* sets the color to red
if the title ends with an
exclamation mark */
CSS3
E[attr*=value]
Selects all elements of
E that have the attribute
attr that contains the
given value
p[title*="CSS"]{font-style:
italic;}
/* sets the font style to
italic in any p tag that has
CSS in its title */
CSS3
TABLE 4-7 CSS Attribute Selectors
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
484
P a r t I I : C o r e S t y l e
484
P a r t I I : C o r e S t y l e
Pseudo-Element Selectors
You may encounter situations in which you want to select a particular portion of an HTML
document but there is not a defined element associated with it. CSS provides the ability to
style portions of a document tree without a unique element associated with the content.
Because in some ways this creates an element to effect this change, such selectors are
dubbed pseudo-element selectors.
:first-letter and :first-line Pseudo-Elements
To style the first line of a paragraph or a first character of a paragraph, it would be easy
enough to specify a CSS selector. However, we might not actually have a full element that
the rule is bound to, so a pseudo-element is thus implied. As an example, say you want to
make the first character of a paragraph called “intro” large, you can use a pseudo-element
rule :first-letter to bind style.
p:first-letter {font-size: xx-large; background-color: red;}
would make every first letter of a paragraph large and red. We can also make the initial line
of paragraphs a different style using the :first-line pseudo-element:
p:first-line {font-size: xx-large; text-decoration: underline;}
These pseudo-classes aren’t limited solely to <p> tags but they are generally limited to block
elements. A simple example of applying these pseudo-elements is shown here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>First Letter and First Line Pseudo-Elements</title>
<style type="text/css" media="all">
p#intro:first-letter {font-size: 5em; font-weight: bold;
float: left; margin-right: .1em;
color: #999;}
p#intro:first-line {font-size: 1.5em; font-weight: bold;}
</style>
</head>
<body>
<p id="intro">It was the best of times, it was the worst of times, it was
the age of wisdom, it was the age of foolishness, it was the epoch of
belief, it was the epoch of incredulity, it was the season of Light, it was
the season of Darkness, it was the spring of hope, it was the winter of
despair, we had everything before us, we had nothing before us, we were all
going direct to heaven, we were all going direct the other way - in short,
the period was so far like the present period, that some of its noisiest
authorities insisted on its being received, for good or for evil, in the
superlative degree of comparison only.</p>
</body>
</html>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
485
PART II
C h a p t e r 4 : I n t r o d u c t i o n t o C S S
485
This would style the first line of some classic prose with an initial drop cap and varied first
line, as shown in the following illustration.
ONLINE http://htmlref.com/ch4/firstletterandline.html
NOTE Under CSS3, the syntax of pseudo-elements has been changed to have two colons, so
:first-line becomes ::first-line. This change makes the difference between a
pseudo-element and a pseudo-class explicit, but since this syntax is not as widely supported
yet, the examples will focus on the traditional CSS2 syntax, which will likely continue to be
supported for quite some time.
:before and :after Pseudo-Elements
A very useful pair of pseudo-elements are the :before and :after selectors, which under
CSS3 are written as ::before and ::after. These selectors are used to add generated
content before or after an element and nearly always are combined with the CSS2 property
content, which is used to insert dynamically generated content. As an example, we might
use these selectors to insert special start- and end-of-section indicator images. Consider the
following:
div.section:before {content: url(sectionstart.gif);}
div.section:after {content: url(sectionend.gif);}
The content property can be used to specify objects like images, as indicated by the
preceding example, but it also can specify regular text content; for example,
p.warn:before {content: "Warning!";}
will print the word “Warning!” before every paragraph in class “warn.” The following
example uses :before and :after pseudo-elements, a rendering of which appears in
Figure 4-10:
<!DOCTYPE html>
<html>
<head>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... Specifies the unvisited link CSS1 a:active Specifies the link as it is being pressed a:visited Specifies the link after being pressed :hover Selects the element when the user is hovering over it :target Selects the element that is the target of a referring URI :focus Selects the element only when the element holds the focus :enabled Selects the elements that are currently enabled :disabled Selects the elements... the element that is the nth child of its parent :default {background-color: red;} /* sets the background color of a default button like a submit to red */ p:first-child { color: red;} /* sets the font color to red for all of the p tags that are the first child of their parent */ p:last-child {font-size: small;} /* sets the font size to small on the p tags that are the last child of their parent */ strong:first-of-type... Selects the element that is the nth-from-last child of its parent that is its type :root Selects the element that is the root of the document :empty Selects an element that has no children :not(s) Selects elements that do not match the selector s :lang(value) Selects all elements that have the lang attribute set to the given value p:nth-last-child(3) {color: yellow;} /* sets the color to yellow if the. .. Complete Reference < /html> O NLINE http://htmlref.com/ch4/linkstates .html Although the CSS rules associated with the states of a link can be used to change the link’s appearance in dramatic ways, designers are encouraged to limit changes to improve usability Also note that size changes and other significant differences in link presentation can result in undesirable screen refreshes as the. .. Style would get a green background color only when the current URL includes the fragment identifier #top Try the example online if you are still unsure of how the element works O NLINE http://htmlref.com/ch4/target .html Activity Related Pseudo-Classes—:hover and :focus There are other pseudo-classes related to user activity, most notably :hover and :focus The :focus pseudo-class is used to apply a rule... {font-size: bigger;} /* sets the font size bigger on the first strong tag of its parent */ strong:last-of-type {font-size: smaller;} /* sets the font size smaller on the last strong tag of its parent */ h1:only-child {color: blue;} /* sets the h1 color to blue if the h1 is the only child of its parent */ p:only-of-type {font-weight: bold;} /*sets the p element to be bold if it is the only p tag child of... {color: red;} makes all tags red The value of this selector is clearly for XML where the definition of the root element in a language is variable as opposed to (X )HTML where it is always Second is the :empty selector, which can be used to select elements that are empty (in other words, have no children) So this rule would find all the tags that are empty and show them with a solid red border:... the Most Popular Tags? When using style sheets and trying to avoid the default rendering of HTML elements, document authors will find the use of the div and span elements indispensable The div element and span element are block and inline elements, respectively, that have no particular rendering You might call them generic tags Because these tags don’t have any predefined meaning or rendering, they... is used to style an element when it is a link target and the current URL of the document has that fragment identifier in its URL For example, given the rule #top:target {background-color: green;} a tag like I am the top of the document. PART II Link Pseudo-Class Example... even if the selectors are clear, the big question is how do you actually indicate such states for markup elements? The specification defines that this is related to WebForms, which is not a well-implemented technology However, many of the useful ideas of that specification have made their way into HTML5 , so it is quite possible these selectors will someday be implemented Certainly support for these selectors .
</style>
</head>
<body>
<p>
<a href="#">Local link</a><br>
<a href="http://www.htmlref.com".
</style>
</head>
<body>
<a href="http://www.htmlref.com"> ;HTML: The Complete Reference</a>
</body>
< /html& gt;
ONLINE