CSS da bog'lash turlari

CSS Qanday qilib bog'lash

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:

<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:

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:

<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:

<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:

<!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:

<!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:

<!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!