Wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

css8

Total questions: 9

Worksheet time: 5mins

Name
Class
Date
1.

<style>

div {

width: 300px;

height: 100px;

background-color: red;

border: 1px solid black;

}

div#myDiv {

transform: rotate(20deg);

}

</style>

a)

الكود يعطى ما بالصورة

b)

الكود لا يعطى ما بالصورة

2.

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

transform:skew(20deg);

}

</style>

a)

الكود يعطى ما بالصورة

b)

الكود لا يعطى ما بالصورة

3.

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

transform:rotate(20deg);

}

</style>

a)

الكود يعطى ما بالصورة

b)

الكود لا يعطى ما بالصورة

4.

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

transform: skew(20deg);

}

</style>

a)

الكود صح

b)

الكود خطأ

5.

المدة التى يتحول بها الشكل تسمى

a)

animation

b)

transition

c)

time

6.

div {

width: 100px;

height: 100px;

background: red;

time: width 2s;

}

div:hover {

width: 300px;

}

</style>

a)

الكود صح

b)

الكود خطأ

7.

div {

width: 100px;

height: 100px;

background: red;

time: width 2s;

}

div:hover {

width: 300px;

}

</style>

a)

الكود صح

b)

الكود خطأ

8.

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

</body>

</html>

a)

الكود صح

b)

الكود خطأ

9.

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

a)

الكود صح

b)

الكود خطأ