HTML CSS

CSS — Cascading Style Sheets (kaskadli uslub jadvallari) degani.

CSS juda ko‘p ishni tejaydi. U bir vaqtda bir nechta veb-sahifa maketini boshqara oladi.

CSS = stillar va ranglar

Manipulate Text

Colors, Boxes

CSS nima?

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

CSS yordamida rangni, shriftni, matn o‘lchamini, elementlar orasidagi oraliqlarni, elementlarning qanday joylashtirilishi va tartibga solinishini, qanday fon rasmlari yoki fon ranglaridan foydalanishni, turli qurilmalar va ekran o‘lchamlari uchun turli ko‘rinishlarni va yana ko‘p narsalarni boshqarishingiz mumkin!

Maslahat: kaskadlanish deganda ota elementga qo‘llangan uslub uning ichidagi barcha farzand elementlarga ham qo‘llanishi tushuniladi. Demak, body ichidagi matn rangini "blue" deb belgilasangiz, body ichidagi barcha sarlavhalar, paragraflar va boshqa matn elementlari ham shu rangda bo‘ladi (agar boshqa rangni alohida belgilamasangiz)!

CSS’dan foydalanish

CSS HTML hujjatlariga 3 xil usulda qo‘shilishi mumkin:

Inline (ichki) - HTML elementlari ichida style atributidan foydalanib
Internal (internal) - <head> bo‘limidagi <style> elementidan foydalanib
External (tashqi) - tashqi CSS fayliga havola qilish uchun <link> elementidan foydalanib

CSS qo‘shishning eng keng tarqalgan usuli — uslublarni tashqi CSS fayllarida saqlashdir. Biroq, biz bu darslikda inline va internal uslublardan foydalanamiz, chunki bu ko‘rsatish osonroq va sizga o‘zingiz sinab ko‘rish osonroq bo‘ladi.

Qator ichidagi (inline) CSS

Inline CSS bitta HTML elementiga o‘ziga xos uslub qo‘llash uchun ishlatiladi.

Inline CSS HTML elementining style atributidan foydalanadi.

Quyidagi misol <h1> elementining matn rangini ko‘k rangga, <p> elementining matn rangini esa qizil rangga sozlaydi:

Misol

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

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

O‘zingiz sinab ko‘ring »

Ichki (internal) CSS

Internal CSS bitta HTML sahifa uchun uslub belgilash uchun ishlatiladi.

Internal CSS HTML sahifaning <head> bo‘limida, <style> elementi ichida belgilanadi.

Quyidagi misol (shu sahifadagi) BARCHA <h1> elementlarining matn rangini ko‘k rangga, BARCHA <p> elementlarining matn rangini esa qizil rangga sozlaydi. Bundan tashqari, sahifa "powderblue" fon rangi bilan ko‘rsatiladi:

Misol

<!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>

O‘zingiz sinab ko‘ring »

Tashqi (external) CSS

Tashqi uslublar jadvali (external style sheet) ko‘p HTML sahifalar uchun uslub belgilash uchun ishlatiladi.

Tashqi uslublar jadvalidan foydalanish uchun uni har bir HTML sahifaning <head> bo‘limiga havola qilib qo‘shing:

Misol

<!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>

O‘zingiz sinab ko‘ring »

Tashqi uslublar jadvali har qanday matn muharririda yozilishi mumkin. Fayl hech qanday HTML kodini o‘z ichiga olmasligi va .css kengaytmasi bilan saylanishi shart.

"styles.css" fayli quyidagicha ko‘rinadi:

"styles.css":

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

Maslahat: tashqi uslublar jadvali yordamida faqat bitta faylni o‘zgartirib, butun veb-sayt ko‘rinishini yangilashingiz mumkin!

CSS ranglar, shriftlar va o‘lchamlar

Bu yerda biz ba’zi ko‘p ishlatiladigan CSS xususiyatlarini ko‘rsatamiz. Ular haqida keyinroq ko‘proq o‘rganasiz.

CSS color xususiyati ishlatiladigan matn rangini belgilaydi.

CSS font-family xususiyati ishlatiladigan shriftni belgilaydi.

CSS font-size xususiyati ishlatiladigan matn o‘lchamini belgilaydi.

Misol

CSS color, font-family va font-size xususiyatlaridan foydalanish:

<!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>

O‘zingiz sinab ko‘ring »

CSS chegara

CSS border xususiyati HTML elementi atrofidagi chegara(chegaraviy yo‘l)ni belgilaydi.

Maslahat: deyarli barcha HTML elementlariga chegara belgilashingiz mumkin.

Misol

CSS border xususiyatidan foydalanish:

p {
border: 2px solid powderblue;
}

O‘zingiz sinab ko‘ring »

CSS ichki chekinish (padding)

CSS padding xususiyati matn va chegara o‘rtasidagi ichki oraliqni (bo‘sh joyni) belgilaydi.

Misol

CSS border va padding xususiyatlaridan foydalanish:

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

O‘zingiz sinab ko‘ring »

CSS tashqi chekinish (margin)

CSS margin xususiyati chegaradan tashqaridagi tashqi oraliqni belgilaydi.

Misol

CSS border va margin xususiyatlaridan foydalanish:

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

O‘zingiz sinab ko‘ring »

Tashqi CSS’ga havola

Tashqi uslublar jadvallariga to‘liq URL yoki joriy veb-sahifaga nisbatan yo‘l yordamida havola qilinishi mumkin.

Misol

Bu misol uslublar jadvaliga havola qilish uchun to‘liq URL dan foydalanadi:

O‘zingiz sinab ko‘ring »

Misol

Bu misol joriy veb-saytdagi html papkasida joylashgan uslublar jadvaliga havola qiladi:

O‘zingiz sinab ko‘ring »

Misol

Bu misol joriy sahifa bilan bir xil papkada joylashgan uslublar jadvaliga havola qiladi:

O‘zingiz sinab ko‘ring »

Fayl yo‘llari haqida HTML fayl yo‘llari bobida ko‘proq o‘qishingiz mumkin.

Bob xulosasi

Inline uslub berish uchun HTML style atributidan foydalaning
Internal CSS belgilash uchun HTML <style> elementidan foydalaning
Tashqi CSS fayliga havola qilish uchun HTML <link> elementidan foydalaning
<style> va <link> elementlarini saqlash uchun HTML <head> elementidan foydalaning
Matn ranglari uchun CSS color xususiyatidan foydalaning
Matn shriftlari uchun CSS font-family xususiyatidan foydalaning
Matn o‘lchamlari uchun CSS font-size xususiyatidan foydalaning
Chegaralar uchun CSS border xususiyatidan foydalaning
Chegara ichidagi bo‘sh joy uchun CSS padding xususiyatidan foydalaning
Chegaradan tashqaridagi bo‘sh joy uchun CSS margin xususiyatidan foydalaning

Maslahat: CSS haqida CSS darsligimizda ancha batafsil o‘rganishingiz mumkin.

HTML stil teglari

Tag	Tavsif
<style>	HTML hujjati uchun uslub ma’lumotlarini belgilaydi
<link>	Hujjat va tashqi manba o‘rtasidagi aloqani belgilaydi

Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.

Video: HTML’da CSS

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish