CSS Qanday qilib boglash

CSS Qanday qilib boglash


CSS Qanday qilib boglash

Bugungi darsimizda qanday qilib HTML kodlari orasiga CSS ni qo'shishni o'rganamiz. Siz brauzeringizni tayyorlab turing, biz darsimizni boshlaymiz. CSS ni qo'shishni 3 xil yo'li mavjud bo'lib ular quyidagilar:

  • Tashqi dizayn orqali
  • Ichki dizayn orqali
  • Ichki qator orqali

Tashqi dizayn orqali

Tashqi dizayn orqali siz o'z veb sahifangizni ko'rinishini oddiygina bitta faylni o'zgartirish orqali amalga oshirasiz. Buning uchun har bir veb-sahifada tashqi dizayn uchun "file link" elementi orqali chaqirilgan bo'lishi kerak. <link> elementni <head> bo'limini ichida yuritiladi.

Namuna:

O'zingni Sinab Ko'r
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Ushbu fayl biror bir matn muharririda yozilgan bo'lishi, unda hech qanaqa html teglari ishlatilmasligi va .css bilan saqlangan bo'lishi kerak. Quyida siz &blockquote;meningdizaynim.css&blockquote; fayl bilan tanishasiz.

Namuna:

O'zingni Sinab Ko'r
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Ichki dizayn orqali

Biror bir veb sahifaga o'ziga xos dizayn bermoqchi bo'lsak, ichki dizayndan foydalanganimiz qulay. Buning uchun barcha yoziladigan kodlar <style> elementini ichida bo'ladi, o'z navbatida <style>elementi <head> elementini ichida bo'ladi.

Namuna:

O'zingni Sinab Ko'r
<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Ichki qator orqali

Ichki qator orqali biz veb-sahifadagi aynan biror elementga o'ziga xos ko'rinish berish uchun ishlatamiz.

Namuna:

O'zingni Sinab Ko'r
<h1 style="color:blue;margin-left:30px;">Bu Sarlavha </h1>

Turli xil ko'rinishli dizayn

Bulardan tashqari, yana bitta yo'l orqali css chaqirishimiz mumkin. Bu yo'l turli xil ko'rinishli dizayn bo'lib, bu yo'l orqali htmldagi aytaylik biror elementga odatdagidan boshqacharoq ko'rinish berish kerak, shu yo'l orqali biror elementga o'zi meros qilib olgan ko'rinishni o'zgartirishimiz mumkin. Tasavvur qiling tashqi ko'rish orqali <h1> ning elementini rangi yashil deb e'lon qilingan bo'lsin.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
                h1 {
                color: navy;
                }
            

Agar ichki ko'rinish, tashqi ko'rinishdan keyin e'lon qilingan bo'lsa, <h1> elementi ko'k tusni oladi.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
                <head>
                <link rel=''stylesheet'' type=''text/css'' href=''mystyle.css''>
                <style>
                        h1 {
                            color: orange;
                        }
                </style>
                </head>
            

Agar tashqi ko'rinish, ichki ko'rinishdan keyin e'lon qilingan bo'lsa, <h1> elementi yashil tusni oladi.

Namuna:

O'zingni Sinab Ko'r
<!DOCTYPE html>
                <head>
                <style>
                        h1 {
                            color: orange;
                        }
                        </style>
                <link rel=''stylesheet'' type=''text/css'' href=''mystyle.css''>

                    </head>
            

Ketma-ketlik tartibi

Agar veb sahifada bir nechta yuqorida aytilgan dizaynlar ishlatilmoqchi bo'lsa qaysi biri birinchi bo'lib ishlatiladi? Odatga ko'ra, birinchi ichki qator undan keyin esa qolgan ikkitasi ishlatiladi. Siz yozib chiqqan css kodlarini turli xil brauzerlar bir oz farq bilan ochishi mumkin, shuni ham unutmang!


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017