Вы находитесь на странице: 1из 2

------pusedeo class---- q:lang(no)

<html><head><style type="text/css"> {
a:link {color:#FF0000;} /* unvisited link */ quotes: "~" "~";
a:visited {color:#00FF00;} /* visited link */ }</style></head><body>
a:hover {color:#FF00FF;} /* mouse over link */ <p>Some text <q lang="no">A quote in a paragraph</q>
a:active {color:#0000FF;} /* selected link */ Some text.</p>
</style></head><body> <p>In this example, :lang defines the quotation marks for q
<p><b><a href="default.asp" target="_blank">This is a elements with lang="no":</p>
link</a></b></p> <p><b>Note:</b> Internet Explorer 8 (and higher) supports
<p><b>Note:</b> a:hover MUST come after a:link and the :lang pseudo class
a:visited in the CSS if a !DOCTYPE is specified.</p></body></html>
definition in order to be effective.</p> -----next----
<p><b>Note:</b> a:active MUST come after a:hover in the puesdo element -----
CSS definition in order <html><head><style type="text/css">
to be effective.</p></body></html> p:first-line
--next---- {
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 color:#ff0000;
Transitional//EN" font-variant:small-caps;
"http://www.w3.org/TR/html4/loose.dtd"> }</style></head><body>
<html><head><style type="text/css"> <p>You can use the :first-line pseudo-element to add a
p:first-child special effect to the first line of a text
{ </p></body></html>
color:blue; ----NEXT-----
} </style></head><body> <html><head><style type="text/css">
<p>This is some text.</p> p:first-letter
<p>This is some text.</p> {
<p><b>Note:</b> For :first-child to work in IE, a color:#ff0000;
DOCTYPE must be declared.</p></body></html> font-size:xx-large;
-----next------ }</style></head><body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <p>You can use the :first-letter pseudo-element to add a
Transitional//EN" special effect to the first character of a text!</p>
"http://www.w3.org/TR/html4/loose.dtd"> </body></html>
<html><head><style type="text/css"> --NEXT---
p > i:first-child <html><head><style type="text/css">
{ p:first-letter
color:blue; {
} </style></head><body> color:#ff0000;
<p>I am a <i>strong</i> man. I am a <i>strong</i> font-size:xx-large;
man.</p> }
<p>I am a <i>strong</i> man. I am a <i>strong</i> p:first-line
man.</p> {
<p><b>Note:</b> For :first-child to work in IE, a color:#0000ff;
DOCTYPE must be declared.</p></body></html> font-variant:small-caps;
--next---- }</style></head><body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <p>You can combine the :first-letter and :first-line pseudo-
Transitional//EN" elements to add a special effect to the first letter and the first
"http://www.w3.org/TR/html4/loose.dtd"> line of a text!</p></body></html>
<html><head><style type="text/css">
p:first-child i
{
color:blue; NEXT------
} </style></head><body> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<p>I am a <i>strong</i> man. I am a <i>strong</i> Transitional//EN"
man.</p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<p>I am a <i>strong</i> man. I am a <i>strong</i> transitional.dtd">
man.</p> <html><head><style type="text/css">
<p><b>Note:</b> For :first-child to work in IE, a h1:before {content:url(smiley.gif);}
DOCTYPE must be declared.</p></body></html> </style></head><body>
------next--- <h1>This is a heading</h1>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <p>The :before pseudo-element inserts content before an
Transitional//EN" element.</p>
"http://www.w3.org/TR/html4/loose.dtd"> <h1>This is a heading</h1>
<html><head><style type="text/css">
<p><b>Note:</b> Internet Explorer 8 (and higher) supports <html><head><style type="text/css">
the content property ul
if a !DOCTYPE is specified.</p></body></html> {
----NEXT----- list-style-type:none;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 margin:0;
Transitional//EN" padding:0;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- }
transitional.dtd"> li
<html><head><style type="text/css"> {
h1:after {content:url(smiley.gif);} display:inline;
</style></head><body> }</style></head><body>
<h1>This is a heading</h1> <ul><li><a href="#home">Home</a></li>
<p>The :after pseudo-element inserts content after an <li><a href="#news">News</a></li>
element.</p> <li><a href="#contact">Contact</a></li>
<h1>This is a heading</h1> <li><a href="#about">About</a></li></ul></body>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports </html>
the content property if a !DOCTYPE is -------NEXT----------
specified.</p></body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-----NEXT----- Transitional//EN"
NAVIGATION BAR "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html><body> transitional.dtd">
<ul><li><a href="#home">Home</a></li> <html><head><style type="text/css">
<li><a href="#news">News</a></li> ul
<li><a href="#contact">Contact</a></li> {
<li><a href="#about">About</a></li></ul> list-style-type:none;
<p>Note: We use href="#" for test links. In a real web site margin:0;
this would be URLs.</p></body></html> padding:0;
-------NEXT------------ overflow:hidden;
<html><head><style> }
ul li
{ {
list-style-type:none; float:left;
margin:0; }
padding:0; a
}</style></head><body> {
<ul><li><a href="#home">Home</a></li> display:block;
<li><a href="#news">News</a></li> width:60px;
<li><a href="#contact">Contact</a></li> background-color:#dddddd;
<li><a href="#about">About</a></li></ul> }</style></head><body<ul>
</body></html> <li><a href="#home">Home</a></li>
----NEXT------------ <li><a href="#news">News</a></li>
<html><head><style type="text/css"> <li><a href="#contact">Contact</a></li>
ul <li><a href="#about">About</a></li></ul>
{ <p><b>Note:</b> If a !DOCTYPE is not specified, floating
list-style-type:none; items can produce unexpected results.</p>
margin:0; <p>A background color is added to the links to show the
padding:0; link area. The whole link area is clickable, not just the
} text.</p>
a <p><b>Note:</b> overflow:hidden is added to the ul
{ element to prevent li elements from going outside of the
display:block; list.</p></body></html>
width:60px; -----NEXT-----------
background-color:#dddddd;
}</style></head><body>
<ul><li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li></ul>
<p>A background color is added to the links to show the
link area.</p>
<p>Notice that the whole link area is clickable, not just the
text.</p></body></html>
--------NEXXT------------

Вам также может понравиться