HTML/CSS/Text/p class
Содержание
Adding quotation marks with p:before and after with "content"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title> <style type="text/css">
blockquote p:before {
content: "\201C"; font-size: 1.2em; font-weight: bold; font-family: Georgia, Times, "Times New Roman", serif;
} blockquote p:after {
content: "\201D"; font-size: 1.2em; font-weight: bold; font-family: Georgia, Times, "Times New Roman", serif;
} cite:before {
content: "\2014 ";
} cite {
display: block; text-align: center;
}
</style>
</head> <body>
There is a tendency for things to right themselves.
Ralph Waldo Emerson
</body> </html>
</source>
drop caps with p:first-letter
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>drop caps</title> <style type="text/css"> p:first-letter {
float:left; display:block; font-size:300%; line-height:100%; padding-right: 0.1em;
} p {
margin: 0; padding: 0;
} </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
first line pseudo-class
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>first line pseudo-class</title> <style type="text/css"> p:first-line { font-weight: bold; } </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
p#dropcap:first-letter
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>First-letter Pseudo-element</title> <style type="text/css" media="screen"> p#dropcap:first-letter { font-size:300%; font-weight:bold; float:left; } </style>
</head> <body>
This is a test.
</body> </html>
</source>
p::first-letter
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> h1::first-letter, p::first-letter { text-transform: capitalize; } h1 { font-weight: normal; text-align: center; text-decoration: underline; } p { text-indent: 25px; text-align: justify; letter-spacing: 1px; word-spacing: 5px; } p::first-letter { font: 120% "Monotype Corsiva"; } </style> </head> <body>
this is the title
This is a test.
</body>
</html>
</source>
p::first-letter font: 120% "Monotype Corsiva"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> h1::first-letter, p::first-letter { text-transform: capitalize; }
p::first-letter { font: 120% "Monotype Corsiva"; } </style> </head> <body>
This is a test.
This is a test.
</body>
</html>
</source>
p#initialcap:first-letter
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>First-letter Pseudo-element</title> <style type="text/css" media="screen"> p#initialcap:first-letter { font-size:400%; font-weight:bold; } </style>
</head> <body>
This is a test.
</body> </html>
</source>
p.note:before, p.note:after
<source lang="html4strict">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>:before and :after Pseudo-elements</title> <style type="text/css" media="screen"> body { padding:.5em; font-family:"lucida grande"; } p.note { font-size:85%; color:#666; } p.note:before { content:"["; } p.note:after { content:"]"; } </style>
</head> <body>
G
</body> </html>
</source>
Pseudo-element Selectors
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; } p:first-letter { font-size:48px; }
</style> </head> <body>
first-letter
selects the first letter, and
first-line
selects the first line of a terminal block element,
like this paragraph.
</body> </html>
</source>
Set the style for first line of P
<source lang="html4strict">
<html> <head>
<title>Set the style for first line of</title> <style type="text/css"> p:first-line { font-size: 200%; font-weight: bold; } </style> </head> <body>
Title of Page
<p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After link. in em warning. After em.</body> </html>
</source>