CSS ni alohida hujjatga saqlash

CSS ni o'tgan darsda <style> unsurining ichida yozishni o'rgandik.

<style>    div {        background-color: red;        color: blue;    }</style>
<div>Salom</div>
Salom

Endi CSS ni alohida hujjatga saqlashni o'rganaylik.

Biz index.html hujjatda ishlayapmiz, to'g'rimi? Uning yoniga uslub.css hujjatni qo'shib qo'ying. Ikkala hujjat bitta jildda joylashishi lozim.

uslub.css shunday tarkibga ega bo'ladi.

div {
    background-color: red;
    color: blue;
}

Va index.html shunday tarkibga ega bo'ladi.

<div>Salom</div>

Endi uslub.css ni index.html ga ulab qo'yish kerak. Shu uchun index.html ni sal o'zgartiramiz.

<link rel="stylesheet" href="uslub.css">
<div>Salom</div>

Bo'ldi, endi uslub.css ulanib hamma narsa ishlab ketish kerak. Salom so'zi ko'k, orqasi esa qizil bo'lib qolishi kerak.

Muammolar

uslub.css to'g'ri ulanmagan bo'lsa Salom so'zingiz na ko'k bo'ladi, na orqasi qizil bo'ladi.

Xar hil jildda joylashgan

Birinchi bo'lib tekshiriladigan narsa - index.html bilan uslub.css bitta jildda turibdimi?

Noto'g'ri ulangan

Brauzerga boramiz, sahifamizni ko'ramiz, va sahifamizga sichqonchaning o'n tugmasi bilan bosamiz. So'ng inspect tanlaymiz.

Tekshiruvchi
Tekshiruvchi

Shunday narsa paydo bo'lishi kerak. Uni tekshiruvchi deb ataymiz.

Unsurlar
Unsurlar

Console ga bosamiz.

Qobiq
Qobiq

Xatolikni ko'ryapmiz - Failed to load resource: net::ERR_FILE_NOT_FOUND uslubs.css:1. Bu xatolikni manosi qanday? Bu xatolikda brauzer "faylni topa olmayapman" bizga deyapti. Faylni nomiga etibor bering - uslubs.css. Bu nom noto'g'ri, to'g'ri nom uslub.css. Shundan kelib chiqadiki, uslub.css ni index.html ga ulaganimizda <link rel="stylesheet" href="uslub.css"> o'rniga <link rel="stylesheet" href="uslubs.css"> deb yozib qo'yibmiz.

Elements ga qaytib, ko'rsatilgan uchburchakni bosamiz.

Unsurlar
Unsurlar

Bosganimizdan keyin shuni ko'ramiz.

Unsurlar
Unsurlar

Haqiqattan ham uslub.css o'rniga uslubs.css deb yozib qo'yibmiz. Shuni to'g'rilasak, sahifamiz to'g'ri ishlab ketishi kerak.

CSS ni o'zgartiryapman, lekin sahifam o'zgarmayapti

Brauzer fayllarni qayta yuklamaslik uchun ularni eslab qoladi. Shu sababdan ehtimol brauzer uslub.css faylni eslab qo'lgan, va uni o'zgartirsangiz ham brauzer baribir elsab qolgan talqinini sizga ko'rsataveradi.

Brauzer eski uslub.css o'rniga yangisini ko'rsatish uchun birinchi bo'lib tekshiruvchini ochamiz. So'ng brauzerning tepa chap burchagida joylashgan dumaloq o'qni sichqonchaning o'n tugmasi bilan bosamiz. Paydo bo'lgan ro'yxatdan Hard Reload ni tanlaymiz. Va natijada brauzer yangi uslub.css dan foydalanishi kerak.

Qattiq yangilash
Qattiq yangilash