Lyhenne CSS on lyhenne sanoista "cascading style sheet". CSS: ää käytetään kaikkien laitteiden verkkosivustojen ja sovellusten muotoiluun. Tyylitaulukkoa käytetään yleisesti HTML: n ja käyttöliittymän, kuten JavaScriptin, rinnalla.

CSS voidaan toteuttaa yhdellä kolmesta tavasta - inline, sisäisesti tai ulkoisesti. Vaikka ulkoinen CSS on suositeltava lähestymistapa, on tapauksia, joissa kaksi jäljellä olevaa toteutustapaa voivat olla käytännöllisempiä.

Tässä opetusartikkelissa opit kaikki CSS: n perusteet, jotta voit aloittaa sovellusten rakentamisen tänään.

Milloin käyttää erilaisia ​​CSS -toteutustapoja

Inline CSS on ihanteellinen toteutustapa, kun tarkoituksena on sisällyttää verkkosivulle vain yksi tai kaksi tyyliasetusta sekä muutamia muita kapeita tapauksia. Inline CSS -menetelmä käyttää tyyli avainsana yhdessä CSS -ominaisuuden kanssa tietyn tuloksen saavuttamiseksi.

Jos aiot muuttaa yksittäisen otsikon värin punaiseksi, sisäinen CSS voi olla hyvä vaihtoehto. Erikoistapaus, kuten edellä mainittiin, olisi HTML -asettelujen luominen, joka koostuu pääasiassa taulukoista (vanhentunut käytäntö).

Inline CSS -esimerkin käyttö

Pääotsikko

Yllä olevalla koodirivillä näkyy teksti "Main Heading", joka on päällystetty punaisella värillä. Tämä on todennäköisesti yksi ainoista käytännön syistä inline CSS: n käyttämiseen, koska yleensä on vain yksi h1 elementti tietyllä verkkosivulla.

Jos aiot päällystää kaikki h2 verkkosivun elementtejä, joiden väri on keltainen. Sinun on käytettävä CSS: ää tyyli avainsana yhdessä väri- ominaisuus ja sen arvo (keltainen) jokaisessa elementissä. Tehokkaampi tapa tämän tehtävän suorittamiseen on kuitenkin käyttää sisäistä CSS: ää.

Esimerkki sisäisestä CSS: stä

Sijoita koodi yllä HTML -tiedostosi tunniste varmistaa, että kaikki h2 Tiedoston elementit on päällystetty keltaisella. Sisäinen CSS on erotettu HTML -koodista, mikä tekee menetelmästä tehokkaamman, koska se helpottaa eri elementtiryhmien kohdistamista.

Joten miksi ulkoinen CSS -toteutustapa on edelleen suosituin tapa? Huolien erottaminen. Ulkoisen CSS: n avulla CSS -koodisi on erotettu kokonaan HTML -koodistasi, mikä takaa skaalautuvuuden suurille projekteille ja tekee testausprosessista tehokkaamman.

Esimerkki ulkoisesta CSS: stä

Lisää yllä oleva koodirivi HTML -tiedostosi tunniste helpottaa verkkosivusi muotoilua ulkoisen CSS -menetelmän avulla. Ainoa muuttuva koodin osa on arvo, joka on annettu href ominaisuus, jonka tulee aina olla CSS -tiedoston nimi (mukaan lukien .css -laajennus).

Aiheeseen liittyviä: Mitä CSC -tyylisivuja käytetään ja mihin CSS: ää käytetään? Kun CSS -tiedostosi on linkitetty HTML -asiakirjaasi, voit nyt alkaa kirjoittaa CSS -koodia CSS -tiedostoosi. Tässä vaiheessa ainoa ero yllä olevan sisäisen CSS -esimerkin ja ulkoisen CSS: n välillä on tyyli tag. Siksi seuraavan koodin lisääminen CSS -tiedostoon tuottaa saman tuloksen kuin yllä oleva sisäinen CSS -esimerkki.

h2 {
väri: keltainen;
}

CSS -perusrakenteen tutkiminen

CSS -perusilmoitus sisältää seitsemän olennaista osaa, kuten alla olevasta esimerkistä näkyy. He kaikki työskentelevät yhdessä saavuttaakseen tietyt muotoiluvalinnat.

Valitsin

CSS -ilmoituksessa valitsin voi olla joko id, a luokka, elementti tai joissakin erityistapauksissa näennäisvalitsin. Yllä olevassa CSS -rakenteessa a elementtiä käytetään valitsimena, mikä tarkoittaa, että kaikki verkkosivun linkit on päällystetty punaisella. Pohjimmiltaan valitsimen tarkoitus on tunnistaa elementit, jotka tulisi muotoilla.

Ilmoituksen alku ja loppu

Ilmoituksen alku ja loppu ovat tärkeitä, koska ne sisältävät kaikki tiettyä valitsinta koskevat tyyliasetukset. Molempia elementtejä edustaa pari avointa ja suljettua kiharaa. Hyvä tapa muistaa käyttää ilmoituksen alkua tai ilmoituksen loppua on muistaa, että jos sinulla on avoin tukka, siinä on oltava vastaava suljettu tukka ja päinvastoin.

Omaisuus

Ilmoitusrakenteen CSS -ominaisuus voi olla mikä tahansa yli sadasta eri omaisuustyypistä. Yllä olevassa CSS -rakenteessa käytetty ominaisuustyyppi on väri- ja tämä ominaisuus kohdistaa tekstin verkkosivulle. Jos haluat oppia lisää, tutustu kattava luettelo CSS -ominaisuuksista ja niiden käytöstä.

Omaisuuden/arvon erotin

Vaikka se saattaa tuntua pieneltä ja merkityksettömältä, ominaisuuden/arvon erotin on yhtä tärkeä kuin kaikki muut CSS -rakenteen elementit. Jos joskus esiintyy esimerkki, jossa tämä elementti unohdetaan, koko CSS -ilmoitus ei toteudu.

Arvo

CSS -ominaisuuden arvo edustaa tarkkaa tyyliä, jota haluat käyttää tiettyyn omaisuuteen. Käytettävissä olevat arvot riippuvat ominaisuuden tyypistä. Esimerkiksi yllä olevassa rakenteessa käytetty ominaisuus on väri-, mikä tarkoittaa, että tähän ominaisuuteen voidaan soveltaa vain yhtä arvotyyppiä, värinimeä. A väri- arvo voidaan esittää jossakin neljästä muodosta: sanaarvo (kuten yllä olevassa esimerkissä), heksadesimaalinen arvo, HSL (sävy, kylläisyys, vaaleus) -arvo tai RGB (punainen, vihreä, sininen) -arvo.

Ilmoituksen erotin

Ilmoitusten erotin osoittaa, että olet tietyn muotoiluvakuutuksen lopussa. Yllä olevassa rakenteessa on vain yksi ilmoituserotin, mutta niitä voi olla enemmän. Kaikki riippuu siitä, kuinka monta CSS -ominaisuutta aiot käyttää tietyissä kohteissa luokka, idtai elementti.

Mitä ovat tunnukset ja luokat?

tunnukset ja luokat on keskeinen rooli CSS -muotoiluprosessissa. Kuten HTML -elementit, myös CSS tunnukset ja luokat käytetään valitsijoina CSS -ilmoituksessa. Kuitenkin, luokat ja tunnukset etusijalla HTML -elementtiin nähden.

CSS: n yleinen sääntö on, että tiedostoon viimeksi lisäämäsi tyylideklaraatio ohittaa aiemmin olleet. Siksi, jos on kaksi ilmoitusta, joissa on h2 valitsin CSS -tiedostossa, viimeksi lisätty ilmoitus ohittaa aiemmin olleet.

Kuitenkin, jos tämä h2 elementissä on id jota käytetään valitsimena CSS -ilmoituksessa riippumatta sen sijainnista (ennen tai jälkeen) CSS -ilmoitukseen, jossa on h2 elementti sen valitsimena, tyyliasetukset id ilmoitus on aina etusijalla elementtiin nähden. Lyhyesti sanottuna an id ohittaa muut tyylivalitsimet.

On tärkeää muistaa, että CSS -ilmoituksessa tunnukset alkaa numeromerkillä ja luokat alkavat pisteellä. Merkittävin ero id ja a luokka onko se an id on ainutlaatuinen, kun taas a luokka voidaan monistaa. Esimerkiksi kokoelma vastaavia tunnisteille voidaan antaa sama luokka nimi; Kuitenkin id jokaista tagin on oltava ainutlaatuinen.

Eri tyyppisten valitsimien tutkiminen

Valitsimia on kolme perustyyppiä - yksi, useita ja sisäkkäisiä. Tähän mennessä tässä artikkelissa on käsitelty laajasti yksittäisiä valitsimia.

Kun käytät CSS: ää, on tilanteita, joissa haluat eri elementtejä eri paikoissa Web -sivulle samanlainen tyyli, joka eroaa koko verkkosivun yleisestä tyylistä. Näissä tapauksissa on hyödyllistä tietää, kuinka käyttää useita valitsimia.

Esimerkki perus HTML -mallista

Tervetuloa

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vaikea vapaaehtoinen
dignissimos voluptatibus tenetur.  Kieltäydy, animi corporis!  Arkkitehti
tempora voluptates nulla officia paikka quisquam facere at! Quod dolore doloribus eos!







Noin

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vaikea vapaaehtoinen
dignissimos voluptatibus tenetur.  Kieltäydy, animi corporis!  Arkkitehti
tempora voluptates nulla officia paikka quisquam facere at! Quod dolore doloribus eos!







Otsikko

Lorem ipsum dolor sit amet consectetur adipisicing elit. Työskentele aspernaturissa tai dicta quod quibusdamissa!
Ea delectus sit, laboriosam eos aperiam asperiores? Ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus on korruptoitunut
mollitia, minimit, magni ja iusto id välttämättömyys harum ratione, ipsum doloremque deleniti ex eligendi
estää hic maxime? Eius modi optio ad, nisi tempora sapiente?







Otsikko

Lorem ipsum dolor sit amet consectetur adipisicing elit. Työskentele aspernaturissa tai dicta quod quibusdamissa!
Ea delectus sit, laboriosam eos aperiam asperiores? Ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus on korruptoitunut
mollitia, minimit, magni ja iusto id välttämättömyys harum ratione, ipsum doloremque deleniti ex eligendi
estää hic maxime? Eius modi optio ad, nisi tempora sapiente?

Jos tarkastelet tarkasti yllä olevaa HTML -tiedostoa, näet niiden välillä olevan dynamiikan tunnukset ja luokat. Viitaten yllä olevaan tiedostoon, jos haluat käyttää samaa tyyliä noin -osiossa ja vain verkkosivun artikkeleissa, seuraava CSS -koodi tekee tämän.

Esimerkki useiden valitsimien käytöstä

#Tietoja, .content {
väri valkoinen;
taustaväri: tummanvihreä;
}

Kun käytät useita valitsimia, sinun on aina erotettava toisistaan ​​pilkulla. Yllä olevassa esimerkissä on kaksi valitsinta, an id ja a luokka. Jos pilkku, joka seuraa noinid puuttuu, CSS -ilmoitus ei toteudu.

Palataksemme yllä olevaan HTML -perusmallin esimerkkiin, niitä on kaksi tunnisteet - yksi tervetulotoivossa ja toinen tietoja -osiossa. Jos tavoitteesi on kohdistaa vain yhteen näistä tunnisteita, sisäkkäisen valitsimen tulisi olla menetelmänä.

Esimerkkejä sisäkkäisistä valitsimista

#Welcome p span {
väri punainen;
}

Yllä oleva sisäkkäinen valitsin sisältää id ja kaksi HTML -elementtiä. Kuten yllä olevasta esimerkistä näkyy, sisäkkäinen valitsin tarjoaa mahdollisuuden kohdistaa tiettyyn elementtiin ryhmässä.

Siksi vain span osassa tunniste div kanssa tervetuloa id päällystetään punaisella värillä.

Käytitpä sitten muotoilukieltä, kuten CSS: ää tai ohjelmointikieltä, sinun pitäisi ehdottomasti tietää, kuinka kirjoittaa kommentti. Kommentit ovat välttämättömiä yritystason projekteissa, joissa useat kehittäjät työskentelevät yhdessä, ja niistä on hyötyä myös pienimuotoisen kehittämisen yhteydessä.

CSS -kommentti sisältää kaksi vinoviivaa, kaksi tähteä ja kommenttiosion.

/ * Näin kirjoitat yhden rivin kommentin CSS: ssä */

/*
Näin kirjoitat
monirivinen kommentti
CSS: ssä
*/

Mitä seuraavaksi?

Tämä artikkeli tarjoaa sinulle CSS: n peruskomponentit. Voit nyt käyttää tunnistetta:

• Mikä tahansa kolmesta CSS -toteutusmenetelmästä
• Kaikki CSS -ilmoituksen elementit
• Kolme perustyyppistä valitsinta
• CSS kommentti

Tämä on kuitenkin vasta alkua. CSS: llä on useita kehyksiä, jotka auttavat sinua ymmärtämään paremmin kieltä. Ainoa haaste on päättää, mikä niistä on sinulle paras.

Tailwind CSS vs. Bootstrap: Mikä on parempi kehys?

Kun valitset CSS -kehyksen, on tärkeää löytää vaatimuksiasi vastaava kehys.

Lue seuraava

Kirjailijasta