Formatimi i një paragrafi HTML me stile

Në rastin e dokumenteve HTML, etiketat punojnë më shumë për të shënuar përmbajtjen sesa për të treguar se si duhet të paraqitet. Më shumë kontroll mbi prezantimin arrihet me stile. Në këtë artikull, unë do të shikoj ato stile që lidhen me formatimin e paragrafit në HTML.

Etiketë

Në HTML, ju mund të specifikoni paragrafët dhe atributi align i rreshton ato majtas, djathtas, qendër ose justifikuar. Përveç tyre, ne do të përdorim atributin e stilit global.

Rreshtimi i paragrafit

Ju mund të rreshtoni një paragraf duke përdorur atributin align me vlerat e mëposhtme:

text-align: majtas|djathtas|qendër|justifikoj|fillestar|trashëgoj;

Kopjoni kodin e mëposhtëm në një skedar .html.

Ky paragraf është i rreshtuar në qendër

Ky paragraf është i rreshtuar djathtas

Ky paragraf shfaqet në dritaren e shfletuesit të justifikuar. Një paragraf i ndarë mirë justifikohet djathtas dhe justifikuar majtas duke shtuar hapësira shtesë. Mund të shihni se skajet e paragrafit të justifikuar përputhen me skajet e paragrafëve të justifikuar të majtë dhe të djathtë. Në një paragraf të rreshtuar majtas, kufiri i majtë është i barabartë, dhe në një paragraf të rreshtuar djathtas, është i djathtë. A e shihni që ky paragraf i ka të dyja skajet? Kjo arrihet falë stilit text-align:justify.

Në dritaren e shfletuesit HTML, kodi i paragrafit duket kështu.

Hapësira e rreshtave

Ju mund të kontrolloni ndarjen e rreshtave të një paragrafi me style=line-height . Përdorni atributin e stilit me vlerat e mëposhtme:

lartësia e vijës: normale|numri|gjatësia|fillestare|trashëgimi;

Më poshtë është një shembull i kodit HTML që nxjerr paragrafë me hapësirë ​​të ndryshme rreshtash:

Ky paragraf përdor dy vlera për atributin e stilit. Linja e parë-lartësia:1.5 specifikon një hapësirë ​​e gjysmë rreshti për paragrafin, dhe vlera e dytë text-align:justify specifikon që teksti i paragrafit duhet të justifikohet në gjerësi.

Ky paragraf ka ndarje të dyfishtë rreshtash dhe është i justifikuar. line-height:2 specifikon ndarje të dyfishtë. Atributi i stilit nuk duhet të ketë dy vlera. Por nëse duhet të specifikoni dy vlera, mund ta bëni këtë duke i ndarë me një pikëpresje.

: Vendos hapësirën e rreshtave në 13 piksele;

: Vendos hapësirën ndërmjet paragrafëve në HTML në 200% të madhësisë aktuale të shkronjave;

: Vendos lartësinë e linjës në 14 piksele.

dhëmbëzimi

Kam përdorur termin "indentation" për ta bërë më të lehtë për t'u kuptuar. Por në HTML, ne përdorim hapësira për të krijuar hapësirë ​​të bardhë rreth një objekti. Ju mund të përdorni atributin stil me një vlerë mbushjeje për të vendosur dhëmbëzimin majtas ose djathtas të një paragrafi.

Më poshtë është një shembull i paragrafëve të dhëmbëzuar majtas dhe djathtas:

Ky paragraf nuk është i prerë, është thjesht i justifikuar. Shikoni atributin e stilit të elementit P për këtë paragraf.

Për këtë paragraf, e vendosa dhëmbëzimin e majtë në 30 px duke përdorur padding-left:30px. Ky paragraf justifikohet gjithashtu duke përdorur stilin text-align:justify. Siç e dini tashmë, ne mund të përdorim vlera të shumta për atributin Style duke i ndarë ato me një pikëpresje.

Dhe ky paragraf ka një dhëmbëzim djathtas prej 30 pikselësh, por jo të majtë. Është e justifikuar edhe në gjerësi. Vlera 'mbushje-djathtas' e atributit style e vendos mbushjen në të djathtë. Nëse nuk e shihni efektin, zvogëloni gjerësinë e dritares së shfletuesit në mënyrë që paragrafi i justifikuar HTML të shfaqet siç duhet.

Dhimbjet midis paragrafëve (zona para dhe pas një paragrafi)

Në HTML ose CSS, ne nuk kemi nevojë për këtë. Ne thjesht mund të stilojmë mbushjen në element

Padding-lart dhe padding-bottom përcaktojnë hapësirën e bardhë para dhe pas një paragrafi, i cili funksionon si një mbushje e sipërme ose e poshtme. Shikoni shembullin e etiketës më poshtë

E vendosa paragrafin e parë HTML në 10px indent para të dytës dhe 50px pas paragrafit të dytë:

Ky paragraf nuk është shënuar para ose pas. Ky është një paragraf i rregullt i justifikuar. Siç e dini tashmë, ne mund të justifikojmë një paragraf duke përdorur kodin style=”text-align:justify” brenda etiketës.

Ky paragraf është i rreshtuar. Ai gjithashtu ka një dhëmbëzim 10 px përpara paragrafit dhe 50 px pas. Brenda etiketës, vendosa 3 stile.

Ky është një paragraf normal pa dhëmbëza dhe rreshtim të paracaktuar.

Gjërat për të mbajtur mend

• Një paragraf HTML mund të rreshtohet duke përdorur atributin align ose stilin e rreshtimit të tekstit;
• HTML do të jepet ndryshe në varësi të madhësive të ekranit, madhësive të dritareve të shfletuesit;
• Shtimi i hapësirave shtesë ose vijave boshe në kodin HTML nuk ndikon në daljen. Shfletuesi heq të gjitha hapësirat shtesë;
• Etiketat përcaktojnë se çfarë duhet të shfaqet, dhe stilet përcaktojnë se si duhet të shfaqet;
• Stilet mund të vendosen në tre mënyra të ndryshme - inline (brenda etiketave), të brendshme ( brenda të njëjtit skedar HTML me një element
  

  Princi Andrei e shikoi përsëri këtë pemë lisi disa herë ndërsa kalonte nëpër pyll. Nën lis kishte lule dhe bar, por ai ende qëndronte në mes të tyre, i zymtë, i palëvizshëm, i shëmtuar dhe kokëfortë.
  

  Rezultati:

  Princi Andrei e shikoi përsëri këtë pemë lisi disa herë ndërsa kalonte nëpër pyll. Nën lis kishte lule dhe bar, por ai ende qëndronte në mes të tyre, i zymtë, i palëvizshëm, i shëmtuar dhe kokëfortë.

  Tani ju mund të lehtë bëni një vijë të kuqe në faqet tuaja html. Shihemi se shpejti!

  Kur lexoni një libër, gazetë, revistë dhe në të vërtetë çdo tekst normal, do të ndesheni me shumë paragrafë dhe rreshti i parë i secilit prej tyre përmban një pikë të vogël. Në këtë artikull, unë do t'ju tregoj opsionin më të mirë. dhëmbëzimi i paragrafit nëpërmjet CSS.

  Sigurisht, çdo numër hapësirash mund të futet duke përdorur , duke zgjedhur kështu dhëmbëzimin e nevojshëm, por, me siguri, ju e kuptoni që kjo metodë, për ta thënë butë, është e papërshtatshme. Dhe zgjidhja e këtij problemi është shumë e thjeshtë.

  Duhet ta dini tashmë se në HTML një paragraf krijohet duke përdorur një etiketë<fq>. Kështu, çdo paragraf duhet të jetë në etiketën e vet.<fq>. Dhe për duke shënuar rreshtin e parë të çdo paragrafi mjaftueshëm për t'u lidhur Kodi CSS:

  P(
  teksti-indent: 10px;
  }

  Në këtë shembull, ne kemi futur 10 piksele. Ju mund të luani me këtë vlerë për të gjetur më të mirën për faqen tuaj.

  Në këtë mënyrë të thjeshtë, ju mund caktoni dhëmbëzimin e rreshtave të parë të çdo paragrafi në tekstin në sit.

  Nëse keni ndonjë pyetje, ose keni dëshirë të flisni për këtë artikull, atëherë mund të lini komentin tuaj në fund të faqes.

  Komentet (9):

  31.05.2013 13:10:03

  Përshëndetje Michael, ju lutem më ndihmoni të zgjidh problemin me kodin css të mëposhtëm: .bam (kufi: 1px e zezë e fortë; kufiri-radius: 8px; kufiri-poshtë: 4%; rreshtimi i tekstit: majtas; gjerësia: 84%; ) . bam .autor (ngjyra e sfondit: e bardhë; kufiri-poshtë: 1px e zezë e fortë; korniza-lart-djathtas-rreze: 8 px; kufiri-lart-majtas-radius: 8px; pesha e shkronjave: bold; mbushja: 4px; ) . bam .text (ngjyra e sfondit: WhiteSmoke; kufiri-poshtë-djathtas-rreze: 8px; border-bottom-left-radius: 8px; mbushje:4px; ) Teksti brenda ".bam .text" duhet të mbështillet në një rresht tjetër nëse nuk përshtatet në një rresht. Por për disa arsye nuk transferohet, por zvarritet nga blloku. Ndihmoni në zgjidhjen e këtij problemi.

  Per t'u pergjigjur

  06.06.2013 22:42:20

  Përshëndetje Mikhail, ju nuk e dini se si të gjeni një rrugëdalje nga situata e mëposhtme: ka një bllok, dhe brenda tij është një bllok tjetër, dhe teksti është shkruar në këtë bllok brenda (gjatësia e tekstit nuk dihet paraprakisht). Pra, si ta bëjmë lartësinë e bllokut prind të varet nga lartësia e bllokut brenda tij (me tekst)? Dhe pastaj për disa arsye kuptoj se lartësia e bllokut prind është më e vogël se lartësia e atij të brendshëm.

  Per t'u pergjigjur

  Admin 06.06.2013 23:32:40

  Të gjitha blloqet e jashtme shtrihen sipas dimensioneve të blloqeve të brendshme. Ju nuk keni nevojë ta bëni këtë, duhet të jetë tashmë si parazgjedhje.

  Per t'u pergjigjur

  07.06.2013 11:11:09

  dhe ju shikoni: http://progbase.ru/about.php

  Per t'u pergjigjur

  Admin 07.06.2013 21:54:37

  Duhet përdorur

  - vendoseni këtë bllok në vende të ndryshme dhe shikoni se çfarë ndryshon. Pasi gjithçka të jetë në rregull, lëreni atje.

  Per t'u pergjigjur

  13.09.2013 21:39:34

  Përshëndetje! Ndihmoni, ju lutem, në dritaren e këtij sugjerimi kur qëndroni pezull për të bërë dhëmbëzime dhe stile të tjera teksti. i shpejtë dhe më tej në tekst

  Për t'i dhënë një stil të caktuar, duhet ta vendosni tekstin në enën e duhur.

  Të gjitha etiketat e formatimit mund të ndahen në tre grupe:

  1. Etiketat e titujve ( h1-h6).

  2. Dizajnoni etiketat e tekstit kryesor ( , , ,

  , 
   etj.).
  3. Grupimi i etiketave ( 
  
  , 
  
  , 
  
  )
  
  Etiketat e titujve
  Shndërroni tekstin e thjeshtë në një titull të një niveli të caktuar.  Etiketë 
  
   krijon një titull të nivelit të parë - më i madhi dhe më i rëndësishmi (zakonisht titulli i artikullit në faqe), 
  
  është përgjegjës për titullin e nivelit të gjashtë - më i vogli dhe më i padukshmi.  Këto etiketa janë të rëndësishme si për përdoruesit ashtu edhe për motorët e kërkimit - titujt me nëntituj pëlqehen nga të dy.  Duhet të respektohet hierarkia e niveleve, pra për 
  
   Duhet të shkoj 
  
  , dhe jo anasjelltas.
  
  Për të kuptuar se si funksionon kjo, futni kodin e mëposhtëm në skedarin html:
   
  Titulli i nivelit të parë
  Titulli i nivelit të dytë
  Titulli i nivelit të tretë
  Titulli i nivelit 4
  Titulli i nivelit 5
  Titulli i nivelit 6
  
  Do të duket kështu në shfletues:
  Etiketat e dizajnit të tekstit të trupit
  Lejo formatimin në nivelin e karaktereve.  Le të shohim se çfarë mund të bëni me ta.
  Shkronja e theksuar
  Duhet të përqendroheni në tekst.  Është gjithashtu e rëndësishme për motorët e kërkimit, ata mund të nxjerrin në pah fjalë kyçe.
  Përgjegjës për etiketat e theksuara 
   Dhe .
  
  Mbishkrim dhe nënshkrim
  Ato mund të përdoren në formula, ekuacione, shënime të disa sasive.
  Etiketa është përgjegjëse për krijimin e abonimeve 
  , për etiketën e sipërme përdoret 
  .
  X 1=32 m 2
  Reduktimi i madhësisë
  Nëse duhet ta bëni tekstin një më pak se ai i vendosur në të gjithë faqen, atëherë duhet të përdorni etiketën 
  
  Teksti i thjeshtë. Teksti i reduktuar.
  Nënvizoni
  Ky lloj theksimi mund të përdoret për të treguar ndryshimet e bëra në një dokument, ose thjesht për të theksuar tekstin.
  Teksti i thjeshtë. Teksti i nënvizuar.
  Strikethrough
  Ju mund të kryqëzoni informacionin nëse ai tashmë ka humbur rëndësinë e tij.  Projektuar për këtë etiketë 
  .
  Kursivë
  Nevojitet për të përqendruar vëmendjen në tekst dhe mund të krijohet me një etiketë 
   ose 
  .
  
  Futja e tekstit në kompjuter
  Ndodh që ju duhet të shtoni kodin burimor të programit dhe rezultatet e punës së tij në një faqe në internet.  Për ta bërë të lehtë dallimin vizual të pjesëve të ndryshme të tekstit nga njëra-tjetra, zhvilluesit e HTML prezantuan etiketat e këtij grupi.
  Në kontejner 
   kodi i programit mbyllet, ndërsa variablat e tij theksohen me një etiketë 
  , dhe rezultati i ekzekutimit është 
  .  Enë 
   përmban tekst që përdoruesi duhet të fusë nga tastiera kur punon me programin dhe gjithçka që është e mbyllur në etiketa 
  , ruan formatin origjinal, duke përfshirë hapësira shtesë dhe ndërprerje rreshtash.
  
    kështu a, b, c, ketu rezultati i ekzekutimit të programit , dhe kjo është teksti i futur nga përdoruesi 
  shfaqet kështu
  .
  
  Citate dhe përkufizime
  Kodi do të duket si 
   kështu 
  , variablat shënohen si më poshtë: 
   a, b, c 
  , ketu 
   rezultati i ekzekutimit të programit 
  , dhe kjo është 
   teksti i futur nga përdoruesi 
  .  Mbani formatimin origjinal 
   shfaqet kështu 
  
  .
  
   
  Citat në etiketën e kuotave të bllokut.
  Një citat brenda një kontejneri të citateve.Citim i shkurtër me etiketë q.Përkufizim i përkushtuar.Shkurtesa (OJQ, IP).
  
  Shembull i përgjithshëm
  Për të kuptuar më mirë se për çfarë është përgjegjës një etiketë dhe si funksionon, shihni kodin e mëposhtëm dhe rezultatin e ekzekutimit të tij.
   
  I yndyrshëm teksti mund të etiketohet të fortë Dhe b.  Mbrapa kursive përgjigje em Dhe i.
  etiketa nën Dhe sup përdoret për të krijuar më të ulëta(x 1…x n) Dhe sipërme (42=16) indekset. Del godet jashtë, ins - thekson.
  etiketa kodi, kbd, var Dhe kampion përdoret rrallë dhe nevojitet për të shfaqur listat e programeve
   abbr nevojiten për shkurtesat ( HTML).  Etiketat blockquote, cite dhe q përdoren për të cituar ( Tashmë qielli po merrte frymë në vjeshtë)
  Etiketa paraprake ruan formatimin origjinal të tekstit pa hequr hapësirat ose ndërprerjet e rreshtave.
  
  Shfletuesi e interpreton këtë kod si kjo:
  
  Grupimi i etiketave
  Është e nevojshme që teksti të mos shkojë në një rresht të vazhdueshëm, por të ndahet në komponentë logjikë.
  Etiketat përmbajnë një paragraf.
   
  Paragrafi i parë
  Paragrafi i dytë
  
  
  Etiketë 
  
   kalon në rreshtin tjetër brenda një paragrafi (nuk do të ketë asnjë dhëmbëzim përpara rreshtit).
  
   ju lejon të vizatoni një vijë horizontale.  Mund ta përdorni për të ndarë më vizualisht tekstin.  Atributet gjerësia, madhësia, ngjyrë, rreshtoj Dhe noshade caktoni përkatësisht gjerësinë, trashësinë, ngjyrën, shtrirjen dhe mungesën e efektit 3D të linjës.
   
  Rreshti mbi vijën. 
  Rreshti nën vijë.