.


:




:

































 

 

 

 


HTML CSS Aptana Studio 3. 2





 

.17. .
2 3 4. , . 3, 4. (.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 .

. , &nbsp;

, 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).

 

.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.

.

  1. , , , " ".
  2. : , RGB- (150,20,210), 1 , Comic Sans MS, . " , , RGB- (150,20,210), 1 , Comic Sans MS, "
  3. : , 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).





:


: 2017-03-11; !; : 527 |


:

:

, .
==> ...

815 - | 652 -


© 2015-2024 lektsii.org - -

: 0.111 .