Inline, ditempelake, lan njaba gaya: Punika ingkang kedah sampeyan mangertosi
Pangembangan situs web ngarep wis kerep diwakili minangka bangku bangkekan 3-legged. Sikil kaya iki:
Loro sikil iki, CSS utawa Cascading Style Sheets, yaiku apa sing kita tingali ing kene dina iki. Khusus, kita pengin alamat 3 jinis gaya sampeyan bisa nambah menyang dokumen.
- Gaya inline
- Gaya embedded
- Gaya njaba
Saben jinis gaya CSS kasebut nduweni manfaat lan kelemahane, supaya kita bisa ndeleng kanthi jero ing saben wong.
Gaya Inline
Gaya inline yaiku gaya sing langsung ditulis ing tag ing dokumen HTML. Gaya inline mung nimbulake tag tartamtu sing ditrapake. Punika conto gaya inline sing diterapake ing link standar, utawa jangkar, tag:
Aturan CSS iki bakal nguripake standar hiasan teks ing ngisor iki. Nanging, ora bakal ngganti pranala liya ing kaca kasebut. Iki minangka salah sawijining watesan gaya inline. Awit padha mung ngganti item tartamtu, sampeyan bakal kudu ngrusak HTML kanthi gaya kasebut kanggo ngrancang desain kaca. Iku ora praktik paling apik. Nyatane, iki salah sawijining langkah sing dibusak saka dina "font" lan campuran struktur lan gaya ing kaca web.
Gaya inline uga duwe kekhasan sing dhuwur banget.
Iki ndadekake wong-wong mau bisa ngatasi kanthi gaya non-inline liyane. Contone, yen sampeyan pengin nggawe situs responsif lan ngganti carane unsur katon ing breakpoints tartamtu kanthi nggunakake pitakon media , gaya inline ing unsur bakal nggawe iki angel banget.
Wekasane, gaya inline sing bener mung cocok yen digunakake banget.
Nyatane, aku jarang nggunakake gaya inline ing kaca web.
Gaya Embedded
Gaya dicithak ana gaya sing dipasang ing endhas dokumen. Gaya sing dicithak mung nandhang label ing kaca kasebut. Ana maneh, pendekatan iki negesake salah sawijining kekuatan CSS. Awit saben kaca bakal duwe gaya ing
, yen sampeyan pengin nggawe owah-owahan sitewide, kaya ngowahi warna pranala saka abang dadi ijo, sampeyan kudu nggawe owah-owahan ing saben kaca, amarga saben kaca nggunakake sheet style sing diblokir. Iki luwih apik tinimbang gaya inline, nanging isih ana masalah ing pirang-pirang instansi.
Stylesheets sing ditambahake menyang
saka sawijining dokumen uga nambah jumlah kode markup sing signifikan menyang kaca kasebut, sing uga nggawe kaca luwih angel kanggo ngatur ing mangsa ngarep.
Manfaat saka lembar gaya sing disambungake yaiku kanthi cepet mbukak karo kaca kasebut, tinimbang mbutuhake file eksternal liyane supaya dimuat. Iki bisa dadi entuk manfaat saka kacepetan download lan perspektif kinerja .
Gaya Sheets njaba
Paling situs web saiki nggunakake lembaran gaya eksternal. Gaya eksternal gaya sing ditulis ing dokumen kapisah banjur ditempelake ing macem-macem dokumen web. Lembar gaya eksternal bisa nyebabake sembarang dokumen sing dilampirake, sing ateges yen sampeyan duwe situs web 20-kaca ing ngendi saben kaca nggunakake sheet gaya sing padha (iki biasane carane wis rampung), sampeyan bisa nggawe owahan visual kanggo saben saka kaca kasebut kanthi nyunting lembar gaya kasebut.
Iki nggawe manajemen situs jangka panjang luwih gampang.
Kabisiran kanggo gaya gaya njaba yaiku supaya kaca-kaca kanggo njupuk lan ngemot file eksternal kasebut. Ora saben kaca bakal nggunakake saben gaya ing lembaran CSS, supaya akeh kaca bakal mbukak kaca CSS luwih akeh tinimbang sing bener perlu.
Nalika iku bener sing ana hit kinerja kanggo file CSS njaba, mesthi bisa diminimalisir. Secara realistis, file CSS mung file teks, saengga umumé ora gedhe banget kanggo diwiwiti. Yen kabeh situs sampeyan migunakake file CSS, sampeyan uga entuk manfaat saka dokumen sing dicenthang sawisé diiseni.
Iki tegese bisa uga ana hit kinerja sing tipis ing kaca pisanan sawetara kunjungan, nanging kaca-kaca ing salajengipun bakal nggunakake file CSS sing dicenthang, saengga sembarang hit bakal diabaikan. File CSS njaba minangka cara mbangun kabeh kaca web.