Kai kurios svetainės pritraukia vartotojus ne animacija, ne paveikslėliais ar nuotraukomis, ne vaizdo įrašais, o tik savo tekstiniu turiniu. Tekstas yra neatsiejama daugelio populiarių svetainių turinio dalis. Ankstesnėse pamokose nagrinėjome CSS ypatybes, kurios leidžia keisti teksto spalvą, pridėti prie jo šešėlį, sulygiuoti ir pridėti pabraukimą, perbraukimą ar net perbraukimą. Šioje pamokoje bus apžvelgta, kokios yra šriftų šeimos ir kaip pakeisti numatytąjį teksto šriftą.

Skirtumas tarp Sans-serif ir Serif šriftų šeimų

svetainė – sans-serif šriftas

svetainė - serif šriftas

Šriftų šeimos CSS

CSS programoje šriftai skirstomi į šeimas, kurių kiekviena susideda iš šriftų rinkinio bendrosios charakteristikos. Yra tik penkios šriftų šeimos:

sans-serif - sans-serif šriftai, manoma, kad jie yra geriau skaitomi kompiuterio ekrane nei šriftai iš serif šeimos.
serif yra serif šriftų šeima. Daugelis žmonių juos sieja su laikraščių straipsniais. Serifai yra dekoratyviniai brūkšniai ir brūkšniai raidžių kraštuose.
monospace yra šriftų šeima, kurios simboliai yra vienodo fiksuoto pločio. Tokie šriftai pirmiausia naudojami programos kodo pavyzdžiams rodyti.
cursive – šriftai, imituojantys ranka rašytą tekstą.
fantazija – meniniai ir dekoratyviniai šriftai. Jie nėra labai paplitę, yra prieinami ne visuose kompiuteriuose ir retai naudojami kuriant interneto svetaines.

Šriftų šeimos ypatybė leidžia pakeisti numatytąjį šriftą. Paprastai jame yra kableliais atskirtas keičiamų šriftų, priklausančių tai pačiai šeimai, sąrašas. Jei šrifto pavadinimą sudaro daugiau nei vienas žodis, jis turi būti nurodytas kabutėse. Pavardė paprastai nurodoma sąrašo pabaigoje:

Turinys (šriftų šeima: Verdana, Helvetica, Arial, sans-serif; )

Pažiūrėkime, kaip naršyklė apdoroja šriftų sąrašą, nurodytą mūsų šriftų šeimos nuosavybėje:

Pirmiausia patikrinama, ar jūsų kompiuteryje įdiegtas Verdana šriftas, ir, jei taip, naudoja jį kaip teksto šriftą elemento viduje (mūsų atveju elemento viduje )
Jei Verdana neįdiegta, ji ieško šrifto Helvetica. Jei paieška sėkminga, naudokite ją viduje .
Jei Helvetica neįdiegta, ji ieško Arial šrifto. Jei jis pasiekiamas kompiuteryje, jis taikomas viduje .
Galiausiai, jei nerandamas nė vienas iš nurodytų šriftų, naudojamas pirmasis kompiuterio naršyklės rastas sans-serif šeimos šriftas. Tokiu būdu naršyklė gali savarankiškai nustatyti tinkamą šriftą iš šeimos.

Dokumento pavadinimas

CSS nuosavybėšrifto šeima

Pastraipa naudojant Times New Roman šriftą.

Pastraipa naudojant Arial šriftą.

Bandyti "

Pastaba: renkantis tik vieną konkretų šriftą, svarbu suprasti, kad naršyklė jį parodys tik tuo atveju, jei šriftas bus įdiegtas vartotojo kompiuteryje. Jei šriftas nerastas, tekstas bus rodomas „Times New Roman“ šriftu, kuris yra numatytasis šriftas visose naršyklėse.

apibūdinimas

Žyma padidina šrifto dydį vienu, palyginti su įprastu tekstu. IN HTML dydisšriftas matuojamas savavališkais vienetais nuo 1 iki 7, pagal numatytuosius nustatymus naudojamas vidutinis teksto dydis yra 3. Taigi, pridedant žymą padidina tekstą vienu sutartiniu vienetu. Įdėtos žymos leidžiamos , o šrifto dydis bus didesnis su kiekvienu lygiu.

Šrifto dydžiui įtakos turi ne tik nurodytas žymos dydžio atributas , bet ir šrifto šrifto pasirinkimas. Arial šriftas atrodo didesnis nei Times, o Verdana šriftas yra šiek tiek didesnis nei Arial šriftas. Atsižvelkite į šią funkciją rinkdamiesi šriftą ir jo dydį. Norėdami tiksliau valdyti teksto dydį, naudokite stilius.

Sintaksė

Tekstas

Uždarymo žyma

Privaloma.

Atributai

Panašus į CSS

HTML 4.01 IE Cr Op Sa Fx

Pažymėkite BIG

Lorem ipsum dolor sit amet

Loremas ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Rezultatas šis pavyzdys nurodyta apačioje.

< Šriftas DYDIS=… SPALVA=... VEIDAS=...> tekstas Šriftas>

DYDIS- rinkiniai šrifto dydis, kuris bus naudojamas tekste, esančiame elemente FONT. Galite nurodyti absoliutų šrifto dydį, nurodydami sveikąjį skaičių nuo 1 iki 7. Šriftui taip pat galite nurodyti santykinis dydis, priskiriant atributui sveikąjį skaičių su ženklu (pavyzdžiui, tai gali būti SIZE="+1" arba SIZE="-2").

SPALVA– nurodo spalva, kuri paryškins šią teksto dalį. Spalvos nurodomos kaip RGB reikšmė su šešioliktainiu žymėjimu arba pasirenkama vienos iš standartinių spalvų simbolinė reikšmė.

VEIDAS- rinkiniai šrifto šriftas, pavyzdžiui, FACE=ARIAL.

tekstą - teletipo tekstas (monospace).

tekstą - stilius su kursyvu ( kursyvas).

tekstą- stilius su drąsusšriftas.

tekstą U>- stilius su pabraukimas tekstą.

tekstą DIDELIS>- teksto spausdinimas šriftu padidintas dydis(didesnis nei aplinkinis tekstas).

tekstą MAŽAS>- teksto spausdinimas šriftu sumažintas dydis(mažesnis nei aplinkinis tekstas).

tekstą SUB>- spausdinti tekstą su poslinkiu žemyn ( apatinis indeksas arba tarplinijinis).

tekstą SUP>- spausdinti tekstą su poslinkiu aukštyn ( viršutinis indeksas arba viršutinis indeksas).

tekstą STREIKAS> arba < S> …S> - stilius su perbrauktu tekstu.

Specialios html žymos

Žyma< ADRESAS> naudojamas paryškinti dokumento autorių ir jo adresą (pavyzdžiui, el. paštas).

~~Kai kurie personažai yra valdymo simboliai HTML ir pridedami prie teksto tik naudojant ESC sekas:~~

~~kairysis kampinis skliaustas "<" - <~~

~~stačiakampis skliaustas ">" ->~~

~~ampersand "&" - &~~

~~dvigubos kabutės "" - "~~

Yra daug ESC sekų, skirtų specialiesiems simboliams, pvz., " " reiškia  ir "®" - . Viena iš ypatybių yra simbolių keitimas 2-oje simbolių lentelės dalyje (po 127 simbolio) perdavimo sekomis. tekstinius failus su nacionalinėmis kalbomis 7 bitų kanaluose.

~~ESC sekos didžiosios ir mažosios raidės: Vietoj to NEGALIMA naudoti<.~~

~~Dažniausiai naudojamos žymos pateiktos 2 lentelėje.~~

~~1.2 lentelė – Pagrindinės HTML dokumento kūrimo žymos~~

	Atributas	Funkcija
	versija = linija	Nurodo HTML versiją, kuri buvo naudojama kuriant šį dokumentą
		Žymose esantis tekstas bus rodomas kursyvu
HEAD žyma – HTML dokumento antraštės dalies pradžios ir pabaigos žymos
žymaTITLE– pradžios ir pabaigos pavadinimo žymosHTML- dokumentas
žymaA– pradžios ir pabaigos žymės, leidžiančios sukurti hipersaitą (atributąhref) arba fragmento identifikatorius (atributasvardas) antraštęHTML- dokumentas

	href= url	Nurodomas hipersaito tikslinio dokumento URL (būtina, jei tai nėra pavadinimo prierašas)
	metodai = sąrašą	Nurodomas naršyklei būdingų rodymo metodų sąrašas (atskirtas kableliais)
	vardas = linija	Nurodo fragmento identifikatoriaus pavadinimą (būtina, jei tai nėra hiperteksto nuorodos inkaras)
	rel= ryšį	Nustatomas šio dokumento ryšys su tiksliniu dokumentu
	rev= ryšį
	taikinys= vardas	Nurodo nuorodos nurodyto dokumento rėmelio arba rodymo lango pavadinimą.
	pavadinimas = linija
		Nurodo nuo vietos nepriklausomą vienodą šio hipersaito ištekliaus pavadinimą
žymaADRESAS– šiose žymose esantis tekstas yra adresas
žymaB– šiose žymose esantis tekstas bus rodomas paryškintu šriftu
žymaBAZĖ– nurodomas pagrindinisURLvisiems giminaičiamsURLšiame dokumente
	Atributas	Funkcija
	href= url	Nurodykite bazinį URL
	taikinys= vardas	Nustato numatytąjį visų nuorodų taikymo langą dokumente. Daugiausia skirta nuorodoms peradresuoti į kitus kadrus. Yra keturios specialios reikšmės: _blank, _parent, _self ir _top
žymaBASEFONT– nurodo tolesnio teksto šrifto dydį
	Atributas	Funkcija
	dydis = prasmė
žymaDIDELIS– žymose esantis tekstas bus rodomas didesniu šriftu
žymaKŪNAS– dokumento teksto pradžios ir pabaigos žymos

	alink= spalva	Nustatykite dokumente esančių aktyvių hiperteksto nuorodų spalvą
	fonas = url	Nurodo fono vaizdo URL adresą
	bgcolor= spalva	Nustatykite dokumento fono spalvą
	bgproperties= prasmė	Jeigu prasmė lygus fiksuotam, neleidžia fono paveikslėliui slinkti kartu su dokumento turiniu (T.Y.2 ir daugiau)
	leftmargin = vidurkis n ne	Nustatykite dokumento kairiosios paraštės dydį (pikseliais). (T.Y.2 ir daugiau)
	nuoroda = spalva	„Nelankymų“ hiperteksto nuorodų spalvos nustatymas dokumente
	tekstas = spalva	Nustatykite įprasto teksto spalvą dokumente
	topmargin= prasmė	Nustatykite dokumento viršutinės paraštės dydį (pikseliais). (T.Y.2 ir daugiau)
	vlink= spalva	„Aplankytų“ nuorodų spalvos nustatymas dokumente
žymaBR– nutraukti esamą teksto srautą ir tęsti jį nuo kitos eilutės pradžios
	Atributas	Funkcija
		Nustato objekto „apvyniojimą“, kurio vietą nurodo šio atributo reikšmė (kairėn, dešinėn arba visi). Kai apvyniosite naują eilutę, tekstas bus patalpintas taip, kad objektas liktų matomas
žymaCENTRAS– teksto, įdėto į žymes, pateikimas centre
žymaCITE– žymose esantis tekstas reiškia citatą
žymaKOMENTARAS– Komentuoti dokumento tekste. Komentarai bus matomi bet kurioje naršyklėje. Visose naršyklėse komentaras pateikiamas kaip
žymaDD– nustato aprašomąją apibrėžimų sąrašo elemento dalį
žymaDFN– žymose esantis tekstas suformatuotas kaip apibrėžimas
žymaD.L.– sudaryti apibrėžimų sąrašą su žymomis< dt> ir< dd>
žymaD.T.– apibrėžimų sąrašo elementui nurodoma aprašomoji-sąlyginė dalis
žymaĮterpti– pradžios ir pabaigos žymės, leidžiančios apibūdinti dokumente įdėtą objektą. Atsižvelgiant į įterpto objekto tipą, be toliau išvardytų parametrų gali būti įtraukti papildomi parametrai
	Atributas	Funkcija
		Nurodo įterpto objekto URL adresą. Šis atributas yra būtinas
	aukštis = n	Nurodo zonos, kurią užims integruotas objektas, aukštį
	vardas = vardas	Nurodo įdėto objekto pavadinimą
		Nurodo zonos, kurią užims įtaisytasis objektas, plotį
žymaŠriftas– žymose esančio teksto dydžio, spalvos ar šrifto nustatymas
	Atributas	Funkcija
		Nustatykite žymose esančio teksto spalvą
	veidas=sąrašas	Nustato pažymėto teksto šriftą (nustato pirmąjį šrifto pavadinimą, pateiktą kableliais atskirtame sąraše)
	dydis = prasmė	Nustatykite pagrindinį šrifto dydį. Diapazonas - nuo 1 iki 7
žymaHn– tekstas, esantis žymose, reiškia lygio antraštęn. Galimos vertėsn– nuo 1 iki 6
	Atributas	Funkcija
	lygiuoti = tipo	Nurodo, kaip turi būti lygiuojamas pavadinimas: kairėje (numatytasis), centre arba dešinėje (dešinėje)
žymaHR– nutraukti esamą teksto srautą. Pertraukos taške bus įdėta horizontali liniuotė.
	Atributas	Funkcija
	lygiuoti = tipo	Nurodo, kaip turi būti išlygiuota liniuotė: kairėn, centre (numatytasis) arba dešinėn
		Rodydami liniuotę, nenaudokite tūrinio šešėliavimo
		Liniuotės storio nustatymas iki sveiko pikselių skaičiaus
	plotis = prasmė
žymaaš– žymose esantis tekstas bus rodomas kursyvu
žymaIMG– vaizdas įterpiamas į esamą teksto srautą
	Atributas	Funkcija
	alt= tekstą	Nustato alternatyvų tekstą naršyklėms, kurios nepalaiko vaizdų
	Sienos = n	Nustatykite hipersaituose esančių vaizdų kraštinės storį (pikseliais).
		Įterptų vaizdo įrašų atkūrimo valdiklių pridėjimas (T.Y.2 ir daugiau)
	Dynasrc= url	NustatytiURL- filmuojamo vaizdo klipo adresas( T.Y. 2 ir daugiau)
	Aukštis = n	Nustato vaizdo aukštį pikseliais
	Hspace = n	Nustato laisvos erdvės plotų, kurių plotis yra, vaizdo vietą kairėje ir dešinėje n pikselių
		Nurodo, kad naudojant šią žymą žymoje vaizdas pasirenkamas pele
	kilpa= prasmė	Nustatykite vaizdo įrašo atkūrimo pakartojimų skaičių. Reikšmė gali būti sveikasis arba begalinis skaičius (T.Y.2 ir daugiau)
	Lowsrc= url	Nurodomas mažos raiškos paveikslėlyje, kurį naršyklė turėtų įkelti pirmiausia. Po to seka atributo nurodytas vaizdas (T.Y.2 ir daugiau)
		Nurodo atkuriamo vaizdo šaltinio URL. Šis atributas yra būtinas
	pradžia = Pradėti	Nurodo, kada leisti vaizdo klipą (parinktys: atidaryti failą arba užvesti pelės žymeklį)
	Naudojimo žemėlapis = url	Nurodo pelės judėjimui jautrią vaizdo sritį
	Vspace = n	Nurodo npikselių laisvos vietos virš ir po vaizdu vietą
		Nurodo vaizdo plotį pikseliais
žymaKBD– žymose esantis tekstas įvedamas simbolis po simbolio (kaip renkant klaviatūra)
žymaLINK- pavadinime (< galva >) dokumento, nustatoma nuoroda iš šio dokumento į kitą dokumentą
	Atributas	Funkcija
	href= url
	metodai = sąrašą	Nustato šios nuorodos rodymo metodų sąrašą, priklausomai nuo naršyklės (atskiriama kableliais)
	rel= ryšį	Nustatomas šio dokumento ryšys su tiksliniu dokumentu. Internet Explorer 3.0 atveju rel=style reiškia išorinio stiliaus lapo buvimą
	rev= ryšį	Nustatomas tikslinio dokumento grįžtamasis ryšys su duomenimis
		Nurodo išorinio stiliaus lapo URL, kuris bus naudojamas formatuoti dokumentą ( T.Y.2 ir daugiau)
	pavadinimas = linija	Nustato tikslinio dokumento pavadinimą
	tipas = tekstas/css
		Tiksliniam dokumentui nurodomas universalus ištekliaus pavadinimas, neatsižvelgiant į jo vietą
žymaŽEMĖLAPIS– nustatoma vaizdo sritis, jautri pelės judėjimui
	Atributas	Funkcija
	vardas = linija	Nurodo šios srities pavadinimą. Šis atributas yra būtinas
žymaNOBR– žymose esančiame tekste pertraukos neleidžiamos
žymaP– pastraipos pradžios ir pabaigos žymės
	lygiuoti = tipo	Nustato, kaip tekstas pastraipoje lygiuojamas: kairėje, centre arba dešinėje
žymaPAPRASTAS TEKSTAS– nurodoma, kad likusi dokumento dalis turi būti rodoma neapdorota, kaip iš anksto suformatuotas tekstas
žymaPRE– žymose esantis tekstas bus rodomas taip. kaip jis buvo iš anksto suformatuotas, be apdorojimo, tiksliais eilučių pertraukomis ir tarpais
		Naršyklė įdės tekstą taip, kad (jei įmanoma) n simbolių tilptų eilutėje
žymaS
žymaSAMP– žymose esantis tekstas yra šablonas
žymaMAŽAS– žymose esantis tekstas bus rodomas mažesniu šriftu
žymaSPACER– į dokumentą įterpti skyriklį(TikN3)

	tipas = tipo	Nurodomas skyriklio tipas: vertikalus – tarp dviejų teksto eilučių dedamas nurodyto dydžio tuščias plotas – tarp žodžių ar simbolių įterpiamas nurodyto dydžio tuščias plotas; stačiakampio ploto įterpimas
		Nurodomas (pikseliais) horizontalaus skyriklio plotis arba vertikalaus skyriklio aukštis
		Nurodo blokų skyriklio plotį
	aukštis = n	Nurodo blokų skyriklio aukštį
	lygiuoti = prasmė	Nurodo, kaip bloko skyriklis išlygiuotas aplinkinio teksto atžvilgiu.
žymaSPAN– žymose esantis tekstas bus suformatuotas naudojant stiliaus lapą(TikT.Y.3 ir daugiau)
	Atributas	Funkcija
	stilius = elementai	Stiliaus lapo elementai nurodomi tekstui tam tikru tarpu
žymaSTREIKAS– žymose esantis tekstas bus rodomas horizontalia linija per jį
žymaSUB– žymose esantis tekstas bus rodomas kaip apatinis indeksas
žymaSUP– žymose esantis tekstas bus rodomas kaip viršutinis indeksas
žymaTT– žymose esantis tekstas bus rodomas monospace šriftu
žymaVAR– žymose esantis tekstas nurodo kintamojo pavadinimą

arba studijuoti žymas, kurios formatuoja HTML tekstą

Jūsų dėmesiui pristatome vieną iš pagrindinių ir paprasčiausių pamokos pamokų.

HTML tekstas yra pagrindinis daugelio interneto puslapių komponentas.

Pagal pagrindines frazes HTML puslapio tekste vartotojai gali rasti jūsų svetainę.

HTML tekstas Gali būti bet kokio dydžio ir spalvos jūsų nuožiūra. Taip pat galite nustatyti šrifto tipą ir jo garsumą.

HTML šrifto dydis paprastai nustatomi pikseliais.

HTML teksto formatavimas plačiai naudojamos, naudojamos formatavimo žymos.

Žiūrėkite žemiau žymos, kurios formatuoja HTML tekstą:

Žymos → paryškintas HTML tekstas(paryškintas šriftas).

Žymos → paryškintas HTML tekstas(paryškintas šriftas).

Žymos → monospace HTML tekstas(vieno tarpo šriftas).

Žymos → monospace HTML tekstas(vieno tarpo šriftas).

Žymos → monospace HTML tekstas(vieno tarpo šriftas).

Žymos → HTML tekstas, didesnis nei įprastas dydis (didelis šriftas).

Žymos → HTML tekstas, dydis mažesnis nei įprastai (mažas šriftas).

Žymos → įstrižas HTML tekstas(Italic šriftas).

Žymos → įstrižas HTML tekstas(Italic šriftas).

Žymos → įstrižas HTML tekstas(Italic šriftas).

Žymos → pabraukta HTML tekstas(pabrauktas šriftas).

Žymos → perbrauktas HTML tekstas(perbrauktas šriftas).

Žymos → HTML tekstas(šriftas) apatiniame indekse.

Žymos → HTML tekstas(šriftas) viršuje.

HTML teksto formatavimas: perbrauktas, pabrauktas tekstas

Rezultatas: ... monospace šriftas

Rezultatas: ...šrifto dydis didesnis nei įprastas

Rezultatas: ... kursyvas šriftas

Rezultatas: perbrauktas tekstas (perbrauktas šriftas)

Rezultatas: viršutinis indeksas

Aukščiau pateikti formatavimo metodai turėtų būti naudojami tik mažoms teksto dalims. Panaudok tai CSS jei norite nustatyti konkretų šriftą visam puslapiui arba, pavyzdžiui, kelioms eilutėms.

apibūdinimas

Apibrėžia elemento šrifto dydį. Dydis gali būti nustatytas keliais būdais. Konstantų rinkinys (xx-small, x-small, small, medium, large, x-large, xx-large) nurodo dydį, kuris vadinamas absoliučiu. Tiesą sakant, jie nėra visiškai absoliutūs, nes priklauso nuo naršyklės nustatymų ir operacinės sistemos.

Kitas konstantų rinkinys (didesnis, mažesnis) nustato santykinius šrifto dydžius. Kadangi dydis paveldimas iš pirminio elemento, šie santykiniai dydžiai taikomi pirminiam elementui, siekiant nustatyti dabartinio elemento šrifto dydį.

Galiausiai šrifto dydis labai priklauso nuo elemento pirminio elemento šrifto dydžio savybės.

Pats šrifto dydis apibrėžiamas kaip aukštis nuo pradinės linijos iki smeigtuko viršaus, kaip parodyta Fig. 1.

Ryžiai. 1. Šrifto dydis

Sintaksė

šrifto dydis: absoliutus dydis | santykinis dydis | prasmė | palūkanos | paveldėti

Vertybės

Norint nustatyti absoliutų dydį, naudojamos šios reikšmės: xx-small, x-small, small, medium, large, x-large, xx-large. Jų atitikimas šrifto dydžiui HTML pateiktas lentelėje. 1.

Santykinis šrifto dydis nurodomas didesnėmis ir mažesnėmis reikšmėmis.

Taip pat leidžiama naudoti bet kokius galiojančius CSS vienetus: em (elemento šrifto aukštis), ex (x simbolio aukštis), taškai (pt), pikseliai (px), procentai (%) ir kt. Pirminio elemento šrifto dydis yra priimtas kaip 100 proc. Neigiamos reikšmės neleidžiamos.
Inherit Paveldi motinos vertę.
HTML5 CSS2.1 IE Cr Op Sa Fx
šrifto dydis
Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Šio pavyzdžio rezultatas parodytas fig. 1.

Ryžiai. 2. Šrifto dydžio savybės naudojimas

Objekto modelis

document.getElementById("elementID ").style.fontSize

Naršyklės

Internet Explorer versijos iki 7.0 imtinai nepalaiko paveldėjimo reikšmės.