|
№3 CSS dars - Sintaksis va ishlash printsipi: ID, CLASS, STYLEBog'liq CSS darslari 71f5cde2cc46d03f58a1e5132d2d38ba№3 CSS dars - Sintaksis va ishlash printsipi: ID, CLASS, STYLE
Oldingi darslardan CSS haqida biroz bo‘lsa ham ma'lumotga ega bo‘ldingiz. Bu maqola
to‘liq, CSS kodlarini HTML kodlarida ishlatishni ko‘rsatib o‘taman. CSS kodlarini
tushuntirib o‘tmayman, faqat ulashni va yozilish sintaksisini ko‘rsataman, keyingi
maqolalardan boshlab, CSS stillarini birma-bir ko‘rib chiqamiz. CSS natijalarini
brouzerda ko‘rish mumkin bo‘ladi, yana bir narsa, CSSga tegishli barcha darslar
misollari "Firefox Mozilla" brouzeri orqali tekshiriladi, agar sizda boshqa brouzer
bo‘lsa, misol natijalari sal farq qilishi mumkin.
CSS stillar quyidagicha yoziladi:
H1{color: blue; font-size:14 px}
1. Selektor nomi - yozilgan stilni qaysi tegda foydalanish(misolda H1).
2. Qavs - stillar boshlanganini bildiradi.
3. Stil xususiyati(Свойство) - qaysi stil xususiyatidan foydalanishni
o‘rnatish(misolda color, font-size).
4. Qiymat - tanlangan stil xususiyat qiymati(misolda blue, 14 px).
Agar bir necha stil xususiyatlaridan foydalaniladigan bo‘lsak, ular qo‘shtirnoq(;) orqali
ajratiladi, oxirida qo‘shtirnoq qo‘yish shart emas. Stil xususiyatlari yig‘indisi shaklli qavs
ichiga olinishi shart({ }) va har bir stil xususiyatidan so‘ng, uning qiymatini berishdan
oldin ikki nuqta(:) qo‘yilishi kerak.
Sintaksisi bilan tanishib chiqdik, endi HTML kodga ulashni ko‘rsatib o‘taman. Bir necha
xil usulda ulash mumkin:
1. CSS stillarini alohida faylga yozib, bu faylni HTML kodida chaqirib ishlatish mumkin.
Misol uchun, "style.css" nomli fayl yaratib ichiga quyidagi stil xususiyat va qiymatlarini
kiritamiz.
1
h1{color:blue;font-size:14px}
Undan so‘ng, " index.html" fayl yaratib, bu faylni yuqorida yaratgan " style.css" nomli
fayl bilan bitta papkaga joylashtiramiz, so‘ng bu faylga quyidagi HTML teglarni
kiritamiz(HTML teglar bilan tanishish).
1
2
3
4
5
6
7
8
9
CSS <a href="/polygon-uskunasida-internet-grafikasini-yaratish.html">bilan ishlash</a>
href="style.css" >
|
| |
