Šodien es jums pastāstīšu, kā vietnē izveidot treknrakstā vārdus, izmantojot HTML un CSS. Šis dizains tiek izmantots, ja lapā ir jāuzsver noteikta informācija. Turklāt mēs runājam ne tikai par virsrakstiem, bet arī par vienkāršiem vārdiem, frāzēm tekstā. Tas tiek īstenots pavisam vienkārši.
Lai izceltu noteiktu tekstu treknrakstā, tiek izmantoti īpaši HTML tagi - un ... Piemēram, šāds kods:
| Vienkāršs teksts. Sīktēls. Spēcīgs treknrakstā teksts. |
Vienkāršs teksts.
Sīktēls.
Spēcīgs treknrakstā teksts.
Rezultāts dod šādu attēlu:
Divas pēdējās iespējas vizuāli izskatās vienādas, taču tās nedaudz atšķiras viena no otras. Atzīmēt norāda vārda vienkāršo stilistisko drosmi, savukārt pievieno noteiktu semantisku "uzlabotu" (svarīgu) nozīmi. Tas ir, pēdējā rindiņa ir ne tikai treknrakstā ievietots teksts, bet arī svarīga informācija. Principā meklētājprogrammām ieteicams to izmantot precīzi .
Varat arī redzēt treknrakstu HTML formātā, izmantojot stilus:
Trekna teksta piemērs.
Teksta paraugs ar treknrakstā vārdu.
Vietne to parāda šādi:
Kaut arī treknrakstā ievietotais HTML kods darbojas pareizi, tam nevajadzētu būt. Visi noformējuma stili ir jāatveido CSS failā. Tāpēc iepriekš minētajā piemērā jums vajadzēja izmantot tagus
UN norādiet atbilstošo klasi un pēc tam ierakstiet tās izskatu stilu lapā. Šie ir kodēšanas noteikumi. Tāpēc, lai treknrakstā ievietotu HTML, izmantojiet tagu .
Treknrakstā CSS teksts
Lai CSS būtu treknrakstā, tiek izmantots rekvizīts font-weight. Ar tās palīdzību tiek norādīts teksta fragmenta "piesātinājums". Vērtības var svārstīties no 100 līdz 900, taču visbiežāk tiek izmantotas:
- treknrakstā (treknrakstā) - pēc noklusējuma 700;
- normāli - pēc noklusējuma 400.
Ir arī iespējas drosmīgākām un vieglākām vērtībām, kas maina fontu atkarībā no vecāka uz attiecīgi vairāk vai mazāk treknu.
Lai CSS iestatītu treknu tekstu, šim vai citam elementam jāiestata kāds stils, piemēram:
Vienkāršs teksts ar eļļaini izdalījumi centrā.
spēcīgs (fonta svars: treknrakstā;)
Šeit es gribētu atzīmēt vienu nelielu niansi, par kuru man teica - ja jūs kādam elementam izveidojat jaunu klasi, tad ieteicams izmantot vairāk vai mazāk "saprotamu nosaukumu". Piemēram, iepriekšējā piemērā stils class = "my-bold-font" izskatās loģiskāk nekā class = "new-font", jo jūs daļēji varat saprast tā mērķi. Tas ir pluss tiem, kuri nākotnē izskatīs un izmantos jūsu izkārtojumu.
Nākamajā rakstā es jums pastāstīšu par dažiem interesantiem trekniem fontiem, kurus man izdevās atrast.
HTML formātā svarīga loma ir fonta lielumam. Tas ļauj piesaistīt lietotāja uzmanību svarīgai informācijai, kas ievietota vietnes lapā. Lai gan svarīgs ir ne tikai burtu lielums, bet arī to krāsa, biezums un pat ģimene.
Tagi un atribūti, pārmeklējot ar html fontiem
Hiperteksta valodai ir liels rīku komplekts darbam ar fontiem. Galu galā tieši teksta formatēšana ir html galvenais uzdevums.
HTML valodas izveides iemesls bija problēma par teksta formatēšanas kārtulu parādīšanu pārlūkprogrammās.
Apsveriet tagus, kas tiek izmantoti darbam ar fontiem html, un to atribūtus. Galvenais ir tags ... Izmantojot tā atribūtu vērtības, varat iestatīt vairākas fonta īpašības:
- krāsa - iestata teksta krāsu;
- izmērs - fonta lielums parastajās vienībās.
Tiek atbalstītas pozitīvo atribūtu vērtības no 1 līdz 7.
- seja - izmanto, lai iestatītu tagā izmantojamā teksta fontu saimi ... Vienlaicīgi tiek atbalstītas vairākas vērtības, atdalītas ar komatiem.
Tiek formatēts tikai teksts starp sapārotā fonta taga daļām. Pārējais teksts tiek parādīts noklusējuma standarta fontā.
Arī html ir vairāki sapāroti tagi, kas norāda tikai vienu formatēšanas kārtulu. Tie ietver:
- - nosaka treknu fontu html. Atzīmēt darbība ir līdzīga iepriekšējai;
- - izmērs ir lielāks par noklusējumu;
- - mazāks burtu izmērs;
- - kursīvs teksts. Līdzīga atzīme ;
- - pasvītrots teksts;
- izsvītrots;- - attēlot tekstu tikai ar mazajiem burtiem;
- - ar lielo burtu.
Vienkāršs teksts
Sīktēls
Sīktēls
Vairāk nekā parasti
Mazāk nekā parasti
Kursīvs
Kursīvs
Pasvītrots
Pārsvītrots
Stila atribūtu iespējas
Papildus aprakstītajiem tagiem ir vēl vairāki veidi, kā mainīt fontu html. Viens no tiem ir vispārējā stila atribūta izmantošana. Izmantojot tā īpašību vērtības, varat iestatīt fonta attēlojuma stilu:
1) font-family - rekvizīts nosaka fontu saimi. Iespējams vairāku vērtību uzskaitījums.
HTML fonta maiņa uz nākamo vērtību notiks, ja iepriekšējā operētājsistēma nav instalēta lietotāja operētājsistēmā.
Raksta sintakse:
fontu saime: fonta nosaukums [, fonta nosaukums [, ...]]
2) font-size - lielums ir iestatīts no 1 līdz 7. Šis ir viens no galvenajiem veidiem, kā palielināt fontu HTML formātā.
Raksta sintakse:
fonta lielums: absolūtais izmērs | relatīvais lielums | vērtība | procenti | mantot
Var iestatīt arī fonta lielumu:
- Pikseļos;
- Absolūtajā vērtībā ( xx-mazs, x-mazs, mazs, vidējs, liels);
- Procentos;
- Punktos (pt).
Fonta lielums: 7
Fonta lielums: 24 pikseļi
Fonta lielums: x liels
Fonta lielums: 200%
Fonta lielums: 24pt
3) font-style - nosaka fonta rakstīšanas stilu. Sintakse:
fonta stils: normāls | kursīvs | slīpi | mantot
Vērtības:
- normāls - normāla pareizrakstība;
- kursīvs - kursīvs
- slīps - pa labi noliekts fonts;
- mantot - manto vecāku elementa pareizrakstību.
Piemērs tam, kā mainīt fontu HTML failā, izmantojot šo rekvizītu:
fonta stils: mantot
fonta stils: kursīvs
fonta stils: normāls
fonta stils: slīps
4) font-variant - pārvērš visus lielos burtus lielajiem. Sintakse:
fontu variants: normāls | mazie vāciņi | mantot
Piemērs tam, kā mainīt HTML fontu ar šo rekvizītu:
font-variant: mantot
fonts-variants: normāls
fonta variants: mazie vāciņi
5) font-weight - ļauj iestatīt teksta rakstīšanas biezumu (piesātinājums). Sintakse:
fonta svars: treknrakstā | drosmīgāk | gaišāk | normāli | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Vērtības:
- treknrakstā - iestata html treknrakstu;
- drosmīgāks - resnāks attiecībā pret normu;
- vieglāks - mazāk piesātināts salīdzinājumā ar normu;
- normāls - normāla pareizrakstība;
- 100-900 - nosaka fonta biezumu skaitliskā ekvivalentā.
fonta svars: treknrakstā
fonta svars: drosmīgāks
fonta svars: vieglāks
fonta svars: normāls
fonta svars: 900
fonta svars: 100
Fonta rekvizīts un HTML fonta krāsa
Fonts ir vēl viens konteinera rekvizīts. Iekšēji tas apvienoja vairāku īpašību vērtības, kas paredzētas fontu maiņai. Fonta sintakse ir:
font: font-size font-family | mantot
Vērtību var iestatīt arī fontiem, kurus sistēma izmanto dažādu vadīklu uzrakstos:
- paraksts - pogām;
- ikona - ikonām;
- izvēlne - izvēlne;
- message-box - dialoglodziņiem;
- mazs paraksts - mazām kontrolēm
- status-bar - statusa joslas fonts.
fonts: ikona
fonts: paraksts
font: menu
font: message-box
mazs paraksts
fonts: statusa josla
fonts: slīpraksts 50px treknrakstā "Times New Roman", Times, serif
Lai html iestatītu fonta krāsu, varat izmantot rekvizītu color. Tas ļauj iestatīt krāsu, izmantojot gan atslēgvārda, gan rgb formātu. Un arī sešpadsmitā koda formā.
Sveiki, dārgie emuāru lasītāji! Šajā rakstā galvenā uzmanība tiks pievērsta teksta formatēšanas tagi... Treknrakstā vai kursīvā ievietots teksts ir lielisks piemērs. Mēs apsvērsim arī dažu tagu ietekmi uz vietnes iekšējo optimizāciju un to rakstīšanas noteikumus. Par to jūs varat lasīt dotajā rakstā. Starp citu, līdzīgus teksta noformējuma elementus var atrast daudzos teksta redaktoros, piemēram, programmā Word.
Tagi ir sadalīti 2 veidos: bloķēšanas un ievietotie tagi. Izmantojot pirmo, jūs varat mainīt teksta daļas saturu (rindas, atsevišķus fragmentus vai vārdus), bet pēdējie ir. Formatēšanas tagi, kurus aplūkosim šajā rakstā, galvenokārt ir mazie burti.
Noteikumi un tagu rakstīšanas kārtība
Jūs jau zināt, kas ir sākuma un beigu tagi. Ja nē, tad izlasiet rakstu šī materiāla pašā sākumā. Īsāk sakot, ir divu veidu tagi: atsevišķi tagi (piemēram, iesaiņošana jaunā rindā) un konteiners (pārī). Tātad, visi teksta formatēšanas tagi ir pārī... Tas nozīmē, ka jebkuram elementam ir sākuma un beigu tags, un atlase ir jānovieto starp tiem. Piemēram, pareiza frāzes izvēle varētu izskatīties šādi: Atlasīts fragments
Kad pārlūkprogramma apstrādā šo fragmentu, tiks parādīts šāds teksts: Atlasīts fragments. Starp citu, visi tagi netiek parādīti RSS plūsmā ().
Rakstot tagus, galvenais ir turēt tos aizvērtus. Pretējā gadījumā viss lapas teksts būs treknrakstā (piemērā ar tagu ). Bet ir reizes, kad jums ir jāizceļ noteikts fragments un kursīvs un treknraksts vienlaikus. Bet nav neviena taga, kas veiktu šo darbību. No šīs situācijas ir tikai viena izeja: vienlaikus izmantojiet divus tagus. Nav svarīgi, kādā secībā jūs tos izmantojat. Tāpēc, rakstot tekstu ar šādiem tagiem:
Atlasīts fragments
vai šādi:
Atlasīts fragments
Jūs joprojām saņemsiet Atlasīts fragments vienlaikus kursīvā un treknrakstā. Tomēr vēlams izmantot pirmo iespēju, jo sākotnēji tā bija vienīgā un pareizā. Neaizmirstiet arī to, ka katrs pārlūks var rīkoties ar tagiem atšķirīgi (), atkarībā no iestatījumiem. Tagad pārejam pie pašiem formatēšanas tagiem.
Treknrakstā un kursīvā teksts - tagi , , un
Populārākie teksta formatēšanas tagi - tā uzsvēršana treknrakstā un kursīvā... Tos parasti izmanto, lai piešķirtu nozīmi gabalam. Pirmais gadījums ir paredzēts, lai izceltu fragmentu, kas satur noderīgu informāciju vai atslēgvārdus. Slīpraksts tiek izmantots tādiem pašiem mērķiem kā treknrakstā ievietots teksts, taču informācija ir mazāk svarīga, jo kursīvs ir mazāk redzams pamatteksta fonā nekā treknrakstā.Apsveriet vispirms treknrakstā... Šai darbībai tiek izmantoti divi tagi - un ... Pēc izskata nav atšķirības. Lai gan, ņemot vērā to, ka jebkurš pārlūks var interpretēt katru elementu atšķirīgi, jums vajadzētu būt iespējai redzēt visas atšķirības. Šādi izskatās tagos esošais teksts un pārlūkprogrammas jau apstrādātā formā:
Teksts ar spēcīgiem tagiem
Teksts b tagos
Lūk, kā šīs divas rindas izskatās lapas avota kodā:
Teksts ar spēcīgiem tagiem Teksts b tagos
Mēs varam novērot to pašu situāciju kursīva tagi un ... Mēģiniet atrast atšķirības starp abiem piemēriem:
Teksts em tagos
Teksts tagos I
Un šeit ir avota kods:
Teksts em tagos Teksts tagos I
Tātad aplūkotie treknrakstā un kursīvā ievietotie tagi faktiski neatšķiras, bet kāpēc tad mēs, piemēram, atzīmējam ja šeit ? Galu galā pēdējais satur tikai vienu rakstzīmi (neskaitot iekavas), un tāpēc to ir vieglāk rakstīt. Un lieta ir tāda, ka tagi un ietekmēt. Ja atslēgvārdus ieskauj šie tagi, tas labvēlīgi ietekmēs vietnes reklamēšanu.Galvenais ir nevis pārspīlēt - maksimālais teksts tagā ir 5% treknrakstā. , un tikpat daudz kursīvā tagā .
Ja vēlaties vienkārši izcelt kādu mirkli tekstā, izmantojiet tagu vai ... Kopumā es domāju, ka meklētājprogrammas arī šo tagu tekstu uzskata par svarīgāku, bet tālāk iekšējā optimizācija tiem joprojām ir mazāka ietekme nekā un .
Slīpsvītras teksta tagi - , un
Tagad aplūkosim dažus tagus, kuros teksta veidošanā tiek izmantota iezīme. Slavenākais teksta redaktors, kuru jūs zināt tagu
vai pasvītrot. Šis tags neietekmē rangu (cik es zinu), bet tas palīdzēs izcelt tekstu un koncentrēties uz to. Es minēju piemēru, kā izmantot šo tagu tieši iepriekš. Ir vēl divi tagi, kuru mērķis ir līdzīgs - un ... Abas funkcijas ir pārsvītrota teksta funkcija. Šo tagu varat izmantot jebkurā situācijā: ja atjaunināt dokumentu (vai drīzāk tā daļu), varat svītrot veco un pievienot jaunu; ja jūs gatavojaties rakstīt kaut ko tādu, kas atšķiras no materiāla tēmas; kaut kas neatbilst morāles un ētikas standartiem.
Atšķirības starp šiem diviem tagiem ir tikai viņu rakstīšana, kā rezultātā ir vēlams izmantot pirmo, jo pirmkārt, ērtāk ir rakstīt, un, otrkārt, jūsu lapā būs mazāk HTML kodu, un meklētājprogrammām tas patīk.
Atzīmēt un atribūti - teksta fonta parametri
Tagad apsveriet tagu, kas netiek izmantots bez atribūtiem. Ar to jūs varat iestatīt parametrus konkrētam teksta gabalam. Kopumā tagad ir vēlams izmantot (kaskādes stila lapas), jo tie var ievērojami saīsināt visu lapas HTML kodu. Tātad, apskatīsim to pašu tagu . Viņam ir viss trīs atribūti:
- seja- pats fonts. Piemēram, Arial, Courier vai Verdana. Jūs varat uzskaitīt dažus, jo ne visiem lietotājiem ir plašs fontu komplekts, un, ierakstot dažus atribūtā face, pārlūks varēs izvēlēties, kuru lietot, pareizāk sakot, kurš atrodas sistēmā;
- Izmērs- atribūts, kas norāda teksta lielumu. To var izteikt gan patvaļīgās vienībās, gan pikseļos;
- krāsa- teksta krāsa. Šo atribūtu var izmantot gan krāsu HTML kodos, gan vārdos. Pirmie ir formā #FFFFFF (kur F ir jebkurš skaitlis vai burts no A līdz F), bet otrie ir rakstīti vienkāršiem vārdiem (piemēram, sarkans ir sarkans).
Šādi izskatās tagā esošais teksts izmantojot katru atribūtu:
Šī teksta lielums ir 6 pikseļi
Šis teksts ir sarkans Šis teksts ir arial fontā Šis teksts ir sarkans un 5 pikseļuLūk, ko jūs redzēsiet pēc rakstītā koda apstrādes: 
Blokēti teksta noformējuma elementi - galvenes -, paragrāfs
, paragrāfs
Visbeidzot, mēs aplūkosim bloku elementus, kas tiek izmantoti gandrīz katrā dokumentā. Tie ir virsrakstu un rindkopu tagi. Apsvērsim pirmo. Ir 6 virsrakstu veidi, un katram ir savs tags. Katrai sugai ir tikai savs sērijas numurs, un tā tiek ierakstīta, izmantojot tagus
, ,..., ... Apstrādājot šādi izskatās visas galvenes:
... Apstrādājot šādi izskatās visas galvenes:
Skaitlis aiz vārda nosaukuma sakrīt ar numuru tagā
Tagad parunāsim par rindkopu izcelšanas tagu.
Šī taga funkcija ir atdalīt tekstu no cita līdzīga teksta ar tukšu rindu. Aplūkojot dokumenta pirmkodu, var redzēt:
Zaļajām lodziņām ir viena rindkopa, sarkanajām rūtiņām ir cita. Tas ir tas, kā šis kods izskatās pēc pārlūkprogrammas apstrādes (bulta norāda uz tukšu rindu):
Rezultātā mēs iegūstam diezgan pamanāmu vienas rindkopas atdalīšanu no citas, kas ir izdevīgi - lasīšana kļūst ērtāka.
Tātad raksts par dokumentu formatēšanas tagi... Viņu ir daudz vairāk, nekā es aprakstīju šajā materiālā. Vienkārši par dažiem jums jāstāsta diezgan daudz, kā rezultātā tiem tiks veltīti atsevišķi raksti ar pilnu recenziju.!
Fonta svaru nosaka, izmantojot CSS atribūtu fonta svars, kam var būt šādas vērtības:
- šķiltavas- šķiltavas
- normāli- normāli
- treknrakstā- treknrakstā
- drosmīgāk- vairāk tauku
- 100..900 - 100 atbilst plānākajam fontam; 900 - visbiezākais
Atribūts fonta stils(fonta stils) tiek izmantots rakstīšanai kursīvā, un tam var būt šāda nozīme:
- kursīvs- kursīvs, teksta malas ir noapaļotas
- normāli- normāli
- slīpi- kursīvs
Atribūts fonts-variants(fonta tips) lieto, lai rakstītu ar maziem lielajiem burtiem, un tam var būt šāda nozīme:
- normāli- normāli
- smaoo-caps- mazie lielie burti
Papildus treknajam, kursīvam un mazajiem burtiem ir vairāki citi populāri fontu stilu veidi: pasvītrojums un marķējums.
Atribūts teksta noformēšana(teksta noformējums) kalpo, lai pasvītrotu tekstu, un tam var būt šādas vērtības:
- mirgot- mirgojošs teksts (IE neatbalsta)
- caurbraukšana- pārsvītrots teksts
- neviena- bez izmaiņām
- pārvilkt- līnija virs teksta
- pasvītrot- pasvītrots teksts
Atribūts teksta pārveidošana(teksta pārveidošana) tiek izmantots darbam ar maziem lielajiem burtiem, un tam var būt šādas vērtības:
- rakstīt ar lielajiem burtiem- visi vārdi sākas ar lielo burtu
- mazie burti- viss teksts ir rakstīts ar mazajiem burtiem
- neviena- bez izmaiņām
- lielie burti- viss teksts ir rakstīts ar lielajiem burtiem
Lietojuma piemērs fonta svars, fonta stils, teksta noformēšana, teksta pārveidošana: 9. piemērs
Lapas HTML kods:
Bez nosaukuma
"Krievijas zelta gredzens"(senatnē Zalesye), tūristu maršruts, kas ietver seno krievu pilsētu tīklu: Sergijevs Posads, Pereslavls-Zaļeskis, Rostovs Lielais, Jaroslavls, Kostroma, Ples, Vladimirs, Bogolyubovo, Suzdal, Jurjevs-Polskojs, Uglich. Nosaukums Zalesye galvenokārt ir ģeogrāfisks, tas nozīmēja visu, kas bija “aiz meža” attiecībā uz Kijevas Krieviju.
Tūrisma maršruts (darbojas kopš 1970. gada sākuma), kas iziet cauri vēsturiskām pilsētām, iet caur piecu reģionu teritoriju - Maskava, Jaroslavļa, Kostroma, Ivanovskaja, Vladimirskaja.Šo zemju senajām pilsētām ir savs liktenis, pagātne. Vēsturiskajā attīstībā viņi ir gājuši sarežģītu ceļu no pirmajām dzimšanas dienām līdz mūsdienām. Šajā garajā ceļojumā ir daudz neatgriezeniski zaudēts. Vienaldzība un nolaidība noved pie daļējas vai pilnīgas unikālu ēku, piemēram, Kalyazin, Mologa, Uglich, pilsētu iznīcināšanas. Uglich hidroelektrostacijas celtniecības laikā senais Pokrovska klosteris ar unikāliem 15.-17. Gadsimta pieminekļiem tika uzspridzināts un nonāca zem ūdens. Puse Uglichas baznīcu tika nojauktas, klosteru žogi tika demontēti, kas iznīcināja to ansambļa integritāti. Ar restauratoru centieniem desmitiem senās arhitektūras objektu, kas šķietami neatgriezeniski pazuduši, tika izglābti no ārkārtas stāvokļa un izglābti no iznīcināšanas. Atjaunots dzīvē tā sākotnējā formā: Uglichas Augšāmcelšanās klostera (1674.-77.), Nerlas aizlūgšanas baznīcas (12. gadsimts), Dmitrijevska katedrāles (12. gadsimts) un Vladimira "Zelta vārtu" arhitektūras ansamblis , Sv. Jura katedrāle (12. gadsimts) Jurjevs-Polskis, senās Suzdalas pieminekļi, kur tika veikts visaptverošs darbs, lai atjaunotu vēsturiskās ēkas visā pilsētā, pilsēta-muzejs. Tika atjaunoti veseli Kostromas un Suzdalas koka arhitektūras muzeju arhitektūras kompleksi. Tie visi ir cilvēku roku radījumi, kas skāruši aizsargājamās Krievijas zemes teritorijas.
