Tài liệu HTML & CSS: The Complete Reference- P12 pptx

526 P a r t I I : C o r e S t y l e

Linked styles are the preferred method of specifying CSS rules because they cleanly

separate the style from the markup. However, do note that using linked styles does come

with the small penalty of an extra HTTP request.

Embedded Styles

Document-wide styles can be embedded in a document’s head element using the <style>

tag. Note that styles should be commented out to avoid interpretation by non-style-aware

browsers.

<style type="text/css">

<!--

p {font-size: 1.5em; font-family: Georgia, "Times New Roman", Times, serif;

color: blue; background-color: yellow;}

em {font-size: 2em; color: green;}

-->

</style>

However, be aware that comment masking is frowned upon in XHTML, and instead

you should use linked styles or use a CDATA section like so:

<style type="text/css">

<![CDATA[

p {font-size: 1.5em; font-family: Georgia, "Times New Roman", Times, serif;

color: blue; background-color: yellow;}

em {font-size: 2em; color: green;}

]]>

</style>

Given the support of this structure, particularly with the confusion of XHTML serving and

handling, it is best to avoid this commenting scheme or, better yet, simply stick to linked styles.

It is possible to set a media attribute on a <style> tag to define different types of rules

per output medium:

<style type="text/css" media="print">

/* Print rules here */

</style>

<style type="text/css" media ="screen">

/* Screen rules here */

</style>

Imported Styles—@import

Within embedded <style> blocks, properties can be imported from an external file and

expanded in place, similar to a macro. Importing can be used to include multiple style

sheets. An imported style is defined within a <style> tag using @import followed

optionally by a type value and a URL for the style sheet:

<style type="text/css">

@import url(newstyle.css);

@import print url(printstyle.css);

</style>

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 5 : C S S S y n t a x a n d P r o p e r t y R e f e r e n c e 527

PART II

The @import directive allows style sheets to be grouped and joined together, though

some might wonder what the value of this function is given what linked styles provide.

NOTE Some CSS developers use the @import directive to perform a weak form of browser

selection, because many older CSS implementations do not support the directive. The basic idea

of the trick is to put sophisticated style rules in an @import style sheet and leave basic styles in

the style block. This trick should be avoided, particularly given that some browsers, notably

versions of Internet Explorer, will cause a disturbing flash effect when loading imported styles.

Inline Styles

You can apply styles directly to elements in a document using the core attribute style, as

shown next. As the closest style-inclusion method to a tag, inline styles take precedence

over document-wide or linked styles.

<h1 style="font-size: 48px; font-family:Arial, Helvetica, sans-serif;

color: green;">CSS Test</h1>

Given the tight intermixture of style into markup, this scheme should be used sparingly.

Note that some features of CSS, particularly pseudo-class–related values such as link states,

may not be settable using this method. Further note that there is no way to set media￾specific style rules inline on individual elements.

CSS Measurements

CSS supports a number of measurements. In most cases, they involve a number, and CSS

supports both positive and negative integer values, like 3 and –14, as well as real numbers

like 3.75. Very often the numbers are found with units; for example,

p {margin: 5px;} /* all margins set to 5 pixels */

But in a few cases they may not have units, as the measurement may be contextual from

the meaning of the property:

p {line-height: 2;} /* double spaced */

When a measurement is zero, there is no need for a unit,

* {margin: 0;}

but it won’t hurt to include one:

* {margin: 0px;}

Commonly, absolute length units like inches (in), centimeters (cm), millimeters (mm),

points (pt), and picas (pc) are used. These absolute measures should be used when the

physical characteristics of the display medium are well understood, such as in printing. We

also might use relative measures that can scale, such as em units, ex values, percentage, or

pixels. Table 5-3 summarizes these units of measure.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

528 P a r t I I : C o r e S t y l e

NOTE There are many other values found in CSS3, such as viewport sizes (vh, vw, vm), root

relative sizing (rem), angles [degrees (deg), grads (grad), and radians (rad)], times

[milliseconds (ms) and seconds (s)], frequencies [Hertz (Hz) and kilo Hertz (kHz)], and so on.

See Chapter 6 for information on these and other values.

TABLE 5-3 CSS1 and CSS2 Length Measurement Units

Measurement Description Example

% Defines a measurement as a

percentage. Percentages are denoted

by a number followed by the % symbol

and are always relative to another value

such as length. Quite often they are

used to specify some value relative

to an inherited value from a parent

element.

p {font-size: 14px;

line-height: 150%;}

cm Defines a measurement in centimeters. div {margin-bottom: 1cm;}

em Defines a measurement relative to the

height of a font in em spaces. Because

an em unit is equivalent to the size of a

given font, if you assign a font to 12pt,

each em unit would be 12pt, thus 2em

would be 24pt.

p {letter-spacing: 5em;}

ex Defines a measurement relative

to a font’s x-height. The x-height is

determined by the height of the font’s

lowercase letter x.

p {font-size: 14pt;

line-height: 2ex;}

in Defines a measurement in inches. p {word-spacing: .25in;}

mm Defines a measurement in millimeters. p {word-spacing: 12mm;}

pc Defines a measurement in picas. A pica

is equivalent to 12 points; thus, there

are 6 picas per inch.

p {font-size: 10pc;}

pt Defines a measurement in points. A

point is defined as 1/72nd of an inch. A

point does not equate to a pixel unless

there are 72 pixels per inch onscreen.

body {font-size: 14pt;}

px Defines a measurement in screen

pixels. Surprising to some Web

developers, pixel measurements are

relative, as there may be different pixel

densities on different screens.

p {padding: 15px;}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 5 : C S S S y n t a x a n d P r o p e r t y R e f e r e n c e 529

PART II

CSS Strings and Keywords

In CSS, strings are defined with either single quotes ('example') or double quotes

("example"). Quotes may be found within the opposite quote ("I say this is an

'example'!"). Commonly, strings are found when specifying a font name, like so:

p {font-family: "Fancy Font";}

We also find that strings may be used with selectors:

a[title="Match me match me"] {color: red;}

There is an occasional need for special characters in strings; in particular, newlines may

be specified with a "\00000a" value. In situations where a newline is typed, a \ character

can be used as line continuation:

a[title="Next\

Line here"] {color: red;}

More common than quoted strings are the numerous keyword values found in CSS. The

number of keywords is vast and is used for specifying sizes,

.big {font-size: xx-large;}

.small {font-size: small;}

.downsize {font-size: smaller;}

border styles,

.double {border: 5px solid black;}

.dashed {border-style: dashed;}

text formatting and style,

.style1 {text-decoration: underline;}

.style2 {font-variant: small-caps;}

.style3 {font-weight: bold;}

element meaning,

#nav {display: block;}

#gone {display: none;}

#test {display: inline;}

layout,

#region1 {position: absolute; top: 10px; left: 10px;}

#region2 {position: relative; top: -60px; left: 100px;}

#region3 {position: fixed; top: 0px; left: 0px;}

and more.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

530 P a r t I I : C o r e S t y l e

In some situations, the keyword may be part of a functional style notation. For example,

in CSS the specification of a URL as a value is marked by url(address), where address is

the actual value of the resource to be linked to:

body {background: url(stars.png);}

#div1 {background: url(http://democompany.com/images/tile.gif);}

Newer color formats like rgb(), rgba(), hsl(), and hsla() are set with similar

notation, and other functional notation style values may emerge over time such as calc()

(see Chapter 6 for a brief discussion). For example, there is discussion of CSS potentially

including variables which allows values to be set in one place and used in various rules. For

example,

@variables {

primaryBackground: #F8D;

primaryColor: #000;

defaultMargin: 2em;

}

p {color: var(primaryColor); background-color: var(primaryBackground);

margin: var(defaultMargin);}

So far such ideas are still uncommon, so if a value is not found within quotes or followed by

a measurement, it is likely a keyword or counter. If it isn’t or is simply not an understood

value, it will be ignored by CSS-conforming user agents anyway.

Counters

Counters demonstrate the possibility of variable-like values in CSS. They are defined as

alphanumeric names that correspond to some current counter value in a document. In some

cases, the counter( ) functional notation is used and in some cases it is not, as shown by

these rules:

ol.cT {

counter-reset: counter1;

list-style-type: none;}

ol.cT li:before {

counter-increment: counter1;

content:

counter(counter1) " - " ;}

Interestingly, the ambiguity of allowing the counter1 value to appear in a keyword-like

fashion is somewhat troubling. It is likely that the counter( ) style syntax will eventually

be applied everywhere.

CSS Color Values

Style sheets support a variety of color measurement values, as shown in Table 5-4. Appendix C

provides a greater discussion of possible color values and names.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.