7
:
1. web- .
2. web-.
CSS Cascading Style Sheets ( ) , . HTML - (, , , . .) . CSS, , , , , , .
, Web-.
<STYLE></STYLE> <HEAD></HEAD>. , "" Comic Sans MS, , Tahoma, , 25 - :
<!-- Example:-->
<STYLE>
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
</STYLE>
<!-- :-->
<div class="Example"> </div>
, <HEAD></HEAD> HTML CSS :
<LINK REL=STYLESHEET TYPE= text/css HREF= Example.css>
Example.css - CSS , . , . CSS , , , CSS. CSS <STYLE></STYLE>.
. , STYLE . "" Verdana, 150 .
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> </H3>
, CSS.
font-family | , . : P {font-family: Verdana, sans-serif;} | ||
font-weight | : lighter (), bold (), bolder ( ) : B {font-weight: bolder;} | ||
font-size | . , . H1, H2, H3: H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;} | ||
text-decoration | , , 4: H4 {text-decoration: underline;} () H4 {text-decoration: line-through;} () | ||
text-align | . : P {text-align: left} ( ) P {text-align: right} ( ) P {text-align: justify} ( ) P {text-align: center} ( ) | ||
text-indent | . . H1: H1 {text-indent: 60pt;} | ||
line-height | . : P {line-height: 50 %} | ||
color | H3: H3 {color: #0000FF;} | ||
background-color | . H3: <H3 style=background-color:gold; color:brown;> </H3> | ||
margin-left () margin-right () margin-top () margin-bottom () | . : IMG { margin-left: 20pt} IMG { margin-right: 20pt} IMG { margin-top: 20pt} IMG { margin-bottom: 20pt} | ||
px | |||
cm | |||
mm | |||
pt % | |||
|
|
, .. , . , . .
1:
<html>
<style>
HI {font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light}
</style>
<body>
<H 1></ 1>
</body>
</html>
CSS , . - CSS, .. - . .
padding-top padding-right padding-bottom padding-left padding | % | table {padding: 15 15} | |
border-top-width border-right- width border-bottom-width border-left-width | Thin Medium Thick | {border-top-width: 4} | |
border-color | {border-color: red} | ||
border-style | None Dotted Dashed Solid Double Groove Ridge Inset Outset | table {border-style: double} | |
border-top border-right border-bottom border-left | border-top - width border-style | , | table {border-top: solid 4px red; border-left: solid 4px blue} |
border | . | , | table {border: solid 4px red} |
2:
|
|
<html>
<body>
<p style="color: yellow;
background-color: deepskyblue;
text-decoration: underline;
text-transform: uppercase;
border: pink inset 25;
PADDING: 20; font-size: larger; line-height: 40px; text-align: center;">
</p>
</body>
</html>
style="..."
color: yellow;
background-color: deepskyblue;
text-decoration: underline;
text-transform: uppercase;
border: pink inset 25; , , 25
PADDING: 20;
font-size: larger;
line-height: 40px;
text-align: center; .
:
1.
-07_2011_CSS_!!.doc
2. 1-2 CSS
3. CSS 1-2 (. ).
4. HTML c CSS, a CSS .
: Arial, 16 pt, , . . p.1{<1><N>} p.N{<1><N>} . 70 %, , , 4 px. , : Courier New , 10 pt, , , 15 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Times New Roman , 14 pt, , . . p.1{<1><N>} p.N{<1><N>} . 86 %, , , 3 px. , : Arial, 12 pt,;, RGB, 10 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
:
Verdana, 18 pt, | |
: Arial Black, 12 pt, , . . p.1{<1><N>} p.N{<1><N>} . 65 %, , RGB, 4 px. , : Comic Sans MS, 10 pt, , , 12 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Tahoma, 16 pt, , . . p.1{<1><N>} p.N{<1><N>} . 70%, , - , 2 px , : Times New Roman, 14 pt, , , 10px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Lucida Console, 12 pt, , . . p.1{<1><N>} p.N{<1><N>} . 85 %, , , 5 px. , : Arial, 9 pt, , 25%, 12px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
:
Verdana, 11 pt, | |
: Courier New, 18 pt, , . . p.1{<1><N>} p.N{<1><N>} . 75 %, , , 2 px. , : Arial, 12 pt, , -, 16 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Verdana, 16 pt, , -. . p.1{<1><N>} p.N{<1><N>} . 50 %, , , 5 px. , : Tahoma, 12 pt, , , 15 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Times New Roman, 18 pt, , 80%. . p.1{<1><N>} p.N{<1><N>} . 70%, , , 2 px. , : Arial, 13 pt, , , 12 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Arial, 14 pt, , . . p.1{<1><N>} p.N{<1><N>} . 72 %, , , 3 px. , : Times New Roman, 12 pt, , , 10 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Arial Black, 13 pt, , -. . p.1{<1><N>} p.N{<1><N>} . 89 %, , , 4 px. , : Comic Sans MS, 12 pt, , , 12 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Arial, 14 pt, , .. . p.1{<1><N>} p.N{<1><N>} . 55 %, , RGB, 2 px. , : Times New Roman, 12 pt, , , 10 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Tahoma, 16 pt, -, . . p.1{<1><N>} p.N{<1><N>} . 78 %, , RGB, 2 px. , : Comic Sans MS, 10 pt, , , 12 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . | |
: Comic Sans MS , 11 pt, , . . p.1{<1><N>} p.N{<1><N>} . 77 %, , RGB, 1 px. , : Arial Black, 10 pt, , , 10 px. . ol.1{<1><N>} li.N{<1><N>} . , : Verdana , 12 pt, , . . table {<1><N>} table.top1{<1><N>}td.top1_left{<1><N>} . |
|
|
|
|
|
|