Pjerrësi CSS: ndryshoni stilin e shkronjave. HTML5: Etiketat e vjetra Caktimi i ri që etiketon italizon

Në këtë artikull, ne do të flasim për mënyrën e zgjedhjes së tekstit. me shkronja të pjerrëta HTML Ashtu si me tekstin e theksuar, teksti i pjerrët mund të bëhet në tre mënyra:

  • Etiketoj unë HTML;
  • Etiketoj em HTML;
  • Prona e CSS në stilin e shkronjave.

Le të shqyrtojmë të tre opsionet për mënyrën se si mund ta bësh italik në HTML, të diskutojmë hollësitë e kësaj çështjeje dhe cilat metoda janë më të përshtatshme dhe më korrekte për t'u përdorur në situata të caktuara.

Teksti italik: etiketë

Etiketoj unë (italic), i ngjashëm me etiketën b për tekstin e theksuar, përdoret për të theksuar fizikisht tekstin italik (kjo do të thotë që ndryshon vetëm stili i tekstit). Etiketoni aplikacionin unë:

Ndërtuesi i faqes në internet "Nubex"

Kështu, pjesa e kërkuar e tekstit vendoset midis etiketave .

Teksti italik: etiketë

Edhe pse etiketa unë mbetet i vlefshëm, nga këndvështrimi i optimizimit të faqes është më mirë të përdoret etiketimi em të nxjerrë në pah pjesët logjikisht të rëndësishme të tekstit. Kjo do të thotë që robotët e kërkimit marrin parasysh rëndësinë e tekstit të vendosur midis etiketave. :

Ndërtuesi i faqes në internet "Nubex"

Rezultati:

Ndërtuesi i faqes në internet "Nubex"

Por mos harroni se teksti i mbyllur në etiketa unë dhe em, megjithëse ato shfaqen pothuajse të njëjta (në të gjithë shfletuesit modernë), në thelb ato nuk janë mjaft identike, siç është vërejtur më sipër. Prandaj, duhet të përdorni etiketat sipas nevojës: tag em HTML për të kornizuar sektorë të rëndësishëm të tekstit dhe për të aplikuar dizajn vizual italik duke përdorur një etiketë unë ose stilet CSS. Le të shohim tani duke përdorur stilet CSS për zgjedhjen e tekstit italik.

Teksti italisht mundësuar nga CSS

Për të vendosur stilet e shfaqjes së shkronjave në CSS, përdorni vetinë në stilin e shkronjave, të cilat mund të marrin vlerat e mëposhtme: i zhdrejtë (teksti italic), i pjerrët (pjerrët) dhe normal (font i rregullt).

Vlen të kujtohet se i pjerrët shkronja dhe i prirur, në thelb të tyre, nuk janë të njëjtat. Shkronja të pjerrëta është një font i veçantë që është analog me tekstin e shkruar me dorë, dhe i prirur formohet duke anuar fontin e rregullt djathtas.

Aplikimi i atributeve në stilin e shkronjave në praktikë:

Italic me CSS - "Nubex"

Faqet tona janë, me të vërtetë, hap i madh në zhvillimin e internetit.

Ne bëjmë me të vërtetë cilësia faqet

Por duhet të mbahet mend se disa shfletues shkruajnë me pronën stili i shkronjave: i zhdrejtë; mund të mos interpretohet si tekst italic, por si italic.

Përshkrim

Specifikon stilin e shkronjave - të rregullt, të pjerrët ose të pjerrët. Kur teksti vendoset në italic ose italic, shfletuesi konsultohet me sistemin për të gjetur një font të përshtatshëm. Nëse font i specifikuar nuk është gjetur, shfletuesi përdor një algoritëm të veçantë për të simuluar llojin e dëshiruar të tekstit. Rezultati dhe cilësia mund të mos jenë të kënaqshme, veçanërisht kur shtypni një dokument.

Sintaksë

stili i shkronjave: normale | italic | i zhdrejtë | trashëgoj

Vlerat

normal Stili normal i tekstit. Stili i pjerrët italik. stil i zhdrejtë italik. Italic dhe italic, edhe pse të ngjashëm, nuk janë e njëjta gjë. Italic është një tip i veçantë që imiton shkrimin e dorës, ndërsa i zhdrejtë formohet duke anuar karakteret e zakonshëm në të djathtë. trashëgojnë Trashëgon vlerën e prindit.

HTML5 CSS2.1 IE Cr Op Sa Fx

në stilin e shkronjave

Duis te feugifacilisi

Lorem ipsum dolor ulet amet, konsoliduar elit adipiscing, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Nëse keni nevojë për të minimizuar veniam, quis nostrud stërvitje ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo resultat.

Rezultati i këtij shembulli është treguar në Fig. 1

Figura: 1. Zbatimi i tiparit të stilit të shkronjave

Modeli i objektit

dokument.getElementById ("elementID") .style.fontStyle

Shfletuesit

Internet Explorer 7.0 ose më i ri nuk e mbështet vlerën e trashëguar.

Shfletuesit gjithmonë e bëjnë tekstin të zhdrejtë si të pjerrët.

Në html, madhësia e shkronjave luan një rol të rëndësishëm. Kjo ju lejon të tërheqni vëmendjen e përdoruesit për informacionin e rëndësishëm të postuar në faqen e internetit. Edhe pse jo vetëm madhësia e shkronjave është e rëndësishme, por edhe ngjyra, trashësia dhe madje familja e tyre.

Etiketat dhe atributet kur robot me fonte html

Gjuha e hipertekstit ka një grup të madh mjetesh për të punuar me gërma. Mbi të gjitha, është formatimi i tekstit që është detyra kryesore e html.

Arsyeja për krijimin e gjuhës HTML ishte problemi i shfaqjes së rregullave të formatimit të tekstit në shfletuesit.


Merrni parasysh etiketat që përdoren për të punuar me gërmat në HTML dhe atributet e tyre. Kryesorja është etiketimi ... Duke përdorur vlerat e atributeve të tij, mund të vendosni disa karakteristika të shkronjave:

  • ngjyra - përcakton ngjyrën e tekstit;
  • size - madhësia e shkronjave në njësitë konvencionale.

Vlerat pozitive të atributeve nga 1 në 7 janë të mbështetura.

  • face - përdoret për të vendosur familjen e shkronjave të tekstit që do të përdoret brenda etiketës ... Disa vlera mbështeten në të njëjtën kohë, të ndara me presje.

Vetëm teksti midis pjesëve të etiketës së shkronjave të çiftëzuara është i formatuar. Pjesa tjetër e tekstit shfaqet në fontin standard të paracaktuar.

Gjithashtu në html ka një numër etiketash të çiftëzuara që specifikojnë vetëm një rregull të formatimit. Kjo perfshin:

  • - vendos shkronja të theksuara në html. Etiketoj veprimi është i ngjashëm me atë të mëparshëm;
  • - madhësia është më e madhe se e paracaktuar;
  • - madhësi më e vogël e shkronjave;
  • - tekst i pjerrët. Etiketë e ngjashme ;
  • - teksti i nënvizuar;
  • - kryqëzuar;
  • - shfaq tekstin vetëm me shkronjë të vogël;
  • - me shkronjë të madhe.

Teksti i thjeshtë

Miniaturë

Miniaturë

Më shumë se zakonisht

Më pak se zakonisht

Shkronja të pjerrëta

Shkronja të pjerrëta

Nënvizuar

Kryqëzuar

Aftësitë e atributeve të stilit

Përveç etiketave të përshkruara, ka edhe disa mënyra për të ndryshuar fontin në html. Njëri prej tyre është duke përdorur atributin e stilit gjenerik. Duke përdorur vlerat e vetive të tij, mund të vendosni stilin e shfaqjes së shkronjave:

1) font-family - prona përcakton familjen e shkronjave. Numërimi i disa vlerave është i mundur.
Ndryshimi i shkronjave në html në vlerën tjetër do të ndodhë nëse familja e mëparshme nuk është instaluar në sistemin operativ të përdoruesit.

Sintaksa e shkrimit:

font-family: emri i shkronjave [, emri i shkronjave [, ...]]

2) madhësia e shkronjave - madhësia është vendosur nga 1 në 7. Kjo është një nga mënyrat kryesore që mund të rritni fontin në html.
Sintaksa e shkrimit:

madhësia e shkronjave: madhësia absolute | madhësia relative | vlera | interesi | trashëgoj

Mund të vendosni edhe madhësinë e shkronjave:

  • Në piksel;
  • Në vlerë absolute ( xx-i vogël, x-i vogël, i vogël, i mesëm, i madh);
  • Në përqindje;
  • Në pikat (pt).

Madhësia e shkronjave: 7

Madhësia e shkronjave: 24px

Madhësia e shkronjave: e madhe-x

Madhësia e shkronjave: 200%

Madhësia e shkronjave: 24pt

3) stili i shkronjave - vendos stilin e shkrimit të shkronjave. Sintaksë:

stili i shkronjave: normale | italic | i zhdrejtë | trashëgoj

Vlerat:

  • normale - drejtshkrim normal;
  • italic - italic;
  • zhdrejtë - font me prirje të djathtë;
  • trashëgoj - trashëgon drejtshkrimin e elementit prind.

Një shembull se si të ndryshoni fontin në html duke përdorur këtë veti:

stili i shkronjave: trashëgoj

stili i shkronjave: italic

stili i shkronjave: normale

stili i shkronjave: i zhdrejtë

4) font-variant - shndërron të gjitha shkronjat e mëdha në të mëdha. Sintaksë:

font-variant: normal | kapakë të vegjël | trashëgoj

Një shembull se si ta ndryshoni fontin në html me këtë veti:

font-variant: trashëgoj

font-variant: normal

variant i shkronjave: shkronja të vogla

5) pesha e shkronjave - ju lejon të vendosni trashësinë e shkrimit të tekstit (ngopjes). Sintaksë:

pesha e shkronjave: e theksuar | më e theksuar | më e lehtë | normale | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Vlerat:

  • bold - vendos shkronjat e zeza html;
  • më e guximshme - më e trashë në krahasim me normalen;
  • çakmak - më pak i ngopur në krahasim me normalen;
  • normale - drejtshkrim normal;
  • 100-900 - vendos trashësinë e shkronjave në ekuivalentin numerik.

pesha e shkronjave: e theksuar

pesha e shkronjave: më e guximshme

pesha e shkronjave: më e lehtë

pesha e shkronjave: normale

pesha e shkronjave: 900

pesha e shkronjave: 100

Prona e shkronjave dhe ngjyra e shkronjave html

Font është një tjetër pronë e kontejnerit. Brenda saj, ajo ndërthuri vlerat e disa vetive të krijuara për të ndryshuar shkronjat. Sintaksa e shkronjave është:

font: font-size font-size | trashëgoj

Gjithashtu, shkronjat e përdorura nga sistemi në mbishkrime në kontrolle të ndryshme mund të vendosen si vlerë:

  • mbishkrim - për butonat;
  • ikonë - për ikona;
  • menu - menu;
  • kutia e mesazheve - për kutitë e dialogut;
  • titër i vogël - për kontrolle të vogla
  • status-bar - font i shiritit të statusit.

font: ikonë

font: caption

font: menu

font: mesazhi-kuti

nënshkrim i vogël

font: shiriti i statusit

font: italic 50px i trashë "Times New Roman", Times, serif

Në mënyrë që të vendosni ngjyrën e shkronjave në html, mund të përdorni vetinë e ngjyrave. Kjo ju lejon të vendosni ngjyrën duke përdorur edhe një fjalë kyçe dhe formatin rgb. Dhe gjithashtu në formën e një kodi heksadecimal.

Tani do të studiojmë etiketat kryesore. Le të fillojmë me ato etiketime që kërkohen në faqe, duke formuar strukturën e saj.

Bllokoj Struktura e faqes më të thjeshtë

Një faqe në sit është një skedar teksti i thjeshtë me shtrirjen .html... Kjo skedar përmban tekstin e faqes HTML së bashku me etiketat. Ky skedar duhet të ketë etiketat e mëposhtme: etiketë , i cili duhet të përmbajë tekstin e të gjithë faqes në internet (gjithçka që është shkruar jashtë këtij etiketimi do të injorohet nga shfletuesi), dhe brenda saj duhet të ketë edhe dy etiketa: për përmbajtjen e shërbimit të faqes dhe etiketës - për tekstin kryesor, i cili është i dukshëm në ekranin e shfletuesit.

Për të shërbyer përmbajtjen që ndodhet brenda etiketës , vijnë shumë gjëra të ndryshme, por tani për tani na duhen vetëm dy prej tyre. Ky është një etiketë , i cili vendos titullin e faqes që do të jetë i dukshëm në skedën e shfletuesit dhe etiketën <meta> , i cili vendos kodimin e faqes (është vendosur në atribut <b>sharrëza</b> dhe zakonisht ka rëndësi <b>utf-8</b>, më shumë për këtë në video, e cila do të jetë disa paragrafë më poshtë).</p> <p>Gjithashtu, para etiketës <html> ndërtimi zakonisht shkruhet <b>doktipi</b>, i cili tregon versionin e gjuhës HTML në të cilën është bërë faqja. Versioni aktual i gjuhës është numri pesë dhe doktipi për të duhet të duket kështu -<!DOCTYPE html> .</p> <p>Le të hedhim një vështrim në strukturën themelore të faqes (për të ekzekutuar këtë shembull në një shfletues, kopjojeni atë në një skedar teksti me shtrirjen <b>.html</b> dhe hapeni në një shfletues nëse keni probleme me këtë - shikoni videon poshtë shembullit):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ky është titulli i titullit Kjo është përmbajtja kryesore e faqes.

Shihni këtë lidhje për mënyrën se si duket ky shembull në një shfletues.

Unë mendoj se pasi të keni lexuar në lidhje me strukturën themelore të faqes, ju ende keni disa konfuzione në lidhje me atë se si të gjitha duket në praktikë. Prandaj, unë bëra një video të veçantë në të cilën do t'ju tregoj se si ta bëni faqen tuaj të parë HTML dhe ta ekzekutoni në një shfletues (në të do t'ju tregoj gjithashtu për titullin e faqes, për kodimet, për hartimin e kodit). Shikoni dhe vetëm atëherë kaloni në leximin e mëtejshëm:

Epo, tani që kemi mësuar se si të krijojmë faqet më të thjeshta, do të kalojmë në eksplorimin e etiketave të dobishme që duhet të përdoren brenda një etikete ... Këto do të jenë etiketa për paragrafët, titujt, listat, lidhjet dhe gjëra të tjera të dobishme. Pra, le të fillojmë.

Bllokoj Paragrafët

Një nga elementët kryesorë të faqes janë paragrafët... Ato mund të krahasohen me paragrafët në një libër - secili paragraf fillon në një rresht të ri dhe ka një të ashtuquajtur vijë të kuqe (kjo është kur rreshti i parë i tekstit të paragrafit është pak i prerë në të djathtë). Nuk ka asnjë vijë të kuqe si parazgjedhje, por është e lehtë për t'u bërë (më shumë për këtë më vonë).

Një paragraf krijohet duke përdorur etiketën

Në këtë mënyrë:

Ky është titulli i titullit

Ky është një paragraf.

Ky është një paragraf tjetër.

Dhe një paragraf më shumë.

Ky është një paragraf.

Ky është një paragraf tjetër.

Dhe një paragraf më shumë.

Bllokoj Titujt h1, h2, h3, h4, h5, h6

Përveç paragrafëve, janë të rëndësishme në faqe tituj kryesorë... Ato gjithashtu mund të krahasohen me tituj nga një libër - secili kapitull ka titullin e vet (titulli i këtij kapitulli) dhe ndahet në paragrafë, të cilët gjithashtu kanë titujt e tyre. Epo, dhe teksti kryesor i faqes është në paragrafë.

Headers janë krijuar duke përdorur etiketat

,

,

,

,

,
... Ato kanë shkallë të ndryshme të rëndësisë. Në titull h1 duhet te kete titulli i të gjithë faqes HTML, në h2 - emrin blloqe faqet në h3 - emri i nënbllokimeve, etj.

Të gjithë titujt janë të trashë me parazgjedhje dhe kanë madhësi të ndryshme (kjo mund të ndryshohet përmes CSS, por më shumë për këtë më vonë). Shihni shembullin:

Ky është titulli i titullit

Titulli H1

Titulli H2

Titulli H3

Titulli H4

Titulli H5
Titulli H6

Ky është paragrafi i parë.

Ky është paragrafi i dytë.

Ky është paragrafi i tretë.

Kështu do të duket kodi në shfletues:

Titulli H1

Titulli H2

Titulli H3

Titulli H4

Titulli H5
Titulli H6

Ky është paragrafi i parë.

Ky është paragrafi i dytë.

Ky është paragrafi i tretë.

Bllokoj I yndyrshëm

Ju tashmë e dini që titrat e parazgjedhur janë yndyror... Sidoqoftë, mund ta bëni edhe tekstin e thjeshtë të theksuar - thjesht futeni në etiketë ... Shihni shembullin:

Ky është titulli i titullit

Ky është një tekst normal, dhe ky është yndyror teksti.

Kështu do të duket kodi në shfletues:

Ky është një tekst normal, dhe ky është yndyror teksti.

duhet të përdoret brenda disa etiketave të tjera, të tilla si një paragraf. Në këtë rast, paragrafët krijojnë strukturën e përgjithshme të faqes (paragrafët dhe titujt), dhe etiketën b i bën pjesët individuale të tekstit të theksuara.

Bllokoj Shkronja të pjerrëta

Përveç yndyrës, mund të bëni edhe shkronja të pjerrëta duke përdorur etiketën :

Ky është titulli i titullit

Ky është një tekst normal, dhe ky është i pjerrët teksti.

Kështu do të duket kodi në shfletues:

Bllokoj Listat

Së bashku me paragrafët dhe titujt, ekziston edhe një element tjetër i rëndësishëm i faqes - ky është listat... Elementë të tillë ndoshta janë të njohur për të gjithë përdoruesit e internetit. Ato janë një listë e diçkaje (një listë) pikë për pikë. Zakonisht ekziston një rreth i mbushur pranë çdo sendi në listë (quhet shënues listë).

Listat krijohen duke përdorur etiketën