3 CSS estilo motak ulertzea

Lerrokatu, txertaturiko eta kanpoko estilo-orriak: hemen jakin behar duzuna

Front-end web garapena sarritan 3 hankako banakako gisa irudikatzen da. Hank hauek hauek dira:

Taburete honen bigarren zatia, CSS edo Cascading Style Sheets, gaur egun hemen bilatzen ari gara. Zehazki, hiru dokumentu mota gehitu ditzakezu dokumentu batera.

  1. Lerro estiloak
  2. Estiloak txertatuak
  3. Kanpoko estiloak

CSS estilo mota horietako bakoitzak bere abantailak eta desabantailak ditu, eta horregatik, banan-banan, banan-banan azter dezagun.

Lerro estiloak

Lerro estandarrak HTML dokumentuan etiketan zuzenean idazten diren estiloak dira. Lerro estiloek aplikatzen zaien etiketa espezifikoari eragiten die. Hemen estandar estekan edo ainguruan aplikatutako inline estiloaren adibide bat da:

CSS arau honek estandar azpimarragarriaren testuzko dekorazioa piztuko luke esteka honetan. Hala ere, ez litzateke orriaren beste edozein esteka aldatuko. Hau da lerro estiloko mugen artean. Elementu jakin batean soilik aldatzen direnez gero, zure HTMLa estilo hauei utzi beharko zenieke benetako orrien diseinua lortzeko. Hori ez da praktika onik. Izan ere, "letra-tipo" etiketa eta egitura eta estilo nahasketa web orrialdeetan kendutako urrats bat da.

Lerro estiloak oso espezifikotasun handia dute.

Horrek oso gogorrak dira beste estilo ez-lerroekin gainidazteko. Esate baterako, gune bat sentikorra izan dadin nahi baduzu eta elementu batek hauteslekuei buruzko informazioa nola aldatu nahi duen galdetu, elementu batean lerro estiloak erabiliz gero, oso zaila izango da.

Azken finean, lerro estiloak benetan oso egokiak dira oso erabiliak direnean.

Izan ere, oso gutxitan erabiltzen dut inline estiloak nire web orrietan.

Estiloak txertatuak

Kapsulatutako estiloek dokumentuaren buruan txertatzen diren estiloak dira. Txertatutako estiloek txertatzen dituzten orrialdeetako etiketak bakarrik eragiten dituzte. Berriro ere, ikuspegi honek CSS indarguneak ukatzen ditu. Orri guztietan estiloan izango lirateke

, sitewide aldaketaren bat egin nahi baduzu, gorria eta berdearen arteko esteken kolorea aldatzen baduzu, orrialde guztietan aldaketa hori egin beharko zenuke, orrialde bakoitzak kapsulatutako estilo-orri bat erabiltzen baitu. Estiloak inline baino hobea da, baina kasu askotan problematikoa da.

Estiloari gehitutako estilo orriak

Dokumentu batek orri marjinal kopuru handia ere gehitzen dio orrialde horri, eta etorkizunean kudeatzeko zailagoa den orrialdeak ere sor ditzake.

Estilo kapsulatutako orrien onurak kargatzen ditu berehala orrialdearekin, kanpoko beste fitxategi batzuk kargatzeko. Deskarga-abiadura eta errendimenduaren ikuspuntutik onuragarria izan daiteke.

Kanpoko estilo-fitxak

Gaur egun, webgune gehienek kanpoko estilo-orriak erabiltzen dituzte. Estilo barnekoak aparteko dokumentuan idatzitako estekak dira eta, ondoren, hainbat web dokumentutan erantsita daude. Kanpoko estilo-orriek erantsitako dokumentuari eragin diezaiokete, horri esker, orrialde bakoitzak 20 orrialdeko webgune bat badu eta orri bakoitzak estilo-orri berdina erabiltzen du (normalean hau nola egiten den), bakoitzak aldaketa bisuala egin ahal izango du Orrialde horri estilo orriaren edizioa besterik ez duzu.

Epe luzeko gunearen kudeaketa errazten du.

Kanpoko estilo-orrien arazoa kanpoko fitxategiak eskuratu eta kargatzeko orriak behar dituztela da. Orri guztietan CSS orriko estilo guztiek ez dute erabiliko, beraz orrialde asko CSS orri askoz ere handiagoa izango da benetan behar duten baino.

Egia da kanpoko CSS fitxategietarako errendimendu handia dagoela, zalantzarik gabe minimizatu daitekeela. Benetan, CSS fitxategiak testu-fitxategiak dira, beraz, oro har ez dira oso handiak. Zure gune osoa CSS fitxategi bat erabiltzen badu, dokumentu horren onurarako ere lortuko duzu cachean kargatu ondoren.

Horrek esan nahi du lehenbiziko orrialdean bisitaldi batzuen errendimendu txikia egon litekeela, baina ondorengo orrialdeek CSS fitxategiaren cachea erabiliko dute, eta, beraz, ez da ukatuko. Kanpoko CSS fitxategiak nire web orri guztiak eraiki ditut.