HTML/CSS/HTML/style — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
Declaring a style sheet in the header section
<?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>Style Sheets</title>
<style type = "text/css">
em { background-color: #8000ff;
color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<body>
<h1 class = "special">header 1.</h1>
<p>this is a test. this is a test. this is a test. </p>
<h1>Clients</h1>
<p class = "special"> this is a test.
<em>this is a test. </em>this is a test. </p>
</body>
</html>
Embedded Style Sample
<!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>Embedded Style Sample</title>
<style type="text/css" media="screen">
h1 {
font: Arial;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Styling text with CSS
<!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>Styling text with CSS</title>
<style type="text/css">
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5em;
}
h1 {
font-size: 160%;
}
</style>
</head>
<body>
<h1>About Us</h1>
<p>this is a text.</p>
<p>this is a text.</p>
</body>
</html>
The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon.
<?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.</p>
<p style = "font-size: 20pt">This text has the
<em>font-size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it, making it
20pt. and blue.</p>
</body>
</html>
Two Embedded Style
<!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>Embedded Style Sample</title>
<style type="text/css" media="screen">
h1 {
font: Arial;
}
</style>
<style type="text/css" media="print">
h1 {
font: Times;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>