Norėdami nurodyti tinklalapio išvaizdą, naudokite CSS.
Tinklalapio kodavimo priemonė naudoja hiperteksto žymėjimo kalbą, kad praneštų žiniatinklio naršyklei kiekvieno puslapio elemento, pvz., pastraipos, antraštės ar sąrašo, funkcinę paskirtį. Pradėjus naudoti HTML 4, pakopiniai stiliaus lapai suteikė koduotojui būdą, kaip nurodyti naršyklei, kaip turėtų atrodyti kiekvienas iš šių elementų, neatsižvelgiant į tai, kas jie yra. Puslapis gali turėti skirtingus CSS stilius, skirtus įvairių tipų įrenginiams, pvz., mobiliesiems telefonams ir staliniams kompiuteriams, todėl puslapio išvaizda gali pasikeisti, koduotojui nekeičiant HTML. Norėdami centruoti vaizdą, naudokite CSS ypatybes.
1 žingsnis
Įdėkite žymą „img“ į HTML failą, kur norite, kad jūsų vaizdas būtų rodomas tinklalapyje. Jis turi būti tarp „body“ žymų ir po „h1“ žymų. Pavyzdžiui,
Dienos vaizdo įrašas
Tai tavo tekstas.
apibrėžia vaizdą pavadinimu photo.jpg, kuris yra 170 pikselių pločio ir 50 pikselių aukščio. Tai pirmas dalykas puslapyje po viršutinės antraštės.
2 žingsnis
Norėdami apibrėžti erdvę aplink puslapio elementus, pvz., paveikslėlius, naudokite CSS atributą „margin“. „Auto“ reikšmė, skirta paraštės atributui, nurodo žiniatinklio naršyklei automatiškai nustatyti vietos kiekį. Taigi, apibrėžia, kad erdvę aplink vaizdą nustato naršyklė.
3 veiksmas
Norėdami apibrėžti puslapio elemento rodymo būdą, naudokite ypatybę „display“. Rodyklės ypatybės „blokavimo“ reikšmė nurodo žiniatinklio naršyklei, kad elementas būtų rodomas atskiroje eilutėje, virš jo ir po juo paliekant tarpus. Taigi, apibrėžia tą patį vaizdą, bet pridedamas "display: block;" dabar deda jį į savo eilutę.
4 veiksmas
Peržiūrėkite tinklalapį keliose skirtingose naršyklėse, kad patikrintumėte, ar vaizdas tinkamai centre.
Patarimas
Įtraukite vaizdo aprašą į „alt“ žymą. Taip jūsų puslapis bus lengviau pasiekiamas silpnaregiams skaitytojams ir užtikrinama, kad jūsų kodas atitinka standartus.
