Animal Trading cards

Izoh:
Ko‘pgina hollarda, "Developer Tools" yordamchisi odatiy ravishda o‘lchamlarni piksel bilan ko‘rsatadi.
3-savol
"CSS" o‘lchov birligi em va "HTML" elementi  o‘rtasida qanday bog‘liqlik bor?

Izoh:
"CSS" o‘lchov birligi em "M" harfining o‘lchamiga nomlangan va bosma tipografiyadan kelib chiqqan. "HTML" elementi  esa "emphasis" so‘zining qisqartmasidir. Ular bir xil yoziladiva ko‘pincha bir xil talaffuz qilinadi, lekin ular o‘rtasida umuman bog‘liqlik yo‘q.

24. Qutilar (Box)

1-savol

Qutining bu qismlarini ichkaridan tashqariga qarab joylashtiring.

Mashq: Ko‘k quti Quyidagi ish maydonida qutilar yaratishni mashq qiling! Qalin ko‘k chegarali va ichida bir oz matnli qutini yaratishingiz mumkinligini ko‘ring, mana bunga o‘xshab:

25. Amaliy mashg‘ulot — "CSS"da qutilar

Ikkinchi qutini qo‘shamiz. Lekin birinchi uni kichroq qilib, qizil rang beraylik. Keling, ikkala qutini bir biridan ajratib turish uchun atrofiga bir oz tashqi chegara(margin) beraylik.

26. Amaliy mashg‘ulot — Suzib yurivchi qutilar

Endi "CSS"ning "float" xossasini sinab ko‘raylik. Boshlash uchun blue_box klassiga float:right; xossasini qo‘shishga harakat qiling.

1-savol
Blue_box klassiga float:right; xossasini qo‘shganda nima o‘zgarish bo‘ldi?


2-savol
Endi esa red_box klassiga float:right; xossasini qo‘shishga harakat qiling.
Qanday o‘zgarish kuzatdingiz?


Keling, yana bir narsani sinab ko‘ramiz - ish maydoninig oxiriga matnli paragraf qo‘shamiz (ikkala qutidan keyin). Ushbu paragrafdan foydalanishingiz mumkin:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi sit amet mauris commodo. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Volutpat est velit egestas dui id ornare arcu. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Et malesuada fames ac turpis. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Sed risus ultricies tristique nulla. At auctor urna nunc id. Pharetra convallis posuere morbi leo. Quam quisque id diam vel quam elementum pulvinar etiam. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Amet risus nullam eget felis eget nunc lobortis.