Inline, iegultās un ārējās stila lapas: lūk, kas jums jāzina
Front-end tīmekļa vietņu izstrāde bieži tiek attēlota kā trīsstūrveida izkārnījumos. Šīs kājas ir šādas:
Šīs tabulas otrais posms, CSS vai Cascading Style Sheets, ir tas, ko mēs šeit šodien skatāmies. Konkrēti, mēs vēlamies pievērsties 3 veidu stili, kurus varat pievienot dokumentam.
- Inline stili
- Iegultie stili
- Ārējie stili
Katram no šiem CSS stilu veidiem ir savas priekšrocības un trūkumi, tāpēc ņemsim dziļāku ieskatu katrā no tiem atsevišķi.
Inline Styles
Inline stili ir stili, kas ir rakstīti tieši tagā HTML dokumentā. Inline stili ietekmē tikai konkrēto tagu, uz kuru tie attiecas. Šeit ir piemērs par iekšējo stilu, kas tiek piemērots standarta saitei vai enkuru tagam:
Šis CSS noteikums padarītu standarta uzsvērtu teksta noformēšanu pie šīs vienas saites. Tomēr tas nenozīmē citādu saiti lapā. Šis ir viens no neierobežotu stilu ierobežojumiem. Tā kā tie tikai tiek mainīti uz konkrētu vienumu, jums vajadzēs lietot HTML ar šiem stiliem, lai iegūtu reālu lapu dizainu. Tā nav labākā prakse. Faktiski tas ir viens solis no "fontu" tagu dienas un struktūras un stilu sajaukšanas tīmekļa lapās.
Inline stili arī ir ļoti augsta specifika.
Tas padara tos ļoti grūti pārrakstīt ar citiem, ne-līnijveida stiliem. Piemēram, ja vēlaties, lai vietne būtu atsaucīga un mainītu, kā elements aplūko noteiktus pārtraukuma punktus, izmantojot mediju vaicājumus , elementā ievietotie stilu elementi to padarīs ļoti grūti.
Galu galā, inline stili ir patiešām tikai piemēroti, ja to izmanto ļoti taupīgi.
Patiesībā es reti izmantoju inline stilus savās tīmekļa lapās.
Iegultie stili
Iegultie stili ir stili, kas ir ietverti dokumenta galā. Iegultie stili ietekmē tikai tagus lappusē, kuru tie ir iestrādāti. Vēlreiz šī pieeja novērš kādu no CSS priekšrocībām. Tā kā katrā lappusē ir stilus
, ja jūs vēlaties mainīt vietnes izmaiņas, piemēram, mainot saites krāsu no sarkanas uz zaļu, jums vajadzētu veikt šīs izmaiņas katrā lappusē, jo katrā lappusē tiek izmantota iegulta stilu lapa. Tas ir labāk nekā inline stilus, taču daudzos gadījumos tas joprojām ir problemātisks.
Stilu tabulas, kas tiek pievienotas mapei
no dokumenta arī pievieno ievērojamu summu atzīmes kodu uz šo lapu, kas arī var padarīt lapu grūtāk pārvaldīt nākotnē.
Iegulto stilu lapu priekšrocība ir tā, ka slodze nekavējoties tiek parādīta pašai lapai, nevis prasa, lai citi ārējie faili tiktu ielādēti. Tas var būt ieguvums no lejupielādes ātruma un veiktspējas viedokļa .
Ārējie stila lapas
Mūsdienās lielākā daļa tīmekļa vietņu izmanto ārējās stila lapas. Ārējie stili ir stili, kuri ir rakstīti atsevišķā dokumentā un pēc tam pievienoti dažādiem tīmekļa dokumentiem. Ārējās stila lapas var ietekmēt visus dokumentus, kuriem tie ir pievienoti, kas nozīmē, ka, ja jums ir 20 lappušu vietne, kurā katra lapa izmanto to pašu stilu lapu (tas parasti ir kā tas ir izdarīts), jūs varat veikt vizuālas izmaiņas katram no šīm lapām, vienkārši rediģējot šo stilu lapu.
Tas padara ilgtermiņa vietnes pārvaldību daudz vienkāršāku.
Ārējo stilu lapu loks ir tāds, ka tām ir nepieciešamas lapas, lai ielādētu un ielādētu šos ārējos failus. Ne katra lapa CSS lapā izmantos katru stilu, tāpēc daudzās lapās tiks ielādēta daudz lielāka CSS lapa, nekā tas faktiski nepieciešams.
Lai gan ir taisnība, ka ārējo CSS failu veiktspējas hits ir iespējams, to noteikti var samazināt. Reāli CSS faili ir tikai teksta faili, tāpēc vispirms tie nav ļoti lieli. Ja jūsu visās vietnēs tiek izmantots 1 CSS fails, jūs arī iegūsiet labumu no šī dokumenta kešatmiņas pēc sākotnējās ielādes.
Tas nozīmē, ka dažos apmeklējumos pirmajā lapā varētu būt nedaudz veiktspējas, bet turpmākajās lapās tiks izmantots kešatmiņā ievietotais CSS fails, tāpēc jebkurš trāpījums tiks noraidīts. Ārējie CSS faili ir veids, kā veidot visas manas tīmekļa lapas.