Taustakuvan asettaminen CSS: ään

Verkkosivuston luominen on loistava tapa ilmaista itseäsi. Vaikka sivustonrakennustyökaluja on monia, sen kirjoittaminen itse on hauska tapa oppia lisää verkkosivustojen toiminnasta kulissien takana. Hyvä aloittelijaprojekti on luoda verkkosivusto ja lisätä taustakuva CSS: llä. Tämä projekti saa sinut alkuun sekä HTML: llä että CSS: llä.

Mikä on CSS?

CSS tarkoittaa Cascading Style Sheet. Se on ohjelmointikieli, jonka avulla voit muotoilla merkintäkieliä. Yksi tällainen merkintäkieli on HTML tai Hyper-Text Markup Language. HTML: ää käytetään verkkosivustojen luomiseen. Vaikka voit hallita joitakin sivuston tyyliä HTML -koodilla, CSS tarjoaa paljon enemmän hallinto- ja suunnitteluvaihtoehtoja.

Perussivuston luominen HTML -koodilla

Koska CSS on vain tyylikieli, tarvitsemme sen käyttämiseksi ensin jotain tyyliä. Yksinkertainen verkkosivusto riittää, jotta voimme aloittaa pelaamisen CSS: llä. Sivullamme näkyy 'Hello World'.

  
  
  
  
 Hello World

Jos et tunne HTML -koodia, käydään nopeasti läpi kaikki elementit. Kuten mainittiin, HTML on merkintäkieli, mikä tarkoittaa, että se käyttää tunnisteita tekstin merkitsemiseen. Aina kun näet sanan ympäröimänä se on tunniste. Tunnisteita on kahta tyyppiä, tunniste, joka merkitsee käytettävän osion alun, ja toinen, joka merkitsee osion käytön. Osion tekstin tarkoituksena on myös tehdä tämä ero helpommaksi nähdä.

Esimerkissämme on neljä tagia. The html -tunniste osoittaa, mitkä elementit ovat osa verkkosivustoa. The pää -tunniste sisältää otsikkotiedot, joita ei näytetä sivulla, mutta joita tarvitaan sivun luomiseen. Kaikki näytettävät elementit ovat vartalo tunnisteita. Meillä on vain yksi näytettävä elementti, s tag. Se kertoo selaimelle, että teksti on kappale.

Aiheeseen liittyviä: 10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

CSS: n lisääminen HTML: ään

Nyt kun meillä on yksinkertainen sivu, voimme muokata tyyliä CSS: llä. Sivumme on tällä hetkellä melko yksinkertainen, emmekä voi tehdä paljon, mutta aloitetaan tekemällä kappaleemme erottuvaksi, jotta voimme erottaa sen taustasta lisäämällä reunuksen.

  
  
  
  
 Hello World

Kappaleemme ympärillä on nyt musta raja. Tyyliselosteen lisääminen CSS: ään kappaletunnisteeseemme kertoi verkkosivustolle kappaleen muotoilun. Voimme lisätä kuvauksia. Lisäämme välilyöntiä tai pehmustetta kappaleen ympärille ja keskitämme tekstimme.

  
  
  
  
 Hello World

Verkkosivustomme näyttää paremmalta, mutta HTML -koodimme alkaa näyttää sotkuiselta kaikkien näiden kappaleiden tunnisteen kuvausten kanssa. Voimme siirtää nämä tiedot otsikkoomme. Ylätunnisteemme sisältää tietoja, jotka meidän on näytettävä verkkosivusto oikein.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Nyt HTML -koodimme on helpompi lukea. Huomaat, että jouduimme muuttamaan joitain asioita. Tyylitunniste kertoo verkkoselaimen tyylitiedot, mutta myös tyylin. Esimerkissämme olemme käyttäneet kahta eri tapaa kertoa sille, mitä tyyliä. The s tyylitagissa kertoo selaimelle, että se soveltaa tätä tyyliä kaikkiin kappaleitageihin. The #meidänKohta osiossa kerrotaan vain tyylielementeille, joiden tunnus on kappaleemme . Huomaa, että id tiedot lisättiin kehomme p -tagiin.

kuinka korjata ylikuumentunut kannettava tietokone

CSS -tiedoston tuominen verkkosivustollesi

Tyylitietojen lisääminen otsikkoon helpottaa koodimme lukemista. Jos haluamme kuitenkin muotoilla monia eri sivuja samalla tavalla, meidän on lisättävä tämä teksti jokaisen sivun yläosaan. Se ei ehkä näytä paljon työtä, voit sen jälkeen kopioida ja ohittaa, mutta se luo paljon työtä, jos haluat muuttaa elementtiä myöhemmin.

Sen sijaan pidämme CSS -tiedot erillisessä tiedostossa ja tuomme tiedoston sivun tyyliin. Kopioi ja liitä tiedot tyylitunnisteiden välillä uuteen CSS -tiedostoon ourCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Tuo sitten tiedosto HTML -tiedostoon.

  
  
  
  
  
 Hello World

Taustakuvan lisääminen CSS: llä

Nyt kun sinulla on vankka perusta HTML: ssä ja CSS: ssä, taustakuvan lisääminen on palapeli. Määritä ensin, mille elementille haluat antaa taustakuvan. Esimerkissämme lisäämme taustan koko sivulle. Tämä tarkoittaa, että haluamme muuttaa vartalo . Muista, että body -tunnisteet sisältävät kaikki näkyvät elementit.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Jos haluat muuttaa CSS -kehon tyyliä, käytä ensin vartalo avainsana. Lisää sitten kiharat hakasulkeet kuten ennen {}. Kaikkien rungon tyylitietojen on oltava kiharaisten sulkeiden välissä. Tyyliominaisuus, jonka haluamme muuttaa, on taustakuva . Tyyliominaisuuksia on monia. Älä odota muistaa niitä kaikkia. Kirjoita kirjanmerkkeihin CSS-ominaisuuksien huijausarkki, jonka ominaisuudet haluat muistaa.

Aiheeseen liittyviä: 8 hienoa HTML -tehostetta, jotka kuka tahansa voi lisätä verkkosivustoilleen

Windows 10 -käyttöjärjestelmään ei ole tällä hetkellä saatavana virtaa

Määritteen jälkeen käytä kaksoispistettä osoittaaksesi, kuinka muutat määritettä. Jos haluat tuoda kuvan, käytä url () . se osoittaa, että käytät linkkiä kuvan osoittamiseen. Aseta tiedoston sijainti suluissa lainausmerkkien väliin. Lopuksi lopeta rivi puolipisteellä. Vaikka välilyönnillä ei ole merkitystä CSS: ssä, käytä sisennystä CSS: n lukemisen helpottamiseksi.

Esimerkki näyttää tältä:

Jos kuva ei näy oikein kuvan koon vuoksi, voit muuttaa kuvaa suoraan. CSS: ssä on kuitenkin taustatyyppisiä määritteitä, joita voit käyttää taustan muuttamiseen. Taustaa pienemmät kuvat toistetaan automaattisesti taustalla. Jos haluat poistaa sen käytöstä, lisää tausta-toisto:ei-toista; elementillesi.

On myös kaksi tapaa saada kuva peittämään koko tausta. Ensinnäkin, voit asettaa taustan koon näytön kokoon painamalla taustakoko: 100% 100%; , mutta tämä venyttää kuvaa ja saattaa vääristää kuvaa liikaa. Jos et halua muuttaa kuvan mittasuhteita, voit myös asettaa taustan kooksi peite . Kansi saa taustakuvan peittämään taustan, mutta ei vääristä kuvaa.

Taustavärin vaihtaminen

Muutetaan viimeinen asia. Nyt kun meillä on tausta, kappaleemme on vaikea lukea. Tehdään sen tausta valkoiseksi. Prosessi on samanlainen. Elementti, jota haluamme muokata, on #ourPa paragraph. # Osoittaa, että 'ourPa paragraph' on id -nimi. Seuraavaksi haluamme asettaa taustaväri ominaisuus valkoiselle.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Paljon parempi.

Jatkamme verkkosivustosi suunnittelua CSS: n avulla

Nyt kun tiedät kuinka muuttaa eri HTML -elementtien tyyliä, taivas on rajana! Perusmenetelmä tyylimääritteiden muuttamiseksi on sama. Tunnista muutettava elementti ja kuvaile määritteen muuttamista. Paras tapa oppia lisää on leikkiä eri ominaisuuksilla. Haasta itsesi muuttamaan tekstin väriä seuraavaksi.

Jaa Jaa Tweet Sähköposti 8 parasta sivustoa laadukkaille HTML -koodausesimerkeille

Haluatko oppia HTML -koodin omille verkkosivustoillesi ja sovelluksillesi? Käytä näitä verkkosivuesimerkkejä ja lähdekoodia opettamaan itsellesi HTML ja CSS.

Lue seuraava Liittyvät aiheet

Ohjelmointi
HTML
Web-suunnittelu
CSS

Kirjailijasta Jennifer Seaton(21 artikkelia julkaistu)

J. Seaton on tiedekirjoittaja, joka on erikoistunut monimutkaisten aiheiden jakamiseen. Hänellä on tohtori Saskatchewanin yliopistosta; hänen tutkimuksensa keskittyi pelipohjaisen oppimisen hyödyntämiseen opiskelijoiden sitoutumisen lisäämiseksi verkossa. Kun hän ei työskentele, löydät hänet lukemisen, videopelien tai puutarhanhoidon kanssa.

Lisää Jennifer Seatonilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi