HTML-is mängib fondi suurus olulist rolli. See võimaldab juhtida kasutaja tähelepanu saidi lehele postitatud olulisele teabele. Kuigi oluline pole mitte ainult tähtede suurus, vaid ka nende värv, paksus ja isegi perekond.
Sildid ja atribuudid html-fondidega töötamisel
Hüperteksti keeles on suur hulk tööriistu fontidega töötamiseks. Lõppude lõpuks on teksti vormindamine html-i peamine ülesanne.
HTML-keele loomise põhjuseks oli probleem tekstivormingu reeglite kuvamisel brauserite poolt.
Mõelge siltidele, mida kasutatakse HTML-i fontidega töötamiseks, ja nende atribuute. Peamine on silt . Selle atribuutide väärtusi kasutades saate määrata mitu fondi omadust:
- värv - määrab teksti värvi;
- suurus – fondi suurus suvalistes ühikutes.
Toetatud on atribuudi positiivne väärtus vahemikus 1 kuni 7.
- nägu – kasutatakse märgendi sees kasutatava teksti fondiperekonna määramiseks . Toetatud on mitu komadega eraldatud väärtust.
Vormitakse ainult teksti, mis asub seotud fondisildi osade vahel.Ülejäänud tekst kuvatakse vaikefondis.
Ka html-is on mitmeid seotud silte, mis määratlevad ainult ühe vormingureegli. Need sisaldavad:
- - määrab html-is paksu fondi. Tag tegevuses sarnane eelmisega;
- - suurus on vaikeväärtusest suurem;
- - väiksem kirjasuurus;
- - kaldkiri (kaldkiri). Sarnane silt ;
- — allajoonitud tekst;
- läbi kriipsutatud;- — teksti kuvamine ainult väiketähtedega;
- - suurtähtedega.
lihttekst
Pisipilt
Pisipilt
Rohkem kui tavaliselt
Vähem kui tavaliselt
Kaldkiri
Kaldkiri
Koos allajooniga
Läbikriipsutatud
Stiili atribuutide võimalused
Lisaks kirjeldatud siltidele on html-is fondi muutmiseks veel mitu võimalust. Üks neist on üldise stiili atribuudi kasutamine. Selle atribuutide väärtusi kasutades saate määrata fondi kuvamisstiili:
1) font-family – atribuut määrab fondiperekonna. Võimalik on loetleda mitu väärtust.
Html-s fondi muutmine järgmisele väärtusele toimub siis, kui eelmine perekond pole kasutaja operatsioonisüsteemis määratud.
Kirjutamise süntaks:
fondiperekond: fondinimi [, fondinimi[, ...]]
2) font-size - suurus on seatud vahemikus 1 kuni 7. See on üks peamisi viise, kuidas saate html-is fonti suurendada.
Kirjutamise süntaks:
fondi suurus: absoluutne suurus | suhteline suurus | väärtus | intressid | pärida
Samuti saate määrata fondi suuruse:
- pikslites;
- Absoluutarvudes ( xx-väike, x-väike, väike, keskmine, suur);
- protsentides;
- Punktides (pt).
fondi suurus: 7
fondi suurus: 24 pikslit
Kirja suurus: x-suur
fondi suurus: 200%
fondi suurus: 24pt
3) font-style – määrab fondi stiili. Süntaks:
fondi stiil: tavaline | kaldkiri | kaldus | pärida
Väärtused:
- tavaline - tavaline kirjapilt;
- kaldkiri - kaldkiri
- kaldus - paremale kaldega font;
- inherit – pärib lähteelemendi õigekirja.
Näide selle atribuudi abil HTML-i fondi muutmise kohta:
font-style: inherit
font-style:kaldkiri
font-style:normal
font-style: oblique
4) font-variant – teisendab kõik suurtähed suurtähtedeks. Süntaks:
fondivariant: tavaline | väikesed korgid | pärida
Näide selle atribuudiga HTML-i fondi muutmise kohta:
font-variant: inherit
font-variant:normal
font-variant:small-caps
5) font-weight - võimaldab määrata teksti kirjutamise paksuse (küllastuse). Süntaks:
fondi kaal: paks|paksem|kergem|tavaline|100|200|300|400|500|600|700|800|900
Väärtused:
- bold – määrab html-fondi paksuks;
- julgem - tavalisega võrreldes julgem;
- heledam - normaalsega võrreldes vähem küllastunud;
- tavaline - tavaline kirjapilt;
- 100-900 – määrab fondi paksuse arvuliselt.
font-weight:paks
font-weight:bolder
font-weight:lighter
font-weight:normal
fondi kaal: 900
fondi kaal: 100
fondi omadus ja html fondi värv
Font on veel üks konteineri omadus. Sisemiselt ühendas see mitme fontide muutmiseks mõeldud atribuudi väärtused. Fondi süntaks:
font: font-size font-family | pärida
Samuti saab väärtustena määrata fonte, mida süsteem kasutab erinevate juhtelementide siltidel:
- pealdis - nuppude jaoks;
- ikoon - ikoonide jaoks;
- menüü - menüü;
- sõnumikast - dialoogibokside jaoks;
- väike pealdis – väikeste juhtnuppude jaoks;
- olekuriba – olekuriba font.
font:ikoon
font: caption
font:menüü
font:message-box
väike pealkiri
font: olekuriba
font:kaldkiri 50px paksus kirjas "Times New Roman", Times, serif
Html-s fondi värvi määramiseks võite kasutada atribuuti color. See võimaldab teil määrata värvi nii märksõnaga kui ka rgb-vormingus. Ja ka kuueteistkümnendkoodi kujul.
Tähis on lõigu esimene täht, mis on ülejäänutest suurem ja asetatud nii, et selle ülaosa on lõigu esimese rea tasemel. Pildil näete teksti manustatud algustähe näidet.
Muide, WordPressil on spetsiaalne plugin (wordpress.org/extend/plugins/drop-caps), mis võimaldab automaatselt teksti sisse manustatuna (ja alla nihutatuna) luua suured tähed. Imeline! Mis saab aga siis, kui te ei soovi pistikprogrammi kasutada (olen kindel, et te seda ei tee) ja peate lihtsalt mõne postituse ja võib-olla konkreetse asukoha sulgema?
Hea uudis on see, et suurtähtede loomiseks pole vaja pistikprogrammi, vajate vaid CSS-i ja span-märgendit. Avage css-fail ja lisage järgmine kood:
Span.dropcaps ( fondiperekond: Georgia, serif; värv: #ccc; fondi suurus: 46 pikslit; hõljumine: vasak; fondi kaal: 400; rea kõrgus: 1 em; veeris-alumine: -0,4 em; veeris-parem : 0,09 em; asend: suhteline; )
Midagi sellist. Loomulikult vajate stiili, mis sobib teie kujunduse ja tekstiga. Näiteks atribuutide väärtusi: font-size , veerised ja rea kõrgus tuleb kohandada vastavalt teie kujundusele ja tekstile.
span silt
Selleks, et stiil rakenduks teksti suurele algustähele, on vaja suurtäht “mähkida” span-märgendisse ja määrata sobiv klass.
A
Pseudoelement: esimene täht
Samuti saate teksti esimest tähemärki stiilida, kasutades pseudoelementi :first-letter. Siiski saab :first-letter pseudoelemendile rakendada piiratud arvu atribuute: need on fondi, värvi, tausta, äärise, veerise ja täidisega seotud omadused. Veel tuleb märkida, et :first-letter pseudoelement ei tööta vanemates brauserites.
P:esimene täht ( fondiperekond: Georgia, serif; värv: #ccc; fondi suurus: 46 pikslit; hõljumine: vasak; fondi kaal: 400; rea kõrgus: 1 em; veeris-alumine: -0,4 em; veeris -paremal: 0,09 em; asend: suhteline; )
Siin on tegelikult paar redigeerimismeetodit suured tähed CSS-iga.
CSS suurtähed aidata murda monotoonsust sama tüüpi kujundusest, mille tekstid näevad algusest lõpuni ühesugused.
Kirjad siis ja praegu
Kroonikad kasutasid suuri tähti käsitsi kirjutatud käsikirjades, millest osa pärineb 5. sajandist. Suurtähti kasutati jätkuvalt 8.–15. sajandil, mil trükipressid võimaldasid viia trükkimise tööstuslikule tasemele. Teksti algusesse pandi nii käsitsi kirjutatud kui ka trükitud suurtähed. Sageli olid need kaunistatud dekoratiivse mustriga, mis asus kirja ümber.
Tõstetud ja langetatud tähed on kasutusel tänaseni. Neid võib leida ajalehtedest, ajakirjadest ja raamatutest, aga ka digitrükist. Kõrgendatud tähti nimetatakse mõnikord piklikeks. Need asetatakse neile järgneva teksti põhjaga ühele tasapinnale. Mahajäetud tähed asetatakse teksti ülaosaga ühele tasapinnale, mõnikord teksti sisu põhiosa taha olevasse kihti või ülejäänud tekst keerdub nende ümber.
Kõrgendatud tähti on palju lihtsam määratleda, kuna need asetsevad ülejäänud tekstiga samal tasapinnal ega pea tavaliselt välimiste veeriste mähiseid muutma. Väljajäetud tähed nõuavad täpsemat häälestamist. Teil on sellega lihtsam toime tulla, kui mõistate esmalt, kuidas tõstetud tegelasi käsitletakse.
Klasside kasutamine
Disainerid, kes juba mõistavad CSS-i, teavad luua esimese suurtähe jaoks eraldi CSS-klassi.
Lõiguelemendi ja tähe loova klassi CSS-kood näeks välja järgmine:
p ( fondi suurus: 20 pikslit; fondiperekond: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (fondi suurus: 48 pikslit; fondiperekond: Didot;)
Ja HTML-kood näeb välja selline:
Mis meile annab:
Tundub liiga lihtne? Tegelikult peate tegema muudatusi olenevalt konkreetsetest tõstetud tähtedest, kuna iga suurtäht nõuab spetsiaalset kärpimist. Pärast tõstetud tähtede ja põhiteksti jaoks fondi valimist peate looma iga tõstetud tähe jaoks eraldi klassid. Allpool CSS-klass.myinitialcapsi parempoolne veeris on negatiivne, et vähendada vahemaad I ja n vahel.
Myinitialcapsi (fondi suurus: 48 pikslit; fondiperekond: Didot; marginaal-parem: -1 pikslit;)
Sel juhul on I ja n vahel tühik.
uue negatiivse marginaaliga klassi lisamine tõmbab selle lähemale.
Olenevalt ülaltoodud näite ekraani eraldusvõimest võivad I ja n tunduda, et need on kokku liidetud. Selle põhjuseks on serifid tähtede otstes. Seetõttu testige enne lõplike CSS-stiilide valimist oma saiti erinevates seadmetes, et näha, kuidas suurtähtedega CSS-i tekst nendes välja näeb.
Tsitaadid ja muud erijuhtumid
Saate suurendada mitte ainult teksti alguses olevaid tähti. Saate realiseerida mõne teise klassi, et luua tähe kõrval kuvatavatest jutumärkidest suurem versioon. Meie puhul ei sobi jutumärkideks ei täheklass suurusega 48 ega tekstiklass 20 pikslit. Pigem on see midagi vahepealset – 30 pikslit. Liigutame jutumärke 4 piksli võrra allapoole, et joondada need optiliselt I-ga:
Myinitialcapsq (fondi suurus: 30 pikslit; fondiperekond: Didot; hõljumine: vasak; veeris ülaosas: 4 pikslit;)
kaasa arvatud” uus negatiivse marginaaliga klass tõmbab selle lähemale.
Peate olema väga ettevaatlik CSS-i suurtähtede ja jutumärkide määramisel, et nende joonestamine ja joondus sobiksid ümbritseva märgistusega. Näiteks tuleb T-tähte nihutada vasakule, veidi lõigu servast kaugemale, nii et selle põikjoon sobiks visuaalselt paigutusega. Sama tuleb teha ümmarguste tähtedega nagu C , G , O ja Q . Selles näites kasutatakse fondi suurusi 20, 30 ja 48. Kuid te peate kohandama suurusi vastavalt teie valitud konkreetsetele fontidele. Nagu ka nende ekraanide suurused ja eraldusvõimed, millelt saiti vaadatakse.
Pseudoelemendid ja pseudoklassid
CSS-i pseudoelementi kasutades saate hõlpsasti luua kõrgendatud tähe, lisades lõigu elemendile ::first-leter. Kasuta: esimene täht ( ühe kooloniga) pärandbrauserite jaoks:
p ( fondi suurus: 1,2 em; fondiperekond: Georgia, "Times New Roman", Times, serif; reakõrgus: 2 em; täidis-alumine: 1,2 em;) p:: esimene täht ( fondi suurus: 3,6 em; teksti teisendus: suurtähed; fondiperekond: "Monotype Bernard Condensed", serif; veeris-parem: 0,03 em;) .initialb (veeris-parem:-0,1 em;) .initialn (veeris-parem:-0,15 em ;)
HTML-kood, mis sisaldab CSS-i klasse, mis võtavad arvesse tähtede N ja B kerningut, näeb välja selline…
Algtäht, mille esimene täht on suur täht.
Reavahetusega ei ole järgmisel real algset korki.
n Pange tähele HTML-i allikas, kuidas HTML-i esimene täht, mitte suurtäht, muudetakse algsuurusele 3,6 em. Korralik, ah?
B ut raske tagasituleku ja uue lõigu alustamisel luuakse alati uus alguspiir. Võib-olla küsite endalt Kuidas ma seda aru võtan? Kas mul peaks väga uue lõigu alguses olema esialgne ülempiir? Noh, sa võiksid. Kuid kas soovite, et see nii välja näeks, ja kas see peab tingimata nii välja nägema?
Lõigu esimene suurtäht teisendatakse täheks.
Esimest tähte pärast reavahetust suurtähte ei kirjutata.
O Pange tähele, et HTML-i allikas ei kirjutata esimest tähte suurtähtedega, vaid see teisendatakse 3,6 em märgiks.
O Kuid isegi pärast sunnitud reavahetust luuakse iga uue lõigu alguses alati täht. Võite endalt küsida: Kuidas ma saan seda arvesse võtta? Kas ma pean kõigi nende juhtumite jaoks tähed lisama? Noh, saate. Aga kas see on vajalik?
Isegi pseudoelementide pakutavate eeliste juures pidime lisama palju koodi, et määratleda eraldi klassid, et lahendada kernimise ja polsterdamise probleeme. Kuid see meetod teisendab iga uue lõigu esitähe CSS-i suurtähtedeks. Mõnele ei pruugi see sobida, sest iga lõigu esimest tähte pole vaja teisendada.
Pseudoklasside ja pseudoelementide kombineerimine nutika paigutuse loomiseks
Pseudoklassi :first-child lisamine aitab lahendada esimeste tähtede tarbetu teisendamise probleemi:
p ( fondi suurus: 1,2 em; fondiperekond: Georgia, "Times New Roman", Times, serif; reakõrgus: 2 em; polsterdus-alumine: 0,5 em;) p:first-child::esimene täht ( fondi suurus: 3,6 em; teksti teisendus: suurtähed; fondiperekond: "Monotype Bernard Condensed", serif; marginaal-parem: 0,03 em;)
Selle koodi kombineerimine HTML-iga:
Esimene täht, mis on määratletud esimese lapsena, on ainuke täht, mis selle meetodi puhul teisendub tõstetud korgiks.
Kuna teisendatakse ainult esimese lapsena määratletud täht, siis pange tähele, et see näide erineb eelmisest ilma esimese lapseta näitest. Lisaks ei teisenda me esimesi tähti pärast lõigu algust ja peale sunnitud reavahetust. See näeb välja elegantsem kui see, kuidas lõikude esimesed tähed teisendasime.
Pseudoklasside kasutamise eeliseks on võimalus käsitleda erinevaid erijuhtumeid. Aga miinused? Erinevaid pseudoklasse on palju ja neid saab nii mitmel viisil kombineerida, et see võib pea ringi käima panna. Näiteks pseudoklassid :first-child ja :first-of-type võivad anda samu tulemusi. Samuti saate pseudoklassi rakendada mitte ainult lõigule, vaid ka elementidele sektsioon ( fondi suurus: 1,2 em; fondiperekond: Georgia, "Times New Roman", Times, serif; rea kõrgus: 3 em;) sektsioon> p: esimene laps: esimene täht ( fondi suurus: 4 em; tekstiteisendus: suurtähed; fondiperekond: Didot, serif; veeris-parem: 5 pikslit;) Ja koos HTML-iga: Jao alguses on esimene täht seatud kõrgendatud suurtäheks. Ja uus lõik... Kui soovite katsetada, saate lisaks :first-child ja :first-of-type meetoditele uurida erinevaid meetodeid. Näiteks :nth-of-type või :nth-of-child , et näha, kuidas teatud pseudoklassitüüpe saab kasutada CSS-i suurtähtede kirjutamiseks. Olenemata sellest, kas järgite selles artiklis kirjeldatud põhimõtteid või hakkate süvenema, kui olete õppinud, kuidas töötada esimese lapse , :first-of-type ja :first-leter CSS pseudoklassidega, saate õigesti rakendada. need HTML-elementideks. või rohkem teavet tähtede ja HTML-i CSS-vormingu kohta Peatükk sisaldab näiteid kirja vormindamine Hypertext Markup alalt. Vasakpoolsest menüüst leiad kaasaegsed ja väga detailsed HTML õpetused. Need võimaldavad teil luua saidi nullist samas vaadates veidi madalamalt. See võib olla huvitav. Infoühiskonna ajastu Inimkond on jõudnud uude arenguperioodi, milles info- ja võrgutehnoloogiad mängivad ülimalt olulist rolli. Elame infoühiskonna ajastul, mida iseloomustab info- ja telekommunikatsioonitehnoloogia kiire areng. Arvuti ja Interneti tulekuga algasid tohutud muutused. Arvuti ja Internet sunnivad ühiskonda sõnastama uusi käitumisnorme, reegleid ja ideaale. Internet on uue põlvkonna jaoks sama, mis televisioon eelmisele põlvkonnale. Kuid Global Network on palju funktsionaalsem kui televisioon, sest see annab võimaluse sooritada oste, müüke, pakub suhtlust ja erinevaid eneseväljendusviise, nt luua. isiklikud veebilehed ja saidid. Kirja vormindamise näide: Tulemuse vormindamine: Suurtähtedega kirjutatud vaba teksti näide Suurtähtedega kirjutatud vaba teksti näide sildid - määratleda suured tähed(HTML 5 ei toeta neid silte). css code style="text-transform:uppercase" - määratleb suured tähed.
Teisisõnu, suurtähed on defineeritud CSS-iga atribuudid. Kirja vormindamise näide: Tulemuse vormindamine: Kohandatud HTML-tekst ja CSS-i 2px tähevahed Atribuutide ja väärtuste kirjeldus: css code style="letter-spacing:2px" - määratleb CSS-i tähtede vahe.
Otsige sarnaseid vormindamise näiteid vasakpoolsest menüüst. Tänan tähelepanu eest. Võimaldab muuta tekstitähtede väiketähti. Vaikeväärtus on none , mis ei mõjuta teksti. Teksti kääne jääb samaks. Suur- ja väiketähtede väärtused teisendavad märgid vastavalt suur- ja väiketähtedeks. Kui määrate suurtähtede , kirjutatakse suurtähtedega ainult iga sõna esimesed tähemärgid. Pärimine pärib vanema väärtuse. Selle lõigu teksti teisendamise atribuudiks on seatud Väiketähted, mis tähendab, et kõik tähed on väiketähtedega. Ja sellel viimasel lõigul on atribuut teksti teisendus koos atribuudiga CAPITALISE. Iga sõna esimesed tähed kirjutatakse suurtähtedega ja ainult need.HTML-tähed: suured ja väikesed tähed
HTML-tähed ja CSS-i vahed nende vahel
Näide
h3 ( text-transform: bigcase; ) .lowercase ( text-transform: smallcase; ) .capitalize ( text-transform: suurtähtedega; )
See on pealkiri. Sellel on teksti teisendamise atribuut, mille väärtus on suurtähtedega. Kõik märgid on suurtähtedega.