.


:

:



,



( , )

:

































 

 

 

 
FAQ

block2 message > p.message

{

padding: 5px;

border: 1px solid #95a5a6;

color: #95a5a6;

}

</style>

</head>

<body>

< div class =" block 1">

< p > </ p >

< p class =" message "> </ p >

< ul >

< li > </ li >

< li > </ li >

< li > </ li >

</ul>

</div>

<div class="block2 message">

< p > </ p >

< p class =" message "> </ p >

</ div >

</ body >

</ html >

[9/18]

, , .

. HTML-, :

<p class="red blue"> ?</p>

CSS- c :

.blue {

color: blue;

}

.red {

color: red;

}

: ? CSS- ?

: , .

, , . , CSS- . red.

CSS-, CSS- .

. [10/18]

. HTML:

<p class="red blue"> ?</p>

CSS:

p.blue {

color: blue;

}

.red {

color: red;

}

. , p.blue , .red.

:

, .

.red , p.blue .

, CSS- HTML-, , CSS-.

css4-34.html

<!DOCTYPE html>

< html >

< head >

< title > . </title>

<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

< style >

/* , */

div.chicken.to-rudolf {

margin-left: 120px;

}

</style>

<link href="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">

<style>

div.to-keksik { /* */

margin-left:120px;

}

</style>

</head>

< body >

< h 1> ?</ h 1>

<div class="battle">

<div class="cat cat-keksik"></div>

<div class="cat cat-rudolf"></div>

<div class="chicken to-keksik to-rudolf"></div>

</div>

</body>

</html>

. [11/18]

, .

<div class="experiment">

<p class="red blue"> ?</p>

</div>

CSS :

p.blue {

color: blue;

}

 

.experiment.red {

color: red;

}

?

, .

css4-35.html

<!DOCTYPE html>

<html>

<head>

<title> . </title>

<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">

<style>

.battle.to-rudolf { /* */

margin-left: 120px;

}

.battle.to-keksik {

margin-left:120px;

}

</style>

</head>

<body>

<h1> ?</h1>

<div class="battle">

<div class="cat cat-keksik"></div>

<div class="cat cat-rudolf"></div>

<div class="chicken to-keksik to-rudolf"></div>

</div>

</body>

</html>

. [12/18]

, , id. #.

HTML:

<div id="experiment-1" class="experiment">

<p class="red blue"> ?</p>

</div>

CSS:

#experiment-1.blue {

color: blue;

}

.experiment.red {

color: red;

}

id , . , id.

, id . , , .

.

css4-36.html

 

<!DOCTYPE html>

<html>

<head>

<title> . </title>

<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

<link href="https://htmlacademy.ru/assets/course66/battle.css" rel="stylesheet" type="text/css">

<style>

#keks-vs-rudolf.to-keksik { /* */

margin-left:120px;

}

#keks-vs-rudolf.to-rudolf { /* */

margin-left:120px;

}

</style>

</head>

<body>

<h1> ?</h1>

<div id="keks-vs-rudolf" class="battle">

<div class="cat cat-keksik"></div>

<div class="cat cat-rudolf"></div>

<div class="chicken to-keksik to-rudolf"></div>

</div>

</body>

</html>

. [13/18]

, , : style .

CSS-, style . . .

CSS- , style. !important. CSS- . :

HTML:

<p style="color: red;" class="blue"> ?</p>

CSS:

.blue {

color: blue!important;

}

.

!important. .

css4-37.html

<!DOCTYPE html>

< html >

< head >

< title > . </title>

<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

<link href="/assets/course66/battle.css" rel="stylesheet" type="text/css">

<style>

.to-keksik {

margin-left:120px!important;

}

</style>

</head>

<body>

<h1> ?</h1>

<div id="keks-vs-rudolf" class="battle">

<div class="cat cat-keksik"> </div>

<div class="cat cat-rudolf"> </div>

<!-- , ,

->

<div style="margin-left: 120px;" class="chicken to-keksik to-rudolf"></div>

</div>

</body>

</html>

[14/18]

, . .

:

<div id="floor"><span class="cat-in-box"></span></div>

:

span {

background-color: #27ae60; /* */

}

div span {

background-color: #2980b9; /* */

}

#floor.cat-in-box {

background-color: #34495e; /* */

}

.cat-in-box {

background-color: #8e44ad; /* */

}

#floor span {

background-color: #c0392b; /* */

}

div.cat-in-box {

background-color: #e67e22; /* */

}

: ? , .

.

.

[15/18]

, .

4 a, b, c, d:

, .. style="...", =1, a=0;

b (, #) ;

c , ;

d -.

( ). , , .

:

a (style), b(#), c(:hover,.class), d(, -)
span 0, 0, 0, 1 1
div.cat-in-box 0, 0, 1, 1 11
#floor.cat-in-box 0, 1, 1, 0 110
div span 0, 0, 0, 2 2
.cat-in-box 0, 0, 1, 0 10
#floor span 0, 1, 0, 1 101
.text li.error span {}   0, 0, 2, 2 22
#wrapper.text #message p a {} 0, 2, 1,2 212
#main.content a:hover {} 0, 1(#main), 2(pre,.content), 1(a:hover) 121

, #floor.cat-in-box.

[16/18]

.

CSS- , , .

. , .

<!DOCTYPE html>

<html>

<head>

<title> </title>

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="/assets/course66/catinbox.css">

<style>

.boxes.cat-keksik {

background-color: #e74c3c; /* */

}

.boxes.cat-rudolf {

background-color: #3498db; /* */

}

.boxes.cat-snezhok {

background-color: #2ecc71; /* */

}

.box{

background-color: #bdc3c7; /* */

}

</style>

</head>

<body>

<div class="boxes">

<div class="box cat-keksik"></div>

<div class="box cat-rudolf"></div>

<div class="box cat-snezhok"></div>

</div>

</body>

</html>

[17/18]

, , .

:

1. ;

2. , ;

3. .

:

: , , ..

(, ..) CSS- , ,.button.

CSS-, , , . :.button-send,.button-clear,.button-navigation.

HTML- : .

<a class="button button-send"></a>

 

<!DOCTYPE html>

<html>

<head>

<title> </title>

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">

<style>

body {

padding: 10px;

font-family: "PT Sans", sans-serif;

}

 

.cats {

position: relative;

width: 390px;

margin: 20px auto;

padding: 20px;

text-align: center;

box-shadow: 0 0 3px #999999;

}

 

.cats.cat {

display: inline-block;

width: 100px;

height: 100px;

margin: 10px;

padding: 10px;

text-align: center;

color: #ffffff;

background-repeat: no-repeat;

background-position: 50% 80%;

border-radius: 5px;

box-shadow: 0 0 3px #999999;

}

 

.cats.cat-keksik {

background-color: #3498db;

background-image: url("/assets/course13/cat_walk.png");

}

 

.cats.cat-rudolf {

background-color: #e74c3c;

background-image: url("/assets/course13/cat_grumpy.png");

}

 

.cats.cat-snezhok {

background-color: #2ecc71;

background-image: url("/assets/course66/cat_w.png");

}

 

.cats.cat-adolf {

background-color: #e67e22;

background-image: url("/assets/course66/cat_a.png");

}

 

</style>

</head>

<body>

<div class="cats">

<div class="cat cat-keksik"></div>

<div class="cat cat-rudolf"></div>

<div class="cat cat-snezhok"></div>

<div class="cat cat-adolf"></div>

</div>

</body>

</html>

css4-38.html

: [18/18]

, . , .

, . , .

, CSS- HTML, , .

. , CSS-.

css4-39.html

, 1

span [1/16]

css <span>. . . .

, . :

<span class="error"></span><span class="ok"></span>

css .

font-size: [2/16]

C font-size .

em . 1em M .

:

: 20px

: 15pt

: 80%

, .

: small, large .. .

font-weight: [3/16]

font-weight, :

1. normal ;

2. bold .

: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. , , .

: . .

font-style: [4/16]

font-style. :

1. normal ;

2. italic .

, .

font-family: [5/16]

font-family. : "Times New Roman". , :

serif ;

sans-serif .

, .

, . , , , . :

body {

font-family: "PT Sans", "Arial", serif;

}

.

color: [6/16]

color. :

, #FF9900.

: red.

RGB-: rgb(255, 255, 0).

.

text-decoration: [7/16]

text-decoration. :

1. underline ;

2. line-through ;

3. overline ;

4. none .

, .

[8/16]

, , . . :

1. text-decoration.

2. color.

3. border-bottom.

:hover.

text-transform [9/16]

css : . text-transform. :

1. lowercase ;

2. uppercase ;

3. capitalize ;

4. none .

 

: white-space [10/16]

 

, HTML-. <pre>.

, CSS .

white-space, :

nowrap ;

pre <pre>;

pre-wrap pre, , ;

normal .

css40.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> : white-space</title>

<style>

h1 {

font-size: 24px;

white-space: pre-wrap;

}

p.nowrap {

white-space: nowrap;

}

p.like-pre {

white-space: pre;

}

</style>

</head>

<body>

<h1>ꠠ ꠠ Progressive Enhancement</h1>

 

<p class="nowrap"> , , - .</p>

 

<p class="like-pre">

Progressive Enhancement

Graceful Degradation.

Progressive Enhancement,

,

.

Graceful Degradation.

</p>

</body>

</html>

: text-align[11/16]

text-align. . :

1. left ;

2. right ;

3. center ;

4. justify .

: vertical-align [12/16]

vertical-align. . , .

, :

1. top ;

2. middle ;

3. bottom ;

4. baseline ( ).

CSS [13/16]

CSS <sub> <sup>, . :

1. vertical-align sub super.

2. font-size.

line-height: [14/16]

, , line-height. :

1. , 1.5, 2.

2. : 150%.

3. CSS: 12px, 2em.

4. normal, .

, .

[15/16]

- . . , .

, , .

, , . .

, : , Compose to a Vertical Rhythm, , .

css41.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> </title>

<style>

body {

font-size: 16px;

line-height: 1.3;

}

 

h1 {

margin-top: 0.7em;

font-size: 1.3em;

}

p {

margin-top: 0.5em;

margin-bottom: 0.5em;

}

</style>

</head>

<body>

<h1> </h1>

<p> - . . , .</p>

<h1> </h1>

<p> , , .</p>

<p>, , . .</p>

</body>

</html>

: CSS [16/16]

HTML .

. , . HTML- . CSS- <span>.

css42.html ()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> </title>

<style>

body {

width: 260px;

margin: 0;

padding: 0 10px;

font-family: "Times New Roman", serif;

font-size:16px;

line-height: 1.2;

}

h1 {

font-size: 18px;

}

span.sub {

vertical-align: sub;

font-size: 12px;

}

span.sup {

vertical-align: super;

font-size: 12px;

}

span.del {

text-decoration: line-through;

}

span.underline {

text-decoration: underline;

}

span.italic {

font-style: italic;

}

</style>

</head>

<body>

<h1> </h1>

<ol>

<li>, 1 </li>

<li> H<span class="sub">2</span>O AquaLife<span class="sup"></span>, 2 </li>

<li>, <span class="del">1,5 </span> 2 </li>

<li> , 3 ..</li>

<li>, 300</li>

<li>, </li>

<li><span class="underline"> , </span></li>

</ol>

<hr>

<span class="italic">:</span><br>

<br>

11 <br>

<br>

</body>

</html>

C background-color [1/16]

CSS- background-color.

, CSS : ( HEX), RGB RGBA, , red green.

W3C HTML Colors .

:

selector { background-color: #ff0000;}

css43.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-color</title>

<style>

body {

padding: 10px;

text-align: center;

}

.block {

display: inline-block;

width: 192px;

height: 192px;

margin: 5px;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background-color: #2ecc71;

}

.block2 {

background-color: #3498db;

}

.block3 {

background-color: #e74c3c;

}

.block4 {

background-color:#e67e22;

}

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<div class="block block3"></div>

<div class="block block4"></div>

</body>

</html>

background-image [2/16]

CSS- background-image. :

selector { background-image: url("-");}

url("..."). , , .

, . .

 
.

 

css44.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-image</title>

<style>

body {

padding: 10px;

text-align: center;

}

.block {

display: inline-block;

width: 192px;

height: 192px;

margin: 5px;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background-color: #2ecc71;

background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");

}

.block2 {

background-color: #3498db;

background-image: url("https://htmlacademy.ru//assets/course13/cat_fish.png")

}

.block3 {

background-color: #e74c3c;

background-image: url("https://htmlacademy.ru//assets/course13/cat_drunk.png")

}

.block4 {

background-color: #e67e22;

background-image: url("https://htmlacademy.ru//assets/course13/cat_tied.png")

}

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<div class="block block3"></div>

<div class="block block4"></div>

</body>

</html>

background-repeat [3/16]

. , . CSS- background-repeat. 4 :

repeat . .

repeat-x .

repeat-y .

no-repeat .

css45.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-repeat</title>

<style>

body {

padding: 10px;

text-align: center;

}

.block {

display: inline-block;

width: 192px;

height: 192px;

margin: 5px;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background-color: #2ecc71;

background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");

background-repeat: repeat-x;

}

.block2 {

background-color: #3498db;

background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");

background-repeat: repeat-y;

}

.block3 {

background-color: #e74c3c;

background-image: url("https://htmlacademy.ru/assets/course13/cat_drunk.png");

background-repeat: no-repeat;

}

.block4 {

background-color: #e67e22;

background-image: url("https://htmlacademy.ru/assets/course13/cat_tied.png");

background-repeat: repeat;

}

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<div class="block block3"></div>

<div class="block block4"></div>

</body>

</html>

background-position [4/16]

C background-position . , : x y.

x , y .

x left, center, right, .

y top, center, bottom, .

:

background-position: 50% 50%;

background-position: right bottom;

background-position: 50px 100px;

background-position: 0 100%;

background-position: left bottom;

:

1. ;

2. ;

3. 50px 100px ;

4. ;

 

css46.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-position</title>

<style>

body {

padding: 10px;

text-align: center;

}

.block {

display: inline-block;

width: 192px;

height: 192px;

margin: 5px;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background-color: #2ecc71;

background-image: url("https://htmlacademy.ru/assets/course13/cat_box.png");

background-repeat: no-repeat;

background-position: 50% 50%;

}

.block2 {

background-color: #3498db;

background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");

background-repeat: no-repeat;

background-position: 100% 0;

}

.block3 {

background-color: #e74c3c;

background-image: url("https://htmlacademy.ru/assets/course13/cat_drunk.png");

background-repeat: no-repeat;

background-position: 0 100%;

}

.block4 {

background-color: #e67e22;

background-image: url("https://htmlacademy.ru/assets/course13/cat_tied.png");

background-repeat: no-repeat;

background-position: 100% 100%;

}

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<div class="block block3"></div>

<div class="block block4"></div>

</body>

</html>

background-position [5/16]

, . , , background-position.

(), ().

, , . .

css47.html

<! DOCTYPE html >

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-position</title>

<style>

body {

padding: 10px;

text-align: center;

}

.block {

display: inline-block;

width: 120px;

height: 120px;

margin: 5px;

background-color: #34495e;

background-image: url("https://htmlacademy.ru/assets/course13/logo.png");

background-repeat: no-repeat;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background-position: 35px 25px;

}

.block2 {

background-position:95px 25px;

}

.block3 {

background-position:45px 50%;

}

.block4 {

background-position: 100% 50%;

}

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<br>

<div class="block block3"></div>

<div class="block block4"></div>

</body>

</html>

background-attachment [6/16]

. -. , .

background-attachment .

:

scroll . .

fixed , .

, , : , .

 

css48.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background-attachment</title>

<style>

body {

background-color: black;

background-image: url("https://htmlacademy.ru/assets/course13/moon.jpg");

background-position: 50% 0;

background-repeat: no-repeat;

background-attachment: fixed;/*!!!!!!!!!!!!!!!!!!!!!!*/

}

.block {

width: 192px;

height: 256px;

margin: 20px auto;

background-color: #34495e;

background-repeat: no-repeat;

background-position: 50% 50%;

border-radius: 5px;

}

.block:nth-child(1) {

background-image: url("https://htmlacademy.ru/assets/course13/cat_clean.png");

}

.block:nth-child(2) {

background-image: url("https://htmlacademy.ru/assets/course13/cat_fight.png");

}

.block:nth-child(3) {

background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");

}

.block:nth-child(4) {

background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");

}

</style>

</head>

<body>

<div class="block"></div>

<div class="block"></div>

<div class="block"></div>

<div class="block"></div>

</body>

</html>

, 1

background [7/16]

: background-color,background-image .. .

background, :

background: [bc] [bi] [br] [bp] [ba];/* :[bc] background-color[bi] background-image[br] background-repeat[bp] background-position[ba] background-attachment*/

- , . .

background: #e74c3c;background: url("img.png") no-repeat;background: url("img.png") 10px 20px;

.

, , .

, .

css49.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> background</title>

<style>

body {

padding: 20px;

font-size: 20px;

font-family: "Tahoma", sans-serif;

}

.block {

width: 140px;

margin: 25px auto;

padding: 25px 0;

padding-left: 90px;

color: white;

border-radius: 5px;

box-shadow: 1px 1px 3px #999999;

}

.block1 {

background: none;

background-color: #e74c3c;

background-image: url("https://htmlacademy.ru/assets/course13/cat_eyes.png");

background-repeat: no-repeat;

background-position: 10px 5px;

}

.block2 {

background: none;

background-color: #2980b9;

background-image: url("https://htmlacademy.ru/assets/course13/cat_fish.png");

background-repeat: no-repeat;

background-position: 10px 5px;

}

</style>

</head>

<body>

<div class="block block1">

</div>

<div class="block block2">

</div>

</body>

</html>

css50.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title>: </title>

<style>

body {

width: 300px;

margin: 0;

padding: 0;

padding-top: 15px;

font-size: 0;

text-align: center;

background: white;

}

 

.block {

display: inline-block;

width: 90px;

height: 90px;

margin-bottom: 1px;

margin-right: 1px;

background-color: black;

}

 

.block1 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");

background-repeat: no-repeat;

background-position: 50% 50%;

}

.block2 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_poo.png");

background-repeat: no-repeat;

background-color: #f1c40f;

background-position: 50% 50%;

}

.block3 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_hiss.png");

background-repeat: no-repeat;

background-color: #e74c3c;

background-position: 50% 50%;

}

.block4 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");

background-repeat: no-repeat;

background-color: #3498db;

background-position: 60px 50%;

}

.block5 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_walk.png");

background-repeat: no-repeat;

background-color: #3498db;

background-position:30px 50%;

}

.block6 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_slippers.png");

background-repeat: no-repeat;

background-color: #27ae60;

background-position: 50% 50%;

}

.block7 {

background-color: #bdc3c7;

 

}

.block8 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");

background-repeat: no-repeat;

background-color: #95a5a6;

background-position: 40px 50%;

}

.block9 {

background-image: url("https://htmlacademy.ru/assets/course13/cat_grumpy.png");

background-repeat: no-repeat;

background-color: #bdc3c7;

background-position:50px 50%;

}

/*

:

/assets/course13/cat_poo.png

/assets/course13/cat_hiss.png

/assets/course13/cat_walk.png

/assets/course13/cat_slippers.png

/assets/course13/cat_grumpy.png

*/

</style>

</head>

<body>

<div class="block block1"></div>

<div class="block block2"></div>

<div class="block block3"></div>

<div class="block block4"></div>

<div class="block block5"></div>

<div class="block block6"></div>

<div class="block block7"></div>

<div class="block block8"></div>

<div class="block block9"></div>

</body>

</html>

/* */

<!--style>

body {

width: 300px;

margin: 0;

padding: 0;

padding-top: 15px;

font-size: 0;

text-align: center;

background: white;

}

.block {

display: inline-block;

width: 90px;

height: 90px;

margin-bottom: 1px;

margin-right: 1px;

background-color: black;

}

.block1 {

background: #000000 url(/assets/course13/cat_poo.png) no-repeat center center;

}

.block2 {

background: #f1c40f url(/assets/course13/cat_poo.png) no-repeat center center;

}

.block3 {

background: #e74c3c url(/assets/course13/cat_hiss.png) no-repeat center center;

}

.block4 {

background: #3498db url(/assets/course13/cat_walk.png) no-repeat 230% center;

}

.block5 {

background: #3498db url(/assets/course13/cat_walk.png) no-repeat100% center;

}

.block6 {

background: #27ae60 url(/assets/course13/cat_slippers.png) no-repeat center center;

}

.block7 {

background: #bdc3c7

}

.block8 {

background: #95a5a6 url(/assets/course13/cat_grumpy.png) no-repeat 150% center

}

.block9 {

background: #bdc3c7 url(/assets/course13/cat_grumpy.png) no-repeat190% center

}

</style-->

, 1

JPEG [9/16]

. , .

JPEG. , , .

JPEG . .

, , .

JPEG , JPEG . , , .

JPEG /.

, 1

PNG-8 [10/16]

, PNG . PNG-8 PNG-24 , Photoshop. , .

PNG-8 GIF. , , , , . 256.

PNG-8, GIF, . , , .

, , . Mate. . (, 3 -), PNG-8 .

PNG GIF? PNG , GIF ( ). , , PNG.

PNG-24 [11/16]

PNG-24 . ---, , .. .

JPEG , . , PNG.

PNG-24 , . - , PNG-24 .

- IE PNG, IE (8+), .

-PNG-8 -PNG-24 . , .

 

PNG-8 PNG-24.

GIF [12/16]

, GIF , .

PNG JPEG ( PNG ).

css51.html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title> GIF</title>

<style>

.box {

width: 256px;

height: 192px;

margin: 20px auto;

box-shadow: 1px 1px 3px #999999;

}

 

.block {

height: 192px;

background

<== | ==>
: [11/18] 5 |
:

: 2018-10-18; !; : 1903 |

:

:

, .
==> ...

1792 - | 1619 -


© 2015-2024 lektsii.org - -

: 1.494 .