CSS-ni HTML-ga qanday qilib to'g'ri ulash mumkin
Keling, CSS-ni web-saytlar va ilovalarga qanday qo'llashni ko'rib chiqaylik.
CSS - bu uslublar jadvali. Bu sizning saytingiz qanday ko'rinishga, dizayndagi dizaynga, shriftlarga, dizaynning joy'likka va tashkilot ko'rinishlarga bog'. Buning uchun veb-saytlar va veb-ilovalarni keraklida CSS-ni ishlatmasdan qilish ishlamaydi. Loyihangizni ishlab chiqarishda ushbu vositadan to'g'ri ketkazishga olish.
HTMLda uslublarni o'rnatish
HTMLda bir nechta global teglar mavjud:
- <html> - butun sahifani unga o'rab oladi.
- <skript> - u dastur mantiqini yoki alohida skriptlarga havolani saqlashi mumkin.
- <style> - bu CSS belgilarini olish mumkin bo'lgan blok.
<style> blokida siz mavjud barcha CSS-dan sozlash mumkin. Alohida sahifa yuklab olish rangini o'zgartiring selektorlarga kiring va ta'minotni o'zgartiring, media so'rov bajaring va boshqa ko'plab yuklarni bajaring.
Kodda u shunday ko'rinishi mumkin:
<html>
Biz sahifaga CSS-ni qo'lladik. Bundan tashqari, bizning saytimizga uslublar yig'ish shart emas.
inline uslublari
Uslublarni alohida blokda shart emas. <style> tegidan qayta mumkin. boshqa shu nomdagi atributdan mumkin.
Atributlar HTMLda ko'rsatkichlar variantlardir. gunoh yoki id atributlardir. Agar siz di blokining uslubini o'zgartirmoqchi bo'lsangiz, uning sinfidan keyin uslubnivingiz va CSS formatida uslublarni birma-bir o' tugmachangiz kerak. Haqiqiy kodda u shunday ko'rinishi mumkin:
<html>
Biz div elementiga flex ichki mulkni o'rnatdik va matn rangini ko'k rangga o'zgartirdik.
Agar siz biron bir elementning dizayni yoki mazmuni bo'lgan bir xil bloklar seriyasini tez sozlashingiz, ma'lum birini tanlab, uni boshqacha uslub qilish kerak bo'lsa, bu juda qulaydir. Bir div ga uslubni qo'llash orqali siz qolganiga ta'sir qilmaysiz. Agar siz uslublarni yanada kengroq sozlashingiz kerak bo'lsa, siz hali ham <style> blokidan yoki alohida CSS faylidan yuborish kerak.
Alohida CSS faylida uslublarni o'rnatish
Bu web-sayt yoki ilovaga CSS qo'shishning eng keng tarqalgan usuli. U klassik HTML / CSS / JavaScript steklari bilan ishlashda ham, React ruhida ramkalarni ulashda ham qo'shiq.
Ulanish holatiga turli yo'llar bilan amalga qarab qarab.
HTML ga standart ulanish
HTML fayliga meta tegini qo'shish kerak. Meta teg havolasi - havola turi - uslublar bilan fayl manzili.
<link rel="stylesheet" href="styles.css">
HTML fayli sinflar va yuklashda ko'rsatuvchi boshqa parametrlar yordamida fayldagi barcha uslublarni avtomatik ravishda to'playdi.
webpack bilan tiklanish
Agar ishlab chiqarish jarayonida siz paket ishlab chiqarishdan saqlasangiz, unda maxsus plaginni ro'yxatdan o'tkazishingiz kerak. Masalan, unga qo'shilgan barcha CSS fayllarini ilovada uslublarning yagona to'plamiga aylantiradigan css-loader.
React Framework - gaulanish
React ECMAScript2015 standartidan keyin. CSS bilan ishlash uchun import direktivasi yordamida .
Uslublarni ularga bo'lish
Uslublarni ayrim CSS fayllariga saqlash uslublarini tahrirlash va boshqarishni osonlashtiribgina qolmay, balki bitta ko'p kodlarni saqlab qoladi.
Buning uchun sizga yuqorida tavsiflangan usullardan birini qo'llash mumkin, lekin uni bir necha marta takrorlang. Misol uchun, import direktivasini turli manzillarni ko'rsatib, bir necha marta yozing. Yoki meta teglar ro'yxatiga CSS hujjatlariga qo'shimcha havolalar qo'shing.
Shu, boshqa odamlarning CSS uslublari
Agar so'ralsa, boshqa uslublardan ham qo'shish mumkin. <link> tegida, masalan, siz saytning manzilini ko'rsatasiz lekin u erga havolani ham bilib olishingiz mumkin.
Agar siz normalizatordan (turli brauzerlar ishidagi nomuvofiqliklarni maxsus hosil qilish ma'lum teglar va ishlab chiqarishni olib tashlaydigan CSS fayli) moqchi bo'lsangiz, bu kerak bo'lishi mumkin.
Tashqi uslublar, ba'zi bir umumiy dizayn tizimidan (ko'pincha' qism) bitta uslubni qo'shish uchun mumkin.
boshqa usullar
Ba'zi ramkalar CSS-ni SS fayllaringizsiz shaklda C imkon beradi. TailwindCSS ramkasi shunday ishlaydi. O'rnatishdan so'ng darhol u global dasturda avtomatik ravshan mavjud bo'ladi va siz CSS-ni alohida qo'shmasdan ilovaning mustahkam qo'shilgan sinflardan olinishi kerak.
, Vue va Svelte kabi ba'zi ba'zi kutubxonalarni ma'lumotlar katalogida saqlashni talab qilmaydigan komponentlarni <style>bloklari ichidan uslublardan uslubga undaydi.
Xulosa o'rniga
CSS boshqacha bo'lib, ba'zi boshqaruv uslublaridan tez yo'l, boshqalarda esa undan to'g'ri HTML bilan teglarda yuborish mumkin. Qaysi usul yordamida tajriba bilan tushunasiz va texnologiyaga qarab usullarni o' boshqarishingiz mumkin bo'ladi. asosiysi, CSS kodini ochish.