roadmap.az

Menyu

HTML & CSSDərs 16 / 16

Müsahibəyə hazırlıq: HTML, CSS və Git

HTML və CSS sualları

  1. div və span nə ilə fərqlənir? Hər ikisi ümumi konteynerdir; ilkin display davranışları fərqlidir. Semantik rol lazım olduqda uyğun element seç.
  2. main və semantika nə üçündür? Əsas məzmunu və bölmələrin rolunu insanlar, brauzer və köməkçi texnologiyalar üçün aydın edir.
  3. alt nə vaxt boş olur? Şəkil dekorativdirsə; mənalı şəklin məqsədi mətnlə verilməlidir.
  4. Padding, margin və margin birləşməsi? Padding sərhədin içində, margin çölündədir. Şaquli margin-lər müəyyən blok axınlarında birləşə bilər.
  5. Elementin görünən eni necə hesablanır? content-box-da məzmun, padding və border toplanır; border-box-da width bunları əhatə edir.
  6. Hansı ölçü vahidlərini tanıyırsan? px, %, em, rem, vw və vh üçün istinad ölçüsünü ayrıca izah et.
  7. inline və inline-block fərqi? İkincidə en və hündürlük blok qutusu kimi tətbiq edilir.
  8. relative, absolute, fixed, static fərqi? Normal axına və yerləşdirmə konteynerinə təsiri ilə müqayisə et.
  9. Spesifiklik və !important? Kaskadın hissələridir; səbəbi tapmadan vacibliyi artırmaq baxımı çətinləşdirir.
  10. Sinif və psevdosinif? Biri müəllifin atributla verdiyi ad, digəri vəziyyət və ya struktur şərtidir.
  11. Xüsusi şrift necə qoşulur? @font-face və uyğun formatlı şrift faylı ilə; Azərbaycan qliflərini yoxla.
  12. İlkin üslubları necə tapırsan? DevTools Styles və Computed panellərində.

Mərkəzləmə və Flexbox

/* Valideynin ölçüsünü əvvəlcədən bilmədən iki oxda mərkəzləşdirmə */
.parent { display: flex; align-items: center; justify-content: center; }
/* En məhdudlaşdırılıbsa üfüqi mərkəzləşdirmə */
.article { max-width: 60rem; margin-inline: auto; }
Nümunə

flex-direction: column adi şaquli blok axını ilə eyni deyil: hizalanma və boşluğun paylaşılması üçün flex imkanlarını saxlayır. Sıralama dəyişdikdə oxların istiqamətini də izah et.

Git və praktik cavab

Git ilə GitHub-ı, commit ilə push-u, branch ilə merge-i fərqləndir. Konflikt markerlərini necə həll etdiyini göstər. Hər suala əvvəl qısa tərif, sonra bir nümunə və sərhəd halı ilə cavab ver. Cavabını bilmədiyin sualı ayrıca qeyd edib uyğun dərsdə təkrar et.

Əlavə bilik və üç layout tapşırığı

HTML-i validator və brauzer DevTools-u ilə yoxla. background-size: cover sahəni doldurarkən şəkli kəsə, contain isə şəkli bütöv saxlayıb boş yer buraxa bilər. Axıcı layout mövcud yerə uyğun ölçülənir; media sorğusu uyğun şərtdə quruluşu dəyişir.

Dərinləşmə üçün CSS transition vəziyyətlər arasındakı keçidi, keyframes isə mərhələli animasiyanı təsvir edir. Grid ikiölçülü layout, SVG vektor qrafikası, preprosessor CSS-in hazırlanması üçün əlavə sintaksis, sprite isə bir resursda bir neçə təsvirin birləşdirilməsidir. Brauzer dəstəyini və z-index-in stacking context-dən asılılığını ayrıca araşdır.

  1. 400×250px qara bloku həm üfüqi, həm şaquli mərkəzləşdir; dar ekran üçün maksimum eni də məhdudlaşdır.
  2. HTML və CSS ilə 300×200px ağ sahədə 120px diametrli qırmızı dairə quraraq Yaponiya bayrağını təsvir et. Dekorativ qrafikanın məqsədini uyğun adlandır.
  3. 250, 174, 92 və 221 dəyərlərindən sütun diaqramı hazırla. Sütunlara dəyərləri mətnlə də yaz ki, məlumat yalnız ölçü və rəngə bağlı qalmasın.
Əlavə qeydlər və mənbələr

Birinci modulun suallarını mövzu-mövzu təkrarla. Təriflə kifayətlənmə: box model, spesifiklik, Flexbox və Git davranışlarını kiçik nümunə ilə əsaslandır.

Niyə vacibdir?

Versiya nəzarəti əvvəlki işlək vəziyyətə qayıtmağı və başqaları ilə əməkdaşlığı asanlaşdırır.

Əvvəlki biliklər

Bu mövzuda

  • Semantika, alt və display
  • Ölçülər, mövqeləşmə və mərkəzləmə
  • Git və komanda işi

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi
Addım 1 / 3

Qutunun ölçüsünü dəyiş

Padding və box-sizing-i dəyişərək görünən eni müqayisə et. Sonda border-box seç.

Hədəf: Qutunu border-box modelinə keçir.

Məzmun
.element { padding: 12px; }
.element { box-sizing: content-box; }

Özün sına

Bu dərsdəki sualları ucadan cavablandır. Mərkəzləşdirilmiş blok, Yaponiya bayrağı və sütun diaqramı tapşırıqlarını HTML və CSS ilə qur.

Nəticəni necə yoxlayım?

Sualları nümunə ilə cavablandırır, mərkəzləmə və box model tapşırığını işlək kodla izah edir, Git konfliktini həll edə bilirsən.

Gözlənilən nəticə

  • Mərkəz elementi hər iki ox üzrə ortadadır.
  • Ağ düzbucaqlıda qırmızı dairə, diaqramda isə 40/75/100 hündürlüklü sütunlar görünür.
Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Mərkəzləşdirmə üçün grid, bayraq üçün dairə, diaqram üçün isə hündürlüyü verilən sütunlar kifayətdir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main><section class="center"><div>Mərkəz</div></section><div class="flag" role="img" aria-label="Yaponiya bayrağı"><span></span></div><div class="chart" role="img" aria-label="Sütunlar: 40, 75 və 100"><div style="height:40px">40</div><div style="height:75px">75</div><div style="height:100px">100</div></div></main>
</body>
</html>

styles.css

.center{display:grid;place-items:center;min-height:100px;background:#dce9f7}.flag{width:180px;aspect-ratio:3/2;border:1px solid #abbdce;display:grid;place-items:center;margin:20px 0}.flag span{width:60px;height:60px;border-radius:50%;background:#bc002d}.chart{display:flex;align-items:flex-end;gap:16px;height:110px}.chart div{width:48px;background:#214e80;color:white;text-align:center}

qisa-cavablar.txt

1. div və span nə ilə fərqlənir? Hər ikisi ümumi konteynerdir; ilkin display davranışları fərqlidir. Semantik rol lazım olduqda uyğun element seç.

2. main və semantika nə üçündür? Əsas məzmunu və bölmələrin rolunu insanlar, brauzer və köməkçi texnologiyalar üçün aydın edir.

3. alt nə vaxt boş olur? Şəkil dekorativdirsə; mənalı şəklin məqsədi mətnlə verilməlidir.

4. Padding, margin və margin birləşməsi? Padding sərhədin içində, margin çölündədir. Şaquli margin-lər müəyyən blok axınlarında birləşə bilər.

5. Elementin görünən eni necə hesablanır? content-box-da məzmun, padding və border toplanır; border-box-da width bunları əhatə edir.

6. Hansı ölçü vahidlərini tanıyırsan? px, %, em, rem, vw və vh üçün istinad ölçüsünü ayrıca izah et.

7. inline və inline-block fərqi? İkincidə en və hündürlük blok qutusu kimi tətbiq edilir.

8. relative, absolute, fixed, static fərqi? Normal axına və yerləşdirmə konteynerinə təsiri ilə müqayisə et.

9. Spesifiklik və !important? Kaskadın hissələridir; səbəbi tapmadan vacibliyi artırmaq baxımı çətinləşdirir.

10. Sinif və psevdosinif? Biri müəllifin atributla verdiyi ad, digəri vəziyyət və ya struktur şərtidir.

11. Xüsusi şrift necə qoşulur? `@font-face` və uyğun formatlı şrift faylı ilə; Azərbaycan qliflərini yoxla.

12. İlkin üslubları necə tapırsan? DevTools Styles və Computed panellərində.

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.