CSS (Cascading Style Sheet) on verkkosivustojen koodausjärjestelmä, jonka avulla suunnittelijat voivat käsitellä useita ominaisuuksia kerralla määrittämällä tiettyjä elementtejä ryhmille. Esimerkiksi käyttämällä verkkosivuston taustan koodia suunnittelijat voivat muuttaa taustaväriä tai kuvaa verkkosivuston kaikilla sivuilla yhdellä CSS -tiedoston muutoksella. Näin voit luoda CSS: n perusverkkosivustolle.
Askeleet
Osa 1/4: Sisäisen CSS: n kirjoittaminen
Vaihe 1. Varmista, että ymmärrät HTML -tunnisteet
Sinun pitäisi tietää, miten tunnisteet toimivat ja
src
ja
href
määritteet.
Vaihe 2. Opi joitakin CSS -perusominaisuuksia
Huomaat, että kiinteistöjä on erittäin paljon. Kaikkia ei kuitenkaan tarvitse oppia.
-
Hyviä CSS -perusominaisuuksia on hyvä tietää
väri-
ja
fonttiperhe
- .
Vaihe 3. Tutustu kunkin omaisuuden arvoihin
Kaikki ominaisuudet tarvitsevat arvon. Varten
väri-
omaisuuden, esimerkiksi voit laittaa
punainen
arvo.
Vaihe 4. Lisätietoja
tyyli
HTML -attribuutti.
Sitä käytetään elementissä, kuten
href
tai
src
. Jos haluat käyttää sitä, laita lainausmerkkeihin yhtäläisyysmerkin jälkeen CSS -attribuutti, kaksoispiste ja sitten ominaisuuden arvo. Tämä tunnetaan CSS -sääntönä.
Vaihe 5. Ymmärrä, että ammattimaiset web -kehittäjät eivät yleensä käytä sisäistä CSS: ää verkkosivustoille
Inline CSS voi lisätä tarpeetonta sotkua HTML -asiakirjaan. Se on kuitenkin loistava tapa tutustua CSS: n toimintaan.
Osa 2/4: CSS: n kirjoittaminen
Vaihe 1. Käynnistä haluamasi ohjelma
Sen pitäisi antaa sinun luoda HTML- ja CSS -tiedostoja.
Jos sinulla ei ole erityisohjelmaa asennettuna, voit käyttää Notepadia tai muuta tekstieditoria. Tallenna tiedosto sekä tekstitiedostona että CSS -tiedostona
Vaihe 2. Avaa verkkosivustosi HTML -tiedosto
Sinun pitäisi avata tämä myös HTML -editorilla, jos sinulla on sellainen asennettuna.
HTML -editorien avulla voit muokata HTML- ja CSS -tiedostoja samanaikaisesti
Vaihe 3. Luo tunniste HTML -päähän
Näin voit kirjoittaa CSS: ää ilman erillistä tiedostoa.
Vaihe 4. Valitse elementti, johon haluat lisätä tyylin, ja kirjoita elementin nimi ja sen jälkeen joukko kiharaita aaltosulkeita ({})
Jotta koodi olisi luettavampi, aseta aina toinen kihara omalle rivilleen.
Vaihe 5. Kirjoita aaltosulkeiden väliin CSS -säännöt samalla tavalla kuin
tyyli
attribuutti.
Jokaisen rivin tulee päättyä puolipisteeseen (;). Jotta koodisi olisi luettavissa, jokaisen säännön pitäisi alkaa omalta riviltään ja jokaisen rivin tulee olla sisennetty.
On erittäin tärkeää huomata, että tämä muotoilu vaikuttaa kaikkiin valitun tyypin elementteihin sivulla. Tarkempaa muotoilua käsitellään seuraavassa osassa
Osa 3/4: Edistyneempi CSS
Vaihe 1. Luo CSS -tiedosto, ei HTML -tiedosto ja tallenna se käyttämällä
.css
laajennus.
Avaa myös HTML -tiedostosi.
Vaihe 2. Luo tunniste HTML -päähän
Näin voit linkittää erillisen CSS -tiedoston HTML -asiakirjaasi. Linkkitagissasi on kolme määritettä:
rel
tyyppi
ja
href
-
rel
tarkoittaa "suhdetta" ja kertoo selaimelle, mikä suhde on HTML -asiakirjaan. Tässä sen pitäisi olla arvo
"tyylitaulukko"
- .
-
tyyppi
kertoo, minkä tyyppiseen mediaan linkitetään. Tässä sen pitäisi olla arvo
"teksti/css"
-
href
- täällä käytetään samalla tavalla kuin elementissä, mutta tässä sen on linkitettävä CSS -tiedostoon. Jos CSS -tiedosto sijaitsee samassa kansiossa kuin HTML -tiedosto, vain tiedoston nimi on kirjoitettava lainausmerkkeihin.
Vaihe 3. Valitse eri tyyppejä, joihin haluat lisätä saman tyylin
Lisää
luokka
attribuutti näille elementeille ja aseta ne vastaamaan valitsemasi luokan nimeä. Tämä antaa elementteillesi saman tyylin.
Vaihe 4. Määritä, minkä tyylin luokka saa
Kirjoita luokan nimi CSS -tiedostoosi ja piste (.) Edeltää sitä (eli
.luokka
).
Vaihe 5. Valitse yksittäiset elementit, joihin haluat lisätä erikoistyyliä, ja lisää
id
attribuutti.
Tunnukset luodaan CSS: ssä käyttämällä puntasymbolia (#) eikä pistettä.
Tunnukset ovat tarkempia kuin luokat, joten tunnus ohittaa minkä tahansa luokan tyylin, jos sillä on määritteellä eri arvo kuin luokalla
Osa 4/4: Opi lisää
Vaihe 1. Käy w3 -kouluissa
Se on virallinen verkkosivusto, jonka tarkoituksena on opettaa verkkokehitystaitoja. W3: ssa on runsaasti viitteitä HTML- ja CSS -tiedostoille sekä muille verkkokielille.
Vaihe 2. Etsi muita sivustoja, jotka on erityisesti suunniteltu HTML: n ja CSS: n oppimiseen ja opettamiseen
Sivustot, kuten CSS tricks.com, on erityisesti tarkoitettu opettamaan CSS- ja web -suunnittelutaitoja. Hyvämaineisten lähteiden löytäminen auttaa sinua oppimismatkalla.
Vaihe 3. Ota yhteyttä web -suunnittelijoihin ja -kehittäjiin
Heidän kokemuksensa ja osaamisensa voivat opettaa sinulle arvokasta tietoa ja taitoja.
Vaihe 4. Tarkastele kohtaamiesi verkkosivustojen lähdekoodia
Hyvin kehitettyjen verkkosivustojen CSS: n tarkasteleminen voi näyttää tapoja suunnitella verkkosivustojen osia. Kopioimalla sen harjoitukseksi ja koodin avulla voit oppia käyttämään erilaisia CSS -määritteitä.
