Moduuli CSS-teksti kuvailee CSS-toiminnot, jotka ohjaavat lähdetekstin kääntämistä muotoilluksi tekstiksi ja rivien rivitystä. Useat CSS-ominaisuudet mahdollistavat kirjainten muuntamisen, välilyöntien käsittelyn, tekstin ja rivien rivityssäännöt, tasauksen, välin ja sisennyksen.
Tekstin perusyksikkö on symboli. Koska kirjoitusjärjestelmät eivät kuitenkaan aina ole yhtä yksinkertaisia kuin englannin perusaakkoset, se, mikä symboli todellisuudessa on, riippuu kontekstista, jossa termiä käytetään. Esimerkiksi korealaisessa kirjoitusjärjestelmässä jokaista tavun neliön muotoista esitystä (esim. 한 = han) voidaan pitää merkkinä. Neliömerkki koostuu kuitenkin useista kirjaimista, joista jokainen edustaa foneemia (esimerkiksi ㅎ = h, ㅏ = a, ㄴ = n), ja jokaista näistä voidaan pitää myös symbolina.
1. Tekstin muuntaminen: tekstin muunnosominaisuus
Tekstin muunnos -ominaisuus tyylit tekstiä. Se ei vaikuta taustalla olevaan sisältöön, eikä sen pitäisi vaikuttaa pelkän tekstin kopiointi-liittämistoiminnon sisältöön.
Omaisuus on perinnöllinen.
Syntaksi
Tekstin muunnos: ei mitään; tekstin muunnos: isoilla kirjaimilla; tekstin muunnos: isot kirjaimet; tekstin muunnos: pienet kirjaimet; tekstimuunnos: perii; tekstin muunnos: ensimmäinen;
2. Välilyöntien ja rivinvaihtojen käsittely: välilyöntiominaisuus
White-space-ominaisuus käsittelee sanojen välisiä välilyöntejä ja rivinvaihtoja elementin sisällä.
Omaisuus on perinnöllinen.
tyhjä tila | |
---|---|
Arvot: | |
normaali | Oletusarvo. Sanojen väliin lisätään vain yksi välilyönti. Teksti kääritään vain tarvittaessa. |
nowrap | Estää rivinvaihdot paitsi silloin, kun sitä käytetään . |
pre | Tekstin välilyöntejä ei huomioida, selain näyttää ylimääräisiä välilyöntejä ja rivinvaihtoja. |
esikääre | Säilyttää välilyönnit tekstissä lisäämällä rivinvaihtoja tarvittaessa. |
esilinja | Poistaa ylimääräiset välilyönnit, ellei . |
taukotilat | Käyttäytyminen on identtinen esirivityksen kanssa, paitsi että: mikä tahansa sarja ei-poistettavia välilyöntejä vie aina tilaa, myös rivin lopussa; Rivinvaihdon mahdollisuus on olemassa jokaisen ei-irrotettavan välilyönnin jälkeen, myös välilyöntien välissä. |
ensimmäinen | |
periä |
Syntaksi
Tyhjiö: normaali; välilyönti: nowrap; välilyönti: pre; tyhjä tila: pre-wrap; välilyönti: pre-line; välilyönti: taukovälit; välilyönti: perii; välilyönti: alkukirjain;
3. Välilehden asetukset: välilehden koko -ominaisuus
Tab-size-ominaisuutta käytetään muuttamaan SARKAIN-näppäimen tuottaman sisennyksen määrää. Ominaisuusarvot jätetään huomioimatta, kun välilyöntiominaisuus on asetettu johonkin kolmesta arvosta pre-line , normaali tai nowrap .
Toimii vain elementeille
Omaisuus on perinnöllinen.
Syntaksi
Välilehden koko: 0; välilehden koko: 10px; välilehden koko: periy; välilehden koko: ensimmäinen;
4. Rivinvaihdot ja sanarajat
Kun rivitason sisältö jaetaan riveihin, se jaetaan lineaarisiin lohkoihin. Tätä katkosta kutsutaan rivinvaihdoksi.
Kun rivi katkeaa nimenomaisten rivinvaihtosäätimien, kuten rivinvaihdon tai tagin, vuoksi
, lohkon alku tai loppu on pakotettu rivinvaihto.
Jos rivi katkeaa sisällön rivityksen takia, jolloin selain luo tarpeettomia rivinvaihtoja sisällön sovittamiseksi, se on pehmeä rivitys.
4.1. Kirjeiden rikkominen: sananrikkoominaisuus
Word-break-ominaisuus määrittää pehmeän tavutusmahdollisuuden kirjainten välillä, ts. Milloin tekstirivien katkominen on hyväksyttävää? Erityisesti se ohjaa, onko vierekkäisten typografisten kirjainyksiköiden ja/tai numeroiden välillä pehmeä tavutus. Tämä ei vaikuta tilojen luomien pehmeiden siirtomahdollisuuksien sääntöihin.
Omaisuus on perinnöllinen.
Syntaksi
Sananvaihto: normaali; sana-break: break-all; sananvaihto: pidä kaikki; sananvaihto: peri; sananvaihto: alkukirjain;
4.2. Rivinvaihto: rivinvaihto
Rivinvaihto-ominaisuus määrittää elementissä käytettävät rivinvaihtosäännöt, erityisesti sen, kuinka rivinvaihto on vuorovaikutuksessa välimerkkien ja symbolien kanssa.
Omaisuus on perinnöllinen.
rivinvaihto | |
---|---|
Arvot: | |
auto | Selain määrittää käytettävät rivinvaihtorajoitukset, jotka voivat vaihdella rivin pituuden mukaan. Käytä esimerkiksi vähemmän rajoittavia rivinvaihtosääntöjä lyhyille riveille. Oletusarvo. |
löysä | Katkaisee tekstin vähiten rajoittavilla rivinvaihtosäännöillä. Käytetään tyypillisesti lyhyille riveille, kuten sanomalehdissä. |
normaali | Katkaisee tekstin käyttämällä yleisimpiä rivinvaihtosääntöjä. |
tiukka | Katkaisee tekstin käyttämällä tiukkoja rivinvaihtosääntöjä. |
ensimmäinen | Asettaa ominaisuuden arvon oletusarvoon. |
periä | Perii ominaisuuden arvon emoelementiltä. |
Syntaksi
Rivinvaihto: automaattinen; rivinvaihto: löysä; rivinvaihto: normaali; rivinvaihto: tiukka; rivinvaihto: perii; rivinvaihto: alku;
4.3. Tavutus: tavutusominaisuus
Tavuviivat-ominaisuus määrittää, saavatko tavuviivat luoda pehmeän tavutuksen ominaisuuksia tekstiriville.
Tavutus on kontrolloitua sanojen katkosta, jossa niiden ei yleensä sallita katketa kappaleiden sujuvuuden parantamiseksi. Tyypillisesti sanojen jakaminen tapahtuu tavu- tai morfeemirajoja pitkin ja jaon visuaalisella osoituksella (yleensä lisäämällä väliviiva, ‐). Joissakin tapauksissa tavutus voi myös muuttaa sanan oikeinkirjoitusta. Joka tapauksessa rivitys on vain renderöintitehoste: sen ei pitäisi vaikuttaa asiakirjan sisältöön, tekstin valintaan tai hakuun.
CSS-tekstitaso 3 ei määrittele tarkkoja sanan tavutussääntöjä, joten on suositeltavaa valita kielelle sopivat tavutuskohdat.
Omaisuus on perinnöllinen.
väliviivoja | |
---|---|
Arvot: | |
ei yhtään | Sanat eivät tavuta, vaikka sanan merkit määrittelevätkin tavutusominaisuudet. |
manuaalinen | Sanat tavutetaan vain niissä paikoissa, joissa sanan sisällä on symboleja, jotka osoittavat selvästi sanan tavutuksen mahdollisuuden (erikoismerkki -). Oletusarvo. |
auto | Sanat voidaan jakaa tavutusmahdollisuuksiin, jotka määritetään automaattisesti kieleen sopivan tavutusresurssin mukaan ehdollisen tavutusviivan eksplisiittisesti osoittamien lisäksi. Sinun on asetettava sisältösi kieli (esimerkiksi käyttämällä HTML lang -attribuuttia tai HTTP Content-Language -otsikkoa), jotta saat oikean automaattisen sanan rivityksen. |
ensimmäinen | Asettaa ominaisuuden arvon oletusarvoon. |
periä | Perii ominaisuuden arvon emoelementiltä. |
Syntaksi
Tavuviivat: ei mitään; yhdysviivat: käsikirja; yhdysviivat: auto; yhdysviivat: periy; väliviivat: alku;
4.4 Wrapper block overflow: overflow-wrap/word-wrap-ominaisuus
Ylivuoto-rivi-ominaisuus (tai sen vanhentunut nimi word-wrap) määrittää, voidaanko katkeamaton rivi katkaista ratkaisemattomista kohdista, jotta rivilohko ei vuotaisi yli. Toimii, kun välilyöntiominaisuus sallii rivityksen.
Omaisuus on perinnöllinen.
overflow-wrap, word-wrap | |
---|---|
Arvot: | |
normaali | Katkaisemattomat viivat voivat katketa vain sallituissa taittopisteissä. Oletusarvo. |
taukosana | |
missä tahansa | Katkeamaton merkkijono voidaan katkaista mielivaltaisesta pisteestä, jos rivillä ei ole muita hyväksyttäviä katkaisukohtia. Vaikuttaa vain visuaaliseen näyttöön vaikuttamatta alkuperäiseen tekstiin. Rivinvaihtokohtaan ei lisätä väliviivaa. Kaikkialla olevat Soft-wrap-ominaisuudet otetaan huomioon laskettaessa omia vähimmäissisältömittojasi. |
ensimmäinen | Asettaa ominaisuuden arvon oletusarvoon. |
periä | Perii ominaisuuden arvon emoelementiltä. |
Syntaksi
Ylivuotokääre: normaali; overflow-wrap: break-word; overflow-wrap: missä tahansa; ylivuoto-kääre: perii; overflow-wrap: ensimmäinen;
5. Viivojen tasaus ja tasaus
Rivien tasaus ja tasaus ohjaavat, kuinka rivin sisäinen sisältö jakautuu rivilohkossa.
5.1. Lyhyesti tekstin tasaamiseen: tekstin tasausominaisuus
Tekstilohko on kokoelma lineaarisia lohkoja. Text-align-ominaisuus määrittää text-align-all- ja text-align-last-ominaisuudet ja kuvaa, kuinka kunkin rivilaatikon rivitason laatikot tasataan suhteessa rivilaatikon alku- ja loppusivuihin. Muut arvot kuin tasaus-kaikki tai täsmäyttävä ylätaso määritetään tekstin tasaa-kaikki -asetukselle ja palautetaan automaattiseksi tekstin tasaus-viimeinen -kohdassa.
Omaisuus on perinnöllinen.
tekstin tasaus | |
---|---|
Arvot: | |
aloita | Rivitason sisältö on tasattu rivilaatikon etureunaan. Oletusarvo. |
loppu | Rivitason sisältö on tasattu rivilaatikon takareunaan. |
vasemmalle | Rivitason sisältö on tasattu rivilohkorivin vasempaan reunaan. Pystysuorassa kirjoitusjärjestelmässä tämä on fyysinen ylä- tai alaosa tekstin suunnasta riippuen. |
oikein | Rivitason sisältö on tasattu rivilohkorivin oikeaan reunaan. Pystysuorassa kirjoitusjärjestelmässä tämä on fyysinen ylä- tai alaosa tekstin suunnasta riippuen. |
keskusta | Rivitason sisältö on keskitetty rivilaatikon sisään. |
perustella | Teksti tasataan rivilaatikon leveyden mukaan niin, että se täyttää rivin marginaalin tarkasti painaen pääelementin vasenta ja oikeaa reunaa. Ellei teksti-align-last -kohdassa toisin mainita, viimeinen rivi ennen pakotettua taukoa tai lohkon loppua tasataan alkuun. Sanojen ja kirjainten välit jaetaan siten, että kaikki rivit ovat yhtä pitkiä. Eri selaimet voivat lisätä sekä sanojen että kirjainten välistä tilaa. |
perustella kaikki | Asettaa text-align-all ja text-align-last tasaamaan ja tasaa myös viimeisen rivin. |
otteluvanhempi | Arvo toimii samalla tavalla kuin inherit, paitsi että peritty aloitus- tai loppuarvo tulkitaan suhteessa suunta-arvoon (tai alkuperäiseen sisältävään lohkoon, jos yläosaa ei ole) ja tuloksena on vasen tai oikea laskettu arvo. |
periä | Perii ominaisuuden arvon emoelementiltä. |
Syntaksi
Tekstin tasaus: aloitus; tekstin tasaus: loppu; tekstin tasaus: vasen; tekstin tasaus: oikea; tekstin tasaus: keskellä; tekstin tasaus: tasaa; text-align: tasaa kaikki; text-align: match-parent; tekstin tasaus: periy;
5.2. Oletustekstin tasaus: text-align-all -ominaisuus
Text-align-all -ominaisuus on lyhennetty versio tekstin tasausominaisuudesta, joka määrittää kaikkien lohkosäilön sisältörivien tasauksen, paitsi viimeiset rivit, jotka ohitetaan text-align-last . Hyväksyy arvot alku , loppu , vasen , oikea , keskikohta , tasaus ja täsmäys .
Omaisuus on perinnöllinen.
Syntaksi
Text-align-all: aloita; text-align-all: end; text-align-all: vasen; text-align-all: oikea; text-align-all: center; text-align-all: tasaa; text-align-all: match-parent; text-align-all: periy;
5.3. Viimeisen rivin tasaus: text-align-last-ominaisuus
Text-align-last -ominaisuus kuvaa, kuinka lohkon tai rivin viimeinen rivi tasataan juuri ennen pakotettua rivinvaihtoa.
Kun asetukseksi on asetettu automaattinen , vastaavan rivin sisältö tasataan teksti-tasaa-all -asetuksella, ellei text-align-all -asetuksena ole tasausta, jolloin se tasataan lohkon alkuun. Kaikki muut arvot tulkitaan kuten on kuvattu tekstin tasauksessa.
Hyväksyy arvot auto , start , end , left , right , center , justify ja match-parent .
Omaisuus on perinnöllinen.
Syntaksi
Text-align-last: auto; text-align-last: aloitus; text-align-last: end; text-align-last: left; text-align-last: oikea; text-align-last: center; text-align-last: tasaa; text-align-last: match-parent;
6. Aukot
CSS:n avulla voit hallita sanojen ja typografisten merkkien väliä käyttämällä sanaväli- ja kirjainväliominaisuuksia.
6.1. Sanojen väliset välilyönnit: sanaväliominaisuus
Sanaväli-ominaisuus määrittää lisävälit sanojen välillä.
Asettaa sanojen välit. Positiivisia ja negatiivisia arvoja voidaan käyttää. Negatiivisella merkityksellä sanat voivat mennä päällekkäin.
Tasatun tekstin tapauksessa tekstin tasausominaisuuden arvo vaikuttaa sanavälin arvoon.
Omaisuus on perinnöllinen.
Syntaksi
Sanavälit: normaali; sanaväli: 1px; sanaväli: 0,2 em; sanaväli: 50 %; sanavälit: periy; sanavälit: alku;
6.2. Seuranta: kirjainväliominaisuus
Kirjainväli-ominaisuus määrittää ylimääräisen tilan eli seurannan vierekkäisten typografisten merkkien välillä. Kirjainväli on täydennys ja sanaväli. Riippuen voimassa olevista tasaussäännöistä, käyttäjäagentit voivat edelleen lisätä tai pienentää typografisten merkkiyksiköiden väliä tekstin tasaamiseksi.
Omaisuus on perinnöllinen.
Syntaksi
Kirjainvälit: normaali; kirjainväli: 0,1 em; kirjainväli: 2px; kirjainvälit: periy; kirjainvälit: alkukirjain;
7. Ensimmäisen rivin sisennys: tekstin sisennysominaisuus
Tekstin sisennys -ominaisuus määrittää sisennyksen, jota käytetään lohkon sisäisille riveille. Täytettä käsitellään viivalaatikon aloitusreunaan kiinnitettynä marginaalina.
Jos lohkoelementin ensimmäisellä rivillä on kuva, se liikkuu muun tekstin mukana.
Omaisuus on perinnöllinen.
Syntaksi
Tekstin sisennys: 5 mm; tekstin sisennys: 20px; tekstin sisennys: 5 %; tekstin sisennys: 2em jokainen rivi; tekstin sisennys: 2em roikkuu; tekstin sisennys: inherit; tekstin sisennys: ensimmäinen;
Hei rakkaat blogisivuston lukijat. Tänään jatkamme opiskelua ja seuraavaksi meillä on ominaisuudet text-decoration, vertical-align, text-align, text-indent ja monet muut, jotka auttavat suunnittelemaan tekstien ulkoasua HTML-koodissa.
Edellisessä artikkelissa tarkastelimme ominaisuuksia, joiden tarkoituksena on mukauttaa kirjasinten ulkonäköä, kun .
No, jo aiemmin tarkastelimme kaikkia tyyppejä yksityiskohtaisesti, opimme, kuinka ne voidaan ryhmitellä ja mitkä prioriteetit selain asettaa niitä tulkitseessaan. Totta, kaikki tämä oli jaettu useisiin artikkeleihin, joten sekaantumisen välttämiseksi suosittelen, että tutkit materiaalit annetussa järjestyksessä.
Tekstin koristelu, tekstin tasaus, tekstin sisennys CSS:ssä
Kuinka työskennellä tekstin kanssa Css:ssä? Olisi loogista olettaa, että tätä tarkoitusta varten on olemassa erityisesti suunniteltuja sääntöjä. Aloitetaan tekstin tasaamisesta, joka itse asiassa korvaa align-attribuutin (sitä käytettiin tasoittamaan sisältöä, kuten P-kappaleita tai otsikoita).
Sillä on vain neljä mahdollista merkitystä:
Merkitys pysyy samana kuin ennenkin. Tekstin tasaus- tämä on viivojen vaakasuora kohdistus. Tämä sääntö koskee yksinomaan lohkoelementtejä (kappaleita, otsikoita jne.), ts. ne tunnisteet, joissa voi esiintyä useita rivejä. Koska Koska tekstin sisäisillä elementeillä voi olla vain yksi rivi, ei ole erityistä järkeä käyttää tekstin tasausta niissä.
On selvää, että tämän säännön arvot tarkoittavat tasausta, vastaavasti: vasemmalle (vasemmalle), oikealle (oikealle), keskelle (keskelle) ja sivun leveyteen (Justify - samanaikaisesti vasemmalle ja oikealle lisäämällä sanojen välistä etäisyyttä) . On sanomattakin selvää, että Justify-arvoa tulisi käyttää elementeissä, joissa on vähintään useita tekstirivejä, muuten ei näy näkyvää vaikutusta.
Esimerkiksi tasasin edellisen kappaleen (näet, että siinä on sileät reunat sekä vasemmalla että oikealla) käyttämällä:
Text-align:justify;
Oletuksena tekstin vaakasuora tasaus jätetään, ts. Sinun ei tarvitse kirjoittaa erikseen text-align:left, ellet tietenkään ole aiemmin määrittänyt toista tasausta. Muuten, kohdistain tämän kappaleen keskelle (keskelle), jälleen selkeää esimerkkiä varten, mutta tässä mielestäni kaikki on selvää.
Seuraava Css-sääntö tekstin sisennys voit määrittää punaisen viivan esimerkiksi tekstille kappaletunnisteessa P. Punaisen viivan sisennys voidaan määrittää määrittämällä arvo (joko plus- tai miinusmerkillä, käyttämällä ) tai käyttämällä prosentteja:
Mistä prosenttiosuudet lasketaan tekstin luetelmakohdassa? Tekstille varatun alueen leveydeltä. Ne. CSS-sääntö text-indent:50% asettaa punaisen viivan, joka vastaa puolta tämän rivin pituudesta. No, tämä kappale toimii esimerkkinä tällaisesta säännöstä.
Tai voit esimerkiksi asettaa negatiivisen arvon punaiselle viivalle tekstin sisennyksessä, jolloin saamme suunnilleen sen, mitä näet tässä kappaleessa. Tämän tuloksen saavuttamiseksi kirjoitin seuraavan CSS-säännön P-kappaletunnisteelle:
Tekstin sisennys: -1em;
No, tyypillinen tekstin sisennyksen käyttö (normaalin punaisen viivan asettamiseksi) saattaa näyttää tältä: text-indent:40px; (koskee muuten tätä kappaletta). Tämä sääntö, aivan kuten aiemmin käsitelty tekstin tasaus, koskee vain lohkoelementtejä, eli jossa voi esiintyä useita rivejä (kappaleita, otsikoita jne.).
Okei, siirrytään nyt asiaan teksti-sisustus(suunnittelu vaakaviivalla), joka on jo käytössä kaikissa HTML-elementeissä (sekä rivissä että lohkossa).
Sillä voi olla vain neljä merkitystä:
Ne. voidaan käyttää tekstinkoristeella: yliviivaus, läpiviivaus tai alleviivaus, tai ei saa käyttää mitään (ei mitään). Joillakin HTML-elementeillä on jo oletuksena esimerkiksi vaakasuora viivarakenne (oletusarvoisesti ne on alleviivattu).
Siksi jonkin muun korostaminen alleviivauksella (paitsi hyperlinkkejä) ei ole hyvä, koska käyttäjät ovat kirjoittaneet alitajuntaan, että kun se on alleviivattu (ja myös korostettu värillä), se tarkoittaa, että he voivat klikata sitä. Mutta korostamalla tavallista tekstiä alleviivauksella johdat käyttäjää harhaan ja tulet myöhemmin pettymään resurssiisi (hän luuli niin, mutta kävi ilmi...).
Css-tekstin koristelusäännön käytön vivahteena on, että voit syöttää kolme (tai kaksi) arvoa kerralla mille tahansa HTML-elementille (ei mitään pois), jolloin saat alleviivattu-alleviivattu-yliviivattu tekstikatkelma(kuulostaa ja näyttää siistiltä, eikö?):
Tekstin koristelu: alleviivaus yliviivaus;
Tekstin koristeluarvot (jos haluat käyttää useita niitä kerralla) on kirjoitettava välilyönnin kautta.
Vertical-align - pystysuuntainen kohdistus
Seuraavaksi meillä on pystysuora kohdistus - pystysuora kohdistus. Lähes kaikkien HTML-koodin elementtien kohdalla se tarkoittaa rivien elementtien kohdistamista tekstiin suhteessa niiden perusviivaan. Totta, tämä tarkoittaa hieman erilaista - kaikki näissä soluissa oleva sisältö tasataan pystysuunnassa.
CSS-pystytasaussäännössä voit käyttää seuraavia arvoja:
Viivat ovat oletusarvoisesti tasattuja. Katso, hain suurenna tämän tekstin kirjasinkokoa ja nämä kaksi fragmenttia on kohdistettu pohjaviivaan (alaviivaan). Ja pystysuora kohdistus pystytasauksella on juuri tarkoitettu muuttamaan tapaa, jolla viivat kohdistuvat.
Jos esimerkiksi kirjoitan vertikaal-align:baseline samalle suurennetulle tekstille, muutoksia ei tapahdu, koska perusarvoa käytetään oletusarvoisesti tälle CSS-säännölle.
Muuten, voit käyttää sen arvoina myös numeroita, ja merkintä vertical-align:0 tarkoittaa samaa kuin vertical-align:baseline, ts. perusviiva vastaa nollaa. Siksi, jos haluamme osoittaa minkä tahansa siirtymän pystysuuntaisessa kohdistuksessa, tämä siirto määritetään suhteessa perusviivaan (tai nollaan).
Voit kirjoittaa sen näin:
pystysuuntaus: 10px;
Ja me saamme siirrä fragmenttia suuremmalla fontilla ylöspäin 10 pikseliä suhteessa perusviivaan. Jos kirjoitamme negatiivisen arvon:
Tasaus pystysuoraan: -10px;
Sitten saamme siirrä fragmentti alas suhteessa perusviivaan. Esimerkeistä käy selvästi ilmi, että siirtymän johdosta rivin korkeus nousi niin, että teksti mahtuu siihen törmäämättä viereiseen riviin. Siirto voidaan määrittää myös Em:ssä ja Ex:ssä sekä prosenttiosuutena, joka lasketaan tämän elementin rivin korkeudesta (muista, että viime artikkelissa opimme asettamaan sen käyttämällä ).
Tasataksesi taulukon solujen sisällön pystysuoraan, pystytasauksen tulee käyttää ylä- ja alareunaa kohdistamaan sisältö vastaavasti solun ylä- ja alaosaan (no, taulukon solun keskikohtaa käytetään oletusarvoisena pystytasausarvona ).
Ja fonttielementeissä voit käyttää tekstiä yläreunassa, tekstin alaosassa, keskellä. Käytetään sitä esimerkkinä tämä teksti merkitys:
vertikaalinen tasaus:keski;
Mikä oli tulos? Suurennetun fragmentin keskirivi on linjassa tavallisen tekstin perusviivan kanssa, ts. saimme pystysuoran kohdistuksen keskiviivaan. Tekstin ylä- ja alaosassa kaikki on sama. Tämä on teksti-yläosa ja tämä on teksti-ala.
Css-ominaisuuden vertical-align sub- ja super-arvot vastaavat ali- ja super-indeksejä, jotka tapahtuivat puhtaassa HTML:ssä (ennen CSS-ominaisuuksien käyttämistä visuaaliseen suunnitteluun).
Tekstin muunnos, kirjainvälit, sanavälit ja välilyönnit
None on oletuksena käytössä ja tarkoittaa, että tekstin merkit eivät muutu millään tavalla - HTML-muodossa kirjoitettuna ne näytetään näin. Isot kirjaimet tekstimuunnokselle muuttaa kaikki fragmentin kirjaimet isoiksi kirjaimille ( esimerkki on tässä lauseessa, jossa käytettiin tekstimuunnos:isot kirjaimet -sääntöä ja kirjaimet kirjoitettiin alun perin pienillä kirjaimilla).
Pienet kirjaimet Css-tekstinmuunnossäännölle sallivat sinun muuntaa kaikki osan merkit pieniksi ja isot kirjaimet saavat kaikki sanan ensimmäiset kirjaimet isoiksi ( esimerkki tässä lauseessa- text-transform:capitalize). Ne. tekstimuunnoksen avulla voit tehdä mitä tahansa pelkällä tekstillä ja palauttaa sen sitten helposti takaisin.
Siksi, jos sinulla on esimerkiksi tehtävänä kirjoittaa kaikki otsikot vain isoilla kirjaimilla, kirjoita ne HTML-muodossa tavalliseen tapaan ja tee niistä isot kirjaimet CSS:ssä käyttämällä text-transform:uppercase. Sitten, jos päätät muuttaa jotain takaisin, sinun tarvitsee tehdä vain pieni muutos tyyleihin, ei sivustosi kaikkien 100 500 otsikon sisältöön.
Oletusarvoisesti sekä kirjainvälit että sanavälit on asetettu Normaaliksi tai tämä on sama kuin nolla (eli merkkien ja sanojen välinen etäisyys ei muutu millään tavalla). Etäisyyden muutoksen suuruus näissä säännöissä voidaan määrittää vain pikseleinä tai Em tai Ex, mutta ei prosentteina.
Voit kuitenkin käyttää sekä positiivisia (merkkien tai sanojen harvalukuisuus) että negatiivisia arvoja (merkit tai sanat lähemmäs toisiaan). Voit esimerkiksi "näin ohennetaan tämän lauseen hahmoja" käyttämällä seuraavaa Css-sääntöä:
Kirjainväli: 0,4 em;
Tai voit "näin saatetaan tämän lauseen symbolit lähemmäksi toisiaan" käyttämällä:
Kirjainväli: -1px;
Sama voidaan sanoa sanavälistä, sillä ainoa ero on, että sanojen välinen etäisyys muuttuu, kuten esimerkiksi tässä lauseessa, käyttämällä tätä CSS-rakennetta:
Sanaväli: 4em;
Samoin voit käyttää negatiivisia arvoja sanavälissä vähentääksesi sanojen välistä etäisyyttä.
No, tämän päivän viimeinen CSS-sääntö, jonka avulla voit muotoilla tekstiä HTML-koodissa tietyllä tavalla, on tyhjä tila. Se vastaa välilyöntien näyttämisestä verkkosivulla, joka esiintyi HTML-koodia kirjoitettaessa.
Kuten muistat artikkelista, selain yhdistää koodia jäsentäessään kaikki välilyönnit, rivinvaihdot ja sarkaimet yhdeksi välilyönnit ja katkaisee rivit verkkosivulla tarkasti koodissa olevien välilyöntien mukaan.
Joten tyhjä väli voi ottaa yhden kolmesta arvosta:
On selvää, että oletusarvo on Normaali, ja tässä tapauksessa kaikki näytetään kuten edellä kuvailin. Mutta kun käytetään Pre-arvoa, saamme täydellisen analogian käytön kanssa, ts. Web-sivulla teksti näkyy kaikilla niillä ylimääräisillä välilyönneillä, joita oli koodia kirjoitettaessa, eikä selain voi enää tehdä siirtoja niillä.
No, mitä se tarkoittaa? nowrap Se yksinkertaisesti estää selainta käärimästä mitään välilyöntejä, jotka se löytää fragmentin sisältä CSS-säännöllä white-space:nowrap. Voit itse kokeilla, miten se kaikki toimii, luomalla yksinkertaisen HTML-tiedoston ja liittämällä minkä tahansa tekstin tageihin, kuten seuraavasti:
Onnea sinulle! Nähdään pian blogisivuston sivuilla
Saatat olla kiinnostunut
Luettelotyyli (tyyppi, kuva, sijainti) - Css-säännöt luetteloiden ulkoasun mukauttamiseen HTML-koodissa
Paikannus käyttämällä Z-indeksiä ja CSS-kohdistimen sääntöä hiiren kursorin vaihtamiseksi
Täyte, marginaali ja reuna - aseta sisäinen ja ulkoinen täyte CSS:ssä sekä reunukset kaikille sivuille (ylä, ala, vasen, oikea)
Mihin CSS on tarkoitettu, miten peräkkäiset tyylisivut yhdistetään HTML-dokumenttiin ja tämän kielen perussyntaksi
Float and clear CSS - lohkoasettelutyökalut
CSS - mikä se on, kuinka peräkkäiset tyylisivut yhdistetään HTML-koodiin tyylin ja linkin avulla
Mittayksiköt (pikselit, Em ja Ex) ja periytymissäännöt CSS:ssä
Tunniste-, luokka-, tunnus- ja yleisvalitsimet sekä attribuuttien valitsimet nykyaikaisessa CSS:ssä
Sijainti (absoluuttinen, suhteellinen ja kiinteä) - tapoja sijoittaa HTML-elementtejä CSS:ssä (säännöt vasemmalle, oikealle, ylhäältä ja alhaalta)
CSS-tausta (väri, sijainti, kuva, toisto, liite) - kaikki HTML-elementtien taustavärin tai taustakuvan asettamiseen
HTML-tunnisteet, jotka määrittävät tekstin tasauksen ja sisennyksen
Tasoitettu teksti, jota käytetään typografiassa
Alla oleva esimerkki näyttää, kuinka kohdistaa teksti leveyteen sivut:
align="left" | align="right" |
---|---|
Palvelusektorilla ja tiedon levittämisessä työskentelevien työntekijöiden määrä kasvaa päivä päivältä. Jos menneiden vuosisatojen symboleina olivat maatila ja tehdas, niin nykyisen 2000-luvun symboli on toimisto, joka on varustettu tietokoneilla, joilla on pääsy tiedonkulkuun. |
|
align="justify" | align="center" |
Palvelusektorilla ja tiedon levittämisessä työskentelevien työntekijöiden määrä kasvaa päivä päivältä. Jos menneiden vuosisatojen symboleina olivat maatila ja tehdas, niin nykyisen 2000-luvun symboli on toimisto, joka on varustettu tietokoneilla, joilla on pääsy tiedonkulkuun. |
Palvelusektorilla ja tiedon levittämisessä työskentelevien työntekijöiden määrä kasvaa päivä päivältä. Jos menneiden vuosisatojen symboleina olivat maatila ja tehdas, niin nykyisen 2000-luvun symboli on toimisto, joka on varustettu tietokoneilla, joilla on pääsy tiedonkulkuun. |
Perustusarvo takaa yhtenäisyyden tasaa teksti oikealle ja vasemmalle, eli leveydessä. Tätä menetelmää käytetään laajasti painatuksessa.
HTML-tekstin tasaaminen keskelle ja leveyteen
Tasaa HTML-teksti keskelle, teksti oikealle:
Tulos:
Ominaisuudet ja arvot
- align="left" - määrittää tekstin tasaus vasemmalle(oletus).
- align="center" - tasaa tekstin keskelle.
- align="right" - tasaa tekstin oikealle.
Kohdistus | HTML-tekstin sisennys
HTML-teksti ja sen sisennys sivun vasemmassa reunassa
Me tuotamme tekstin sisennys vasemmalla kahdella tavalla:
Tulos:
Näytä uudessa ikkunassa.
Asettaa tekstilohkon viimeisen rivin tasauksen.
Lyhyt tiedot
Nimitykset
Kuvaus | Esimerkki | |
---|---|---|
<тип> | Ilmaisee arvon tyypin. | <размер> |
A && B | Arvot on annettava määritetyssä järjestyksessä. | <размер> && <цвет> |
A | B | Ilmaisee, että sinun on valittava vain yksi arvo ehdotetuista arvoista (A tai B). | normaali | pienet kirjaimet |
A || B | Jokaista arvoa voidaan käyttää itsenäisesti tai yhdessä muiden kanssa missä tahansa järjestyksessä. | leveys || laskea |
Ryhmien arvot. | [ sato || risti ] | |
* | Toista nolla tai useampia kertoja. | [,<время>]* |
+ | Toista yksi tai useampia kertoja. | <число>+ |
? | Määritetty tyyppi, sana tai ryhmä on valinnainen. | upotettu? |
(A, B) | Toista vähintään A, mutta enintään B kertaa. | <радиус>{1,4} |
# | Toista yksi tai useampi kertaa pilkuilla erotettuina. | <время># |
Arvot
auto Vastaa tekstin tasausominaisuuden määrittämää tasausta, paitsi tasausarvoa. Sille kohdistus on kuin aloitus. aloitus Rivi tasataan lohkon aloitusreunaan, joka voi muuttua tekstin suunnan mukaan (vasemmalta oikealle tai oikealta vasemmalle). end Rivi on kohdistettu lohkon loppureunaan, joka määräytyy tekstin suunnan mukaan. vasen Viiva on tasattu vasemmalle. oikea Viiva on tasattu oikealle. center Viiva on keskitetty. perustella Rivi on tasattu. Jos viimeisellä rivillä on vain yksi sana, se tasataan vasemmalle.
Eri arvojen vaikutus tekstin sijaintiin on esitetty taulukossa. 1.
Merkitys | Tasaus | Tekstin tyyppi |
---|---|---|
vasemmalle | Vasen | |
oikein | Oikein | ![]() |
keskusta | Keskitetty | ![]() |
perustella | Leveys | ![]() |
Hiekkalaatikko
Nalle Puh ei aina vastustanut pientä virvokkeita, varsinkin yhdeltätoista aamulla, koska siihen aikaan aamiainen oli jo kauan päättynyt, eikä lounas ollut vielä alkanut. Ja tietysti hän oli hirveän iloinen nähdessään, että Kani otti kuppeja ja lautasia.
div ( text-align-last: aloitus ; )
Esimerkki
aseta itsesi korkeuksiin sen mukaan, missä aurinkoinen puoli on. Kun taistelet vihollista vastaan korkealla, älä mene suoraan ylös. Tämä on armeijan asema vuorilla.
Objekti malli Esine
.style.textAlignLast
Huom
Internet Explorer ja Edge eivät tue aloitus- ja loppuarvoja.
Firefox ennen versiota 49 tukee ominaisuutta -moz-text-align-last.
Erittely
- Jokainen erittely käy läpi useita hyväksymisvaiheita.
- Suositus - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi. Ehdokassuositus ( Mahdollinen suositus
- ) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta tarvitsee kehitysyhteisön apua standardin toteuttamiseen. Ehdotettu suositus Suositeltu suositus
- ) - tässä vaiheessa asiakirja toimitetaan W3C:n neuvoa-antavalle toimikunnalle lopullista hyväksyntää varten.
- Työluonnos – Kypsempi versio luonnoksesta, josta on keskusteltu ja jota on muutettu yhteisön tarkistamista varten. Toimittajan luonnos ( Toimituksellinen luonnos
- ) - standardin luonnosversio projektin toimittajien tekemien muutosten jälkeen. Luonnos ( Erittelyluonnos
) - standardin ensimmäinen luonnos. | CSS | Internet Explorer | Kromi | Ooppera | Safari | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
3 | 2.0+ | 11.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Lyhyt tiedot
CSS-versiot
Arvot
center Tasaa tekstin keskelle. Teksti sijoitetaan vaakasuoraan selainikkunaan tai säilöön, jossa tekstilohko sijaitsee. Tekstirivit näyttävät olevan sidottu näkymättömälle akselille, joka kulkee verkkosivun keskellä. Tätä kohdistusmenetelmää käytetään aktiivisesti otsikoissa ja erilaisissa allekirjoituksissa, kuten kuvateksteissä, se antaa tekstin suunnittelulle virallisen ja vankan ilmeen.Kaikissa muissa tapauksissa keskitasausta käytetään harvoin, koska on hankalaa lukea suuri määrä tällaista tekstiä.
auto Ei muuta elementin sijaintia.
inherit Perii vanhemman arvon.
aloitus Sama kuin vasen, jos teksti siirtyy vasemmalta oikealle ja oikealle, kun teksti siirtyy oikealta vasemmalle.
loppu Sama kuin oikealle, jos teksti siirtyy vasemmalta oikealle ja vasemmalle, kun teksti siirtyy oikealta vasemmalle.
aseta itsesi korkeuksiin sen mukaan, missä aurinkoinen puoli on. Kun taistelet vihollista vastaan korkealla, älä mene suoraan ylös. Tämä on armeijan asema vuorilla.
document.getElementById("elementID").style.textAlign
Selaimet
IE versioon 7.0 asti kohdistaa paitsi lohkotason elementin sisällön, myös itse elementin.