Veebisaidi loomine on suurepärane võimalus ennast väljendada. Kuigi veebisaitide loomise tööriistu on palju, on selle ise kirjutamine tore viis veebisaitide kulisside taga toimimise kohta lisateavet saada. Hea algaja projekt on veebisaidi loomine ja taustpildi lisamine CSS-iga. See projekt aitab teil töötada nii HTML-i kui ka CSS-iga.
Mis on CSS?
CSS tähistab kaskaadset stiililehte. See on programmeerimiskeel, mis võimaldab stiilida märgistuskeeli. Üks selline märgistuskeel on HTML või hüpertekstne märgistuskeel. HTML-i kasutatakse veebisaitide loomiseks. Kuigi HTML-i abil saate kontrollida mõnda veebisaidi stiili, pakub CSS palju rohkem juhtimis- ja kujundusvalikuid.
HTML-iga põhiveebisaidi loomine
Kuna CSS on lihtsalt stiilikeel, vajame selle kasutamiseks kõigepealt midagi stiiliks. CSS-iga mängimise alustamiseks piisab väga lihtsast veebisaidist. Meie lehel kuvatakse "Tere maailm".
Tere, Maailm
Kui te pole HTML-iga tuttav, vaatame kiiresti üle, mida kõik elemendid teevad. Nagu mainitud, on HTML märgistuskeel, mis tähendab, et see kasutab silte, mis tähistab teksti. Alati, kui näete ümbritsetud sõna
<> see on silt. On kahte tüüpi silte: silt, mis tähistab jaotise algust <> abil ja teine, mis tähistab jaotise lõppuMeie 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 mis on vajalik lehe loomiseks. Kõik kuvatud elemendid asuvad keha sildid. 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
Kas soovite CSS-i kasutamise kohta rohkem teada saada? Alustuseks proovige neid CSS-i põhilisi näiteid ja seejärel rakendage neid oma veebisaitidele.
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 oma lõigu eristamisega, et saaksime seda piirist lisades taustast eristada.
Tere, Maailm
Nüüd ümbritseb meie lõiku must äär. CSS-is stiilikirjelduse lisamine meie lõikemärgendile andis veebisaidile teada, kuidas lõiget kujundada. Saame lisada veel kirjeldusi. Suurendame lõigu ümber valget ruumi ehk polsterdust ja keskendame oma teksti.
Tere, Maailm
Meie veebisait näeb parem välja, kuid meie HTML hakkab lõigusildis kõigi nende kirjeldustega segaseks minema. Saame selle teabe oma päisesse teisaldada. Meie päis on teave selle kohta, et peame veebisaiti õigesti kuvama.
Tere, Maailm
Nüüd on meie HTML-i lihtsam lugeda. Märkate, et pidime mõningaid asju ümber muutma. Stiilisilt ütleb veebibrauseri stiiliteabe, aga ka selle, mida ka stiilida. Oma näites oleme kasutanud kahte erinevat viisi, kuidas öelda, mida stiilida. The lk stiilisildis käsib veebibrauseril seda stiili rakendada kõigile lõigumärgenditele. The # meiePunkt jaotises kästakse seda kasutada ainult ID-ga stiilielementidel meie lõige. Märka seda id teave lisati meie kehas olevale p-märgendile.
CSS-faili importimine oma veebisaidile
Stiiliteabe lisamine päisesse muudab meie koodi palju lihtsamini loetavaks. Kui aga soovime paljusid erinevaid lehti ühtemoodi kujundada, peame selle teksti lisama iga lehe ülaossa. See ei pruugi tunduda palju tööd, saate selle siiski kopeerida ja mööda saata, kuid see loob palju tööd, kui soovite elementi hiljem muuta.
Selle asemel hoiame CSS-i teavet eraldi failis ja impordime faili lehe stiiliks. Kopeerige ja kleepige teave stiilimärgendite vahele uude CSS-faili meieCSSfile.css.
p {
teksti joondamine: keskel
}
#ourParagraph {
piiri stiilis: kindel;
polster: 30px;
}Seejärel importige fail HTML-faili.
Tere, Maailm
Taustpildi lisamine CSS-iga
Nüüd, kui teil on HTML-is ja CSS-is kindel alus, on taustpildi lisamine käkitegu. Kõigepealt tehke kindlaks, millisele elemendile soovite taustpildi anda. Lisame oma näites kogu lehele tausta. See tähendab, et me tahame muuta stiili keha. Pidage meeles, et keha märgendid sisaldavad kõiki nähtavaid elemente.
keha {
taustapilt: url ("sky.jpg");
}
p {
teksti joondamine: keskel
}
#ourParagraph {
piiri stiilis: kindel;
polster: 30px;
}CSS-is keha stiili muutmiseks kasutage esmalt keha märksõna. Seejärel lisage lokkisulgud nagu me enne tegime {}. Kogu keha stiiliteave peab olema lokkis sulgudes. Stiili atribuut, mida soovime muuta, on taustapilt. Stiiliatribuute on palju. Ära oota neid kõiki pähe õppimas. Järjehoidja a CSS-i omaduste petulehed atribuutidega, mida soovite meeles pidada.
Seotud: 8 lahedat HTML-efekti, mida igaüks saab oma veebisaidile lisada
Pärast atribuuti kasutage koolonit, et näidata, kuidas atribuuti muudate. Pildi importimiseks kasutage nuppu URL (). see näitab, et kasutate pilti osutamiseks linki. Pange faili asukoht sulgudes jutumärkide vahele. Lõpuks lõpetage rida semikooloniga. Kuigi tühimikul pole CSS-is tähendust, kasutage CSS-i hõlpsamini loetavaks taandumist.
Meie näide näeb välja selline:
Kui teie pilti ei kuvata pildi suuruse tõttu õigesti, saate pilti otse muuta. CSS-is on aga taustastiili atribuudid, mida saate tausta muutmiseks kasutada. Taustast väiksemad pildid korduvad automaatselt taustal. Selle väljalülitamiseks lisage taust-kordus: ei korda; oma elemendile.
Samuti on kahel viisil võimalik muuta pilt kogu taustaks. Esiteks saate tausta suuruse seada ekraani suurusele tausta suurus: 100% 100%;, kuid see venitab pilti ja võib pilti liiga palju moonutada. Kui te ei soovi, et pildi proportsioone muudetaks, saate ka tausta suuruseks määrata kate. Kate paneb taustpildi tausta katma, kuid ei moonuta pilti.
Taustavärvi muutmine
Muudame veel viimast asja. Nüüd, kui meil on taust, on meie lõiget raske lugeda. Teeme selle tausta valgeks. Protsess on sarnane. Element, mida soovime muuta, on #ourParagraph. # Näitab, et "ourParagraph" on id-nimi. Järgmisena tahame määrata taustavärv atribuut valgele.
keha {
taustapilt: url ("sky.jpg");
}
p {
teksti joondamine: keskel
}
#ourParagraph {
taustavärv: valge;
piiri stiilis: kindel;
polster: 30px;
}Palju parem.
Jätkate oma veebisaidi kujundamist CSS-iga
Nüüd, kui teate, kuidas muuta erinevate HTML-elementide stiili, on piiriks taevas! Põhimeetod stiiliatribuutide muutmiseks on sama. Tuvastage element, mida soovite muuta, ja kirjeldage, kuidas atribuuti muuta. Parim viis rohkem teada saada on mängida erinevate atribuutidega. Esitage väljakutse, et saaksite järgmisena oma teksti värvi muuta.
Kas soovite õppida HTML-i oma veebisaitide ja rakenduste kodeerimiseks? HTML-i ja CSS-i õpetamiseks kasutage neid veebilehtede näiteid ja lähtekoodi.
- Programmeerimine
- HTML
- Veebikujundus
- CSS
J. Seaton on teaduskirjanik, kes on spetsialiseerunud keeruliste teemade lagundamisele. Tal on doktorikraad Saskatchewani ülikoolist; tema uurimistöö keskendus mängupõhise õppe kasutamisele õpilaste sidususe suurendamiseks veebis. Kui ta ei tööta, leiate ta koos oma lugemise, videomängude mängimise või aiatööga.
Telli meie uudiskiri
Liituge meie uudiskirjaga, kus leiate tehnilisi näpunäiteid, ülevaateid, tasuta e-raamatuid ja eksklusiivseid pakkumisi!
Veel üks samm !!!
Palun kinnitage oma e-posti aadress meilis, mille me just saatsime.
