4-CSS (Cascading Style Sheets) asoslari. Sеlеktor, klass, idеntifikatorlar.
advertisement
CSS asoslari. Web-sahifani stillar yordamida
formatash
Kaskadlangan stillar jadvali (CSS - Cascading Style Sheets)
HTML tilining imkoniyatlarini moslashuvchan boshqarish
orqali kengaytirish va
yaratadi.
web-sahifani formatlash imkonini
Stillarni qo’llsh usullari
Stillar qo’llash
1. Inline CSS: teg ichida, masalan:
<p style=“font-size:12px”>Salom</p>
2. Internal CSS: <head> bo’limidagi <style> tegi
yordamida stillar to’plami yaratiladi va sahifadagi
tegga biriktiriladi. Masalan:
<head>
<style type="text/css">
.matn1 { font-size:24px; color:red;}
</style>
</head>
<body>
<p class=“matn1”> bu qizil rangli 24 px li matn</p>
</body>
3. External CSS: alohida .css kengaytmali faylga stiller
to’plami yoziladi, sahifaga bog’lanadi va tegishli
teglarga kerakli stillar biriktiriladi. Masalan:
index.html fayli html kodi:
stil.css fayli stil
<!DOCTYPE html>
matni:
.matn1{
color:blue;
font-size:40px;}
.matn2{
color:green;
font-size:28px;}
<html>
<head>
<title>Stillar bilan ishlash</title>
<link rel="stylesheet" type="text/css"
href="stil.css">
</head>
<body>
<p class="matn1">Bu ko'k rangli 40 px li
matn</p>
<p class="matn2">Bu yashil rangli 28 px li
matn</p>
</body>
</html>
Natija:
Stil ko’rinishi
Selector-HTML hujjatdan elementlarni ajratib
tanlab olish ishlatiladigan belgilash.
Selektorlar quydagicha bo’lishi mumkin:
1. Element (Tag)
2. Class
3. ID
4. Attroibute
5. Universal
Element (TAG) selektori element nomi asosida
HTML elementlarini tanlaydi.
p {
text-align: center;
color: red;
}
<body>
<p>Barcha xatboshilar qizil rangda va markazdan chop
etiladi</p>
<p id="para1">Bu xatboshi ham</p>
<p>Bu xatboshi ham</p>
</body>
ID selektori muayyan elementni tanlash uchun HTML
elementining
id
atributidan
foydalanadi.
Elementning identifikatori sahifada takrorlanmasdir, shuning
uchun id selektori bitta elementni tanlash uchun ishlatiladi!
Muayyan identifikatorga ega elementni tanlash uchun xesh (#)
belgisini va undan keyin element identifikatorini nomi yoziladi.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Salom, bu ID stil ta’sir etuvchi xatboshi!</p>
<p>Bu xatboshiga stil ta’sir etmaydi</p>