Verkkosivuston luominen on hieno tapa ilmaista itseäsi. Vaikka verkkosivustojen rakennustyökaluja on monia, kirjoittaminen itse on hauska tapa oppia lisää siitä, miten verkkosivustot toimivat kulissien takana. Hyvä aloittelijaprojekti on luoda verkkosivusto ja lisätä taustakuva CSS: n avulla. Tämä projekti saa sinut toimimaan sekä HTML: n että CSS: n kanssa.
Mikä on CSS?
CSS tarkoittaa CSS-tyylisivua. 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 joitain verkkosivuston tyyliä HTML: n avulla, CSS tarjoaa paljon enemmän hallinta- ja suunnitteluvaihtoehtoja.
Perussivuston luominen HTML: llä
Koska CSS on vain tyylikieli, tarvitsemme sen käyttöä varten ensin jotain tyyliä. Hyvin yksinkertainen verkkosivusto riittää, jotta voimme aloittaa pelaamisen CSS: n kanssa. Sivullamme näkyy "Hello World".
Hei maailma
Jos et ole perehtynyt HTML: ään, käymme 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 kahden tyyppisiä, tagi, joka merkitsee osan alun <> -merkillä, ja yksi, joka merkitsee osan lopun käyttämälläEsimerkissämme meillä on neljä tunnistetta. html tag osoittaa, mitkä elementit ovat osa verkkosivustoa. pää -tunniste sisältää otsikkotiedot, joita ei näytetä sivulla, mutta joita tarvitaan sivun luomiseen. Kaikki näytetyt elementit ovat runko tunnisteet. Meillä on vain yksi näytetty elementti, s tag. Se kertoo verkkoselaimelle, että teksti on kappale.
Liittyvät: 10 yksinkertaista CSS-koodiesimerkkiä, jotka voit oppia 10 minuutissa
Haluatko tietää enemmän CSS: n käytöstä? Kokeile aluksi näitä CSS-peruskoodiesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.
CSS: n lisääminen HTML: ään
Nyt kun meillä on yksinkertainen sivu, voimme muokata tyyliä CSS: llä. Sivumme on tällä hetkellä melko yksinkertainen, eikä meillä ole paljon tekemistä, mutta aloitetaan tekemällä kappaleestamme erottuva, jotta voimme erottaa sen taustasta lisäämällä reunan.
Hei maailma
Kappalettamme ympäröi nyt musta reunus. Tyylikuvauksen lisääminen CSS: ssä kappaletunnisteeseemme kertoi verkkosivustolle, kuinka kappale muotoillaan. Voimme lisätä lisää kuvauksia. Lisätään kappaleen ympärillä olevaa tyhjää tilaa tai täyttöä ja keskitetään teksti.
Hei maailma
Verkkosivustomme näyttää paremmalta, mutta HTML-koodimme alkaa näyttää sotkuiselta kaikkien näiden kappaletagin kuvausten kanssa. Voimme siirtää nämä tiedot otsikkoon. Otsikkomme on tieto siitä, että meidän on näytettävä verkkosivusto oikein.
Hei maailma
Nyt HTML-koodimme on helpommin luettavissa. Huomaat, että meidän piti muuttaa joitain asioita. Tyylitunniste kertoo verkkoselaimen tyylitiedot, mutta myös sen, mitä tulee tyylittää. Esimerkissämme olemme käyttäneet kahta erilaista tapaa kertoa sille, mitä muotoilla. s tyylitunnisteessa käskee verkkoselainta käyttämään kyseistä tyyliä kaikkiin kappaletageihin. #ourParagraph -osio kertoo sen vain tyylielementeille, joilla on tunnus meidän kohta. Huomaa, että id tiedot lisättiin kehomme p-tunnisteeseen.
CSS-tiedoston tuominen verkkosivustollesi
Tyylitietojen lisääminen otsikkoon helpottaa koodimme lukemista. Jos kuitenkin haluamme tyylittää monia eri sivuja samalla tavalla, meidän on lisättävä teksti jokaisen sivun yläosaan. Se ei ehkä näytä kovin paljon työltä, voit silti kopioida sen ja ohittaa sen, mutta se luo paljon työtä, jos haluat muuttaa elementtiä myöhemmin.
Sen sijaan aiomme pitää CSS-tiedot erillisessä tiedostossa ja tuoda tiedoston sivun tyyliksi. Kopioi ja liitä tiedot tyylitagien välillä uuteen CSS-tiedostoon ourCSSfile.css.
p {
text-align: keskellä
}
#ourParagraph {
reunatyyli: kiinteä;
täyte: 30px;
}Tuo sitten tiedosto HTML-tiedostoon.
Hei maailma
Taustakuvan lisääminen CSS: llä
Nyt kun sinulla on vankka pohja HTML: ssä ja CSS: ssä, taustakuvan lisääminen on kakku. Tunnista ensin, mihin elementtiin haluat antaa taustakuvan. Esimerkissämme lisätään tausta koko sivulle. Tämä tarkoittaa, että haluamme muuttaa tyylin runko. Muista, että body-tunnisteet sisältävät kaikki näkyvät elementit.
runko {
taustakuva: url ("sky.jpg");
}
p {
text-align: keskellä
}
#ourParagraph {
reunatyyli: kiinteä;
täyte: 30px;
}Jos haluat muuttaa kehon tyyliä CSS: ssä, käytä ensin runko avainsana. Lisää sitten kihara suluet kuten aiemmin {}. Kaikkien vartalon tyylitietojen on oltava kiharoiden sulkujen välissä. Tyyliominaisuus, jota haluamme muuttaa, on taustakuva. Tyyliominaisuuksia on monia. Älä odota ulkoa niitä kaikkia. Kirjanmerkki a CSS-ominaisuuksien huijausarkki ominaisuuksilla, jotka haluat muistaa.
Liittyvät: 8 hienoa HTML-tehosetta, joita kuka tahansa voi lisätä verkkosivustolleen
Määritteen jälkeen, käytä kaksoispistettä osoittamaan, kuinka muutat määritettä. Tuo kuva käyttämällä URL (). se osoittaa, että käytät linkkiä kuvan osoittamiseen. Aseta tiedoston sijainti sulkuihin lainausmerkkien väliin. Lopeta viiva lopuksi puolipisteellä. Vaikka välilyönnillä ei ole merkitystä CSS: ssä, tee sisennystä helpottaaksesi CSS: n lukemista.
Esimerkkimme näyttää tältä:
Jos kuvasi ei näy oikein kuvan koon vuoksi, voit muuttaa kuvaa suoraan. CSS: ssä on kuitenkin taustan tyylimääritteitä, joita voit käyttää taustan muuttamiseen. Taustaa pienemmät kuvat toistetaan automaattisesti taustalla. Poista tämä käytöstä lisäämällä tausta-toisto: ei toista; omalle elementillesi.
On myös kaksi tapaa saada kuva peittämään koko tausta. Ensin voit asettaa taustakoon näytön koon kanssa taustakoko: 100% 100%;, mutta tämä venyttää kuvaa ja voi vääristää kuvaa liikaa. Jos et halua kuvan mittasuhteiden muuttumista, voit myös asettaa taustakoon arvoksi peite. Peite saa taustakuvan peittämään taustan, mutta ei vääristä kuvaa.
Taustavärin vaihtaminen
Muutetaan vielä yksi asia. Nyt kun meillä on tausta, kohtaamme on vaikea lukea. Tehdään sen tausta valkoiseksi. Prosessi on samanlainen. Elementti, jota haluamme muokata, on #ourParagraph. # Tarkoittaa, että "ourParagraph" on id-nimi. Seuraavaksi haluamme asettaa taustaväri määritellä valkoinen.
runko {
taustakuva: url ("sky.jpg");
}
p {
text-align: keskellä
}
#ourParagraph {
taustaväri: valkoinen;
reunatyyli: kiinteä;
täyte: 30px;
}Paljon parempi.
Jatketaan verkkosivustosi suunnittelua CSS: llä
Nyt kun tiedät kuinka muuttaa HTML-elementtien tyyliä, taivas on raja! Perusmenetelmä tyylimääritteiden muuttamiseksi on sama. Tunnista muutettava elementti ja kuvaile, kuinka määritettä muutetaan. Paras tapa oppia lisää on pelata eri ominaisuuksilla. Haasta itsesi muuttamaan tekstisi väriä seuraavaksi.
Haluatko oppia HTML: n koodaamaan omia verkkosivustojasi ja sovelluksiasi? Käytä näitä verkkosivuesimerkkejä ja lähdekoodia opettaaksesi itsellesi HTML ja CSS.
- Ohjelmointi
- HTML
- Web-suunnittelu
- CSS
J. Seaton on Science Writer, joka on erikoistunut monimutkaisten aiheiden hajottamiseen. Hänellä on tohtori Saskatchewanin yliopistosta; hänen tutkimuksensa keskittyi pelipohjaisen oppimisen hyödyntämiseen opiskelijoiden sitoutumisen lisäämiseksi verkossa. Kun hän ei ole töissä, löydät hänet lukemisen, videopelien pelaamisen tai puutarhanhoidon kanssa.
Tilaa uutiskirjeemme
Liity uutiskirjeeseemme, jossa on teknisiä vinkkejä, arvosteluja, ilmaisia e-kirjoja ja erikoistarjouksia!
Vielä yksi askel !!!
Vahvista sähköpostiosoitteesi juuri lähettämässäsi sähköpostiviestissä.
