Kuidas CSS -is taustapilti määrata?

Kuidas CSS -is taustapilti määrata?

Veebisaidi loomine on suurepärane võimalus ennast väljendada. Kuigi veebisaitide loomise tööriistu on palju, on selle ise kirjutamine lõbus viis veebisaitide telgitaguste toimimise kohta lisateabe saamiseks. Hea algaja projekt on veebisaidi loomine ja taustapildi lisamine CSS -iga. See projekt paneb teid tööle nii HTML -i kui ka CSS -iga.





Mis on CSS?

CSS tähistab Cascading Style Sheet. See on programmeerimiskeel, mis võimaldab teil märgistuskeeli stiilida. Üks selline märgistuskeel on HTML või hüperteksti märgistuskeel. HTML -i kasutatakse veebisaitide loomiseks. Kuigi saate mõnda veebisaidi stiili HTML -i abil juhtida, pakub CSS palju rohkem juhtimis- ja kujundusvõimalusi.



Lihtsa veebisaidi loomine HTML -iga

Kuna CSS on lihtsalt stiilikeel, on selle kasutamiseks vaja esmalt midagi kujundada. CSS -iga mängimise alustamiseks piisab väga lihtsast veebisaidist. Meie lehel kuvatakse 'Tere maailm'.









Hello World



Kui te pole HTML -iga tuttav, vaatame kiiresti läbi kõik elemendid. Nagu mainitud, on HTML märgistuskeel, mis tähendab, et see kasutab teksti tähistamiseks silte. Kui näete sõna, mida ümbritseb see on silt. On kahte tüüpi silte: silt, mis tähistab jaotise algust, ja teine, mis tähistab jaotise lõppu. Jaotises olev tekst on samuti mõeldud selle eristamise hõlbustamiseks.



Meie näites on meil neli silti. The html silt näitab, millised elemendid on veebisaidi osa. The pea silt sisaldab päise teavet, mida lehel ei kuvata, kuid mida on vaja lehe loomiseks. Kõik kuvatavad elemendid on keha silte. Meil on ainult üks kuvatav element, lk silt. See ütleb veebibrauserile, et tekst on lõik.

Seotud: 10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga



CSS -i lisamine HTML -i

Nüüd, kui meil on lihtne leht, saame stiili CSS -iga kohandada. Meie leht on praegu üsna lihtne ja me ei saa palju teha, kuid alustame sellest, et muudame oma lõigu silmapaistvaks, et saaksime selle taustast eristada, lisades äärise.





Hello World






Nüüd ümbritseb meie lõiku must äär. Lisades meie lõigusildile CSS -i stiilikirjelduse, öeldi veebisaidile, kuidas lõiku stiilida. Võime lisada veel kirjeldusi. Suurendame tühikut või polsterdust meie lõigu ümber ja tsentreerime oma teksti.





Hello World




Meie veebisait näeb parem välja, kuid meie HTML hakkab paragrahvimärgistuse kõigi kirjeldustega räpane välja nägema. Saame selle teabe oma päisesse teisaldada. Meie päis on teave, mida peame veebisaidi korrektseks kuvamiseks.




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



Hello World



Nüüd on meie HTML -i lihtsam lugeda. Te märkate, et me pidime mõnda asja ümber tegema. Stiilimärgend ütleb veebibrauseri stiiliteabe, aga ka selle, mida stiilida. Meie näites oleme kasutanud kahte erinevat viisi, et öelda, mida stiilida. The lk stiilisildis käsib veebibrauseril seda stiili rakendada kõigile lõigusiltidele. The #meieLõige jaotis ütleb, et ainult stiilielemente, mille ID on meie lõige . Märka seda id teave lisati meie keha p -sildile.

kuidas laadida kindle raamat pdf -vormingus alla

CSS -faili importimine oma veebisaidile

Stiiliteabe lisamine päisesse muudab meie koodi lugemise palju lihtsamaks. Kui aga tahame paljusid erinevaid lehti ühtemoodi kujundada, peame selle teksti lisama iga lehe ülaossa. See ei pruugi tunduda palju tööd, saate selle kopeerida ja mööda saata, kuid see loob palju tööd, kui soovite hiljem mõnda elementi muuta.

Selle asemel hoiame CSS -i teavet eraldi failina ja impordime faili lehe kujundamiseks. Kopeerige ja kleepige teave stiilisiltide vahele uude CSS -faili meieCSSfile.css .

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

Seejärel importige fail HTML -faili.






Hello World



Taustapildi lisamine CSS -iga

Nüüd, kui teil on kindel alus HTML -is ja CSS -is, on taustapildi lisamine käkitegu. Esiteks tehke kindlaks, millisele elemendile soovite taustapildi anda. Meie näites lisame taustalehele. See tähendab, et me tahame muuta selle stiili keha . Pidage meeles, et keha sildid sisaldavad kõiki nähtavaid elemente.

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

CSS -i keha stiili muutmiseks kasutage esmalt keha märksõna. Seejärel lisage lokkisulud nagu enne {}. Kogu keha stiiliteave peab olema lokkisulgude vahel. Stiili atribuut, mida soovime muuta, on taustapilt . Stiiliatribuute on palju. Ärge lootke neid kõiki meelde jätta. Järjehoidjad CSS-i atribuutide petulehele koos atribuutidega, mida soovite meeles pidada.

Seotud: 8 lahedat HTML -efekti, mida igaüks saab oma veebisaidile lisada

kuidas lisada iPhone'ile otseteid

Pärast atribuuti kasutage koolonit, et näidata, kuidas atribuuti muudate. Pildi importimiseks kasutage url () . see näitab, et kasutate pildile osutamiseks linki. Asetage faili asukoht jutumärkide vahele sulgudesse. Lõpuks lõpetage rida semikooloniga. Kuigi tühikul ei ole CSS -is tähendust, kasutage CSS -i lugemise hõlbustamiseks taanet.

Meie näide näeb välja selline:

Kui teie pilti ei kuvata pildi suuruse tõttu õigesti, saate pilti otse muuta. Siiski on CSS -is tausta stiili atribuute, mille abil saate tausta muuta. Taustast väiksemad pildid korduvad automaatselt taustal. Selle väljalülitamiseks lisage taust-kordus:ei-korda; oma elemendile.

Samuti on kaks võimalust panna pilt katma kogu taust. Esiteks saate määrata tausta suuruse ekraani suuruseks tausta suurus: 100% 100%; , kuid see venitab pilti ja võib pilti liiga palju moonutada. Kui te ei soovi, et pildi proportsioonid muutuksid, saate ka tausta suuruseks määrata kaas . Kate muudab taustapildi taustaks, kuid ei moonuta pilti.

Taustvärvi muutmine

Muudame veel viimase asja. Nüüd, kui meil on taust, on meie lõiku raske lugeda. Teeme selle tausta valgeks. Protsess on sarnane. Element, mida soovime muuta, on #ourPa bekezdés. # Näitab, et „ourPa bekezdés” on id -nimi. Järgmisena tahame seadistada taustavärv atribuut valgele.

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

Palju parem.

Jätkame oma veebisaidi kujundamist CSS -iga

Nüüd, kui teate, kuidas erinevate HTML -elementide stiili muuta, on taevas piir! Stiiliatribuutide muutmise põhimeetod on sama. Tuvastage element, mida soovite muuta, ja kirjeldage, kuidas atribuuti muuta. Parim viis rohkem teada saada on erinevate atribuutidega mängimine. Esitage endale väljakutse muuta oma teksti värvi järgmiseks.

Jaga Jaga Piiksuma E -post 8 parimat kvaliteetsete HTML -kodeerimise näidete saiti

Kas soovite õppida HTML -i oma veebisaitide ja rakenduste kodeerimiseks? Kasutage neid veebilehe näiteid ja lähtekoodi HTML -i ja CSS -i õpetamiseks.

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML
  • Veebidisain
  • CSS
Autori kohta Jennifer Seaton(Avaldatud 21 artiklit)

J. Seaton on teaduskirjanik, kes on spetsialiseerunud keeruliste teemade lõhkumisele. Tal on doktorikraad Saskatchewani ülikoolist; tema uurimus keskendus mängupõhise õppe kasutamisele õpilaste veebipõhise kaasamise suurendamiseks. Kui ta ei tööta, leiad ta koos temaga lugemise, videomängude mängimise või aiandusega.

Veel Jennifer Seatonilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin