Home-theater-designers
Vietnes izveide ir lielisks veids, kā izpausties. Lai gan ir daudz vietņu veidošanas rīku, to rakstot pats, ir jautrs veids, kā uzzināt vairāk par to, kā vietnes darbojas aizkulisēs. Labs iesācēju projekts ir izveidot vietni un pievienot fona attēlu, izmantojot CSS. Šis projekts ļaus jums sākt darbu 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 valodu stilu. Viena šāda iezīmēšanas valoda ir HTML vai hiperteksta iezīmēšanas valoda. HTML tiek izmantots vietņu izveidei. Lai gan jūs varat kontrolēt kādu vietnes stilu, izmantojot HTML, CSS piedāvā daudz vairāk kontroles un dizaina iespēju.
Pamata vietnes izveide ar HTML
Tā kā CSS ir tikai stila valoda, lai to izmantotu, mums vispirms ir nepieciešams kaut kas veidojams. Lai sāktu spēlēt ar CSS, mums pietiks ar ļoti vienkāršu vietni. Mūsu lapā parādīsies “Sveika pasaule”.
Hello World
Ja neesat pazīstams ar HTML, ātri apskatīsim visu elementu darbību. Kā 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, ko ieskauj tā ir birka. Ir divu veidu tagi: tags, kas iezīmē sadaļas sākumu, izmantojot, un otrs, kas iezīmē sadaļas beigas, izmantojot. Sadaļas teksts ir arī paredzēts, lai padarītu šo atšķirību vieglāk pamanāmu.
Mūsu piemērā mums ir četri tagi. The html tags norāda, kuri elementi ir vietnes daļa. The galvu tags satur galvenes informāciju, kas netiek parādīta lapā, bet ir nepieciešama lapas izveidei. Visi parādītie elementi atrodas starp ķermenis tagus. Mums ir tikai viens parādītais elements - lpp tagu. Tas norāda tīmekļa pārlūkprogrammai, ka teksts ir rindkopa.
Saistīts: 10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtē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 nevaram daudz darīt, bet sāksim ar to, ka mūsu rindkopa izceļas, lai mēs varētu to atšķirt no fona, pievienojot apmali.
Hello World
Tagad mūsu rindkopu ieskauj melna apmale. Stila apraksta pievienošana CSS mūsu rindkopas tagam informēja vietni, kā veidot rindkopu. Mēs varam pievienot vairāk aprakstu. Palielināsim atstarpi jeb polsterējumu ap mūsu rindkopu un centrēsim tekstu.
Hello World
Mūsu vietne izskatās labāk, taču mūsu HTML sāk izskatīties nekārtīgi ar visiem 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 nepieciešama, lai pareizi parādītu vietni.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Tagad mūsu HTML ir vieglāk lasāms. Jūs pamanīsit, ka mums bija jāmaina dažas lietas. Stila tags norāda tīmekļa pārlūkprogrammas stila informāciju, bet arī to, ko veidot. Mūsu 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 #mūsuPunkts 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 p tagam.
kā ierakstīt ienākošo zvanu iPhone bez lietotnes
CSS faila importēšana savā vietnē
Stila informācijas pievienošana galvenei padara mūsu kodu daudz vieglāk lasāmu. Tomēr, ja mēs vēlamies veidot daudzas dažādas lapas tādā pašā veidā, šis teksts ir jāpievieno katras lapas augšpusē. Tas varētu nešķist daudz darba, galu galā jūs varat to kopēt un garām, taču tas rada daudz darba, ja vēlaties vēlāk mainīt elementu.
Tā vietā mēs saglabāsim CSS informāciju atsevišķā failā un importēsim failu, lai veidotu lapu. Kopējiet un ielīmējiet informāciju starp stila tagiem jaunā CSS failā ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Pēc tam importējiet failu HTML failā.
Hello World
Fona attēla pievienošana, izmantojot CSS
Tagad, kad jums ir stabila HTML un CSS bāze, fona attēla pievienošana būs īsta lieta. Vispirms nosakiet, kuram elementam vēlaties piešķirt fona attēlu. Mūsu piemērā mēs pievienosim fonu visai lapai. Tas nozīmē, ka mēs vēlamies mainīt ķermenis . Atcerieties, ka pamatzīmes satur visus redzamos elementus.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Lai CSS mainītu ķermeņa stilu, vispirms izmantojiet ķermenis atslēgvārds. Pēc tam pievienojiet cirtainās iekavas, kā mēs to darījām pirms {}. Visai ķermeņa stila informācijai jābūt starp cirtainām iekavām. Stila atribūts, kuru vēlamies mainīt, ir fona attēls . Ir daudz stila atribūtu. Negaidiet, ka tos visus iegaumēsit. Pievienojiet grāmatzīmei CSS rekvizītus ar atribūtiem, kurus vēlaties atcerēties.
Saistīts: 8 forši HTML efekti, kurus ikviens var pievienot savai vietnei
labākās lietotnes android tv box 2018
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. Ievietojiet faila atrašanās vietu iekavās starp pēdiņām. Visbeidzot, pabeidziet rindu ar semikolu. Lai gan atstarpēm CSS nav nozīmes, izmantojiet atkāpi, lai atvieglotu CSS lasīšanu.
Mūsu piemērs izskatās šādi:
Ja attēla lieluma dēļ jūsu attēls netiek parādīts pareizi, varat to tieši mainīt. Tomēr CSS ir fona stila atribūti, kurus varat izmantot, lai mainītu fonu. Attēli, kas ir mazāki par fonu, automātiski tiks atkārtoti fonā. Lai to izslēgtu, pievienojiet fona atkārtošana:neatkārtot; jūsu stihijai.
Ir arī divi veidi, kā padarīt attēlu aptvertu visu fonu. Pirmkārt, varat iestatīt fona izmēru atbilstoši ekrāna izmēram fona izmērs: 100% 100%; , taču tas izstieps attēlu un var to pārāk izkropļot. Ja nevēlaties mainīt attēla proporcijas, varat arī iestatīt fona lielumu uz piesegt . Vāks liks fona attēlam aizsegt fonu, bet ne izkropļot attēlu.
Fona krāsas maiņa
Maināsim pēdējo lietu. Tagad, kad mums ir pieredze, 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 #ourPa bekezdés. # Norāda, ka mūsu_rindkopa ir id nosaukums. Tālāk mēs vēlamies iestatīt fona krāsa atribūts baltajam.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Daudz labāk.
Turpinām veidot savu vietni, izmantojot CSS
Tagad, kad jūs zināt, kā mainīt dažādu HTML elementu stilu, debesis ir robeža! Pamata metode stila atribūtu maiņai ir tāda pati. Identificējiet 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. Tālāk izaiciniet sevi mainīt teksta krāsu.
Kopīgot Kopīgot Čivināt E -pasts 8 labākās vietnes kvalitatīviem HTML kodēšanas piemēriemVai vēlaties iemācīties HTML, lai kodētu savas vietnes un lietotnes? Izmantojiet šos tīmekļa lapu piemērus un avota kodu, lai iemācītu sev HTML un CSS.
Lasīt Tālāk Saistītās tēmas- Programmēšana
- HTML
- Web dizains
- CSS
J. Seaton ir zinātnes rakstnieks, kas specializējas sarežģītu tēmu sadalīšanā. Viņai ir doktora grāds Saskačevanas Universitātē; viņas pētījums koncentrējās uz uz spēlēm 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 kopā ar lasīšanu, videospēļu spēlēšanu vai dārzkopību.
Vairāk no Dženiferas SītonesAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu