I assume we all know: 1) what id, class, and pseudo-class are; 2) what inline and external style sheet; 3) what cascading means by: the priorities are calculated and apply to rules.
---------------------------------------------------------------------------------------------------------------
1, CSS for Printing, or Handhelds?
Lots of web pages have a link to a print-friendly version. What many of them don't realise is that there's no need because you can set up a second CSS document to be called up when a user prints the page.
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" /> 2, Why 2em?
The name of em is related to M. Originally the unit was derived from the width of the capital "M" in the given typeface.
One em was traditionally defined as the width of the capital "M" in the current typeface and point size
In CSS, "em" is a relative unit of measurement, it's preferred to fixed one like "px".
3, How to make text invsible?
display: none
For screen readers users therefore, a new approach is needed:
position: absolute; left: -9000px.
Where did the text go? It moved to the left of the left edge of the screen.
4, What is !important?
Three Points:
I) CSS is rule-based.
II) The later rule overrides the earlier rule
III) !important rules take precedence over any later rules.
Beware, "!" is totally different from what it is in general languages, like Java and C++. It's simply an exclamation.
Fun with !important. In the following HTML example, will "Hello, World!" be displayed in green or red?
------------------------
<html>
<head>
<style type="text/css">
.C1 p {
color: green !important;
}
</style>
</head>
<body>
<p class="C1">
<div style="color:red !important;">Hello, World!</div>
</p>
</body>
</html>
---------------------------------------------------------------------------------------------------------------<head>
<style type="text/css">
.C1 p {
color: green !important;
}
</style>
</head>
<body>
<p class="C1">
<div style="color:red !important;">Hello, World!</div>
</p>
</body>
</html>
* This post is for Java developers who want to leverage the power of CSS while minimizing the cost and effort in search for the useful features in tons of books and specifications. Most CSS books are not written for software developers.
No comments:
Post a Comment