HTML/CSS/Text/p
Содержание
- 1 Change color and font size of paragraph
- 2 Different methods of separating paragraphs
- 3 Paragraphs separated by space
- 4 Paragraphs separated by indenting
- 5 Title
- 6 header 1
- 7 My Amazing Web Site
- 8 The most important heading
- 8.1 A less important heading
- 8.2 Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.
- 8.3 Text is larger than wrapper box
- 8.4 This is a paragraph with a dashed border
- 8.5 This is a paragraph with a dotted border
- 8.6 This is a paragraph with a double border
- 8.7 This is a paragraph with a groove border
- 8.8 This is a paragraph with an inset border
- 8.9 This is a paragraph with a ridge border
- 8.10 This is a paragraph with a solid border
- 8.11 This paragraph has a 180-pixel width and 20 pixels of padding
- 8.12 This paragraph has a 180-pixel width and 20 pixels of padding, and yet the backgrounds of both paragraphs are lined up together
- 8.13 This paragraph has a 200 pixel width and 10 pixels of padding.
- 8.14 This paragraph is floated left
- 8.15 Use style to hide text
- 8.16 Earth News
- 8.17 Using inline styles
Change color and font size of paragraph
<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> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css"> .warningText {
color: #ff0000; font-size: 120%;
} </style> </head> <body>
this is a test. this is a test. this is a test.
Only this is a test. this is a test.
</body> </html>
</source>
Different methods of separating paragraphs
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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>Different methods of separating paragraphs</title> <style type="text/css"> body { font-size: 12px; } h1 { margin: 2em 0 0 0; padding: 0; } div { margin: 0; width: 33em; font: 1em/1.5em Georgia, serif; } div.space p { margin: 0.5em 0 0 0; padding: 0; } div.space p.first { margin: 0; } div.indent p { margin: 0; padding: 0; text-indent: 1.5em; } div.indent p.first { text-indent: 0; } </style>
</head> <body>
Paragraphs separated by space
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. 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.
Paragraphs separated by indenting
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. 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. 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>
Get attribute of a paragraph in Javascript
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Shopping list</title> <style type="text/css">
p {
color: yellow; font-family: "arial", sans-serif; font-size: 1.2em;
} body {
color: white; background-color: black;
}
- purchases {
border: 1px solid white; background-color: #333; color: #ccc; padding: 1em;
}
</style> </head> <body>
Title
This is a test.
This is just a test
<script type="text/JavaScript"> var paras = document.getElementsByTagName("p"); for (var i=0; i< paras.length; i++) { var title_text = paras[i].getAttribute("title"); if (title_text != null) { alert(title_text); } } </script> </body>
</html>
</source>
Paragraph highlighting
<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>A Cautionary Demo</title> <style rel="stylesheet" type="text/css" media="All">
.danger {
text-align: center; font-size: 1.2em; font-weight: bold; background-color: red; color: white; margin-left: 25%; margin-right: 25%; border: 3px solid red;
}
</style>
</head> <body>
</body> </html>
</source>
Paragraphs tag
<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>Paragraphs</title>
</head> <body>
This is a text
</body> </html>
</source>
paragraph with different font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> p#times-new-roman { font-family: "Times New Roman"; } p#arial { font-family: Arial; } </style> </head> <body>
This font is Times New Roman.
This font is Arial.
</body>
</html>
</source>
P text-align: justify
<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" lang="en" xml:lang="en"> <head> <title></title> <style type="text/css"> p {
text-align: justify;
} </style> </head> <body>
header 1
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
</body> </html>
</source>
Set font size for a paragraph
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title> <style type="text/css"> p { font: 1em/1.5em Georgia, serif; width: 30em; margin: 0; } </style>
</head> <body>
before span
</body> </html>
</source>
Set line height of a Paragraph in content section
<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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css">
div#content p {
line-height:1.5;
}
</style> </head> <body>
My Amazing Web Site
Contact Form
This is a test.
Please fill out our form below in order to contact me.
Note: Due to our busy schedules, we cannot answer every message.
header
This is a text
</body> </html>
</source>
Set width for a paragraph
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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>Headings example 2a</title> <style type="text/css"> body { font: 12px/1.5em Georgia, serif; } h1 { margin: 1.25em 0 0 0; } h2 { margin: 1.25em 0 0 0; } p { margin: 0; width: 33em; } </style>
</head> <body>
The most important heading
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.
A less important heading
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>
Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.
<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>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .padded-dropcap1 {
padding-left: 10px; font-size: 80px; line-height: normal; font-weight: bold; vertical-align: middle;
} </style> </head> <body>
Padded Aligned Drop Cap.
</body> </html>
</source>
Text is larger than wrapper box
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> p { border: thin solid black; text-align: justify; width: 150px; height: 150px; } </style> </head> <body>
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
</body> </html> </source>
This is a paragraph with a dashed border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.dashed {
border-style: dashed; border-color: #666666; border-width: 3px;
} </style> </head> <body>
This is a paragraph with a dashed border
</body> </html>
</source>
This is a paragraph with a dotted border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.dotted {
border-style: dotted; border-color: #999999; border-width: 2px;
} </style> </head> <body>
This is a paragraph with a dotted border
</body> </html>
</source>
This is a paragraph with a double border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.double {
border-style: double;
} </style> </head> <body>
This is a paragraph with a double border
</body> </html>
</source>
This is a paragraph with a groove border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.groove {
border-style: groove;
} </style> </head> <body>
This is a paragraph with a groove border
</body> </html>
</source>
This is a paragraph with an inset border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
body {
color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px;
} .inset {
border-style: inset;
} </style> </head> <body>
This is a paragraph with an inset border
</body> </html>
</source>
This is a paragraph with a ridge border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.ridge {
border-style: ridge;
} </style> </head> <body>
This is a paragraph with a ridge border
</body> </html>
</source>
This is a paragraph with a solid border
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Borders</title> <style rel="stylesheet" type="text/css">
.solid {
border-style: solid; border-color: #000000; border-width: 1px;
} </style> </head> <body>
This is a paragraph with a solid
border
</body> </html>
</source>
This paragraph has a 180-pixel width and 20 pixels of padding
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> p#paragraph-2 { padding: 20px; width: 180px; border: 1px solid black; margin: 10px; background: lightgrey; } </style> </head> <body>
This is a test. This is a test.
</body> </html> </source>
This paragraph has a 180-pixel width and 20 pixels of padding, and yet the backgrounds of both paragraphs are lined up together
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> p#paragraph-2 { padding: 20px; width: 180px; border: 1px solid black; margin: 10px; background: lightgrey; } </style> </head> <body>
this is a test.
</body> </html> </source>
This paragraph has a 200 pixel width and 10 pixels of padding.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> p#paragraph-1 { padding: 10px; width: 200px; border: 1px solid black; margin: 10px; background: gray; } </style> </head> <body>
This is a test.
</body> </html> </source>
This paragraph is floated left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//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"> div { margin: 10px; background: rgb(200, 200, 200); height: 100px; } p#floated { background: rgb(220, 220, 220); margin: 10px; padding: 10px; border: 1px solid black; float: left; } p#normal { background: rgb(240, 240, 240); border: 1px solid black; } </style> </head> <body>
This paragraph is floated left.
The text if this paragraph is beside the floated paragraph.
</body> </html> </source>
Use style to hide text
<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"> .no {
display: none;
} </style> </head>
Earth News
before <a href="">after</a></p </body> </html> </source>
Using inline styles
<source lang="html4strict">
<?xml version = "1.0"?> <!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>Inline Styles</title> </head> <body><p>This text does not have any style applied to it.
This text has the font-size style applied to it, making it 20pt.
This text has the font-size and color styles applied to it, making it 20pt. and blue.
</body>
</html>
</source>