Hi,
I think everyone who has make some css, have already see for eg. a:link. :link is a pseudo format.
To use them in a <style></style>, first you specify the HTML element followed by a colon, and then by one of the permitted expression. There is a number of fixed pseudo-format. Let start with the most know of them.
They refer to how you will see a link and so the html element will be "a". The following pseudo formats for links are available:
:link = for links to pages that have not been visited yet
:visited = for links to pages that the user has already visited
:hover = for links that the user is touching with the mouse
:active = for active links on which the user is clicking
:focus = for links that have the focus, for example, if the tab key is used to step through the links of a page
and the example will show them in action:
| CODE | <html>
<head>
<style type="text/css">
a:link { font-weight:bold; color:#00E000; text-decoration:none }
a:visited { font-weight:bold; color:#000050; text-decoration:none }
a:hover { font-weight:bold; color:#D00000; text-decoration:none }
a:active { font-weight:bold; color:#D00000; text-decoration:underline }
a:focus { font-weight:bold; color:#0000E0; text-decoration:underline }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<a href="http://www.google.fr/">Google</a><br />
<a href="http://swish-db.com/">SWiSH-DB</a><br />
<a href="http://www.swishzone.com/">Swishzone</a><br />
<a href="#">Click me to see active link format</a><br />
Then, refresh the page to see a the previous link as a visited one.
</body>
</html> |
And now that we refresh our memory, let discover new ones.
Wih pseudo format, you can personalize the first line of a paragraph or the first character of a paragraph. This allows you to imitate some effects in the typography of printed media.
Let see how it works:
| CODE | <html>
<head>
<style type="text/css">
p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red; text-transform:capitalize}
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<p>my house is near paris, in france, in the world, in the universe, blablabla (hoping it wil go to a new line, if not resize your browser to wrap the text)</p>
</body>
</html> |
As you can see, the first line is bold(font-weight), and the first letter is red (color), bigger(font-size) and in uppercase (text-transform) and because it inherits of the first-line style is bold too.
So to define, the first letter of an html element
html_element:first-letter { style }
and for the first line
html_element:first-line { style }
About the text-transform, coupled with first letter is the only way (i know) to only have the first letter of a paragrah to be in uppercase. "capitalize" put the first letter of EACH word in uppercase.
that's all folks.
If you have any question about something, you don't understand or want to be detailled, feel free to ask.
cortex
|
