HTML and CSS [Electronic resources] نسخه متنی

Transforming and Varying Text

You can style the case of text and vary its font using two different properties.

To transform case, you use the text-TRansform property and a value of capitalize, uppercase, lowercase, or none.

To vary text, you use the font-variant property and a value of small-caps or normal (which is the default).

Example 9-6 shows a document employing transformation and variants.

Example 9-6. Transforming and varying text with CSS

[View full width]


<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&l191 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font-family: Georgia, Times, serif; color: black;}
h1 {font-family: Arial, Helvetica, sans-serif; font-size: 24px;
font-variant: small-caps;}
h2 {font-family: Georgia, Times, serif; color: #999; font-size: 18px;
 font-style: italic;
 text-transform: lowercase;}
.accent {font-weight: 700; color: red; text-transform: uppercase;}
p {font-size: 16px; text-transform: capitalize;}
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not
uncongenial with my own. Observing my partiality for domestic pets, she
lost no opportunity of procuring those of the <span>most</span> 
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey,
and a cat.</p>
<p>This latter was a <span>remarkably</span> large and beautiful animal,
 entirely black, and sagacious to an astonishing degree. 
In speaking of his intelligence,
 my wife, who at heart was not a little tinctured with superstition,
 made frequent allusion
 to the ancient popular notion, which regarded all black cats as witches
 in disguise.</p>
<p>Pluto - this was the cat's name - was my <span>favorite</span> pet and
 playmate. I alone fed him, and he attended me wherever 
I went about the house. It was even
 with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

You can see how text-TRansform and font-variant work in Figure 9-13.

Figure 9-13. Transforming and varying text.

Browsers that provide full support for transforming and varying text will apply the styles

regardless of the case your text is actually composed in. Of course, for sensible reasons, you'll want your text content to be treated normally in the document. This way, you can always change the styles without having to reauthor the document.

HTML and CSS [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی