Vietnes izveide ir lielisks veids, kā izpausties. Lai gan ir daudz vietņu veidošanas rīku, pats to uzrakstāt ir jautrs veids, kā uzzināt vairāk par vietņu darbību aizkulisēs. Labs iesācēju projekts ir izveidot vietni un pievienot fona attēlu ar CSS. Šis projekts ļaus jums sākt darboties gan ar HTML, gan CSS.
Kas ir CSS?
CSS apzīmē kaskādes stila lapu. Tā ir programmēšanas valoda, kas ļauj veidot iezīmēšanas valodas. Viena no šādām iezīmēšanas valodām ir HTML vai hiperteksta iezīmēšanas valoda. HTML tiek izmantots, lai izveidotu vietnes. Lai gan jūs varat kontrolēt dažus vietnes stilus, izmantojot HTML, CSS piedāvā daudz vairāk vadības un noformēšanas iespēju.
Pamata vietnes izveide ar HTML
Tā kā CSS ir tikai stila valoda, lai to izmantotu, mums vispirms ir nepieciešams kaut kas stils. Pietiks ar ļoti vienkāršu vietni, lai mēs varētu sākt spēlēt ar CSS. Mūsu lapā būs redzams teksts “Sveika pasaule”.
Sveika pasaule
Gadījumā, ja neesat pazīstams ar HTML, ātri apskatīsim visu elementu darbību. Kā jau minēts, HTML ir iezīmēšanas valoda, kas nozīmē, ka tā izmanto tagus, lai atzīmētu tekstu. Ikreiz, kad redzat vārdu, kuru ieskauj
<> tas ir tags. Ir divu veidu tagi, tagi, kas atzīmē sadaļas sākumu, izmantojot <>, un viens, kas atzīmē sadaļas beigas, izmantojotMūsu piemērā mums ir četri tagi. The html tags norāda, kuri elementi ir vietnes daļa. The galva tags satur galvenes informāciju, kas lapā netiek parādīta, bet ir nepieciešama lapas izveidei. Visi parādītie elementi atrodas starp ķermeņa tagus. Mums ir tikai viens parādīts elements - lpp tagu. Tīmekļa pārlūkprogrammai tiek teikts, ka teksts ir rindkopa.
Saistīts: 10 vienkārši CSS kodu piemēri, kurus varat uzzināt 10 minūtēs
Vai vēlaties uzzināt vairāk par CSS izmantošanu? Vispirms izmēģiniet šos pamata CSS kodu piemērus, pēc tam tos lietojiet savās tīmekļa lapās.
CSS pievienošana HTML
Tagad, kad mums ir vienkārša lapa, mēs varam pielāgot stilu, izmantojot CSS. Mūsu lapa šobrīd ir diezgan vienkārša, un mēs neko daudz nevaram izdarīt, bet sāksim ar to, ka mūsu rindkopa izceļas, lai mēs varētu to atšķirt no fona, pievienojot apmali.
Sveika pasaule
Tagad mūsu rindkopu ieskauj melna apmale. Pievienojot stila aprakstu CSS mūsu rindkopas tagam, vietnei tika norādīts, kā veidot rindkopu. Mēs varam pievienot vairāk aprakstu. Palielināsim atstarpi jeb polsterējumu ap mūsu rindkopu un centrēsim tekstu.
Sveika pasaule
Mūsu vietne izskatās labāk, taču mūsu HTML sāk izskatīties nekārtīgs ar visiem šiem aprakstiem rindkopas tagā. Mēs varam pārvietot šo informāciju uz mūsu galveni. Mūsu galvene ir paredzēta informācijai, kas mums pareizi jāparāda vietne.
Sveika pasaule
Tagad mūsu HTML ir vieglāk lasāms. Jūs ievērosiet, ka mums tomēr bija jāmaina dažas lietas. Stila tags norāda tīmekļa pārlūkprogrammas stila informāciju, bet arī to, ko arī veidot. Šajā piemērā mēs esam izmantojuši divus dažādus veidus, kā pateikt, ko veidot. The lpp stila tagā liek tīmekļa pārlūkprogrammai piemērot šo stilu visiem rindkopu tagiem. The #ourParagraph sadaļā ir norādīts tikai stila elementiem ar id mūsu punkts. Ievērojiet to id informācija tika pievienota mūsu ķermeņa tagam p.
CSS faila importēšana uz jūsu vietni
Stila informācijas pievienošana galvenei padara mūsu kodu daudz vieglāk lasāmu. Tomēr, ja mēs vēlamies vienādi veidot daudzas dažādas lapas, šis teksts ir jāpievieno katras lapas augšdaļā. Tas, iespējams, nešķiet daudz darba, galu galā to var kopēt un izlaist, taču tas rada daudz darba, ja vēlaties vēlāk mainīt elementu.
Tā vietā mēs glabāsim CSS informāciju atsevišķā failā un importēsim to lapas stilam. Kopējiet un ielīmējiet informāciju starp stila tagiem jaunā CSS failā ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
robežas stils: ciets;
polsterējums: 30 pikseļi;
}Pēc tam importējiet failu HTML failā.
Sveika pasaule
Fona attēla pievienošana ar CSS
Tagad, kad HTML un CSS jums ir stabila bāze, fona attēla pievienošana būs kūkas gabals. Vispirms nosakiet, kuram elementam vēlaties piešķirt fona attēlu. Šajā piemērā mēs pievienosim fonu visai lapai. Tas nozīmē, ka mēs vēlamies mainīt ķermeņa. Atcerieties, ka ķermeņa tagos ir visi redzamie elementi.
ķermenis {
fona attēls: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
robežas stils: ciets;
polsterējums: 30 pikseļi;
}Lai CSS mainītu ķermeņa stilu, vispirms izmantojiet ķermeņa atslēgvārdu. Pēc tam pievienojiet cirtainās iekavas, kā mēs to darījām iepriekš {}. Visai ķermeņa stila informācijai jābūt starp cirtainajām iekavām. Stila atribūts, kuru mēs vēlamies mainīt fona attēls. Ir daudz stila atribūtu. Negaidiet, ka iegaumēsiet tos visus. Grāmatzīme a CSS īpašības krāpšanās lapa ar atribūtiem, kurus vēlaties atcerēties.
Saistīts: 8 lieliski HTML efekti, kurus ikviens var pievienot savai vietnei
Pēc atribūta izmantojiet kolu, lai norādītu, kā mainīsit atribūtu. Lai importētu attēlu, izmantojiet URL (). tas norāda, ka jūs izmantojat saiti, lai norādītu uz attēlu. Novietojiet faila atrašanās vietu iekavās starp pēdiņām. Visbeidzot, beidziet līniju ar semikolu. Lai arī atstarpei CSS nav nozīmes, izmantojiet atkāpi, lai padarītu CSS vieglāk lasāmu.
Mūsu piemērs izskatās šādi:
Ja attēls netiek pareizi parādīts attēla lieluma dēļ, varat tieši mainīt attēlu. Tomēr CSS ir fona stila atribūti, kurus varat izmantot fona mainīšanai. Attēli, kas ir mazāki par fonu, automātiski tiks atkārtoti fonā. Lai to izslēgtu, pievienojiet fona atkārtojums: nedrīkst atkārtot; savam elementam.
Ir arī divi veidi, kā padarīt attēlu pārklātu visu fonu. Pirmkārt, ar taustiņu var iestatīt fona lielumu ekrāna lielumam fona lielums: 100% 100%;, taču tas attēlu izstieps un var pārāk izkropļot attēlu. Ja nevēlaties, lai attēla proporcijas mainītos, fona lielumu varat iestatīt arī uz piesegt. Vāks liks fona attēlam aptvert fonu, bet ne deformēt attēlu.
Fona krāsas maiņa
Mainīsim pēdējo lietu. Tagad, kad mums ir fons, mūsu rindkopu ir grūti lasīt. Padarīsim tā fonu baltu. Process ir līdzīgs. Elements, kuru vēlamies modificēt, ir #ourParagraph. # Norāda, ka "ourParagraph" ir id nosaukums. Tālāk mēs vēlamies iestatīt fona krāsa atribūts baltajam.
ķermenis {
fona attēls: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
fona krāsa: balta;
robežas stils: ciets;
polsterējums: 30 pikseļi;
}Daudz labāk.
Turpinot veidot savu vietni ar CSS
Tagad, kad jūs zināt, kā mainīt dažādu HTML elementu stilu, debesis ir robeža! Stila atribūtu mainīšanas pamatmetode ir vienāda. Norādiet elementu, kuru vēlaties mainīt, un aprakstiet, kā mainīt atribūtu. Labākais veids, kā uzzināt vairāk, ir spēlēties ar dažādiem atribūtiem. Izaiciniet sevi mainīt teksta krāsu pēc tam.
Vai vēlaties iemācīties HTML kodēt savas vietnes un lietotnes? Izmantojiet šos tīmekļa lapu piemērus un pirmkodu, lai iemācītu sev HTML un CSS.
- Programmēšana
- HTML
- Web dizains
- CSS
Dž. Sītons ir zinātņu rakstnieks, kas specializējas sarežģītu tēmu sadalīšanā. Viņai ir doktora grāds Saskačevanas universitātē; viņas pētījumi koncentrējās uz spēļu balstītas mācīšanās izmantošanu, lai palielinātu studentu iesaistīšanos tiešsaistē. Kad viņa nestrādā, jūs atradīsit viņu lasot, spēlējot videospēles vai dārzkopībā.
Abonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam par tehniskiem padomiem, atsauksmēm, bezmaksas e-grāmatām un ekskluzīviem piedāvājumiem!
Vēl viens solis !!!
Lūdzu, apstipriniet savu e-pasta adresi e-pastā, kuru tikko nosūtījām.