CSS(Cascading Style Sheets) on web-kehityksen peruskomponentti, jolla on ratkaiseva rooli verkkosivustosi HTML-elementtien visuaalisen ulkoasun hallinnassa. Se tarjoaa tehokkaan joukon sääntöjä ja ominaisuuksia, jotka määrittelevät, miten elementit näytetään, muotoillaan ja sijoitetaan, jolloin voit mukauttaa verkkosivujesi ulkoasua ja tuntumaa.
Aloitetaan ymmärtämällä valitsimien käsite
Valitsimia käytetään tiettyjen HTML-elementtien kohdistamiseen tyyliä varten. Yksi perusvalitsimista on elementin valitsin, joka valitsee tietyn HTML-elementin kaikki esiintymät.
Esimerkiksi seuraava CSS-sääntö kohdistaa asiakirjan kaikkiin kappaleisiin:
p {
color: blue;
}
Tässä esimerkissä p valitsin valitsee kaikki <p> elementit ja asettaa niiden tekstin värin siniseksi.
Toinen yleinen valitsin on luokan valitsin
Luokkia käytetään ryhmittelemään elementtejä, joilla on samanlaiset ominaisuudet. Määrittämällä luokan HTML-elementeille voit kohdistaa ja muotoilla niitä yhdessä.
Tässä on esimerkki:
.blue-text {
color: blue;
}
Tässä tapauksessa .blue-text valitsin kohdistaa kaikkiin luokan elementteihin blue-text ja käyttää sinistä väriä niiden tekstiin.
Lisäksi ID valitsimen avulla voit kohdistaa tiettyyn elementtiin sen yksilöllisen tunnisteen perusteella. ID tyypillisesti kohdistetaan sivun yksittäisiin elementteihin.
Tässä on esimerkki:
#header {
background-color: gray;
}
Tässä esimerkissä valitsin #header valitsee elementin ID header ja käyttää siihen harmaata taustaväriä.
Siirryttäessä CSS:n syntaksiin, jokainen CSS-sääntö koostuu valitsimesta ja ilmoituslohkosta
Ilmoituslohko on suljettu aaltosulkeisiin {} ja sisältää yhden tai useamman ilmoituksen. Ilmoitukset koostuvat omaisuudesta ja sitä vastaavasta arvosta.
Tässä on esimerkki:
h1 {
font-size: 24px;
color: #333;
}
Tässä koodinpätkässä h1 valitsin valitsee kaikki <h1> elementit ja asettaa niiden kirjasinkooksi 24 pikseliä ja tekstin väriksi tummanharmaaksi(#333).
Tämän sarjan aikana tutkimme ja selitämme erilaisia CSS-ominaisuuksia, valitsimia ja niiden yhdistelmiä, joiden avulla voit luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivustoja. CSS:n ja sen perussyntaksin ymmärtäminen antaa sinulle perustan hallita verkkosivujesi tyyliä ja varmistaa ainutlaatuisen ja henkilökohtaisen käyttökokemuksen. Sukellaan ja löydä CSS:n rajattomat mahdollisuudet!