Transformimi dhe dekorimi i tekstit
1. Text-transform text-transform
Nëpërmjet pronë e dhënë mund të konvertojë tekstin në krye dhe shkronja të vogla s, ose ktheni shkronjat e para të secilës fjalë që ishin të mëdha (të mëdha) në të vogla. I trasheguar.
Sintaksë
h2 (transformimi i tekstit: asnjë;) h2 (transformimi i tekstit: shkronja të mëdha;) h2 (transformimi i tekstit: shkronja të mëdha;) h2 (transformimi i tekstit: shkronja të vogla;) 
Oriz. 1. Transformoni tekstin me vetinë text-transform
2. Drejtimi i tekstit
Vetia specifikon drejtimin e shkrimit të tekstit, drejtimin e vendosjes së kolonës së tabelës, drejtimin në të cilin blloku mbush përmbajtjen horizontalisht dhe pozicionin e rreshtit të fundit të elementit të justifikuar. Rekomandohet të përdoret me veti unicode-bidi. I trasheguar.
Sintaksë
P (drejtimi: ltr;) p (drejtimi: rtl;)
3. Drejtimi i shkrimit të fjalëve në tekst unicode-bidi
Vetia përdoret së bashku me vetinë e drejtimit për të mbështetur shkrimin e fjalëve në tekst me dy drejtime. E pa trashëguar.
Sintaksë
P (unicode-bidi: normal;) p (unicode-bidi: embed;) p (unicode-bidi: bidi-override;)
4. Zbukurim teksti tekst-dekorim
Prona dekoron tekstin. Ai gjithashtu heq nënvizimin e lidhjeve. E pa trashëguar.
Sintaksë
A (dekorimi i tekstit: asnjë;) span (dekorimi i tekstit: nënvizoni;) span (dekorimi i tekstit: mbivendosja;) span (dekorimi i tekstit: vija-përmes;) 2. Zbukurimi i tekstit me vetinë tekst-dekorim
5. Formatimi i shkronjës së parë dhe rreshtit të parë të një paragrafi
CSS lejon formatimin e paragrafit duke përdorur pseudoelementet :first-letter dhe :first-line. Për shembull, ju mund të theksoni karakterin e parë të çdo paragrafi duke imituar një kapak, ose mund t'i jepni një formatim të veçantë fjalisë së parë të një paragrafi. Sfondi për shkronjën e parë mund të vendoset gjithashtu në një mbushje gradient.
/*paragrafi i parë*/ p:shkronja e parë ( madhësia e shkronjave: 2em; margjina-djathtas: 2px; ngjyra: #EE9966; pesha e shkronjave: bold; hije e tekstit: -1px -1px 1px e bardhë, 1px 1px 1px # 9E9D99; ) p: rreshti i parë ( ngjyra: #EE9966; ) /*paragrafi i dytë*/ p: shkronja e parë (madhësia e shkronjave: 1.2em; mbushja: 5px 10px; margjina djathtas: 5px; sfondi: #EE9966; ngjyra: #FAF4F4; noton: majtas; rreze-kufi: 50% 0; pesha e shkronjave: bold; ) /*paragrafi i tretë*/ p:shkronja e parë (madhësia e shkronjave: 1.2em; mbushja: 5px 10px; margjina- djathtas: 5 px; margjina e poshtme: 2 px; sfondi: #EE9966; ngjyra: #FAF4F4; float: majtas; pesha e shkronjave: bold; ) /*paragrafi i katërt*/ p:shkronja e parë (madhësia e shkronjave: 1.2em; mbushje: 3px 10px; margin-djathtas: 5px; sfond: #EE9966; ngjyra: #FAF4F4; noton: majtas; pesha e shkronjave: bold; rreze-kufi: 50%; ) /*paragrafi i pestë*/ p:shkronja e parë ( Madhësia e shkronjave: 1,5em; mbushja: 2px 10px; margjina-djathtas: 5px; sfondi: #FAF4F4; kufiri: 6px dyfish; ngjyra: #EE9966; float: majtas; pesha e shkronjave: bold; ) /*paragrafi i gjashtë* / p: shkronja e parë ( font-si ze: 1..png); kufiri: 2 px solid #EE9966; ngjyra: #544E3E; noton: majtas; pesha e shkronjave: bold; kuti-hije: 1px 1px 1px #9E9D99; )
6. Formatoni kuotat e kuotave
Vetia specifikon llojin e thonjëzave të përdorura në dokument për thonjëzat e ndërlidhura. Si parazgjedhje, thonjëzat mbyllin tekstin e mbyllur në etiketë. . Ju gjithashtu mund të gjeneroni thonjëza duke përdorur veçorinë e përmbajtjes duke e vendosur atë në hapjen e kuotave dhe mbylljes. Vlera është e veçantë karakter HTML ose një karakter Unicode. I trasheguar.
Sintaksë
P (thonjëza:""" """;) p (thonjëza: asnjë;)
| Përshkrim | Pamja e jashtme | Numri Unicode | Kodi HTML/Mnemonics |
|---|---|---|---|
| citat i dyfishtë | " | \0022 | " |
| Apostrofë | " | \0027 | " |
| Hapja e citatit të vetëm | ‘ | \2018 | ‘ |
| Mbyllja e citatit të vetëm | ’ | \2019 | ’ |
| Kuota e dyfishtë mbyllëse | “ | \201C | “ |
| Citimi i duhur i dyfishtë | ” | \201D | ” |
| Kuota e dyfishtë e poshtme | ⹂ | \2E42 | ⹂ |
| Hapja e thonjëzës së majtë "Pema e Krishtlindjeve" | « | \00AB | « |
| Mbyllja e thonjëzës djathtas "Pema e Krishtlindjeve" | » | \00BB | » |
| Oferta më e ulët e hapjes | ‚ | \201A | ‚ |
| Kuota e sipërme e vetme e pasme | ‛ | \201B | ‛ |
| Kuota e ulët e hapjes së dyfishtë | „ | \201E | „ |
| kuota e dyfishtë e sipërme | ‟ | \201F | ‟ |
| Citim i këndit francez me hapje të vetme (majtas). | ‹ | \2039 | ‹ |
| Citim i vetëm mbyllës (djathtas) kënd francez | › | \203A | › |
Teksti i këtij artikulli fokusohet në mënyra të ndryshme Formatimi CSS, e cila është e ndryshme nga mënyrat e ndryshme të organizimit të CSS. Në thelb, këto koncepte janë të ngjashme me njëra-tjetrën, por personalisht më duket se organizimi i CSS është më përgjegjës për mënyrën se si ato grupohen dhe renditen. elementet css, i cili ju lejon të gjeni dhe modifikoni shpejt dhe me lehtësi pasazhet e dëshiruara.
Formatimi nuk ka të bëjë me Funksionet CSS. Kjo thjesht po i jep kodit një pamje estetikisht të këndshme. Megjithatë, kjo nuk do të thotë se formatimi nuk është aspak i rëndësishëm. Është si të thuash se për një artist nuk ka rëndësi se në cilën kanavacë të pikturojë. Kjo ndikon në komoditetin gjatë shkrimit të kodit CSS, lehtësinë kur shikoni kodin, kur e redaktoni atë më tej.
Për shkak se ka shumë mënyra të ndryshme për të formatuar CSS, nuk ka rregulla të forta dhe të shpejta për ndarjen dhe ndërprerjet e rreshtave. Për shembull:
Div (gjerësia: 50 px)
Kjo është e njëjtë si:
Div (gjerësia: 50 px)
Si:
}
Formatimi me shumë rreshta
Navigation_rss_icon(
pozicioni: absolut;
majtas: 940px;
fundi: 0px;
}
#navigacion_rss (
pozicioni: absolut;
majtas: 720 px;
tekst-transformim: shkronja të mëdha;
ngjyra: #897567;
lartësia e vijës: 2.5em;
}
#navigacion_rss li (
shfaqja: inline;
}
ngjyra: #fffffe;
tekst-dekorim: asnjë;
mbushje: 0px 2px;
ndarja e shkronjave: -0,05em
}
#navigacion_rss li a:hover (
ngjyra: #eed2a1;
tekst-dekorim: asnjë;
}
Vë bast se ky është opsioni më i përdorur. Është shumë e lehtë për t'u lexuar sepse është dhënë në pasazhe të shkurtra, prandaj artikujt tutorial më së shpeshti formatohen në këtë mënyrë. Në shembullin e dhënë më sipër, nr varg bosh midis kllapës mbyllëse dhe pasazhit tjetër, dhe kjo është në fakt më e përdorura.
Formatimi me shumë rreshta me ndarje paragrafësh
Navigation_rss_icon(
pozicioni: absolut;
majtas: 940px;
fundi: 0px;
}
#navigacion_rss (
pozicioni: absolut;
majtas: 720 px;
font-familja: Verdana, Arial, Helvetica, sans-serif;
tekst-transformim: shkronja të mëdha;
ngjyra: #897567;
lartësia e vijës: 2.5em;
}
#navigacion_rss li (
shfaqja: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited (
ngjyra: #fffffe;
tekst-dekorim: asnjë;
mbushje: 0px 2px;
ndarja e shkronjave: -0,05em
}
#navigacion_rss li a:hover (
ngjyra: #eed2a1;
tekst-dekorim: asnjë;
}
Një bllok i theksuar do të thotë se ky pasazh është disi specifik dhe i rëndësishëm se pasazhet e mëparshme, dhe gjithashtu shfaq elementë fëmijë.
Formatimi i një rreshti
Div.wrapper ( margjina: 0 automatik; mbushja: 200 px 0 0 0; gjerësia: 960 px; z-indeksi: 2 )
ul.nav ( pozicioni:absolute; lart:0; majtas:430px; mbushja:120px 0 0 0 )
ul.nav li (ekrani:në linjë; margjina:0 10px 0 0 )
div.kolona ( float:majtas; margjina:0 70px 0 0; mbushje:0 0 0 70px; gjerësia:340px )
div.post_wrapper ( sfond:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) qendra e poshtme pa përsëritje; margjina:0 0 40px 0; mbushje:0 0 40px 0 )
div.wrapper img, div.wrapper a img, div.article_illustration_mini ( sfond:#d3d4cb; mbushje:10px; kufi:1px solid #999 )
div.wrapper a:hover img ( sfond:#fff )
Ky është ndoshta opsioni më ekonomik, sepse i gjithë kodi është i ngjeshur në një tekst të vazhdueshëm, pa asnjë hapësirë ose rresht të ri. Vërtetë, kjo metodë do të kërkojë lëvizje të vazhdueshme, vertikale dhe horizontale, nëse dëshironi të modifikoni kodin. Për më tepër, kjo metodë duket mjaft e shëmtuar, dhe në rastin kur më vonë duhet të redaktoni kodin, ndoshta do të jetë jashtëzakonisht e vështirë për ju të gjeni pasazhin e duhur.
Formatimi i një rreshti me skeda
p, li, dd ( fonti: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margjina: 0 0 15px 0; ngjyra: #5e5d5d; )
td, th ( fonti: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; rreshtimi i tekstit: majtas; )
Formatimi i një rreshti me ndërprerje të paragrafëve
Pjesa e kodit e theksuar tregon se përmban informacione që janë fëmijë të informacionit nga paragrafi i mëparshëm.
Formatim normal në një rresht
Në përgjithësi, unë preferoj formatimin me një rresht, por përdor ndërprerjet e linjës redaktori i tekstit në mënyrë që këto radhë të gjata të mos vazhdojnë përgjithmonë, por të futen në dritaren e redaktorit. Megjithatë, për linja veçanërisht të gjata me shumë pasazhe të ndryshme, unë përdor transferim i vështirë linja për të kaluar linjë e re me atribute.
H1, h2, h3 ( fonti: 24px Helvetica, Sans-Serif; margjina: 0 0 10px 0; )
h1 (madhësia e shkronjave: 36 px; )
h2 (madhësia e shkronjave: 30 px; )
h2 a, h2 a: vizituar ( ngjyra: #2e2e2e; )
h2 a: rri pezull ( ngjyra: #fe4902; kufiri-fund: 1px me pika #2e2e2e; )
p, li, dd ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
diferenca: 0 0 15px 0; ngjyra: #5e5d5d; )
td, th ( font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
text-align: majtas; )
Variacionet
Formatimi i një rreshti mund të bëhet me hapje e thjeshtë duke ndjekur një kllapa në të njëjtën linjë, e cila gjithashtu shihet shpesh në kodin PHP:
Div
{
mbushje: 10 px
}
Në formatimin me shumë rreshta me skeda, mund të vëzhgoni kllapin e hapjes si ndarës:
#content-area ol ( margjina: 15px 0 0 25px; stili i listës: dhjetore; )
#content-area ol ol (lista-stili: ulët-alfa; )
#zona e përmbajtjes ul ( margjina: 0 0 0 5 px; stili i listës: asnjë; )
#content-area ul li ( plotësimi: 0 0 0 20 pikselë; sfondi: url(/images/bullet.png) 0 3px pa përsëritje; )
#zona e përmbajtjes ul ul ( margjina: 15px 0 0 25px; stili i listës: disk; )
#zona e përmbajtjes ul ul li ( sfondi: asnjë; mbushja: 0; )
kombinim
Kombinimi i formatimit me shumë rreshta dhe një rresht mund të rezultojë vetëm në grupimin e atributeve të ngjashme në të njëjtën linjë:
Navigation_rss_icon(
pozicioni: absolut;
sipër: 10px; majtas: 10 px; fundi: 10 px; djathtas: 10px;
madhësia e shkronjave: 12 px; pesha e shkronjave: bold;
}
Lexueshmëria vs. rrotullimi
Zgjedhja juaj e formatimit duhet të bazohet në lexueshmërinë e kodit. Ju duhet të lëvizni shpejt dhe me lehtësi nëpër kod në mënyrë që të rregulloni urgjentisht këtë ose atë segment. Nëse ju duket se formatimi me një rresht është shumë i rëndë për sytë tuaj dhe është e vështirë për ju të kuptoni se çfarë dhe ku është në kod, atëherë është më mirë, natyrisht, të shmangni këtë opsion.
Në përgjithësi, unë e konsideroj opsionin e formatimit me shumë rreshta të lehtë për të gjetur këtë apo atë pjesë të kodit, por rresht pas rreshti një dokument i tillë merr shumë më tepër hapësirë, 5-8 herë. Por në përgjithësi, dokumente të tilla më duken më pak të lexueshme, sepse ekziston kjo lëvizje e bezdisshme vertikale dhe duhet të nxitosh nga një pjesë e kodit në tjetrën. Ndërsa formatimi në një rresht ndonjëherë është edhe shumë më i përshtatshëm për faktin se pjesa më e madhe e kodit është para jush.
Formatimi më i mirë për vetveten përgjithësisht konsiderohet të jetë ai që përfaqëson më shumë lexueshmëri dhe më pak lëvizje. Në përgjithësi, shikoni ndjenjat tuaja të rehatisë.
Në këtë artikull do flasim në lidhje me mënyrën se si teksti është formatuar në CSS, teknikat e shtrirjes së tekstit do të merren parasysh, si të përdoret CSS për të bërë një vijë të kuqe, caktimi i hapësirës midis fjalëve, si të dekorohet teksti, të konvertohet teksti në shkronja të mëdha ose të vogla dhe si të krijohet shkronjat e mëdha të shkronjave.
Gjatë paraqitjes së faqes, do të duhet të ndryshoni vazhdimisht pamjen faqet e internetit. Një nga detyrat e para kur punoni me tekst në një faqe është përafrimi i tij.
Rreshtimi i tekstit
Le të shohim një shembull të punës me shtrirjen e tekstit:
katër) klasa që përcaktojnë opsione të ndryshme rreshtimi i tekstit. Për të gjithë elementët
Rezultati i shembullit tonë:
Dhimbja e rreshtit të parë
Nëse hapni pothuajse çdo libër që përmban informacion teksti, mund të vëreni se rreshti i parë i çdo paragrafi është zakonisht i prerë (vija e kuqe).
Nëse duhet ta bëni dokumentin tuaj të duket si një botim i printuar, atëherë përdorni këtë Vetia CSS m si tekst-indent .
Ju mund t'i aplikoni ato njësi relative matjet që përdorni në dokumentin tuaj, qofshin ato pikselë apo vlera nga të cilat varen madhësia e bazës fontet (si p.sh em).
Unë tërheq vëmendjen tuaj për faktin se në disa situata mund t'ju duhet të përdorni një indent negativ të rreshtit të parë, vetia text-indent lejon përdorimin e vlerave negative, me ç'rast rreshti zhvendoset në drejtim të kundërt.
Le të shohim një shembull të përdorimit të kësaj prone:
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
AT ky shembull ne krijuam 4 ( katër) stile dhe i zbatoi ato një nga një në katër paragrafët. Për së pari paragrafi ka një vlerë të paracaktuar të dhëmbëzimit ( 0 ), për e dyta vendos indent 40 piksele, për e treta tregoi një indent negativ ( -20 px), si rezultat, paragrafi ka lëvizur jashtë dritares së shfletuesit dhe për e katërta paragrafi i shënuar i barabartë me 50% .
Unë tërheq vëmendjen tuaj që nëse përdorni vlera të përqindjes, atëherë dhëmbëzimi varet nga gjerësia elementi prind Në të cilin ndodhet paragrafi.
Rezultati i shembullit tonë:
Oriz. 61 Shembull duke përdorur veçorinë tekst-indent (vija e kuqe).
Vendosja e ndarjes së rreshtave
Kur punoni me tekst, shpesh bëhet e nevojshme të vendosni rreshtat e një paragrafi më afër njëri-tjetrit, ose anasjelltas - t'i shtrini ato. Distanca ndërmjet vijave bazë të rreshtave ngjitur quhet duke udhëhequr ose ndarja e vijave .
Në CSS, vetia line-height është përgjegjëse për ndarjen e linjës (udhëheqëse). Sa më e lartë të jetë vlera e kësaj vetie, aq më i madh është hendeku midis rreshtave.
Unë tërheq vëmendjen tuaj për faktin se kur vendosni vlerën e lartësisë së linjës duke përdorur pikselë, madhësia ndarja e vijave, do të varet drejtpërdrejt nga madhësia e shkronjave, domethënë do të rregullohet automatikisht në përpjesëtim me ndryshimin në vetinë e madhësisë së shkronjave (madhësia e shkronjave), të diskutuar në artikullin e mëparshëm.
Si rregull, në të gjitha shfletues modern lartësia e rreshtit të paracaktuar është 120%.
Hapësira e rreshtave llogaritet si më poshtë:
Vija e gjatesise ( vija e gjatesise) minus lartësia e shkronjave ( përmasa e germave)
Për shembull, madhësia e shkronjave është 20 piksele, dhe lartësia e linjës 150% (30 piksele). Kështu, rezulton:
Vija e gjatesise ( 150% ose 30 px) minus lartësia e shkronjave ( 20 px) = 10 px
Lejohet të vendoset madhësia e lartësisë së linjës duke përdorur një vlerë numerike. Reklama duket si kjo:
përzgjedhës(lartësia e vijës: 1.5 ;)Siç mund ta shihni, njësitë e matjes nuk tregohen, dhe numri vepron si shumëzues. Duke përdorur vlerat numerike Hapësira e rreshtave llogaritet si më poshtë:
Vlera numerike * madhësia e shkronjave
Për shembull, është vendosur fonti i paragrafit 2 em, dhe lartësia e vijës jepet si 1.5 :
fq(madhësia e shkronjave: 2em; lartësia e rreshtit: 1.5;)Vlera e llogaritur e ndarjes së rreshtave në rastin tonë do të jetë 3 minuta:
Vlera numerike ( 1.5 ) * përmasa e germave( 2 em) = 3 minuta
Në shumicën e rasteve, përdorimi i një shumëzuesi është shumë i përshtatshëm, pasi elementët trashëgojnë vlerat e ndarjes së rreshtave të elementit prind. vija e gjatesise :
Një paragraf me lartësi rreshti: 10 px
Një paragraf me lartësi rreshti: normal
Një paragraf me lartësi rreshti: 150%
Një paragraf me lartësi rreshti: 2
Në këtë shembull, ne shikuam mënyrat për të specifikuar lartësinë e linjës në piksel, përqindje dhe duke përdorur një shumëzues.
Rezultati i shembullit tonë:
Oriz. 62 Një shembull i përdorimit të vetive line-height (caktimi i ndarjes së rreshtave).
Hapësira midis fjalëve dhe karaktereve
Kur dizajnoni faqe në një sajt, duhet të rregulloni ndarjen jo vetëm midis rreshtave, por edhe midis fjalëve ose karaktereve individuale. Për shembull, zvogëlimi i distancës midis karaktereve do ta bëjë një titull të gjatë më kompakt, ose anasjelltas, rritja e distancës do t'i japë atij një pamje më të shtrirë.
Për të vendosur një hapësirë specifike midis karaktereve, duhet të përdorni veçorinë CSS për ndarjen e shkronjave. Përdorni njësi relative kur punoni me një pronë Matjet CSS (em, rem, px etj). Lejohen si vlerat pozitive ashtu edhe ato negative. Vlerat pozitive respektivisht rrisin hapësirën midis karaktereve, ndërsa vlerat negative e zvogëlojnë atë, deri në mbivendosjen e shkronjave dhe simboleve njëra mbi tjetrën.
Le të shohim një shembull duke përdorur veçorinë e ndarjes së shkronjave:
Në këtë shembull, ne shikuam mënyrat për të specifikuar hapësirën midis karaktereve në tekst në piksel (si pozitive ashtu edhe kuptim negativ) dhe njësitë em.
Rezultati i shembullit tonë:
Ju mund të vendosni hapësirën midis fjalëve individuale duke përdorur një veçori CSS të ngjashme në emër - space-space . Ngjashëm me vetinë e ndarjes së shkronjave, përdorni njësi relative CSS ( em, rem, px etj). Lejohen si vlerat pozitive ashtu edhe ato negative. Vlerat pozitive rrisin hapësirën midis fjalëve në përputhje me rrethanat, ndërsa vlerat negative e zvogëlojnë atë, deri në mbivendosjen e fjalëve.
Le të shohim një shembull të përdorimit të veçorisë së ndarjes së fjalëve:
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Në këtë shembull, ne shikuam mënyrat për të specifikuar hapësirën midis fjalëve në tekst në piksel (një vlerë negative) dhe njësi em.Rezultati i shembullit tonë:
Dekorimi i tekstit
Vetia CSS e dekorimit të tekstit na lejon të shtojmë dekorime në tekst si:
- nënvizojnë
- grevë
- rreshti sipër tekstit
Megjithatë, një nga përdorimet më të zakonshme të kësaj veçorie është të anashkalojë dekorimin, gjë që kërkon përdorimin e fjalës kyçe asnjë me veçorinë e dekorimit të tekstit:
a { /* përdorni përzgjedhësin e tipit për të zgjedhur të gjitha hiperlidhjet */ tekst-dekorim : asnjë /* hiqni dekorimin e tekstit */ }Në këtë shembull, ne kemi hequr dekorimin (nënvizimin) nga të gjitha lidhjet. Lista e plotë fjalë kyçe vetia e dekorimit të tekstit specifikohet në këtë tabelë:
Ju lutemi vini re se për shumicën e përdoruesve, teksti i nënvizuar shoqërohet me një lidhje hiperlidhjeje, dhe shënimi me tekst të fshirë, kështu që përdorni dekorimin kur është vërtet e nevojshme.
Lejohet të përdoren vlera të shumta në një deklaratë:
tekst-zbukurim: nënvizoj vijë-përmes; /* përcakton një rresht nën tekst dhe një rresht përmes tekstit */Le të shohim një shembull të përdorimit të vetive të dekorimit të tekstit në tekst:
tekst-zbukurim: nënvizoj;
tekst-zbukurim: overline;
tekst-zbukurim: line-through;
tekst-zbukurim: nënvizo mbivijë;
Në këtë shembull, ne kemi krijuar katër stile të ndryshme dhe i zbatoi ato me radhë në secilin paragraf. AT së pari paragrafi, u shtua dekorimi i tekstit - një rresht nga poshtë (vlera nënvizoni ), gjatë e dyta dekorimi i tekstit - rreshti i sipërm (vlera mbi linjë), in e treta dekorimi i tekstit - gërmimi (line-through), dhe in e katërta dekorim i dyfishtë i tekstit - rreshti sipër dhe poshtë (vlerat nënvizojnë mbivendosjen).
Rezultati i shembullit tonë:
Oriz. 65 Një shembull i përdorimit të vetive text-decoration (dekorimi i tekstit në CSS).
Shkronjat e mëdha dhe të vogla
CSS ofron mundësinë për të kthyer çdo tekst në shkronja të mëdha ose të vogla, si dhe konvertimin e shkronjave të para të çdo fjale në shkronja të mëdha. Vetia e transformimit të tekstit kontrollon rastin e tekstit, tabela më poshtë tregon të gjitha vlerat e tij:
Le të shohim një shembull të përdorimit të vetive të transformimit të tekstit në tekst:
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj. Hani edhe pak nga këto rrotulla të buta franceze dhe pini pak çaj.
Në këtë shembull, ne kemi krijuar tre stile të ndryshme dhe i kemi aplikuar ato me radhë në secilin paragraf. Në paragrafin e parë, karakteret e para të secilës fjalë u konvertuan në shkronja të mëdha (vlera e shkronjave të mëdha), në të dytin, të gjitha karakteret u konvertuan në shkronja të mëdha (vlera e shkronjave të mëdha) dhe në të tretin, të gjitha karakteret u konvertuan në shkronja të vogla. (vlera e shkronjave të vogla).
Oriz. 66 Një shembull i përdorimit të vetive të transformimit të tekstit (ndryshimi i rastit të tekstit).
Kapele të vogla në CSS
Kapele të vogla, ose kapele të vogla kapele të vogla) është një stil fonti në të cilin shkronjat e vogla duken si shkronja të mëdha të zvogëluara. Për të krijuar një stil të tillë, përdorni veçorinë CSS font-variant me sintaksën e mëposhtme:
përzgjedhës( font-variant : small-caps ; /* vendosni kapakët e shkronjave */ }Le të shqyrtojmë një shembull përdorimi:
Paragrafi shfaqet me font normal.
Shkronjat e vogla vendosen si shkronja të mëdha me madhësi të reduktuar.
Në këtë shembull, paragrafi i parë lihet i pandryshuar dhe paragrafi i dytë vendoset në vetinë font-variant me një vlerë të shkronjave të vogla , gjë që do të bëjë që teksti të shfaqet me shkronja të vogla ( shkronja të vogla vendosur si kapele të vogla).
Ndonjëherë kodi ynë nuk është gjithmonë i përsosur. Dhe kështu dua që jo vetëm të funksionojë, por edhe të dizajnohet dhe formatohet bukur. Koha është e jona armiku kryesor, rrallëherë na lejon të ndjekim rregullat e formatimit të kodit. Ne përpiqemi të përfundojmë shpejt paraqitjen, ose të përshkruajmë një duzinë stilesh css, dhe këtë e bëjmë në kurriz të lexueshmërisë. Në këtë artikull, unë do të ofroj një listë shërbimesh që do t'ju ndihmojnë të formatoni kodin tuaj në mënyrë që të jetë i këndshëm për t'u parë.
Besoni programin apo bëni gjithçka me dorë?
Me siguri keni një pyetje: si ta bëni kodin të lexueshëm? A mundet programi t'i vendosë saktë të gjitha dhëmbëzimet dhe ndërprerjet e vijave në mënyrë që syri i njeriut të marrë vetëm kënaqësi estetike nga pamja e kodit? Sigurisht që mundet! Mos u gaboni se, meqenëse puna është bërë për ju, në fakt, nga një robot, atëherë do të bëhet "pis". Shërbimet që do të paraqiten në artikullin më poshtë më kanë shpëtuar më shumë se një herë. Për shembull, në situatat kur ishte e nevojshme të kopjohej e njëjta kodi html nga një faqe tjetër, dhe kur u futën, etiketat rezultuan se ishin thjesht të rregulluara në një rend kaotik përgjatë vijave: një grup tabelash, asnjë ndërprerje logjike e vijës, absolutisht asnjë fole nuk është e dukshme! Ndoshta shumë prej jush janë të njohur me këtë. Dhe unë me të vërtetë dua që faqja juaj të jetë e ndryshme: e rregullt dhe e lexueshme. Në fund të fundit, para së gjithash, ne e bëjmë atë për veten tonë, për lehtësinë e mbështetjes së mëtejshme të këtij apo atij kodi.
Le të riformatojmë kodin tuaj
Flisni më pak, punoni më shumë. Siç ka treguar praktika, formatimi i kodit në internet është mjaft i thjeshtë. Ju vetëm duhet të kopjoni kodin tuaj "të pista" dhe ta ngjisni atë në speciale fushat e tekstit në një nga këto faqe. Pastaj shtypni butonin, prisni pak dhe - voila! Ju merrni kod të bukur, të formatuar dhe të lehtë për t'u lexuar.
Këtu është një listë e të gjithë "pastruesve" të kodit të njohur për mua për gjuhë të ndryshme.
