№
|
Topshiriq
|
Mazmuni
|
Ball
|
|
float, clear, height, width
xususiyatlarini o‘rganish
|
div tegi yordamida 2 ta doira, 2 ta kvadrat yasab, float va clear xususiyatlarini imkoniyatini ko‘rsating
|
|
|
animation xususiyatini o‘rganish
|
Sariq kvadratdan qizil doiraga aylanadigan animatsiya yarating. Animatsia 5 sekund davomida bajarilsin, 3 marta takroriy bajarilsin, animatsiyaning oxirida shakl qizil doira bo‘lib qotsin.
|
|
|
transform xususiyatini o‘rganish
|
Sahifaga rasm joylashtiring, rasmni 60 daraja buring, 2 marta kattalashtiring, Y o‘qi bo‘yicha 200px siljiting
|
|
|
HTMLni CSS hujjatga bog‘lashning 3 ta usulini ko‘rsatish
|
3 ta usul yordamida web sahifa foniga rang va rasm bering.
|
|
|
display
overflow
xususiyatlarini o‘rganish
|
div tegi yordamida 4 ta kvadrat yasab, 1 ta satrga display xususiyati yordamida joylashtiring
3 ta div tegining ichiga matn joylashtirib overflow xususiyatini barhca qiymatlarini ishlatib ko‘rsating
|
|
|
tegi psevdoklaslarini o‘rganish:
link
visited
active
hover
|
4 ta gipermatn tayyorlab, a tegining barcha psevdoklasslarini ishlatib ko‘rsating
|
|
|
5 ta class
5 ta id yaratish va teglar bilan bog‘lash
|
Oy nomlaridan iborat 5 ta klass va 5 ta id yarating hamda ularni 10 ta teg(har birini alohida klass yoki id) bilan bog‘lab, matnga rang, o‘lcham, fon rangi, tag chiziq bering
|
|
|
transition xususiyatini o‘rganish
|
div yordamida 1 ta doira yasang ustiga sichqonchani olib borganda kattalashsin(2 barobar)
div yordamida 1 ta kvadrat yasang ustiga sichqonchani olib borganda burilsin (45 daraja)
|
|
|
CSS box modelini o‘rganish:
border;
margin;
padding;
|
Ichiga 4 qator sher yozilgan 2 ta maydon yarating div yordamida. Ularda margin, padding, border xususiyatlarini imkoniyatini yoriting
|
|
|
text-indent
text-align
text-decoration
letter-spacing
text-transform
xususiyatlarini o‘rganish
|
Web sahifaga 5 qator matn joylashtiring hamda ushbu matnda text-indent, text-align, text-decoration, letter-spacing, text-transform xususiyatlarini vazifalarini ko‘rsating.
|
|
|
position xususiyatini o‘rganish
|
Web sahifani 4 ta burchagiga 4 ta kvadrat(div yordamida), 4 ta tominini markaziga 4 ta doira(div yordamida) joylashtiring
|
|
|
z-index xususiyatini o‘rganish
|
To‘g‘ri turtburchak, kvadrat, doira shakllarini tayyorlab ularni ustma-ust(qisman bir-birini ustiga joylashsin) joylashtiring
|
|
|
span va div teglariga CLASS va IDlarni bog‘lab elementlarni guruhlash
|
5 ta gap yozib ichidan span tegi yordamida so‘zlarni rangini va o‘lchamini o‘zgartiring
div tegi yordamida 1 kvadrat va 1 ta doira shaklini yasab ichini buyang
|
|
|
CSS da
Text-shadow, box-shadow
xususiyatlarini o‘rganish
|
TATUSFni kengaytirib yozib, har bir so‘ziga text-shadow yordamida alohida soya bering. div tegi yordamida kvadrat va doira tayyorlab, ularga box-shadow yordamida soya bering
|
|
|
font-family
font-style
font-variant
font-weight
font-size
xususiyatlarini o‘rganish
|
4 qator sher yozib, font-family, font-style, font-variant,
font-weight, font-size xususiyatlarini imkoniyatini ko‘rsating
|
|
|
background-color:
background-image:
background-repeat:
background-position:
background-attachment:
xususiyatlarini o‘rganish
|
Web sahifa foniga kichikroq rasmni markazga joylashtiring(rasm takrorlanmasin). Fonning qolgan qismiga rang bering. Sahifaga ko‘proq matn joylashtirganda fondagi rasm qimirlamasin(attachment).
|
|
|
animation xususiyatini o‘rganish
|
Sariq doiradan->qizil doiraga keyin ko‘k kvadratga aylanadigan animatsiya yarating. Animatsia 5 sekund davomida bajarilsin, 2 marta takroriy bajarilsin, animatsiyaning oxirida shakl ko‘k kvadrat bo‘lib qotsin.
|
|
|
transform xususiyatini o‘rganish
|
Sahifada 1 ta kvadrat va 1 ta doira tayyorlang, kvadratni 45 daraja buring, 2 marta kattalashtiring, Doirani Y o‘qi bo‘yicha 200px, X o‘qi bo‘yicha 100px siljiting
|
|
|
text-indent
text-align
text-decoration
letter-spacing
text-transform
xususiyatlarini o‘rganish
|
Web sahifaga 4 qator sher joylashtiring hamda ushbu matnda text-indent, text-align, text-decoration, letter-spacing, text-transform xususiyatlarini vazifalarini ko‘rsating.
|
|
|
position xususiyatini o‘rganish
|
Web sahifani 4 ta burchagiga 4 ta doira(div yordamida), markaziga 1 ta rasm joylashtiring(foniga emas)
|
|
|
z-index xususiyatini o‘rganish
|
Sahifaga 4 ta rasm joylashtiring, ularni ustma-ust(qisman bir-birini ustiga joylashsin) joylashtiring
|
|
|
4 ta class
3 ta id yaratish va teglar bilan bog‘lash
|
Hafta kuni nomlaridan iborat 4 ta klass va 3 ta id yarating hamda ularni 7 ta teg(har birini alohida klass yoki id) bilan bog‘lab, matnga rang, soya, fon rangi, tag chiziq bering
|
|
|
span va div teglariga CLASS va IDlarni bog‘lab elementlarni guruhlash
|
4 qator sher yozib ichidan span tegi yordamida so‘zlarni tagiga chizing va fonini buyang o‘zgartiring
div tegi yordamida 1 kvadrat va 1 ta doira shaklini yasab ichini buyang
|
|
|
font-family
font-style
font-variant
font-weight
font-size
xususiyatlarini o‘rganish
|
2 abzats matn yozib, font-family, font-style, font-variant, font-weight, font-size xususiyatlarini imkoniyatini ko‘rsating
|
|
|
background-color:
background-image:
background-repeat:
background-position:
background-attachment:
xususiyatlarini o‘rganish
|
Web sahifa foniga kichikroq rasmni o‘ng tomonga joylashtiring(rasm Y o‘qi bo‘yicha takrorlansin). Fonning qolgan qismiga rang bering. Sahifaga ko‘proq matn joylashtirganda fondagi rasm qimirlamasin(attachment).
|
|
|
transition xususiyatini o‘rganish
|
Sahifaga 1 ta rasm joylashtiring ustiga sichqonchani olib borganda kattalashsin(2 barobar)
div yordamida 1 ta doira yasang ustiga sichqonchani olib borganda siljisin(joyini o‘zgartirsin)
|
|
|
CSS box modelini o‘rganish:
border;
margin;
padding;
|
Ichiga matn yozilgan 3 ta to‘g‘ri turtburchakli maydon yarating div yordamida. Ularda margin, padding, border xususiyatlarini imkoniyatini yoriting
|
|
|
HTMLni CSS hujjatga bog‘lashning 3 ta usulini ko‘rsatish
|
3 ta usul yordamida web sahifa matnga rang va o‘lcham bering.
|
|
|
display
overflow
xususiyatlarini o‘rganish
|
div tegi yordamida 3 ta doira yasab, 1 ta satrga display xususiyati yordamida joylashtiring
2 ta div tegining ichiga matn joylashtirib overflow xususiyatini barhca qiymatlarini ishlatib ko‘rsating
|
|
|
tegi psevdoklaslarini o‘rganish:
link
visited
active
hover
|
6 ta gipermatn tayyorlab, a tegining barcha psevdoklasslarini ishlatib ko‘rsating
|
|
|
CSS box modelini o‘rganish:
border;
margin;
padding;
|
Ichiga matn yozilgan 3 ta maydon yarating div yordamida. Ularda margin, padding, border xususiyatlarini imkoniyatini tushuntiring
|
|
|
position xususiyatini o‘rganish
|
Web sahifani shashka doskasini chizing. Doskaning bir tominini shashka donachalari bilan tuldiring(div yordamida)
|
|
|
class va id yaratish va teglar bilan bog‘lash
|
Hamma teglar uchun mo‘ljallangan klass yarating. Classni vazifasi matnni katta harflarga o‘tkazsin. Faqat a tegi uchun mo‘ljallangan class yarating, classni vazifasi a tegini ichidagi matndan tag chiziqni olib tashlasin. 2 ta id yarating va 2 teg bilan bog‘lang. IDlarning vazifasi fonni rangini o‘zgartirish va matnga soya berish bo‘lsin.
|
|
|
transition xususiyatini o‘rganish
|
|
