Pregled prednostne ravni sloga CSS

Cascading Style Sheet (CSS) je po mojem mnenju najpreprostejši jezik v primerjavi z drugimi spletnimi jeziki, zato ni presenetljivo, da je veliko ljudi, ki se šele začenjajo učiti, kako ustvariti spletno mesto, najprej najprej naučiti ta jezik in HTML..

V tej objavi se bomo vrnili k osnovam CSS. Pregledali bomo, kako so prvotno uporabljeni stili CSS, kateri slogi se bodo uporabljali, kako se deklaracija nekaterih slogov prepisuje, medtem ko drugi ne.

Torej, to delovno mesto je posebej namenjeno začetnikom, ki se šele začenjajo spopadati z izzivi, verjetno še vedno delajo napake in napake pri sestavljanju prvega sloga. Torej, začnimo.

Privzeti slogi brskalnika

Firefox, Chrome, Safari, Opera in Internet Explorer so trenutno na vrhu petih namiznih brskalnikov na trgu. Ti brskalniki in vsi drugi brskalniki sledijo standardnemu pravilu, ki vključuje vgrajene privzete sloge za upodabljanje elementov HTML.

Torej, ko bomo vstavili nekaj naključnih elementov HTML brez dodanih slogov, boste videli, da je še vedno pravilno upodobljen v brskalniku.

Če pa skrbno pregledamo te elemente, ima vsak brskalnik (rahlo) različne vrednosti za svoj brskalnik “privzeto” deklaracija, ki povzroča nedoslednost v brskalnikih, zlasti v starem, kot sta IE6, 7 in Firefox 3.0.

Na primer, kot lahko vidite iz zgornjega posnetka zaslona, ​​je najnovejši Firefox prikazal blockquote privzeto z margin: 16px 40px 16px 40px, na drugi strani pa Internet Explorer 7 bo prikazal blockquote z margin: 0px 40px.

Da bi odpravili zgoraj prikazane nedoslednosti, mnogi oblikovalci spletnih strani in razvijalci raje prepisujejo vse te sloge Ponastavitev CSS. Ta datoteka CSS običajno vsebuje skoraj ves HTML Vrsta jih določijo z enakimi pravili.

Na voljo je veliko ponastavitev CSS-ja, toda tukaj so moje tri najljubše:

• Normalize.css
• Ponastavitev CSS
• HTML5 Ponastavi preglednico slogov

Izbirniki

Verjetno pogosto ta izraz berete v spletnih dnevnikih, ki ste jih obiskali; Izbirniki.

Izbirnik v CSS je sintaksa, ki se uporablja za ciljanje kateregakoli dela dokumenta HTML za sloge, ki jih je treba uporabiti. Obstajajo trije osnovni selektorji, o katerih bomo razpravljali tukaj, saj bodo verjetno običajni izbirniki, ki se uporabljajo na vaši prvi spletni strani. Druge bomo pokrili v prihodnjih objavah.

Vnesite Selector

Kot smo že omenili zgoraj, bo izbirnik tipa ciljal vse določene elemente HTML v dokumentu. Na primer:

 p / ** izjava ** / 

bo ustrezal vsem str ali odstavka elementov in ga bo sčasoma prepisal privzete sloge, ki so jih podali brskalniki.

Izbirnik razreda

Če ste elementu dodali razred ali celo veliko razredov, lahko ciljate tudi na te razrede. The Izbirnik razreda se začne z a pika parameter.

 .polje / ** izjava ** / 

Zgornji odrezek se bo ujemal z vsemi elementi, ki imajo polje razreda, ali pa lahko tudi natančneje izberemo.

 p.box / ** izjava ** / 

Namenjena je le temu str element, ki ima škatla razred.

Ko uporabljamo Razred izbirnik, vse enake deklaracije slogov iz obeh Vrsta in izbirnik Privzeti brskalnik bo prepisana.

Izbirnik ID

The ID je zelo omejevalen atribut, lahko ga imamo samo id na element in mora biti tudi edinstven.

 
Vsebina
 

V primeru, da imamo id v elementu lahko uporabimo Izbirnik id ciljati na ta element; izbirnik id je definiran z razpršitvijo # parameter.

 #uniqueID / ** izjava ** / 

Odkar je ID je edinstvena, ima najmočnejšo prednostno vrsto vrste izbirnika. Torej, ko deklariramo sloge z ID izbirnik bo na koncu prepisal isto izjavo Razred, Vrsta in selektorji Privzeti brskalnik stilov.

Vdelava slogov

Prišli smo skozi vse bistvene osnovne selektorje in zdaj bomo preučili, kako so ti stili vdelani v dokument HTML.

Zunanji slogi

Zunanji slogi so slogi, ki so dodani v ločeno datoteko, običajno v a .css datoteko, ki je nato povezana z dokumentom HTML z uporabo , da uporabite te sloge.

In vsi slogovi, prijavljeni v datotekah, se bodo obnašali kot to, kar smo omenili v Izbirniki zgoraj, predvsem pa bo prepisana privzeti brskalnik slog in prepišete v drugo slogovno deklaracijo, odvisno od prioritete izbirnikov.

Ta praksa je najbolj priporočljiv način za pripisovanje slogov, zlasti kadar imate na tisoče vrstic kod CSS s številnimi stranmi.

S temi načini boste lahko enostavno upravljali, na primer, datoteke CSS lahko ločite v več datotek, odvisno od njegove posebne vloge, kot je na primer typography.css za nadzor vseh slogov, povezanih s tipografijo, in tako naprej.

Notranji slogi

Notranji slogi so slogi, ki so vdelani neposredno v dokument HTML, običajno znotraj oznaka.

Vendar ta praksa ni priporočljiva, če boste imeli na stotine vrstic slogov, ker bo vaša stran HTML predolga in bo slog vplival samo na mesto, kjer so vdelani slogi. Ko boste povedali deset strani, boste morali kopirati te sloge in jih vdelati v vse strani, in ko boste morali spremeniti sloge, jih morate spremeniti na deset različnih strani, kar je očitno dolgočasno opravilo..

Notranji slog je višji glede na raven prioritete, zato bo prepisal zunanje sloge.

Inline Styles

Vgrajeni slogi so slogi, ki so neposredno vdelani v element HTML.

 
To je odstavek
 

Zgornji primer bo dodan 5px za element odstavka in bo prepisal tudi robove, ki so bili deklarirani za ta element v notranjih in zunanjih slogih..

Vendar se izogibajte temu, saj bo vaš označevalni znak prenatrpan z vsemi navedenimi deklaracijami; če imate vgrajenih veliko stilov, bo celo postala nočna mora za ogled in ohranitev vseh vaših html in stilov.

nadaljnje branje: Tri možnosti za vstavljanje CSS - W3CSchools.

Pomembno pravilo

Obstajajo nekatere okoliščine, ko moramo uporabiti določen slog za element, vendar je isti slog za ta element tudi razglašen drugje v slogovni ali v dokumentu. Na primer:

Imamo naslednjo oznako sidra z vgrajenimi slogi

 To je povezava 

Imamo tudi ločen slog za to sidrno oznako v slogovni listi.

 a border: 1px solid # 333; barva ozadja: # 555;  

V tem primeru lahko uporabimo !pomembno pravilo, da brskalnik uporabi sloge v slogovnem listu namesto tistega v elementu.

 a border: 1px solid # 333! background-color: # 555!  

The !pomembno Pravilo bo pokazalo, da je ta slog najbolj primeren pomembno in mora biti uporabljen nad drugim slogom, tudi če je neposredno vdelan v element (Inline Styles).

nadaljnje branjepomembne CSS deklaracije: kako in kdaj jih uporabiti - Smashing Magazine.

Zaključek

Prišli smo skozi celotno temo v tem članku. Zdaj lahko vidimo, da ima vsak izbirnik in način, kako vgrajujemo sloge, različne ravni prioritete v mehanizmu brskalnika. Kot sem že omenila, so te teme namenjene začetnikom, zato zagotovo niso nekaj novega za izkušene oblikovalce spletnih strani.

Ampak, mislim, da se bo vsak spletni oblikovalec strinjal, da je vračanje k osnovam včasih potrebno za pregled našega temeljnega znanja o temi. Pravzaprav pogosto zamudimo nekaj osnovnih stvari, saj smo navdušeni nad strašnimi (in norimi) stvarmi, kot je ta.

Nazadnje sem predložil demo in izvorno datoteko, da bi še podrobneje preučili našo razpravo v tem članku.

• Demo
• Prenesi vir

Upam, da boste uživali v tej objavi in ​​če v njej najdete nekaj netočnosti ali sem zamudil nekaj pomembnih točk, me ne oklevajte in me obvestite v oddelku za komentarje spodaj.