. Ir ši žyma jau turi atributą " lygiuotis", kurios reikšmė lemia šio konteinerio padėtį. Yra trys reikšmės: " paliko", "centras", "teisingai". Pagal numatytuosius nustatymus tai yra " paliko„Tačiau manau, kad tai jūsų nestebina.

Dabar parašykime tą patį HTML kodas, bet naudojant konteinerius, be to, lygiuokime ne į centrą, o į dešinę.

Kaip matote, viskas veikia. Taip pat patariu pakeisti atributo reikšmes " lygiuotis“, kad peržiūrėtumėte kitus konteinerio turinio lygiavimo tipus.

Kitas elementų derinimo būdas HTML- tai yra lentelės, tačiau ši tema nusipelno atskiros diskusijos, todėl apie tai kalbėsime viename iš šių straipsnių.

Kol kas jūsų puslapis turėtų atrodyti taip:

1 lygio antraštė, sulygiuota centre

Pagarbiai Michailas Rusakovas.

P.S. Jei norite sužinoti daugiau apie HTML, tada peržiūrėkite mano nemokamą kursą su svetainės kūrimo pavyzdžiu adresu HTML:

Vaizdams galite nurodyti jų padėtį, palyginti su tekstu ar kitais tinklalapio vaizdais. Vaizdų išlygiavimo būdą nurodo lygiavimo atributas.

Šis atributas nebenaudojamas, naudokite stilius.

Sintaksė

Vertybės

Lentelėje 1 pateikiamos galimos lygiavimo atributo reikšmės ir jo naudojimo rezultatas.

Lentelė 1. Atributų verčių lygiavimas

Reikšmė	apibūdinimas	Pavyzdys
apačioje	Sulygiuoja apatinę vaizdo kraštinę su aplinkiniu tekstu.
paliko	Sulygiuoja vaizdą su kairiuoju lango kraštu.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
vidurio	Sulygiuoja vaizdo vidurį su dabartinės linijos bazine linija.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
teisingai	Sulygiuoja vaizdą su dešiniuoju lango kraštu.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
viršuje	Viršutinė vaizdo kraštinė sulygiuota su aukščiausiu dabartinės linijos elementu.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Numatytoji reikšmė

Pavyzdys

Šis tekstas apgaubia kairįjį nuotraukos kraštą.

Naršyklės

Naršyklės lentelėje naudojami šie užrašai.

• - elementą visiškai palaiko naršyklė;
• - elemento naršyklė nesuvokia ir yra nepaisoma;
• - veikimo metu gali atsirasti įvairių klaidų arba elementas palaikomas su išlygomis.

Skaičius rodo naršyklės versiją, iš kurios elementas palaikomas.

apibūdinimas

Sulygiuoja teksto bloką prie krašto.

Vietoj šio atributo turi būti naudojami stiliai

Sintaksė

Vertybės

į kairę Lygiuoja tekstą į kairę. Šiuo atveju teksto eilutės išlygiuotos į kairę, o dešinysis kraštas – kaip kopėčios. Šis lygiavimo būdas yra populiariausias svetainėse, nes leidžia vartotojui lengvai rasti nauja linija ir patogiai skaityti didelį tekstą. centre Sulygiuoja tekstą su centru. Tekstas naršymo lange arba konteineryje, kuriame yra teksto blokas, dedamas horizontaliai. Atrodo, kad teksto eilutės yra susuktos ant nematomos ašies, kuri eina žemyn tinklalapio centre. Šis lygiavimo metodas aktyviai naudojamas antraštėse ir įvairiuose parašuose, pavyzdžiui, antraštėse, jis suteikia teksto dizainui oficialų ir solidų vaizdą. Visais kitais atvejais lygiavimas centre retai naudojamas dėl to, kad nepatogu skaityti didelį kiekį tokio teksto. dešinėn Sulygiuoja tekstą į dešinę. Šis derinimo metodas veikia kaip ankstesnio tipo antagonistas. Būtent, teksto eilutės lygiuojamos į dešinįjį kraštą, o kairysis lieka „suplėšytas“. Kadangi kairysis kraštas nelygiuotas, t. y. čia skaitomos naujos eilutės, šį tekstą skaityti sunkiau, nei jei jis būtų išlygiuotas kairėje. Todėl dešinysis lygiavimas dažniausiai naudojamas trumpoms, ne ilgesnėms nei trijų eilučių antraštėms. Mes nenagrinėjame konkrečių svetainių, kuriose tekstas turi būti skaitomas iš dešinės į kairę, kur galbūt bus naudingas panašus lygiavimo būdas. Bet kur mūsų šalyje matėte tokias svetaines? Justify Justified, o tai reiškia, kad tuo pačiu metu lygiuojama į kairę ir į dešinę. Norėdami atlikti šį veiksmą, naršyklė šiuo atveju prideda tarpų tarp žodžių.

Numatytoji reikšmė

Pavyzdys. Teksto lygiavimas

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum falisi null zzril delenit doloare teciu feuga. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Naršyklės: Desktop Mobile ?

Internet Explorer	Chrome	Opera	Safari	Firefox
1	1	1	1	1

Android	Firefox mobilusis	Opera mobilusis	„Safari Mobile“.
1	1	6	1

✖

Naršyklės

Naršyklės lentelėje naudojami šie užrašai.

• - elementą visiškai palaiko naršyklė;
• - elemento naršyklė nesuvokia ir yra nepaisoma;
• - veikimo metu gali atsirasti įvairių klaidų arba elementas palaikomas su išlygomis.

Skaičius rodo naršyklės versiją, iš kurios elementas palaikomas.

Sveiki, mieli tinklaraščio svetainės skaitytojai. Šiandien mes tęsiame studijas, o toliau turime ypatybes teksto dekoravimas, vertikalus lygiavimas, teksto lygiavimas, teksto įtrauka ir daug kitų, kurios padeda sukurti tekstų išvaizdą HTML kode.

Paskutiniame straipsnyje apžvelgėme ypatybes, kurias ketinama konfigūruoti išvaizdašriftai adresu .

Na, o dar anksčiau išsamiai apžvelgėme visus tipus, sužinojome, kaip juos galima grupuoti ir kokius prioritetus nustato naršyklė juos interpretuodama. Tiesa, visa tai buvo suskirstyta į keletą straipsnių, todėl, kad nesusipainiotumėte, patariu medžiagą išstudijuoti tokia tvarka, kokia nurodyta.

Teksto dekoravimas, teksto lygiavimas, teksto įtrauka CSS

Kaip dirbti su tekstu Css? Būtų logiška manyti, kad tam yra specialiai sukurtos taisyklės. Pradėkime nuo teksto lygiavimo, kuris iš tikrųjų yra lygiavimo atributo pakaitalas (jis buvo naudojamas turiniui, pvz., P pastraipoms ar antraštėms, lygiuoti).

Jis turi tik keturias galimas reikšmes:

Esmė išlieka tokia pati kaip ir anksčiau. Teksto lygiavimas- tai horizontalus linijų lygiavimas. Ši taisyklė galioja tik bloko elementams (pastraipoms, antraštėms ir pan.), t.y. tos žymos, kuriose gali atsirasti kelios eilutės. Nes Kadangi įterptieji elementai gali turėti tik vieną eilutę, nėra jokios ypatingos prasmės juose naudoti teksto lygiavimą.

Akivaizdu, kad šios taisyklės reikšmės reiškia lygiavimą atitinkamai: kairėn, dešinėn, centre ir puslapio plotis (Justify – vienu metu kairėn ir dešinėn, didinant atstumą tarp žodžių). Savaime suprantama, kad Justify reikšmė turėtų būti naudojama elementams, kuriuose yra bent kelios teksto eilutės, kitaip nebus matomo efekto.

Pavyzdžiui, aš pateisinau ankstesnę pastraipą (matote, kad jos kraštinės yra lygios tiek kairėje, tiek dešinėje), naudodamas:

Teksto lygiavimas: lygiuoti;

Pagal numatytuosius nustatymus paliekamas horizontalus teksto lygiavimas, t.y. Nereikia specialiai rašyti text-align:left, nebent, žinoma, anksčiau nurodėte kitokį lygiavimą. Beje, šią pastraipą lygiavau į centrą (centrą), vėlgi dėl aiškaus pavyzdžio, bet čia, manau, viskas aišku.

Kita CSS taisyklė teksto įtrauka leidžia nurodyti raudoną eilutę, pavyzdžiui, tekstui pastraipos žymoje P. Raudonos linijos įtrauką galima nurodyti nurodant reikšmę (su pliuso arba minuso ženklu, naudojant ) arba naudojant procentus:

Iš ko skaičiuojami procentai teksto įtraukoje? Nuo tekstui skirtos srities pločio. Tie. CSS taisyklė text-indent:50% nustatys raudoną liniją, lygią pusei šios eilutės ilgio. Na, ši pastraipa yra tokios taisyklės pavyzdys.

Arba galite, pavyzdžiui, nustatyti neigiamą raudonos linijos reikšmę teksto įtraukoje ir tada gausime maždaug tai, ką matote šioje pastraipoje. Norėdami pasiekti šį rezultatą, parašiau šią P pastraipos žymos CSS taisyklę:

Teksto įtrauka:-1em;

Na, įprastas teksto įtraukos naudojimas (norint nustatyti standartinę raudoną liniją) gali atrodyti taip: text-indent:40px; (beje, taikoma šiai pastraipai). Ši taisyklė, kaip ir anksčiau aptartas teksto lygiavimas, taikoma tik bloko elementams, t.y. kur gali būti kelios eilutės (pastraipos, antraštės ir kt.).

Gerai, dabar pereikime prie tekstas-dekoravimas(dizainas naudojant horizontalią liniją), kuri jau taikoma visiems HTML elementams (ir įterptiesiems, ir blokiniams).

Jis gali turėti tik keturias reikšmes:

Tie. gali būti naudojamas naudojant teksto dekoravimą: perbraukti, perbraukti arba pabraukti, arba nenaudoti nieko (nėra). Pavyzdžiui, kai kurie HTML elementai pagal numatytuosius nustatymus jau turi horizontalios linijos dizainą (pagal numatytuosius nustatymus jie yra pabraukti).

Todėl dar ką nors paryškinti (išskyrus hipersaitus) nėra gerai, nes vartotojai savo pasąmonėje įrašo, kad pabraukus (o taip pat paryškinus spalva), tai reiškia, kad gali paspausti. Tačiau paryškindami įprastą tekstą, jūs suklaidinate vartotoją ir vėliau nusiviliate savo šaltiniu (jis manė, kad taip, bet paaiškėjo, kad...).

Css teksto dekoravimo taisyklės naudojimo niuansas yra tas, kad galite įvesti tris (arba dvi) bet kurio HTML elemento reikšmes vienu metu (nepraleidžiant nė vieno), todėl gausite pabrauktas-pabrauktas-perbrauktas teksto fragmentas(skamba ir atrodo šauniai, ar ne?):

Teksto dekoravimas: pabraukite perbraukimo liniją;

Teksto dekoravimo reikšmes (jei norite naudoti kelias iš karto) reikia parašyti per erdvės veikėją.

Vertikalus lygiavimas – vertikalus lygiavimas

Toliau turime vertikalų išlygiavimą - vertikalus lygiavimas. Beveik visiems HTML kodo elementams tai reiškia, kad įterptieji elementai turi būti suderinti su tekstu, palyginti su jų pradine linija. Tiesa, tai reiškia šiek tiek kitaip – ​​visas turinys, esantis šiose ląstelėse, bus išlygiuotas vertikaliai.

CSS vertikalaus lygiavimo taisyklei galite naudoti šias reikšmes:

Pagal numatytuosius nustatymus linijos yra sulygiuotos. Žiūrėk, aš kreipiausi padidinti šios teksto dalies šrifto dydį ir šie du fragmentai sulygiuoti su pagrindine (apačia) linija. O vertikalus lygiavimas naudojant vertikalųjį lygiavimą yra skirtas pakeisti linijų išlygiavimo būdą.

Pavyzdžiui, jei aš parašysiu vertikaliai align:baseline tai pačiai padidintai teksto daliai, jokių pakeitimų nebus, nes pagal numatytuosius nustatymus šiai CSS taisyklei naudojama pagrindinė reikšmė.

Beje, kaip reikšmes galite naudoti ir skaičius, o užrašas vertical-align:0 reikš tą patį, ką vertikalus lygiavimas:baseline, t.y. bazinė linija yra lygi nuliui. Todėl, jei norime nurodyti bet kokį vertikalaus išlygiavimo poslinkį, šis poslinkis bus nurodytas bazinės linijos (arba nulio) atžvilgiu.

Galite parašyti taip:

vertikalus lygiavimas: 10 pikselių;

Ir mes gausime perkelti fragmentą didesniu šriftu aukštyn 10 pikselių, palyginti su bazine linija. Jei rašome neigiamą reikšmę:

vertikalus lygiavimas: -10 pikselių;

Tada gauname perkelti fragmentą žemyn palyginti su bazine linija. Iš pavyzdžių matyti, kad dėl poslinkio eilutės aukštis padidėjo taip, kad tekstas joje tilptų nesusidurdamas su gretima eilute. Poslinkis taip pat gali būti nurodytas Em ir Ex, ir kaip procentas, kuris bus skaičiuojamas nuo šio elemento linijos aukščio (atminkite, kad paskutiniame straipsnyje sužinojome, kaip jį nustatyti naudojant ).

Norėdami vertikaliai sulygiuoti lentelės langelių turinį, vertikalus lygiavimas turėtų naudoti reikšmes viršuje ir apačioje, kad atitinkamai sulygiuotų turinį su langelio viršuje ir apačioje (gerai, lentelės langelio vidurys naudojamas kaip numatytoji vertikalaus lygiavimo reikšmė ).

O šrifto elementams galite naudoti tekstą viršuje, teksto apačioje, viduryje. Panaudokime jį kaip pavyzdį ši teksto dalis prasmė:

vertikalus lygiavimas: vidurys;

Koks buvo rezultatas? Vidurinė padidinto fragmento eilutė lygiuojama su įprasto teksto bazine linija, t.y. mes gavome vertikalų išlygiavimą su vidurio linija. Teksto viršuje ir apačioje viskas bus taip pat. Tai yra tekstas viršuje, o šis yra tekstas apačioje.

Css ypatybių vertical-align sub ir super reikšmės atitinka sub- ir super-indeksą, kuris įvyko gryname HTML (prieš naudojant CSS ypatybes vizualiniam dizainui).

Teksto transformavimas, tarpai tarp raidžių, tarpai tarp žodžių ir tarpai

None naudojamas pagal nutylėjimą ir reiškia, kad simboliai tekste niekaip nesikeis – kaip parašyta HTML, taip jie bus rodomi. Teksto transformavimo didžiųjų raidžių reikšmė pavers visas fragmento raides didžiosiomis raidėmis ( pavyzdys parodytas šiame sakinyje, kur buvo naudojama taisyklė text-transform:uppercase, o raidės iš pradžių buvo rašomos mažosiomis).

Css teksto transformavimo taisyklės mažųjų raidžių reikšmė leis paversti visus fragmento simbolius mažosiomis raidėmis, o didžiosios raidės visos pirmosios žodžio raidės bus didžiosios ( pavyzdys šiame sakinyje- tekstas transformuoti: rašyti didžiosiomis raidėmis). Tie. Naudodami teksto transformaciją galite daryti viską, ko norite, naudodami paprastą tekstą ir lengvai viską grąžinti atgal.

Todėl, jei, pavyzdžiui, turite užduotį, kad visos antraštės būtų parašytos tik didžiosiomis raidėmis, rašykite jas HTML, kaip įprasta, ir paverskite didžiosiomis raidėmis CSS naudodami text-transform:uppercase. Tada, jei nuspręsite ką nors pakeisti, tereikia šiek tiek pakeisti stilius, o ne visų 100 500 antraštių savo svetainėje turinį.

Pagal numatytuosius nustatymus ir tarpai tarp raidžių, ir tarp žodžių yra nustatytas į Normalus arba tai yra tas pats, kas nulis (t. y. atstumas tarp simbolių ir žodžių niekaip nesikeičia). Atstumo pokyčio dydis šiose taisyklėse gali būti nurodytas tik pikseliais, Em arba Ex, bet ne procentais.

Tačiau galite naudoti ir teigiamas (simbolių ar žodžių retumas), ir neigiamas reikšmes (suartinti simbolius ar žodžius). Pavyzdžiui, galite „Štai kaip išretinti šios frazės simbolius“ naudojant šią Css taisyklę:

Tarpai tarp raidžių: 0,4 em;

Arba galite „Štai kaip suartinti šios frazės simbolius“ naudojant:

Tarpai tarp raidžių: -1px;

Tą patį galima pasakyti ir apie žodžių tarpus, tačiau vienintelis skirtumas yra tas, kad atstumas tarp žodžių pasikeis, kaip, pavyzdžiui, šioje frazėje, naudojant šią CSS konstrukciją:

Tarpai tarp žodžių: 4em;

Taip pat galite naudoti neigiamas reikšmes tarp žodžių, kad sumažintumėte atstumą tarp žodžių.

Na, o paskutinė šiandieninė CSS taisyklė, leidžianti tam tikru būdu formatuoti tekstą HTML kode, yra ši balta vieta. Jis atsakingas už tarpo simbolių rodymą tinklalapyje, kuris atsirado rašant HTML kodą.

Kaip prisimenate iš straipsnio apie tai, naršyklė, analizuodama kodą, sujungia visus tarpus, eilučių lūžius ir tabuliavimo ženklus į vieną tarpą, o tinklalapio eilutes pertraukia tiksliai pagal kode pasitaikančius tarpo simbolius.

Taigi, tarpas gali turėti vieną iš trijų reikšmių:

Akivaizdu, kad numatytoji reikšmė yra Normal ir šiuo atveju viskas rodoma taip, kaip aprašiau aukščiau. Bet naudojant Pre reikšmę gauname visišką analogiją su vartojimu, t.y. Tinklalapyje tekstas bus rodomas su visais papildomais tarpais, kurie buvo rašant kodą, ir naršyklė nebegalės atlikti pervedimų naudojant juos.

Na, kokia prasmė? nowrap Tai paprasčiausiai neleis naršyklei apvynioti jokių tarpų simbolių, kuriuos ji randa fragmente, naudodama CSS taisyklę white-space:nowrap. Galite patys pabandyti, kaip visa tai veikia, sukurdami paprastą HTML failą ir įtraukdami bet kokį teksto fragmentą į tokias žymas:

Sėkmės tau! Greitai pasimatysime tinklaraščio svetainės puslapiuose

Jums gali būti įdomu

Sąrašo stilius (tipas, vaizdas, padėtis) – Css taisyklės, skirtos tinkinti sąrašų išvaizdą HTML kode
Padėties nustatymas naudojant Z indeksą ir CSS žymeklio taisyklę, kad pakeistumėte pelės žymeklį
Padding, Margin and Border – nustatykite vidinį ir išorinį užpildymą CSS, taip pat visų pusių kraštines (viršuje, apačioje, kairėje, dešinėje)
Kam skirtas CSS, kaip prijungti pakopinius stiliaus lapus prie HTML dokumento ir pagrindinė šios kalbos sintaksė
Float and clear CSS – blokų išdėstymo įrankiai
CSS - kas tai yra, kaip jungiasi pakopiniai stiliaus lapai HTML kodas naudojant stilių ir nuorodą
Matmenų vienetai (pikseliai, Em ir Ex) ir paveldėjimo taisyklės CSS
Žymės, klasės, ID ir universalūs parinkikliai, taip pat atributų parinkikliai šiuolaikinėje CSS
Padėtis (absoliuti, santykinė ir fiksuota) – padėties nustatymo metodai HTML elementai CSS (taisyklės kairėje, dešinėje, viršuje ir apačioje)
Fonas CSS (spalva, padėtis, vaizdas, pakartojimas, priedas) – viskas, kad būtų galima nustatyti HTML elementų fono spalvą arba fono vaizdą