CSS-tyylin prioriteettitason tarkistaminen

Cascading Style Sheet (CSS) on mielestäni yksinkertaisin kieliä verrattuna muihin verkkoihin liittyviin kieliin, joten ei ole yllättävää, että monet ihmiset, jotka ovat juuri alkaneet oppia luomaan verkkosivustoa, oppivat enimmäkseen tätä kieltä ja HTML: ää.

Tässä viestissä palataan CSS-perusasioihin. Tarkistamme, miten CSS-tyylit alun perin otetaan käyttöön, mitkä tyylit soveltuvat, miten jotkut tyylitiedot korvaavat toisensa, kun toiset eivät.

Niinpä tämä viesti on nimenomaan tarkoitettu aloittelijoille, jotka alkavat vasta alkamaan haasteita, luultavasti vielä tekemättä virheitä ja virheitä ensimmäistä tyylitaulukkoaan laadittaessa. Joten, aloitetaan vain.

Selaimen oletusasetukset

Firefox, Chrome, Safari, Opera ja Internet Explorer ovat tällä hetkellä markkinoiden viiden parhaan työpöydän selaimen. Nämä selaimet ja kaikki muut selaimet noudattavat standardisääntöä sisällyttämään sisäänrakennetut oletustyylit HTML-elementtien tekemiseen.

Joten, kun laitamme joitakin satunnaisia ​​HTML-elementtejä ilman lisättyjä tyylejä, näet, että se on edelleen järjestetty selaimessa oikein.

Mutta jos tarkastamme näitä elementtejä huolellisesti, jokaisella selaimella on (hieman) erilaisia ​​arvoja “oletusarvo” ilmoitus, joka aiheuttaa epäjohdonmukaisuutta selaimissa, erityisesti vanhassa, kuten IE6, 7 ja Firefox 3.0.

Esimerkiksi, kuten edellä olevasta kuvasta näkyy, uusin Firefox teki blockquote oletusarvoisesti marginaali: 16px 40px 16px 40px, kun taas toisella puolella Internet Explorer 7 tulee blockquote kanssa marginaali: 0px 40px.

Yllä olevien epäjohdonmukaisuuksien voittamiseksi monet web-suunnittelijat ja kehittäjät haluavat korvata kaikki tyylit CSS-nollaus. Tämä CSS-tiedosto sisältää yleensä lähes kaikki HTML-tiedostot Tyyppi valintamahdollisuudet, määrittelemällä ne \ t.

Käytettävissä on monia CSS-palautuksia, mutta tässä on kolme parasta suosikkini:

• Normalize.css
• CSS-nollaus
• HTML5 Nollaa tyylitaulukko

valitsimet

Luet usein tämän termin lukemiesi web-suunnittelun / kehittämisen blogien kautta; valitsimet.

CSS: n valitsin on syntaksi, jota käytetään kohdistamaan minkä tahansa HTML-asiakirjan osiin sovellettavia tyylejä. Täällä keskustellaan kolmesta perusvalitsimesta, koska ne todennäköisesti ovat ensimmäisessä sivustossasi käytettyjä yleisiä valintoja. Tulemme käsittelemään muita tulevissa viroissa.

Tyypin valitsin

Olemme maininneet kerran edellä, Tyyppivalitsin kohdistaa kaikki asiakirjan HTML-elementit. Esimerkiksi:

 p / ** ilmoitus ** / 

vastaa kaikkia p tai kohta elementtejä ja sen käyttäminen korvaa lopulta selaimista annetut oletusasetukset.

Luokanvalitsin

Kun olet lisännyt luokan tai jopa useita luokkia elementtiin, voit myös kohdistaa nämä luokat. Luokanvalitsin alkaa a piste parametri.

 .laatikko / ** ilmoitus ** / 

Yllä oleva katkaisu vastaa kaikkia elementtejä, joilla on laatikkoluokka, tai voimme myös valita tarkemmin.

 p.box / ** ilmoitus ** / 

Se kohdistuu vain p elementti, jolla on laatikko luokka.

Kun käytämme luokka valitsin, kaikki sama tyyli-ilmoitus molemmista Tyyppi valitsin ja Oletusselain korvataan.

ID-valitsin

ID on hyvin rajoittava ominaisuus, meillä voi olla vain yksi id elementillä ja sen on oltava myös ainutlaatuinen.

 
pitoisuus
 

Jos meillä on id elementissä voimme käyttää id-valitsin kohdistaa tämä elementti; id-valitsin on määritetty hajallaan # parametri.

 #uniqueID / ** ilmoitus ** / 

Koska ID on ainutlaatuinen, sillä on vahvin valintatyypin prioriteettitaso. Joten, kun julistamme tyylit ID valitsin korvaa lopulta kaikki saman ilmoituksen luokka, Tyyppi selektorit ja Oletusselain tyylit.

Tyylit upottaminen

Olemme tulleet läpi kaikki olennaiset perusvalitsimet, ja nyt tarkastelemme, miten nämä tyylit on upotettu HTML-dokumenttiin.

Ulkoiset tyylit

Ulkoiset tyylit ovat tyylit, jotka lisätään erilliseen tiedostoon, yleensä a .css tiedosto, joka sitten yhdistetään HTML-dokumenttiin käyttämällä tunniste soveltaa näitä tyylejä.

Ja kaikki tiedostossa ilmoitetut tyylejä käyttäytyvät kuten olemme maininneet valitsimet yläpuolella, nimittäin se korvaa pääosin oletusselaimen tyyli, ja korvaa toinen tyyli-ilmoitus valitsijoiden prioriteettitason mukaan.

Tämä käytäntö on suositeltavin tapa liittää tyylejä, varsinkin kun sinulla on tuhansia riviä CSS-koodeja, joihin on liitetty useita sivuja..

Tällöin tyylit ovat myös helposti hallittavissa, esimerkiksi voit erottaa CSS-tiedostot useista tiedostoista riippuen sen erityisestä roolista, kuten typography.css, jotka ohjaavat kaikkia Typografiaan liittyviä tyylejä ja niin edelleen.

Sisäiset tyylit

Sisäiset tyylit ovat tyylit, jotka on upotettu suoraan HTML-dokumenttiin yleensä tag.

Tätä käytäntöä ei kuitenkaan suositella, kun sinulla on satoja rivejä, koska HTML-sivusi on liian pitkä ja tyyli vaikuttaa vain siihen, missä tyylit on upotettu. Kun olet antanut sanoa kymmenen sivua, sinun täytyy kopioida nämä tyylit ja upottaa ne kaikkiin sivuihin ja kun haluat muuttaa tyylejä, sinun on vaihdettava se kymmeneen eri sivulle, mikä on tietysti ikävä tehtävä.

Prioriteettitason perusteella sisäinen tyyli on korkeampi, joten se korvaa ulkoiset tyylit.

Sisäiset tyylit

Sisäiset tyylit ovat tyylit, jotka on upotettu suoraan HTML-elementtiin.

 
Tämä on kohta
 

Tämä esimerkki lisätään 5px marginaali kappaleelementtiin ja se korvaa myös marginaalit, jotka on ilmoitettu kyseiselle elementille sekä sisäisissä että ulkoisissa tyyleissä.

Mutta älä välttämättä tee tätä, koska merkintääsi täyttää kaikki tyylitiedotteet; jos sinulla on joukko tyylejä, se tulee jopa painajaiseksi nähdäksesi ja ylläpitämään kaikki html- ja tyylisi.

Lue lisää: Kolme tapaa lisätä CSS - W3CSchools.

Tärkeä sääntö

On joitakin tilanteita, joissa meidän on sovellettava tiettyä tyyliä elementille, mutta sama tyyli on myös ilmoitettu muualla tyylitaulussa tai asiakirjassa. Esimerkiksi:

Meillä on seuraava ankkuritunniste, jossa on upotettuja tyylejä

 Tämä on linkki 

Ja meillä on myös erillinen tyyli tälle ankkurimerkille tyylisivuilla.

 a border: 1px solid # 333; taustaväri: # 555;  

Tässä esimerkissä voimme käyttää !tärkeä sääntö pakottaa selaimen käyttämään tyylisivujen tyylejä elementin sijasta.

 border: 1px solid # 333! taustaväri: # 555!  

!tärkeä sääntö osoittaa, että tämä tyyli on eniten tärkeä ja sitä on sovellettava toisen tyylin päälle, vaikka se olisi suoraan upotettu elementtiin (Inline-tyylit).

Lue lisää:! tärkeät CSS-ilmoitukset: miten ja milloin niitä käytetään - Smashing Magazine.

johtopäätös

Olemme tulleet läpi koko artikkelin tässä artikkelissa. Nyt voimme nähdä, että jokaisella valitsimella ja tavalla, jolla upotamme tyylit, on eri prioriteettitasot selaimen mekanismissa. Kuten aiemmin mainitsin, nämä aiheet on tarkoitettu aloitteleville tasoille, joten ne eivät varmasti ole uutta kokeneille web-suunnittelijoille.

Mutta mielestäni jokainen web-suunnittelija on yleisesti samaa mieltä siitä, että paluu perusasioihin on joskus välttämätöntä, jotta voimme tarkistaa aiheemme perustiedot. Itse asiassa meiltä puuttuu usein joitakin perusasioita, sillä meillä on tapana olla enemmän vaikuttuneita tämänkaltaisista mahtavista (ja hulluista) asioista.

Lopuksi olen esittänyt demo- ja lähdetiedoston, jonka avulla voit tarkastella keskustelua tässä artikkelissa.

• esittely
• Lataa lähde

Toivon, että nautit tästä viestistä, ja jos löydät sen epätarkkuudesta tai olen unohtanut joitakin tärkeitä kohtia, älä epäröi ilmoittaa minulle alla olevista kommenttien osiosta.