MohirDox

Ko'rinishi

HTML Uslublar - CSS ​

CSS bu Cascading Style Sheets (Kaskadli uslublar jadvali) degan ma'noni anglatadi.
CSS yordamida bir nechta veb sahifalarning tartibini boshqarish va ko'p ishni tejash mumkin.

CSS nima? ​

Cascading Style Sheets (CSS) veb sahifa tartibini formatlash uchun ishlatiladi.

CSS yordamida siz matn rangini, shriftini, o'lchamini, elementlar orasidagi masofani, elementlarning joylashuvi va tartibini, fon rasmlari yoki ranglarini, turli qurilmalar va ekran o'lchamlari uchun ko'rsatishni va yana ko'plab narsalarni boshqarishingiz mumkin!

TIP

Kaskadli so'zi, uslub ota elementga qo'llansa, uning ichidagi barcha bolalar elementlariga ham ta'sir qiladi degan ma'noni anglatadi. Masalan, body matnining rangini "ko'k" deb belgilasangiz, body ichidagi barcha sarlavhalar, paragraf va boshqa matn elementlari ham ko'k rangda bo'ladi (agar boshqa rang ko'rsatilmagan bo'lsa)!

CSSdan foydalanish ​

CSSni HTML hujjatlariga 3 xil usulda qo'shish mumkin:

  • Inline - HTML element ichida style atributi orqali
  • Internal - <head> bo'limida <style> elementi orqali
  • External - tashqi CSS faylga <link> elementi orqali bog'lash

Ko'pincha CSS uslublari tashqi CSS fayllarda saqlanadi. Lekin bu darsda inline va internal uslublardan foydalanamiz, chunki bu ko'rsatish va o'zingiz sinab ko'rish uchun qulay.

Inline CSS ​

Inline CSS bir HTML elementga alohida uslub berish uchun ishlatiladi.

Inline CSS HTML elementning style atributi orqali yoziladi.

Quyidagi misolda <h1> elementining matn rangi ko'k, <p> elementining matn rangi esa qizil qilib belgilangan:

html
<h1 style="color:blue;">Ko'k Sarlavha</h1>

<p style="color:red;">Qizil paragraf.</p>

O'zingiz sinab ko'ring »

Internal CSS ​

Internal CSS bir HTML sahifa uchun uslub belgilashda ishlatiladi.

Internal CSS HTML sahifaning <head> bo'limida <style> elementi ichida yoziladi.

Quyidagi misolda sahifadagi barcha <h1> elementlarining matn rangi ko'k, barcha <p> elementlarining matn rangi qizil, sahifa fon rangi esa "powderblue" qilib belgilangan:

html
<!DOCTYPE html>
<html>
<head>
<style>
  body {background-color: powderblue;}
  h1   {color: blue;}
  p    {color: red;}
</style>
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

O'zingiz sinab ko'ring »

External CSS ​

Tashqi uslub jadvali bir nechta HTML sahifalar uchun uslub belgilashda ishlatiladi.

Tashqi uslub jadvalidan foydalanish uchun har bir HTML sahifaning <head> bo'limiga unga havola qo'shiladi:

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="uslublar.css">
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

O'zingiz sinab ko'ring »

Tashqi uslub jadvali oddiy matn muharririda yoziladi. Faylda HTML kodi bo'lmasligi kerak va .css kengaytmada saqlanadi.

Quyida uslublar.css fayli ko'rinishi:

css
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

TIP

Tashqi uslub jadvali yordamida butun veb sayt ko'rinishini faqat bir faylni o'zgartirib o'zgartirishingiz mumkin!

CSS Ranglar, Shriftlar va O'lchamlar ​

Quyida tez-tez ishlatiladigan CSS xossalari ko'rsatilgan. Ularni keyinroq batafsil o'rganasiz.

  • CSS color xossasi matn rangini belgilaydi.
  • CSS font-family xossasi ishlatiladigan shriftni belgilaydi.
  • CSS font-size xossasi matn o'lchamini belgilaydi.
html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>

</body>
</html>

O'zingiz sinab ko'ring »

CSS Border ​

CSS border xossasi HTML element atrofida ramka chizadi.

Maslahat: Deyarli barcha HTML elementlarga ramka belgilash mumkin.

css
p {
  border: 2px solid powderblue;
}

O'zingiz sinab ko'ring »

CSS Padding ​

CSS padding xossasi matn va ramka orasidagi bo'shliqni belgilaydi.

css
p {
  border: 2px solid powderblue;
  padding: 30px;
}

O'zingiz sinab ko'ring »

CSS Margin ​

CSS margin xossasi ramka tashqarisidagi bo'shliqni belgilaydi.

css
p {
  border: 2px solid powderblue;
  margin: 50px;
}

O'zingiz sinab ko'ring »

Tashqi CSSga havola ​

Tashqi uslub jadvaliga to'liq URL yoki joriy sahifaga nisbatan yo'l orqali havola qilish mumkin.

To'liq URL:

html
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

O'zingiz sinab ko'ring »

Nisbiy yo'l:

html
<link rel="stylesheet" href="/html/styles.css">

O'zingiz sinab ko'ring »

Bir papkada:

html
<link rel="stylesheet" href="uslublar.css">

TIP

Fayl yo'llari haqida batafsil HTML Fayl Yo'llari bo'limida o'qishingiz mumkin.

Bo'lim yakuni ​

  • Inline uslub uchun HTML style atributidan foydalaning
  • Internal CSS uchun HTML <style> elementidan foydalaning
  • Tashqi CSS faylga havola uchun HTML <link> elementidan foydalaning
  • <style> va <link> elementlarini HTML <head> bo'limida saqlang
  • Matn ranglari uchun CSS color xossasidan foydalaning
  • Matn shriftlari uchun CSS font-family xossasidan foydalaning
  • Matn o'lchamlari uchun CSS font-size xossasidan foydalaning
  • Ramka uchun CSS border xossasidan foydalaning
  • Ramka ichidagi bo'shliq uchun CSS padding xossasidan foydalaning
  • Ramka tashqarisidagi bo'shliq uchun CSS margin xossasidan foydalaning

TIP

CSS haqida ko'proq CSS Darsligi bo'limida o'qishingiz mumkin.

HTML Uslub Teglari ​

TegTavsifi
<style>HTML hujjat uchun uslub ma'lumotini belgilaydi
<link>Hujjat va tashqi resurs o'rtasida bog'lanishni belgilaydi

TIP

Barcha HTML teglar ro'yxatini HTML Teglar Ma'lumotnomasi bo'limida topishingiz mumkin.