.17. . |
.18. ( border table). |
, (.18)
. <table border="1" width="50%" height="50"> (.19).
.19. , . |
4.11.3
. HTML : caption. align .
<table>
<caption> </caption>
<tr align="center">
4.11.4
, . HTML-:
cellspacing ;
cellpadding .
. ,
, bgcolor=" ".
5. CSS
CSS-Cascading Style Sheets ( ) , HTML-. : , , , :
:;
, . , .
1:; 2:;
CSS HTML-. .
1: /In-line ( style)
CSS HTML HTML- style. style font-size:1cm; (.20):
.20. style. |
2: ( style)
.21. style. |
CSS- - HTML- <style>. (.21):
3: ( )
- . ( ) - *.css., . HTML . , . web- , .
|
|
CSS : /* .*/
, style.css HTML, .
HTML- (style.css), header HTML, <head> </head> HTML-:
<link rel="stylesheet" href="style/style.css"/>
.22. link html css. |
</title> Enter, link (.22).
.23. link rel href. |
Ctrl+E, href (.23).
href . s, Aptana Studio 3 (.24).
.25. style.css href. |
.24. css href. |
, HTML, , . Enter, (.25).
HTML- . , CSS- HTML-.
<link> style.css . <a>, <link> <head> . .
rel (rel="stylesheet" ). href URL , URL , style.css .
5.1.
CSS HTML.
"" "select", . , . , <p>. Aptana Studio 3 style.css, (.26).
.26. . |
. . , (-) (_)
.27. html- , . |
(*). , web-. . HTML- ( <h1>), ( <p>) ( <a>) (. 27).
|
|
style.css, (.28)
.28. . |
.29. . |
web- (, , ) (.29). , <body>, .. style.css (*) <body> (body).
HTML, .
:
{1; 2;... N}
.30. h1. |
, . style.css (.30):
(.31)
.31. .
, , ().
style.css : , p2, css- (.32).
.32. p2. |
*.html. class "p2" (class="p2")(.33)
.33. p2 class . |
, . *.css (#). , .
style.css : , , css- (.34).
|
.35. id. |
*.html. id="abzac2" (.35).
web- . , . . *.html , .. <p>, <div>. <b> (.36).
.36. b. |
.37. p b{}. |
style.css p b{} (.37):
. .
.
, .
:
1 + 2 {1; 2... N}
. .
, <i> <u> , <b> <u> ( u ) (.38).
.38. i u. |
|
|
style.css b+i {} (.39):
.39. b+i {}.
.40. . |
(.40):
, , .
, , <div>, <div>, .. <i> <u> <b> .
:
1 > 2 {1, 2... N}
.
r scCB19TMUgs29vFVALeNmqSLFo4tp2Pm4E+DDG0uzG45hwI2hMgW5oXHZosswIYQWcBnCoMfNSEt CA2kBaGBtCA0kBaEBg9pQZ+38w6GtJCfrWf1qIw+u+0JjGgBUggXsn2wDl7QfDHsGNFCeo8z82eo 2BAb0sILGNtb4DKS9RNUWkW8gLHZggvB5MhutgCsvSe5MZyY0MLxOQsmRkZTBjbEhmYLL2BKC3uK yPxRKjbEhvYWXsDM3sJaRZBMdxfYEBvSwgsY23IOGWyIDWnhBbymBW0tPIGHtKA3v73D8GsROX8B ojrUTuGVCLX/H/do7pUsBuq/AAAAAElFTkSuQmCCUEsBAi0AFAAGAAgAAAAhALGCZ7YKAQAAEwIA ABMAAAAAAAAAAAAAAAAAAAAAAFtDb250ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEAOP0h /9YAAACUAQAACwAAAAAAAAAAAAAAAAA7AQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEAiV/2 TGoEAAA2CgAADgAAAAAAAAAAAAAAAAA6AgAAZHJzL2Uyb0RvYy54bWxQSwECLQAUAAYACAAAACEA qiYOvrwAAAAhAQAAGQAAAAAAAAAAAAAAAADQBgAAZHJzL19yZWxzL2Uyb0RvYy54bWwucmVsc1BL AQItABQABgAIAAAAIQDVfq4W4AAAAAkBAAAPAAAAAAAAAAAAAAAAAMMHAABkcnMvZG93bnJldi54 bWxQSwECLQAKAAAAAAAAACEAWclVTNQRAADUEQAAFAAAAAAAAAAAAAAAAADQCAAAZHJzL21lZGlh L2ltYWdlMS5wbmdQSwUGAAAAAAYABgB8AQAA1hoAAAAA ">
.41. u div. |
style.css (.41):
.42. . |
(.42):
, . , hover.
.43. hover . |
*.css (.43).
, .
5.2. CSS-
1)
1) text-align .
text-align: left ( ) ;
text-align: right ;
text-align: center ;
text-align: justify .
<p style="text-align: right"> </p>
<p style="text-align: justify"> </p>
2) text-decoration .
text-decoration: none ( );
text-decoration: underline ;
text-decoration: overline ;
text-decoration: line-through ;
3) font-size , .
font-size: cm ;
font-size: mm ;
font-size: pt ;
font-size: in ;
font-size: pc ;
font-size: px ;
|
|
4) text-indent .
, . 0.
5) text-transform .
text-transform: none ( ) ;
text-transform: capitalize ;
text-transform: uppercase ;
text-transform: lowercace ;
6) color .
color: ;
:
- , red (), green (), blue (). 60 . , ;
- RGB , , :
color: rgb(200,100,150);
, ( ) (Paint), , .
- RGB-
color: #FF0000;
color: #FF00;
7) font-family , .
, , . , ; , . , .
font-family: ;
font-family: serif;
font-family: san-serif, cursive, fantasy, monospace;
8) font-style , .
font-style: normal ( ) ;
font-style: italic ;
font-style: oblique .
9) font-weight , .
font-weight: normal ( ) ;
font-weight: bold
10) line-height ( ).
, . normal.
line-height: 150%; - .
11) background-image Web- .
background-image: url(- )
url uniform resource locator .
background-image: none ( ).
<body style="background-image: URL(risunok1.jpg); ">
12) background-color Web- .
background-color: ;
13) background ,
14) width .
15) height .
, . auto ( ) .
<p style="width: 30%;"> </p>
height: auto;
width: 300px;
16) border , ,
Border: dotted 5px red;
17) border-color .
. , . , , . , , , .
18) border-style .
border-style: none ( ) ;
border-style: dotted ;
border-style: dashed ;
border-style: solid ;
border-style: double ;
border-style: groove ;
border-style: ridge .
19) border-width .
|
|
, : border-top-width, border-right-width, border-bottom-width border-left-width.
. border-left, border-top, border-right, border-bottom. (color), (style) (width). , , , border-right-width, border-bottom-color, border-top-style ..
20) border-collapse .
<TABLE>
border-collapse: separate ( )
border-collapse: collapse .
<table border="1" style="border-collapse:collapse;">
21) padding .
. , . , , . , , , . 0, <TD> 1.
<p style="border-color: blue green red; border-width: 2px; border-style:dotted; padding: 2em;"> </p>
2.
1.
.
- , , , " ".
- : , RGB- (150,20,210), 1 , Comic Sans MS, . " , , RGB- (150,20,210), 1 , Comic Sans MS, "
- : , ff33bb, 5 , Arial, . " , , ff33bb, 5 , Arial, "
:
*.html ( ).
html:5 ctrl+E, web- <body></body> .
2 , h2 ctrl+E (.44).
.44. . |
, , , <h2> 2 style. s style (.45).
.45. style . |
enter, style .
style, color, css , color (.46).
.46. CSS- color, . |
enter, color green, . text-align, , center, (.47). <h2></h2> " " (.48).