10. CSS хэрэгдэх 3 арга
Эмбэддэд стайлыг үүсгэх
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{ background-color:#d0e4fe; }
h1
{ color:orange;
text-align:center; }
p
{ font-family:"Times New Roman";
font-size:20px; }
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
11. CSS хэрэгдэх 3 арга
Эмбэддэд стайлыг үүсгэх
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE,
Chrome, or Safari.</p>
</body>
</html>
12. CSS хэрэгдэх 3 арга
Эмбэддэд стайлыг үүсгэх
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and
a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the
CSS definition in order
to be effective.</p>
</body>
</html>
21. Класст стайл хэрэглэсэн жишээ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be
affected</h1>
<p class="center">This paragraph will be
center-aligned.</p>
</body>
</html>
22. Класст стайл хэрэглэсэн жишээ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
23. Класст стайл хэрэглэсэн жишээ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.ex
{width:220px;
padding:10px;
border:5px solid gray;
margin:0px;}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>
<p><b>Important:</b> This example will not display correctly
in IE8 and earlier
versions!<br />
However, we will solve that problem in the next example.</p>
</body>
</html>
24. Класст стайл хэрэглэсэн жишээ
<html>
<head>
<style type="text/css">
p.one
{border-style:solid;
border-color:red;}
p.two
{border-style:solid;
border-color:#98bf21;}
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if
it is used alone. Use the "border-style" property to set the
borders first.</p>
</body>
</html>
25. Класст стайл хэрэглэсэн жишээ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{color:blue;
text-align:center;}
.marked
{background-color:red;}
.marked p
{color:white;}
</style>
</head>
<body>
<p>This is a blue, center-aligned paragraph.</p>
<div class="marked">
<p>This p element should not be blue.</p>
</div>
<p>p elements inside a "marked" classed element keeps the
alignment style, but has a different text color.</p>
</body>
</html>
