<style>
Misol
HTML hujjatiga oddiy uslublar jadvalini qo‘llash uchun <style> elementidan foydalanish:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<style> tegi hujjat uchun uslub ma’lumotlarini (CSS) belgilashda ishlatiladi.
<style> elementi ichida HTML elementlari brauzerda qanday ko‘rsatilishi kerakligini belgilaysiz.
<style> elementi hujjatning <head> bo‘limi ichiga joylashtirilishi shart.
Maslahatlar va eslatmalar
Eslatma: Brauzer uslublar jadvalini o‘qiganda HTML hujjatini undagi ma’lumotlarga muvofiq formatlaydi. Agar turli uslublar jadvallarida bir xil selektor (element) uchun ba’zi xususiyatlar belgilangan bo‘lsa, eng oxirgi o‘qilgan uslublar jadvalidagi qiymat ishlatiladi (quyidagi misolga qarang)!
Maslahat: Tashqi uslublar jadvaliga bog‘lanish uchun <link> tegidan foydalaning.
Maslahat: Uslublar jadvallari haqida ko‘proq bilish uchun CSS darsligimizni o‘qing.
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <style> | Ha | Ha | Ha | Ha | Ha |
Atributlar
| Atribut | Qiymat | Tavsif |
|---|---|---|
| media | media_query | Media resurs qaysi media/qurilma uchun optimallashtirilganini belgilaydi |
| type | text/css | <style> tegining media turini belgilaydi |
Global atributlar
<style> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<style> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
Bir xil elementlar uchun bir nechta uslub:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
HTML darsligi: HTML CSS
CSS darsligi: CSS darsligi
HTML DOM ma’lumotnomasi: Style obyekti
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <style> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
style {
display: none;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!