Etiketa html e madhe. Kapitalizimi i stileve të css duke përdorur elemente pseudo. Monumenti kulturor i Mesjetës
Ditë e mirë, geeks e ndërtimit të faqes. Në botimin e sotëm, ne do të shqyrtojmë një temë në lidhje me hartimin e përmbajtjes së tekstit. Kjo është arsyeja pse ju do të mësoni se si të vendosni shkronja të mëdha me css - me anë të, të njiheni me disa opsione për krijimin e një kapaku të rënies dhe natyrisht mund të provoni gjithçka në praktikë. Tani le të zbresim në pjesën argëtuese!
Le ta transformojmë tekstin
Me fletët e stilit kaskadë, ju mund të ndryshoni karakterin e parë të bllokut dhe të gjithë tekstin. Unë do t'ju tregoj se si mund t'i bëni të dyja. Për më tepër, të gjitha mjetet e përmendura në këtë artikull mbështeten në tre nivele të gjuhës: css1, css2, css2.1 dhe css3.
Do të filloj me një veti interesante që modifikon të gjithë përmbajtjen e tekstit në përzgjedhje. ajo tekst-shndërroj.
Elementi i emëruar mund të shndërrojë karakteret në të mëdha, të vogla dhe gjithashtu të shkruaj me shkronjë të madhe çdo karakter të parë të fjalës. Kam shkruar më shumë rreth vlerave në tabelë.
Tani, për të konsoliduar materialin teorik, merrni një shembull.
Vëmendje!
! Zbritje në të gjitha produktet e bukurisë nesër!
Promovimi është i vlefshëm në të gjitha degët e vendosura në qytetin tuaj.
Krijoni një kapak rënieje
Nëse nuk e dini se çfarë do të thotë termi "kapak rënie", atëherë është koha ta zbuloni, pasi lidhet drejtpërdrejt me temën aktuale.
Kapaku i rënies (ose nganjëherë edhe fillestari) është shkronja e parë e kapitullit, e cila ndryshon nga pjesa tjetër për nga madhësia, ngjyra dhe, në disa raste, edhe nga modeli i shkronjave. Në jetën reale, një shembull i një letre të tillë mund të gjendet në dorëshkrime dhe libra të vjetër.
Ka disa mënyra për të krijuar një fillestar. Shpesh një karakter dallohet me një etiketë të gjuhës së shënjimit dhe pas kësaj, vetitë e caktuara përshkruhen në stilet që e modifikojnë atë. Kjo është një mënyrë e mirë, por ky botim flet për mekanizmat CSS (të cilat, për mendimin tim, në këtë rast janë shumë më logjike dhe më të përshtatshme për t'u përdorur).
Për të zgjidhur problemin, mund të përdorni një mjet të tillë si.
Pra, në këtë rast: përdoret shkronja e parë. Ashtu si të gjithë pseudo-elementet, ai i caktohet selektorit, i ndarë me dy pika. Pas, sipas të gjitha rregullave të fletëve të stilit, specifikohen vetitë. Sidoqoftë, mund të aplikoni vetëm ato veti që lidhen me redaktimin e shkronjave, mbushjen, ngjyrën, sfondin, kufijtë dhe kufijtë.
Unë propozoj të shqyrtoj një shembull specifik. Ndërsa zbatoja programin e vogël të paraqitur, vendosa të bëj jo vetëm një kapak me pika, por ta mbush me lule. Për ta bërë këtë, duhet të përdorni disa hile të ndërlikuara me vendosjen e ngjyrës së shkronjave në transparente dhe plotësimin e shkronjës me imazhin e zgjedhur.
Ky paragraf përmban një fjali me përmbajtje shumë interesante.
Le të vazhdojmë një histori interesante në paragrafin tjetër.
Rezultati duket shumë tërheqës dhe i pazakontë, e cila është zgjidhja perfekte për të.
Siç mund ta shihni, kjo temë është shumë e thjeshtë. Ju mund ta përdorni me lehtësi kodin e dhënë nga unë për burimet tuaja të internetit, duke modifikuar dhe përshtatur me stilin tuaj.
Nëse materiali i paraqitur ishte i dobishëm për ju, atëherë regjistrohuni në azhurnimet në blogun tim dhe mos harroni të ndani njohuritë e marra (dhe natyrisht një lidhje në blogun tim) me miqtë tuaj. Paç fat!
Mirupafshim!
Përshëndetje, Roman Chueshov
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. Megjithëse 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ë caktoni 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
Për të vendosur ngjyrën e shkronjave në html, mund të përdorni vetinë e ngjyrave. 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.
Kontrollon shndërrimin e tekstit të elementit në karaktere të mëdha ose të vogla. Kur vlera është ndryshe nga asnjë, rasti i tekstit burimor do të ndryshohet.
informacion i shkurtër
Përcaktimet
| Përshkrim | Shembull | |
|---|---|---|
| <тип> | Tregon llojin e vlerës. | <размер> |
| A && B | Vlerat duhet të shfaqen sipas radhës së treguar. | <размер> && <цвет> |
| Një | B | Tregon që vetëm një nga vlerat e sugjeruara duhet të zgjidhet (A ose B). | normale | kapele të vogla |
| A || B | Çdo vlerë mund të përdoret vetëm ose në bashkëpunim me të tjerët në çfarëdo renditje. | gjerësia || numëroj |
| Vlerat e grupeve. | [kulture || kryq] | |
| * | Përsëritni zero ose më shumë herë. | [,<время>]* |
| + | Përsëriteni një ose më shumë herë. | <число>+ |
| ? | Lloji, fjala ose grupi i specifikuar është fakultativ. | fut? |
| (A, B) | Përsëritni të paktën A, por jo më shumë se B herë. | <радиус>{1,4} |
| # | Përsëritni një ose më shumë herë, të ndara me presje. | <время># |
Vlerat
shkruaj me shkronjë të madhe Karakteri i parë i secilës fjalë në fjali do të shkruhet me shkronjë të madhe. Pjesa tjetër e simboleve nuk e ndryshojnë pamjen e tyre. të vogla Të gjithë personazhet e tekstit bëhen të vogla (të vogla). e madhe Të gjithë personazhet e tekstit janë të mëdha (të mëdha). asnjë Nuk e ndryshon rastin.
Kuti rëre
Winnie the Pooh nuk ishte gjithnjë neveri për një pije freskuese të vogël, veçanërisht në njëmbëdhjetë në mëngjes, sepse në atë kohë mëngjesi kishte kohë që kishte mbaruar dhe darka as që kishte menduar të fillonte. Dhe, sigurisht, ai ishte jashtëzakonisht i lumtur kur pa Rabbit duke nxjerrë gota dhe pjata.
div (transformo tekstin: shkruaj me germa të mëdha;)
Shembull
Monumenti kulturor i Mesjetës
Ultësira Amazonian merr një transport të vogël të maceve dhe qenve, dhe Hayosh Bay është i famshëm për verërat e tij të kuqe.
Rezultati i këtij shembulli është treguar në Fig. 1
Figura: 1. Zbatimi i pronës së transformimit të tekstit
Modeli i objektit
Nje objekt. stili.tekstiTransformo
Specifikim
Çdo specifikim kalon nëpër disa faza të miratimit.
- Rekomandim - Kjo specifikim është aprovuar nga W3C dhe rekomandohet si standard.
- Rekomandimi i kandidatit ( Rekomandimi i mundshëm) - grupi përgjegjës për standardin është i kënaqur që është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për të zbatuar standardin.
- Rekomandimi i Propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i paraqitet Këshillit Këshillimor të W3C për aprovim përfundimtar.
- Drafti i punës - Një version më i pjekur i draftit pas diskutimit dhe rishikimit për rishikimin e komunitetit.
- Drafti i redaktorit ( Drafti editorial) - një version i standardit pas redaktimit nga redaktorët e projektit.
- Draft ( Specifikimi i draftit) është drafti i parë i standardit.
Shpesh me nxitim kur shtoni materiale në sit ose, për shembull, duke krijuar një temë të re në forum, përdoruesi mund të fillojë të shkruajë një fjali (titull) me një shkronjë të vogël (të vogël). Ky është deri diku një gabim.
Unë do t'ju tregoj disa opsione për zgjidhjen e këtij problemi: PHP dhe CSS janë më të përshtatshme për materiale të botuara tashmë, kur mënyra se si jQuery mund ta rregullojë situatën edhe para botimit.
Shkronja e parë e një vargu është e madhe në PHP
PHP ka një funksion të quajtur " e para", E cila thjesht shndërron karakterin e parë të vargut në të madhe, por minus është se nuk funksionon si duhet me cirilikën.
Për ta bërë këtë, ne do të shkruajmë funksionin tonë të vogël. Zbatimi do të duket kështu:
Në këtë version, ne do të marrim një fjali që fillon me një shkronjë të madhe, e cila, në fakt, është ajo që na duhet.
Shkronja e parë e një vargu është e madhe në CSS
Kjo metodë vizualisht (domethënë, në kodin burimor të faqes, ofertat do të duken ashtu siç janë) gjithashtu konverton karakterin e parë në shkronjë të madhe.
Përdorimi është si më poshtë:
fjalia e parë
fjalia e dytë
fjalia e tretë
fjalia e katërt
Duke përdorur pseudo-elementin " shkronja e parë"Dhe pronat" tekst-shndërroj»Ne kemi vendosur pamjen për secilën shkronjë të parë të paragrafit.
Shkronja e parë e vargut të madhe JQuery
Siç e thashë më parë, kjo metodë e konvertimit është më e përshtatshme për materialet që ende nuk janë botuar.
Për shembull, ne do të marrim një fushë teksti (do të veprojë si një fushë për të futur një titull për ne) dhe do të shkruajmë një skenar të vogël për të, i cili, kur futni një fjali me një shkronjë të vogël, e bën atë me një shkronjë të madhe:
Skenari funksionon si kur shkruan tekstin ashtu edhe thjesht e ngjit atë. Mos harroni se që skriptet të funksionojnë në faqen tuaj, duhet të keni të lidhur bibliotekën jQuery.
Një kapak rënie është shkronja e parë e një paragrafi që është më e madhe se pjesa tjetër dhe vendoset në mënyrë që maja e saj të jetë në nivelin e rreshtit të parë të paragrafit. Në imazh, ju mund të shihni një shembull të një kapaku të ngulitur në tekst.
Nga rruga, WordPress ka një shtojcë të veçantë (wordpress.org/extend/plugins/drop-caps) që ju lejon të krijoni automatikisht të ngulitur në tekst (dhe të kompensoni poshtë) shkronja të mëdha... E mrekullueshme! Sidoqoftë, çka nëse nuk doni të përdorni një shtojcë (jam i sigurt që nuk e bëni) dhe thjesht duhet të krijoni një kapak për disa postime, dhe ndoshta në një vend të caktuar?
Lajmi i mirë: nuk keni nevojë të përdorni një shtesë për të krijuar shkronja të mëdha, gjithçka që ju nevojitet është pak css dhe një etiketë span. Hapni skedarin tuaj CSS dhe shtoni kodin vijues:
Span.dropcaps (font-family: Georgia, serif; ngjyra: #ccc; madhësia e shkronjave: 46px; noton: majtas; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; pozicioni: relativ;)
Diçka si kjo. Sigurisht, do t'ju duhet një stil që përputhet me modelin dhe tekstin tuaj. Për shembull, vlerat e pronës: madhësia e shkronjave, kufijtë dhe lartësia e vijës do të duhet të zgjidhen bazuar në modelin dhe tekstin tuaj.
Etiketa Span
Në mënyrë që stili të zbatohet në shkronjën e madhe të tekstit, duhet të "mbështillni" shkronjën e madhe në etiketën span dhe të shkruani klasën e duhur.
A
Pseudo-elementi: shkronja e parë
Ju gjithashtu mund të stiloni karakterin e parë në tekst duke përdorur: pseudo-elementin e shkronjës së parë. Sidoqoftë, një numër i kufizuar i vetive mund të zbatohet në: pseudo-elementin e shkronjës së parë: këto janë veti që lidhen me shkronjat, ngjyrën, sfondin, kufijtë, kufijtë dhe mbushjet. Duhet gjithashtu të theksohet se: pseudo-elementi i shkronjës së parë nuk do të funksionojë në shfletuesit e vjetër.
P: shkronja e parë (font-family: Georgia, serif; ngjyra: #ccc; font-size: 46px; noton: majtas; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -djathtas: 0,09em; pozicioni: relativ;)
Këtu janë disa metoda redaktimi. shkronja të mëdha duke përdorur CSS.