CSS

CSS qisqartmasi, Cascading Style Sheets degan ma'noni anglatadi. CSS ko'p ishlarni tejaydi. U bilan bir vaqtning o'zida bir nechta veb-sahifalar tartibini boshqarishi mumkin.

CSS nima ?

CSS veb-sahifa dizaynini o'zgartirish uchun ishlatiladi.

CSS yordamida rangni, shriftni, matn o'lchamini, elementlar orasidagi masofani, elementlar qanday joylashishini, orqa fondagi rasmi yoki orqa fon ranglari qanday bo'lishi, turli qurilmalar va ekran o'lchamlari uchun qanday ko'rinishini boshqarishingiz mumkin.

Maslahat: Kaskad so'zi ota elementga berilgan stillar uning ichidagi barcha bola elementlariga ham tasir qilishini anglatadi. Agar siz bodyning matn rangini "ko'k" rang qilsangiz, sahifadagi barcha sarlavhalar, paragraflar va body ichidagi boshqa matn elementlari ham bir xil rangda bo'ladi (boshqa rang bermaguningizgacha)!

CSSdan foydalanish

CSSni HTMLsahifaga 3 xil yo'l bilan qo'shiladi:

Inline - HTML elementlari ichida style attributidan foydalanib
Internal - <head> qismda <style> elementidan foydalanib
External - Tashqi CSS faylni ulash uchun <link> elementidan foydalanib

CSSni ulashning keng tarqalgan usuli stillarni tashqi CSS fayllarda saqlashdir. Lekin biz bu qo'llanmada inline va internal usullaridan foydalanamiz, chunki uni ko'rsatib berish va o'zingiz ham sinab ko'rishingiz osonroq bo'ladi.

Inline CSS

Inline CSS aynan bir elementga, uning o'ziga xos stil berish uchun ishlatiladi.

Inline CSS elementning style atributidan foydalanadi.

Quyidagi misol, <h1> elementidagi matn rangini ko'k va <p> elementidagi matn rangini qizil rangga o'zgartiradi:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

W3Schools online HTML editorwww.w3schools.com

Internal CSS

Internal CSS bitta HTML sahifaga xos stilni aniqlash uchun ishlatiladi.

Internal CSS HTML sahifaning <head> qismida <style> elementining ichida yoziladi.

Quyidagi misol ushbu sahifadagi barcha <h1> elementlarning matn rangini ko‘k rangga va barcha <p> elementlarning matn rangini esa qizil rangga o'zgartiradi. Bundan tashqari, sahifaning orqa fon ranggi "powderblue" rangi bilan ko'rsatiladi:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

W3Schools online HTML editorwww.w3schools.com

External CSS

Bir qancha HTML sahifalarga stil berish uchun external CSSdan foydalaniladi.

Tashqi stillardan foydalanish uchun har bir HTML sahifning <head> qismiga havola qoʻshing:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

W3Schools online HTML editorwww.w3schools.com

Tashqi stillar istalgan matn muharririda yozilishi mumkin. Stillar yoziladigan faylda hech qanday HTML kod bo'lmaydi va .css kengaytmasi bilan saqlanishi kerak.

"styles.css" fayli quyidagicha ko'rinadi:

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

Maslahat: Tashqi stillar yordamida bitta faylni o'zgartirish orqali butun veb-sayt ko'rinishini o'zgartirishingiz mumkin!

CSS ranglar, shriftlar va o'lchamlar

Bu qismda tez-tez ishlatiladigan ba'zi CSS xususiyatlarini ko'rsatamiz. Keyinchalik esa ular haqida ko'proq bilib olasiz.

CSSning color xususiyati matn rangi qanday bo'lishi kerakligini belgilaydi.

CSSning font-family xususiyati matn shrifti qanday bo'lishi kerakligini belgilaydi.

CSSning font-size xususiyati matn o'lchami qanday bo'lishi kerakligini belgilaydi.

CSSning color, font-family va font-size xususiyatlaridan foydalaning

<!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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

W3Schools online HTML editorwww.w3schools.com

CSS Border

CSSning border xususiyati HTML elementining atrofidagi chegarasini ifodalaydi.

Maslahat: Deyarli barcha HTML elementlari uchun chegara belgilashingiz mumkin.

CSSning border xususiyatidan foydalaning:

p {
  border: 2px solid powderblue;
}

W3Schools online HTML editorwww.w3schools.com

CSS Padding

CSSning padding xususiyati matn va uning chegara o'rtasidagi bo'sh joyni bildiradi.

CSSning border va padding xususiyatidan foydalanish

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

W3Schools online HTML editorwww.w3schools.com

CSS Margin

CSSning margin xususiyati chegaraning tashqi tomonidagi bo'sh joyni bildiradi.

CSSning border va margin xususiyatidan foydalaning:

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

W3Schools online HTML editorwww.w3schools.com

Tashqi CSS faylni ulash

Tashqi stillarni, uning to'liq URL manzili yoki veb-sahifa fayliga nisbatan ichki joylashuv yo'li bilan ulash mumkin.

Bu misolda CSS faylning to'liq URLini ulashdan foydalanilgan:

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

W3Schools online HTML editorwww.w3schools.com

Ushbu misolda joriy veb-saytdagi html papkasida joylashgan CSS fayl ulangan:

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

W3Schools online HTML editorwww.w3schools.com

Ushbu misolda joriy sahifa bilan bir xil papkada joylashgan CSS fayl ulangan:

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

W3Schools online HTML editorwww.w3schools.com

Bo'lim xulosasi

Inline stillar uchun HTMLda style attributidan foydalaniladi
Internal CSS uchun HTMLda <style> elementidan foydalaniladi
External CSS faylni ulash uchun HTMLda <link> elementidan foydalaniladi
Mantnning rangini o'zgartirish uchun CSSning color xususiyatidan foydalaniladi
Mantnning shriftini o'zgartirish uchun CSSning font-family xususiyatidan foydalaniladi
Mantnning o'lchamini o'zgartirish uchun CSSning font-size xususiyatidan foydalaniladi
Chegara berish uchun CSSning border xususiyatidan foydalaniladi
Chegara ichida bo'sh joy berishda uchun CSSning padding xususiyatidan foydalaniladi
Chegaraning tashqi qismida bo'sh joy berish uchun CSSning margin xususiyatidan foydalaniladi

HTML stil teglari

Teg

Tavsif

<style>

HTML sahifa uchun still ma'lumotlarini ifodalaydi

<link>

Sahifa va tashqi resurs o'rtasini bog'lashni ifodalaydi

PreviousHSL NextHavolalar

Last updated 2 years ago

hashtagCSS nima ?

hashtagCSSdan foydalanish

hashtagInline CSS

hashtagInternal CSS

hashtagExternal CSS

hashtagCSS ranglar, shriftlar va o'lchamlar

hashtagCSS Border

hashtagCSS Padding

hashtagCSS Margin

hashtagTashqi CSS faylni ulash

hashtagBo'lim xulosasi

hashtagHTML stil teglari

CSS nima ?

CSSdan foydalanish

Inline CSS

Internal CSS

External CSS

CSS ranglar, shriftlar va o'lchamlar

CSS Border

CSS Padding

CSS Margin

Tashqi CSS faylni ulash

Bo'lim xulosasi

HTML stil teglari