Nepieciešamie instrumenti
Lai izstrādātu izlīdzināšanas jēdzienu HTML, mums jāpiemin daži nepieciešamie rīki, kas nepieciešami HTML koda palaišanai. Viens ir teksta redaktors, bet otrs - pārlūks. Teksta redaktors, iespējams, piezīmju grāmatiņa, cildens, piezīmju grāmatiņa ++ vai jebkurš cits, kas varētu palīdzēt. Šajā rokasgrāmatā mēs esam izmantojuši piezīmju grāmatiņu, noklusējuma lietojumprogrammu logos un pārlūkprogrammu Google Chrome.
HTML formāts
Lai saprastu izlīdzināšanu, mums vispirms ir jābūt zināšanām par HTML pamatiem. Mēs esam parādījuši koda parauga ekrānuzņēmumu.
< html >
< galvu >...</ galvu >
< ķermenis >….</ ķermenis >
</ html >
HTML ir divas galvenās daļas. Viens ir galva, bet otrs - ķermenis. Visi tagi ir rakstīti leņķa iekavās. Galvenā daļa attiecas uz html lapas nosaukšanu, izmantojot virsraksta tagu. Un arī izmantojiet stila paziņojumu galvas iekšpusē. No otras puses, pamatteksts nodarbojas ar visiem citiem teksta, attēlu vai videoklipu uc tagiem, citiem vārdiem sakot, viss, ko vēlaties pievienot savai html lapai, tiek ierakstīts html pamatdaļā.
Viena lieta, kas man šeit jāizceļ, ir tagu atvēršana un aizvēršana. Katrs rakstītais tags ir jāaizver. Piemēram, Html ir sākuma tags un, bet beigu tags ir. Tātad tiek novērots, ka beigu tagā ir slīpsvītra, kam seko taga nosaukums. Līdzīgi visiem pārējiem tagiem ir tāda pati pieeja. Pēc tam katrs teksta redaktors tiek saglabāts ar html paplašinājumu. Piemēram, esam izmantojuši failu ar nosaukumu example.html. Tad jūs redzēsit, ka piezīmju grāmatiņas ikona ir mainījusies uz pārlūka ikonu.
Tā kā izlīdzināšana ir stila saturs. Stils html ir trīs veidu. In-line stils, iekšējais un ārējais stils. Tagu iekļauj rindā. Galvas iekšpusē ir rakstīts iekšējais. Tajā pašā laikā ārējais stils tiek ierakstīts atsevišķā CSS failā.
Teksta inline stils
1. piemērs
Tagad ir pienācis laiks apspriest piemēru šeit. Apsveriet iepriekš redzamo attēlu. Šajā piezīmju grāmatiņas failā mēs esam uzrakstījuši vienkāršu tekstu. Kad mēs to darbinām kā pārlūkprogrammu, pārlūkprogrammā tiks parādīta zemāk norādītā izlaide.
Ja vēlamies, lai šis teksts tiktu parādīts centrā, mēs mainīsim tagu.
Šis tags ir iekļauts tags. Mēs uzrakstīsim šo tagu, kad ieviesīsim rindkopas tagu html pamattekstā. Pēc teksta aizveriet rindkopas tagu. Saglabājiet un pēc tam atveriet failu pārlūkprogrammā.
Rindkopa ir izlīdzināta centrā, kā tas tiek parādīts pārlūkprogrammā. Šajā piemērā izmantotais tags tiek izmantots jebkurai izlīdzināšanai, t.i., pa kreisi, pa labi un centrā. Bet, ja vēlaties izlīdzināt tekstu tikai centrā, šim nolūkam tiek izmantots īpašs tags.
< centrā > …… ..</ centrā >Centrālais tags tiek izmantots pirms un pēc teksta. Tas arī parādīs tādu pašu rezultātu kā iepriekšējais piemērs.
2. piemērs
Šis ir piemērs virsraksta līdzināšanai, nevis rindkopai html tekstā. Šī virsraksta izlīdzināšanas sintakse ir tāda pati. To var izdarīt, izmantojot gan tagu, gan iekļaujot stilu vai pievienojot izlīdzināšanas tagu virsraksta tagā.
Rezultāts tiek parādīts pārlūkprogrammā. Virsraksta tags ir pārveidojis vienkāršo tekstu par virsrakstu, un tags ir izlīdzinājis to centrā.
3. piemērs
Izlīdziniet tekstu centrā
Apsveriet piemēru, kurā pārlūkprogrammā ir parādīta rindkopa. Mums tas jāsaskaņo centrā.
Mēs atvērsim šo failu piezīmju grāmatiņā un pēc tam izlīdzināsim to centrā, izmantojot tagu.
< lpp stils =teksts-izlīdzināt: centrs;>Pēc šī taga pievienošanas rindkopas tagā, lūdzu, saglabājiet failu un palaidiet to pārlūkprogrammā. Jūs redzēsit, ka rindkopa tagad ir izlīdzināta centrā. Skatiet attēlu zemāk.
Izlīdziniet tekstu pa labi
Teksta noliekšana pa labi ir līdzīga tā novietošanai lapas centrā. Tikai centrālais vārds rindkopas tagā tiek aizstāts ar labo.
< lpp stils =teksts-izlīdzināt: pareizi;> ...........</ lpp >Izmaiņas var redzēt zemāk pievienotajā attēlā.
Saglabājiet un atsvaidziniet tīmekļa lapu pārlūkprogrammā. Teksts tagad ir pārvietots uz lapas labo pusi.
Teksta iekšējais stils
1. piemērs
Kā aprakstīts iepriekš, iekšējais css (kaskādes stila lapa) vai iekšējais stils ir css veids, kas ir definēts lapas html galvas daļā. Tas darbojas līdzīgi kā iekšējie tagi.
Apsveriet iepriekš parādīto lapu; tajā ir virsraksti un rindkopas. Mums ir prasība redzēt tekstu centrā. Iekļautai izlīdzināšanai ir nepieciešams manuāli rakstīt tagus katrā rindkopā. Bet iekšējo stilu var automātiski piemērot katrai teksta rindkopai, stila paziņojumā minot p. Pēc tam rindkopas tagā nav jāraksta neviens tags. Tagad ievērojiet kodu, un tas darbojas.
< stils >Lpp{Teksts-izlīdzināt: centrs}
</ stils >
Šis tags ir ierakstīts stila tagā galvas daļā. Tagad palaidiet kodu pārlūkprogrammā.
Izpildot lapu pārlūkprogrammā, jūs redzēsit, ka visas rindkopas ir izlīdzinātas lapas centrā. Šī atzīme tiek lietota katrai teksta rindkopai.
2. piemērs
Šajā piemērā, tāpat kā rindkopu, visus teksta virsrakstus izlīdzināsim labajā pusē. Šim nolūkam mēs pieminēsim virsrakstus stila paziņojumā galvas iekšpusē.
H2, h3{
Teksts-izlīdzināt: taisnība
}
Tagad pēc faila saglabāšanas pārlūkprogrammā palaidiet piezīmju grāmatiņas failu. Jūs redzēsit, ka virsraksti ir izlīdzināti HTML lapas labajā pusē.
3. piemērs
Iekšējā stilā var rasties situācija, kad jāsaskaņo tikai dažu teksta rindkopu teksts, bet citas paliek nemainīgas. Tāpēc mēs izmantojam klases jēdzienu. Mēs iepazīstinām klasi ar punktu metodi stila tagā. Rindkopas tagā ir jāpievieno klases nosaukums, kuru vēlaties izlīdzināt.
< stils >.centrs{
Teksts-izlīdzināt: centrs}
</ stils >
klase =centrs> ……</ lpp >
Mēs esam pievienojuši klasi pirmajās trīs rindkopās. Tagad palaidiet kodu. Rezultātā var redzēt, ka pirmās trīs rindkopas ir izlīdzinātas centrā, bet citas nav.
Secinājums
Šajā rakstā tika paskaidrots, ka izlīdzināšanu var veikt dažādos veidos, izmantojot iekšējos un iekšējos tagus.