HTML 
CSS 
JavaScript 
PHP 
SQL 
Python HTMLda CSS ni qo'llash
CSS bu – Cascading Style Sheets ya’ni "Kaskadli uslublar jadvali " hisoblanadi
CSS juda ko’p vaqtni tejaydi hamda u bir vaqtning o’zida bir nechta veb-sahifalarning stillarini boshqarishi mumkin.
CSS nima?
Cascading Style Sheets (CSS) veb-sahifa tartibini (style) formatlash uchun ishlatiladi.
CSS yordamida siz rangni, shriftni, matn hajmini, elementlar orasidagi bo’shliqni, elementlarning joylashuvini, fon uchun qanday rasmlar yoki fon ranglarning ishlatilishini, turli xil qurilmalar va ekran o’lchamlari uchun har xil displeylarni va boshqalarni boshqarishingiz mumkin!
Eslatma: KASKADLASH deganda barcha elementlarga tegishli bo’lgan uslub nazarda tutiladi. Demak, <body>ni rangini «ko’k»ga o’zgartirsangiz, ushbu elementning ichidagi barcha sarlavhalar, paragraflar va boshqa matn elementlari ham «ko’k» rangga kiradi (istisno sifatida boshqa bir uslub kiritilmasa)!
CSSdan foydalanish
HTML hujjatlariga CSS-ni 3 usul bilan qo’shish mumkin:
- Inline (kiritilgan) – HTML elementlari ichida
styleatributdan foydalanib - Internal (ichki) –
<style>elementidan<head>qismida foydalanib - External (tashqi) – tashqi CSS fayliga
<link>elementi yordamida bog’lanib
CSS-ni qo’shishning eng keng ko'p tarqalgan usuli bu tashqi CSS fayllaridagi uslublarni saqlash. Biroq, ushbu darslikda biz inline va internel uslublardan foydalanamiz, chunki buni namoyish qilish va sinab ko’rishingiz osonroq bo'ladi.
Inline CSS
Inline CSS bitta HTML elementga o’ziga xos uslubni qo’llash uchun ishlatiladi.
Inline CSS HTML elementning style atributidan foydalaniladi.
Quyidagi misol <h1> elementining matn rangini "ko’k" rangga, <p> elementining matn rangini esa " qizil" rangga o’zgartiramiz:
Misol:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Ko'k rangli sarlavha</h1>
<p style="color:red;">Qizil rangli paragraf.</p>
</body>
</html>
Natija:
Ko’k rangli sarlavha
Qizil rangli paragraf.
Internal CSS
Internal CSS bitta HTML sahifaning uslubini aniqlash uchun ishlatiladi.
Internal CSS HTML sahifaning <head> qismida,<style> elementi ichida joylashadi.
Quyidagi misol BARCHA <h1> elementlarning (ushbu sahifadagi) matn rangini «ko’k» rangga, BARCHA <p> elementlarning matn rangini «oq» rangga o’zgartiradi. Bundan tashqari, sahifaning foniga «kul rang» o’rnatadi:
Misol:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray;}
h1 {color: blue;}
p {color: white;}
</style>
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
Bu paragraf.
External(tashqi) CSS
External CSS ko’plab HTML-sahifalar uchun uslubni belgilash uchun ishlatiladi.
External CSS qo’llash uchun HTML sahifaning <head> bo’limiga havolani qo’shish kerak:
Misol:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css (faylning nomi) ">
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu esa paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
Bu paragraf.
Maslahat: Tashqi uslublar jadvali yordamida siz bitta veb-saytning ko’rinishini bitta faylni o’zgartirib o’zgartirishingiz mumkin!
CSS ranglari, shriftlari va o’lchamlari
Bu yerda biz keng tarqalgan CSS xususiyatlarini namoyish qilamiz. Keyinchalik ular haqida ko’proq bilib olasiz.
CSS color xususiyati ishlatiladigan matn rangini belgilaydi.
CSS font-family xususiyati ishlatiladigan shriftni belgilaydi.
CSS font-size xususiyati ishlatiladigan matn hajmini belgilaydi
Misol:
<!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>
Natija:
Bu sarlavha
Bu paragraf.
CSS border(chegara)
CSS border xususiyati HTML elementni atrofidagi chegarani belgilaydi.
Eslatma: Siz deyarli barcha HTML elementlari uchun chegarani belgilashingiz mumkin.
Misol:
CSS chegara xususiyatidan foydalanish:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu 1-paragraf.</p>
<p>Bu 2-paragraf.</p>
<p>Bu 3-paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
| Bu 1-paragraf. |
| Bu 2-paragraf. |
| Bu 3-paragraf. |
CSSda to’ldirish (padding)
CSS padding xususiyati matn va chegara orasidagi to’ldirishni (bo’sh joy) belgilaydi.
Misol:
CSS-ning chegara va to’ldirish xususiyatlaridan foydalanish:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu paragraf</p>
<p>Bu paragraf</p>
<p>Bu paragraf</p>
</body>
</html>
Natija:
Bu sarlavha
| Bu paragraf |
| Bu paragraf |
| Bu paragraf |
CSS chegarasi (margin)
CSSning margin xususiyati chegaradan tashqarida marj (bo’sh joy) ni belgilaydi.
Misol:
CSS-ning chegara va marjin xususiyatlaridan foydalanish:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>
<p>Bu paragraf.</p>
<p>Bu paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
| Bu paragraf. |
| Bu paragraf. |
| Bu paragraf. |
Tashqi CSS-ga havola
Tashqi css jadvallarini ulashda to’liq URL manzili yoki joriy veb-sahifaga nisbatan yo’l ko’rsatilishi kerak bo'ladi. Bunga ko'ra css fileda biz o'zgartrishimiz kerak bolgan tag yoki ma'lum bir class yozilib unga html stylke atributi elementlari kabi kiritib ularni o'zgaritishimiz mumkin bo'ladi. Bu togrisida batafsil css darslarimiz o'rganib chiqaiz albatta.
Misol:
Ushbu misol CSS stiliga bo’lgan to’liq url-manzil bilan bog’langan:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css joylashgan manzil/cssnomi.css">
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
Bu paragraf.
Bu misol html papkasida joylashgan veb-saytning css jadvaliga bog’langan:
Misol:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css manzili"> </head> <body> <h1>Bu sarlavha</h1> <p>Bu paragraf.</p> </body> </html>Natija:
Bu sarlavha
Bu paragraf.
Ushbu misol joriy sahifa bilan bir xil papkada joylashgan css jadvaliga bog’langan:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="fayl.css">
</head>
<body>
<h1>Bu sarlavha</h1>
<p>Bu paragraf.</p>
</body>
</html>
Natija:
Bu sarlavha
Bu paragraf.
