Sivuston visuaalinen tyyli ja ulkoasu määräytyvät CSS- tai Cascading Style Sheets -työkalun mukaan. Nämä ovat asiakirjoja, jotka muokkaavat verkkosivun HTML-merkintää, jolloin verkkoselaimille annetaan ohjeet siitä, miten kyseisestä merkinnästä tulevat sivut näkyvät. CSS käsittelee sivun asettelua sekä värejä, taustakuvia, typografioita ja paljon muuta.
Jos katsot CSS-tiedostoa, näet, että kuten millä tahansa merkintä- tai koodauskielellä, näillä tiedostoilla on tietty syntaksi. Jokainen tyyliarkki koostuu useista CSS-sääntöistä. Nämä säännöt, kun ne otetaan kokonaisuudessaan, ovat ne, mitkä sivustot tyylejä.
CSS-säännön osat
CSS-sääntö koostuu kahdesta erillisestä osasta: valitsimesta ja ilmoituksesta. Valitsin määrittää, mitä sivulle on muotoiltu ja ilmoitus on, miten se on muotoiltu. Esimerkiksi:
p {
väri: # 000;
}
Tämä on CSS-sääntö. Valitsinosa on "p", joka on "kappaleiden" elementtivalitsin. Siksi se valitsisi sivuston kaikki kohdat ja antaa heille tämän tyylin (paitsi jos kappaletta kohdistetaan tarkempien tyylien avulla muualla CSS-dokumentissa).
Sääntö, joka sanoo "väri: # 000;" on niin sanottu julistus. Tämä ilmoitus koostuu kahdesta osasta - omaisuudesta ja arvosta.
Omaisuus on tämän ilmoituksen "väri" -osa. Se määrää, että valitsimen osa muuttuu visuaalisesti.
Arvo on, mikä valittu CSS-ominaisuus muuttuu. Esimerkissämme käytetään 000: n heksadesimaalista arvoa, joka on CSS-pikatoimitus "musta".
Joten tätä CSS-sääntöä käytettäessä sivullamme on kohtia, jotka näkyvät mustan fontin värisenä.
CSS: n perusteet
Kun kirjoitat CSS-ominaisuuksia, et voi yksinkertaisesti tehdä niitä mielestäsi sopiviksi. Jos esiintyy, "väri" on todellinen CSS-ominaisuus, joten voit käyttää sitä. Tämä ominaisuus määrittää elementin tekstin värin. Jos yritit käyttää CSS-ominaisuuksia tekstin väreissä tai font-väreissä, ne eivät onnistu, koska ne eivät ole todellisia osia CSS-kieltä.
Toinen esimerkki on omaisuus "taustakuva". Tämä ominaisuus asettaa kuvan, jota voidaan käyttää taustaksi, kuten:
.logo {
taustakuva: url (/images/company-logo.png);
}
Jos yritit käyttää "taustakuvan" tai "taustakuvan" ominaisuutena, ne epäonnistuvat, koska taas nämä eivät ole todellisia CSS-ominaisuuksia.
Joitakin CSS-ominaisuuksia
On olemassa useita CSS-ominaisuuksia, joita voit käyttää sivuston tyyliin. Joitakin esimerkkejä ovat:
- Rajat (mukaan lukien rajatyyli, reunaviiva ja rajan leveys)
- Pehmuste (mukaan lukien pehmuste, pehmuste, pehmuste ja pehmuste vasemmalle)
- Marginaalit (mukaan lukien marginaalivaraus, marginaali-oikea, marginaalin alaraja ja marginaali-vasen)
- Font-family
- Fonttikoko
- Taustaväri
- Leveys
- Korkeus
Nämä CSS-ominaisuudet ovat erinomaisia esimerkkeinä, koska ne ovat hyvin suoraviivainen ja vaikka et tiedä CSS: ää, voit todennäköisesti arvata, mitä he tekevät heidän nimensä perusteella.
On myös muita CSS-ominaisuuksia, joita kohtaat myös, mutta jotka eivät välttämättä ole niin ilmeisiä, miten ne toimivat heidän nimensä perusteella:
- Kellua
- Asia selvä
- Ylivuoto
- Teksti-muunnos
- Z-indeksi
Kun tutustut web-suunnitteluun syvemmälle, kohtaat (ja käytät) kaikkia näitä ominaisuuksia ja paljon muuta!
Ominaisuudet Tarvitsevat arvot
Joka kerta kun käytät ominaisuutta, sinun on annettava sille arvo - ja tietyt ominaisuudet voivat hyväksyä vain tietyt arvot.
Ensimmäisessä esimerkissämme "väri" -ominaisuudesta meidän on käytettävä väriarvoa. Tämä voi olla heksadesimaaliarvo , RGBA-arvo tai jopa väri-avainsanat . Jokainen näistä arvoista toimii kuitenkin, jos käytit sanaa "synkkä" tämän ominaisuuden kanssa, se ei tee mitään, koska se ei ole CSS: n tunnustettu arvo, koska se on kuvaileva kuin tämä sana.
Toinen esimerkki "taustakuvasta" edellyttää, että kuvan polkua käytetään varsinaisen kuvan hakemiseen sivustosi tiedostoista. Tämä on vaadittu arvo / syntaksi.
Kaikilla CSS-ominaisuuksilla on odottamiaan arvoja. Esimerkiksi:
- Raja-väri odottaa värin arvoa
- Rajakoko odottaa mitoitusarvoa, kuten pikseleitä tai prosenttiosuuksia
- Rajatyypit odottavat, että jokin tämän ominaisuuden varatusta tyylistä, kuten "kiinteä"
Jos käytät CSS-ominaisuuksien luetteloa, huomaat, että jokaisella niistä on tiettyjä arvoja, joita he käyttävät luomaan tyylejä, joille he ovat tarkoitettu.
Toimittaja Jeremy Girard