CSS ??, ???? ??? ???? ??
CSS ??
?? ?? ??
?? ???? ?? ?? ??? ?? ???? ??? ?????.
· html
· HTML ??? ???? ??· ???? ????? ??? ??? ????
· ??? ?? ??? ???? ?? HTML 4.0? ???????. ??????
· ?? ??? ??? ?? ???? ?? ???? ? ????· ?? ??? ??? ????? CSS ??? ?????· ???? ??HTML ??? ?? ?? ??? ???? ?? ???????. <h1>, <p>, <table>? ?? ??? ???? "??? ?????", "??? ?????", "??? ????"? ?? ??? ???? ?? HTML? ?? ?????. ". ??? ?? ??? ???? ?? ?????? ?? ????? ?????.
??? ??? ?? ???? ?? ??????.??? ??? HTML 3.2? ?? ?? ? ?? ??? ????? HTML ??? ???? ??? ?????. ???? ????? ?? .css ??? ?????. ?? ??? ??? ???? ??? CSS ??? ???? ???? ?? ?? ???? ????? ??? ??? ??? ? ????.
CSS? ?? ???? ???? ????? ??? ??? ? ??? ??? ? ??? ??? ???? ????? ? ? ????. ???? ???? ? HTML ??? ???? ???? ?? ??? ?? ?? ???? ??? ? ????. ?? ????? ????? ???? ????? ?? ???? ?? ??? ???? ???????.
?? ??????? ??? ????? ???? ??? ??? ?? ???? ??? ? ????. ???? ?? HTML ??, HTML ???? ?? ?? ?? ?? CSS ???? ??? ? ????. ??? HTML ?? ??? ?? ?? ?????? ??? ?? ????.
??? ????? HTML ??? ? ??? ???? ??? ?? ?? ???? ??????
????? ?? ???? ?? ??? ?? ??? ?? ??? ??? ????? ???? 4?? ?? ?? ????? ????. 1. ???? ?? ??
2. ?? ??? ??
3. ?? ??? ??(<head> ?? ??? ??) 4 . ??? ???(HTML ?? ??)
??? ??? ???(HTML ?? ??)? ?? ?? ????? ????. ?, <head> ??? ??? ??, ?? ??? ??? ??? ??, ?? ??? ???? ????? ????. ?????? ?????(???).
CSS ?? ??
CSS ??
CSS ??? ? ?? ?? ??, ? ???? ?? ??? ????? ?????. .
selector {declaration1;declaration2; ...declarationN }
???? ????? ???? ???? ?? HTML ?????.
? ??? ??? ??? ?????.
??? ????? ??? ?????. ? ???? ?? ????. ??? ?? ???? ?????.
selector {property: value}
?? ?? ?? h1 ?? ?? ??? ??? ????? ???? ?? ??? 14??? ?????.
? ???? h1? ?????, ??? ?? ??? ????, ???? 14px? ????.
h1 {color:red;font-size:14px;}
?? ?????? ? ??? ??? ?????.
?: ??? ???? ???? ?????.
??? ?? ??? ?? ??
?? ?? red ??? 16?? ?? ? #ff0000? ??? ?? ????:
p { color: #ff0000 ; }
???? ???? ?? CSS? ??? ??? ? ????:
p { color: #f00; }
?? ? ?? ???? RGB ?? ?????:
p { color: rgb(255,0,0) }
p { color: rgb(100%,0%,0%); >
??? ??? ?? ???
?: ?? ?? ??? ??? ?? ?? ???? ???? ???. p { Font-family: "sans serif";}
?? ??:
?: ? ??? ??? ????? ??? ???? ???. ? ??? ?????? ?????. ?? ???? ??? ???? ??? ??? ??? ???? ??? ?????. ??? ???? ????? ???? ????. ???? ????? ???? ???? ??? ?? ???? ?????. ??? ???? ??? ????? ? ?? ?? ????? ?????. ??? ?? ?? ???? ??? ????? ? ? ??? ??? ???? ??????. ?: p {text-align:center;color:red;}?
text-align: center;
color: black;
font-family: arial;
}
?? ? ????
???? ??? ???? ? ??? ??? ???? ??? ???? ???? ? ??? ??? ???? ????. ?? ??? ?? ???? ?? ?????? ? ?? ??? ? ????.
body {
color: #000;
background: #fff;
margin: 0;
padding: 0 ;
font-family: Georgia, Palatino, serif;
}
?? ?? ??? ?????? CSS? ?? ??? ??? ?? ????. ????? XHTML, CSS Case? ???????. ???. ? ?? ??? ????. HTML ?? ?? ? ??? ? ID ??? ????? ?????.
CSS ?? ??
??? ??
???? ???? ??? ??? ??? ? ??? ???? ???? ? ????. . ????? ?? ???? ????? ??? ?????. ?? ???? ?? ?? ??? ???????. ?? ?? ??? ?????.
h1,h2,h3,h4,h5,h6 {
color: green;
}
CSS ?? ???
?? ???
?? ??? ????? ?? ???? ???? ???? ?? ???? ?? ? ????.
CSS1??? ??? ???? ??? ???? ???? ??? ????? ???. ??? ????? ???? ?? ??? ???? ?????. CSS2??? ?? ????? ????, ??? ??? ??? ??? ?????.
?? ???? ???? ??? ????? ?? ?? ???? ??? ? ????. ?? ???? ???? ???? HTML ??? ? ???? ?? ? ????.
?? ?? ??? ?? ??? ???? ?? ?? ?? ????? ????? ??? ?? ?? ???? ??? ? ????.
li Strong {
font -style: italic;
font-weight: Normal;
}
<strong>? ??? ??? ??? ??? ?????.
< ;p> ;<strong>??? ?? ??? ????? ?? ?? ??? ??????. ??? ? ??? ??? ???? ????</strong></p>
<ol> ;
</ol>
?? ???? li ??? Strong ??? ????? ?????? ??? ???? ??? ??? ????. ?? ?? ??? ?? ???? ???? ??? ? ??????.
?? CSS ??? ?????.
strong {
color: red;
}
h2 {
color: red;
}
h2 Strong {
color: blue;
}
??? ?? HTML? ??? ????.
<p>? ???? ??? ??? ???<strong>???</strong>???.</p>
<h2>? ???? ??????.</h2>
<h2>? ????? ??? ???? ???<strong>blue</strong></h2>
CSS id selector
ID ???
ID ???? ?? ID? ??? HTML ??? ?? ?? ???? ??? ? ????.
id ???? "#"?? ?????.
?? ? ID ???? ?? ? ?? ???? ??? ??? ????? ??? ? ?? ? ?? ???? ??? ??? ???? ??? ? ????.
#red {color :red;}
#green {color:green;}
?? HTML ???? id ??? red? p ??? ????? ????, id? ?? p ??? ????? ?????. ?? ??? ???? ?????.
<p id="red">? ??? ????? ???? ????. </p>
<p id="green">? ??? ?????. </p>
??: id ??? HTML ??? ? ?? ??? ? ????. ??? ????? XHTML: ???? ????? ?????.
id ??? ? ?? ???
?? ??????? id ???? ?? ???? ??? ? ?? ?????.
#sidebar p {
?? ???: ????;
??? ??: ???;
?? ??: 0.5em;
}
? ???? ID? ????? ?? ?? ???? ???? ?????. ? ??? div ?? ??? ?? ???? ??? ??? ?? ?? ?? ?? ??? ?? ????. <em></em> ?? <span></span>? ?? ??? ??? ?? ??? ??? ??? ??? ?? <span> ??? ??? ? ?? ??? ?????. ;p>(??? ???? ?? XHTML: ???? ???? ??)
??? ???, ?? ??
????? ??? ??? ??? ? ?? ??? ? ???? ? ID ???? ?? ????? ??? ? ????. ?? ?:
#sidebar p {
?? ???: ????;
??? ??: ???;
?? ??: 0.5em;
}
#sidebar h2 {
?? ??: 1em;
?? ??: ??;
?? ???: ????;
??: 0;
? ??: 1.5; > ??? ??: ???;
}
??? ???? ?? p ??? ??? ?? ?? ???? ??? p ??? ???? ????? ????. ??? ???? ?? ?? h2 ??? ??? ?? ?? h2 ?????. ??????? ?? ??? ????.
?? ???
id ???? ?? ???? ??? ? ???? ???? ????? ??? ? ????.
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
? ??? ?? ID? ????? ??? ?? ??? ??? ?? ???? ??? 10?? ??? ???? ????. ?? ?? ??(?? ??). ?? ??? Windows/IE ??????? ? ???? ?? ??? ????? ???? ?? ? ? ??? ??? ? ????.
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
CSS ??? ???
CSS?? ??? ???? ???? ?? ?????.
.center {text -align: center}
?? ??? center ???? ?? ?? HTML ??? ??? ?????.
?? HTML ????? h1? p ?? ?? center ???? ????. ?? ? ? ".center" ???? ??? ????? ?? ?????.
<h1 class="center">
? ??? ?? ?????
</h1>
<p class="center">
? ??? ??? ?????.
</p>
??: ??? ??? ? ?? ??? ??? ??? ? ????! Mozilla? Firefox??? ???? ????.
id? ????? ???? ?? ???? ??? ? ????:
.fancy td {
color: #f60;
background: #666;
}
?? ??? ??? ??? fancy? ? ? ?? ??? ??? ?? ?? ??? ??? ???? ?????. (fancy?? ??? ? ? ??? ????? div? ? ????.)
??? ???? ?? ??? ?? ????:
td.fancy {
color: # f60;
background: #666;
}
?? ??? ??? ??? fancy? ??? ?? ?? ??? ??????.
<td class="fancy">
??? ??? ??? ?? ??? ??? ??? ? ????. fancy? ??? ?? ?? ??? ??????. fancy?? ???? ???? ?? ?? ? ??? ??? ?? ????. ??? ??? ?? ??? ?? ??? ???? ??? ?? ??? ??? ?? ??? ? ??? ??? ?? ???? ?? ??? ??? ????. ?? ?? ??? ? ??? ??? ?? ????, ??? fancy? ??? ??? ?? ?????(?: fancy ???? ???? ?? td ?? ??).
CSS ?? ??
??? ?? ?? ??
??? ??? ??? ????? ?? ?? HTML ??? ??? ?????. . ??? ??? ???? ???? ? ??? ????.
?? ??? ??
?? ??? ??? ???? ?? ???? ???? ?? ??? ?????. ?? ??? ??? ???? ?? ??? ???? ?? ???? ??? ??? ? ????. ? ???? <link> ??? ???? ??? ??? ?????. <link> ??? ??? ??? ????:
<head>
<linkrel="stylesheet" type="text/css" href="mystyle.css" />
</head>
????? mystyle.css ???? ??? ??? ?? ?? ?? ?? ??? ?????.
?? ??? ??? ?? ??? ????? ??? ? ????. ???? html ??? ??? ? ????. ??? ??? .css ???? ???? ???. ??? ????? ??? ????.
hr {color: sienna;}
p {margin-left: 20px;}
body {Background-image: url("images/back40. gif");}
?? ?? ?? ??? ??? ?? ????. "margin-left: 20px" ?? "margin-left: 20px"? ???? IE 6??? ???? Mozilla/Firefox ?? Netscape??? ???? ????.
?? ??? ??
?? ??? ??? ???? ??? ?? ?? ??? ??? ???? ???. ??? ?? <style> ??? ???? ?? ??? ?? ??? ??? ??? ? ????.
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {Background-image: url("images/back40.gif");}
</style>
</head>
??? ???
??? ???? ??????? ???? ???? ??? ??? ?? ??? ????. ?? ?? ???? ??? ? ?? ???? ?? ???? ? ?? ??? ???? ?????.
??? ???? ????? ?? ?? ?? style ??? ???? ???. ??? ???? ?? CSS ??? ??? ? ????. ? ???? ??? ??? ?? ??? ???? ??? ?????.
<p style="color: sienna; margin-left: 20px">
??? ?????
< ;/ p>
??? ???
?? ??? ?? ?? ??? ??? ??? ???? ??? ?? ?? ?? ?? ???? ??? ???? ?????.
?? ?? ?? ??? ???? h3 ???? ?? ? ?? ??? ????.
h3 {
color: red;
text-align: left;
font- size: 8pt;
}
?? ??? ???? h3 ???? ?? ? ?? ??? ????:
h3 {
text-align:
font; -size: 20pt;
}
?? ??? ??? ?? ? ???? ??? ?? ??? ??? ???? h3?? ?? ???? ??? ????.
color: red;
text-align: right;
font-size: 20pt;
?, color ??? ?? ??? ???? ???? ??? ??(text-alignment) ) ? ?? ??(font-size)? ?? ??? ??? ???? ?????.
