Reikalingi įrankiai
Norėdami išsamiau išnagrinėti HTML lygiavimo sąvoką, turime paminėti keletą būtinų įrankių, reikalingų HTML kodui paleisti. Vienas yra teksto redaktorius, o antrasis - naršyklė. Teksto redaktorius gali būti užrašų knygelė, didingas, užrašų knygelė ++ ar bet kuri kita, kuri gali padėti. Šiame vadove mes naudojome užrašų knygelę, numatytąją „Windows“ programą ir „Google Chrome“ kaip naršyklę.
HTML formatas
Norėdami suprasti derinimą, pirmiausia turime turėti tam tikrų žinių apie HTML pagrindus. Mes pristatėme kodo pavyzdžio ekrano kopiją.
< html >
< galva >...</ galva >
< kūnas >….</ kūnas >
</ html >
HTML yra dvi pagrindinės dalys. Viena yra galva, o kita - kūnas. Visos žymos rašomos kampiniuose skliaustuose. Pagrindinėje dalyje kalbama apie html puslapio pavadinimą naudojant pavadinimo žymą. Taip pat naudokite stiliaus teiginį galvos viduje. Kita vertus, kūnas tvarko visas kitas teksto, vaizdų ar vaizdo įrašų ir tt žymas, kitaip tariant, viskas, ką norite pridėti prie savo html puslapio, yra parašyta html kūno dalyje.
Vienas dalykas, kurį turiu pabrėžti, yra etiketės atidarymas ir uždarymas. Kiekviena parašyta žyma turi būti uždaryta. Pavyzdžiui, „HTML“ turi pradinę žymą, o pabaigos žyma yra. Taigi pastebima, kad pabaigos žyma turi brūkšnį, po kurio eina žymos pavadinimas. Panašiai ir visos kitos žymos laikosi to paties požiūrio. Tada kiekvienas teksto redaktorius išsaugomas su html plėtiniu. Pavyzdžiui, naudojome failą pavadinimu example.html. Tada pamatysite, kad bloknotų piktograma pasikeitė į naršyklės piktogramą.
Kadangi derinimas yra stiliaus turinys. Stilius html yra trijų tipų. Linijinis stilius, vidinis ir išorinis stilius. Įtraukta reiškia žymą. Galvos viduje parašyta vidinė. Tuo pačiu metu išorinis stilius įrašomas į atskirą CSS failą.
Įterptas teksto stilius
1 pavyzdys
Dabar atėjo laikas aptarti pavyzdį čia. Apsvarstykite aukščiau pateiktą vaizdą. Tame užrašų knygelėje mes parašėme paprastą tekstą. Kai paleisime ją kaip naršyklę, ji parodys toliau pateiktą išvestį naršyklėje.
Jei norime, kad šis tekstas būtų rodomas centre, pakeisime žymą.
Ši žyma yra įterpta žyma. Mes parašysime šią žymą, kai html tekste įvesime pastraipos žymą. Po teksto uždarykite pastraipos žymą. Išsaugokite ir atidarykite failą naršyklėje.
Pastraipa lygiuojama centre, kaip ji rodoma naršyklėje. Šiame pavyzdyje naudojama žyma naudojama bet kokiam lygiavimui, ty kairėn, dešinėn ir centrui. Bet jei norite sulygiuoti tekstą tik centre, tam tikslui naudojama konkreti žyma.
< centre > …… ..</ centre >Centrinė žyma naudojama prieš ir po teksto. Tai taip pat parodys tą patį rezultatą kaip ir ankstesnis pavyzdys.
2 pavyzdys
Tai pavyzdys, kaip suderinti antraštę, o ne pastraipą html tekste. Šio antraštės derinimo sintaksė yra ta pati. Tai galima padaryti naudojant žymą arba įterpiant stilių arba pridedant lygiavimo žymą antraštės žymos viduje.
Rezultatas rodomas naršyklėje. Antraštės žyma paprastą tekstą pavertė antrašte, o žyma sulygiavo ją centre.
3 pavyzdys
Sulygiuokite tekstą centre
Apsvarstykite pavyzdį, kuriame naršyklėje rodoma pastraipa. Turime tai suderinti centre.
Mes atidarysime šį failą užrašų knygelėje ir sulygiuosime jį centre, naudodami žymą.
< p stilius =tekstas-sulygiuoti: centras;>Pridėję šią žymą pastraipos žymoje, išsaugokite failą ir paleiskite jį naršyklėje. Pamatysite, kad pastraipa dabar yra sulygiuota centre. Žiūrėkite paveikslėlį žemiau.
Sulygiuokite tekstą į dešinę
Teksto paslinkimas į dešinę yra panašus į jo išdėstymą puslapio centre. Tiesiog centrinis žodis pakeičiamas dešine pastraipos žyma.
< p stilius =tekstas-sulygiuoti: teisingai;> ...........</ p >Pakeitimus galima pamatyti žemiau esančiame paveikslėlyje.
Išsaugokite ir atnaujinkite tinklalapį naršyklėje. Dabar tekstas perkeltas į dešinę puslapio pusę.
Vidinis teksto stilius
1 pavyzdys
Kaip aprašyta aukščiau, vidinis css (kaskadinis stiliaus lapas) arba vidinis stilius yra CSS tipas, apibrėžtas puslapio html antraštėje. Jis veikia panašiai kaip ir vidinės žymės.
Apsvarstykite aukščiau pateiktą puslapį; jame yra antraštės ir pastraipa. Mes privalome matyti tekstą centre. Įterpiant į eilutę, reikia rankiniu būdu rašyti žymas kiekvienoje pastraipoje. Tačiau vidinis stilius gali būti automatiškai pritaikytas kiekvienai teksto pastraipai, stiliaus teiginyje nurodant p. Tuomet pastraipos žymos viduje nereikia rašyti jokios žymos. Dabar stebėkite kodą ir jis veikia.
< stilius >P{Tekstas-sulygiuoti: centras}
</ stilius >
Ši žyma parašyta stiliaus žymoje galvos dalyje. Dabar paleiskite kodą naršyklėje.
Vykdydami puslapį naršyklėje pamatysite, kad visos pastraipos yra sulygiuotos puslapio centre. Ši žyma taikoma kiekvienai teksto pastraipai.
2 pavyzdys
Šiame pavyzdyje, kaip ir pastraipą, visas teksto antraštes suderinsime į dešinę. Šiuo tikslu galvos viduje paminėsime stiliaus teiginio antraštes.
H2, h3{
Tekstas-sulygiuoti: teisingai
}
Išsaugoję failą, paleiskite užrašų knygelės failą naršyklėje. Pamatysite, kad antraštės yra sulygiuotos dešinėje HTML puslapio pusėje.
3 pavyzdys
Vidinio stiliaus atveju gali būti situacija, kai reikia suderinti tik kai kurių teksto pastraipų tekstą, o kitos lieka tos pačios. Taigi mes naudojame klasės sąvoką. Pristatome klasę taškiniu metodu stiliaus žymos viduje. Būtina pridėti klasės pavadinimą pastraipos žymos viduje, kurią norite suderinti.
< stilius >.centras{
Tekstas-sulygiuoti: centras}
</ stilius >
klasė =centras> ……</ p >
Pirmose trijose pastraipose pridėjome klasę. Dabar paleiskite kodą. Išvestyje galite pamatyti, kad pirmosios trys pastraipos yra sulygiuotos centre, o kitos - ne.
Išvada
Šiame straipsnyje paaiškinta, kad derinimas gali būti atliekamas įvairiais būdais naudojant įterptąsias ir vidines žymas.