Css mikä on 1 pt yhtä suuri. Koko näytön taustakuvat ja osiot. Absoluuttisen pituuden yksiköt CSS:ssä
Eri elementtien koon asettaminen CSS:ssä, absoluuttinen ja suhteelliset yksiköt mitat. Absoluuttiset yksiköt ovat riippumattomia tulostuslaitteesta, ja suhteelliset yksiköt määrittävät elementin koon suhteessa toisen koon arvoon.
Suhteelliset yksiköt
Suhteellisia yksiköitä käytetään yleensä tekstin käsittelyyn. Taulukossa 1 luettelee tärkeimmät suhteelliset yksiköt.
Em-yksikkö on muuttuva arvo, joka riippuu nykyisen elementin kirjasinkoosta (koko asetetaan font-size style -ominaisuudella). Jokaisella selaimella on sisäänrakennettu tekstikoko, jota käytetään, kun tätä kokoa ei ole erikseen määritetty. Siksi aluksi 1em yhtä suuri kuin koko selaimen oletusfontti tai fonttikoko pääelementti. Prosenttimerkintä on identtinen em:n kanssa, sillä arvot 1em ja 100% ovat yhtä suuret.
Yksikkö ex määritellään merkin "x" korkeudeksi tuumaa pienet kirjaimet. ex on samat säännöt kuin em , nimittäin se, että se on sidottu selaimen oletuskirjasinkokoon tai pääelementin kirjasinkokoon.
Ch-yksikkö on yhtä suuri kuin nykyisen elementin "0"-merkin leveys ja, kuten em, riippuu fontin koosta.
Ero em:n ja remin välillä on seuraava. em riippuu elementin ylätason kirjasinkoosta ja muuttuu sen mukana, ja rem on sidottu juurielementti, eli html-elementille määritetty fonttikoko.
On myös joukko suhteellisia yksiköitä, jotka on sidottu selaimen näkymän kokoon. Taulukossa 2 näyttää luettelon niistä kuvauksen kera.
Absoluuttiset yksiköt
Absoluuttiset yksiköt edustavat fyysisiä mittoja - tuumaa, senttimetriä, millimetriä, pisteitä, pikseleitä ja pikseleitä. Laitteissa, joissa on alhainen dpi (pikseleiden määrä tuumaa kohti määrittää pikselitiheyden), sidonta on pikseliä kohti. Tässä tapauksessa yksi tuuma vastaa 96 pikseliä. Ilmeisesti todellinen tuuma ei vastaa tällaisen laitteen tuumaa. Korkean DPI:n laitteissa todellinen tuuma on sama kuin näytön tuuma, joten pikselikoko lasketaan 1/96 tuumasta. Taulukossa 3 listaa absoluuttiset perusyksiköt.
Esimerkki
30px otsikko
Tekstin koko 1,5 em
24 pisteen otsikko
Siirrä tekstiä oikealle 30 millimetriä
Huomautus
Mittoja määritettäessä muista määrittää mittayksiköt, esimerkiksi leveys: 30px. Muuten selain ei voi näyttää haluttu lopputulos, koska se ei ymmärrä mitä kokoa tarvitset. Yksiköitä ei lisätä vain silloin, kun nolla arvo(marginaali: 0).
Internet Explorer tukee yksikköä vm vmin sijaan.
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.
- Working Draft - 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.
Tervehdys, rakkaat webcodius-blogin lukijat! Eri elementtien koon asettaminen html-sivuja, CSS:ssä on mittayksiköt. Lisäksi voidaan käyttää sekä suhteellisia että absoluuttisia yksiköitä.
Absoluuttiset yksiköt kytketty fyysiseen maailmaan ja riippumaton tulostuslaitteesta. Seuraavia yksiköitä voidaan käyttää osoittamaan niitä:
Absoluuttisia yksiköitä käytetään harvemmin kuin suhteellisia yksiköitä, ja niitä käytetään pääasiassa tekstin koon asettamiseen. Ja tekstin koon osoittamiseksi he käyttävät pääasiassa pistettä (pt), joka saadaan jakamalla tuuma 72 osaan. Tuuma puolestaan on vastaavasti noin 25,4 millimetriä, yksi piste on suunnilleen yhtä kuin kolmasosa millimetristä. Esimerkki absoluuttisten mittayksiköiden käytöstä:
Koko 12 millimetriä
Koko 1 senttimetri
Koko 1 tuumaa
Koko 24 pistettä
Koko 1 huippu
Suhteelliset mittayksiköt
Tietojen näyttämiseksi näytöllä on parempi käyttää suhteellisia mittayksiköitä. Koska näytössä olevien kuvien muodostavien pisteiden (pikseleiden) fyysinen koko voi vaihdella tyypistä ja fyysinen koko tämä sama näyttö. Myös pikselien koko riippuu vahvistettu päätöslauselma näyttö. Suhteelliset perusyksiköt:
1 px CSS:ssä, kuten edellä totesimme, tämä on kohta käyttäjän näytöllä, fyysinen määrä mikä riippuu laitteen resoluutiosta ja etäisyydestä, jolta ihminen katsoo sen pintaa.
Kun määritetään prosentteja, koko lasketaan pääelementin koon perusteella. Jos esimerkiksi pääelementin leveys on 500px, niin jos määrität leveyden:50%, elementin leveys on 250px.
em on sidottu selaimen oletuskirjasinkokoon tai pääelementin kirjasinkokoon. A esim on ison (pienen) kirjaimen "x" (x) korkeus Latinalainen asettelu. Eli em on myös sidottu selaimen oletuskirjasinkokoon tai pääelementin kirjasinkokoon. Esimerkkejä:
Koko 20 pikseliä
Koko 150%
Koko 2 em
Koko 2 esim
Tulos:
Yllä mainittujen lisäksi on joukko suhteellisia yksiköitä, jotka on sidottu selaimen näkymän kokoon:
Esimerkkejä käytöstä:
Koko 2 vw
Koko 2vh
Koko 2 vmin
Koko 2 vmax
calc()-funktio
Käytetään lasketun arvon määrittämiseen CSS-ominaisuudet, jotka käyttävät arvona numeroa. Ensinnäkin calc:lla voidaan laskea mitat, kulmat ja aika. Lisäksi toiminnon avulla voit sekoittaa erilaisia mittayksiköitä, esimerkiksi div:n leveys voidaan asettaa seuraavasti:
div(
leveys: laskettu (100 % - 40 pikseliä);
}
Tässä tapauksessa div leveys on yhtä suuri kuin pääelementin leveys miinus 40 pikseliä.
Voit käyttää lausekkeissa seuraavia aritmeettisia operaatioita:
- + - lisäys. Merkki on erotettu välilyönnillä molemmilla puolilla (korkeus: calc (20% + 50px));
- — — vähennyslasku. Merkki on erotettu välilyönnillä molemmilla puolilla (leveys: calc (90% - 10px););
- * — kertolasku (täyttö: calc (2em*2););
- / - jako. Nollalla jakaminen on kielletty (leveys: laskettu (100%/4);).
SISÄÄN Firefox selaimet versioon 16.0 asti -moz-calc-toimintoa tuetaan, Chromessa 26.0 asti ja Safarissa versiosta 6.0 lähtien -webkit-calc on tuettu.
Esimerkiksi joustavassa kaksisarakkeisessa verkkosivustoasettelussa meidän on varmistettava, että sarakkeiden välinen etäisyys on 50 pikseliä missä tahansa selainikkunan koossa. Sitten avustuksella calc-funktiot tämä tehdään seuraavasti:
Eri elementtien koon asettamiseen CSS käyttää absoluuttisia ja suhteellisia mittayksiköitä. Absoluuttiset yksiköt ovat riippumattomia tulostuslaitteesta, mutta suhteelliset yksiköt määrittelevät elementin koon suhteessa toisen koon arvoon.
Suhteelliset yksiköt
Suhteellisia yksiköitä käytetään yleensä tekstin käsittelyyn tai silloin, kun sinun on laskettava prosentteina elementtien välillä. Taulukossa 1 luettelee tärkeimmät suhteelliset yksiköt.
Muuttujan arvo, joka riippuu nykyisen elementin kirjasinkoosta (se asetetaan font-size style -ominaisuudella). Jokaisella selaimella on sisäänrakennettu tekstikoko, jota käytetään, kun tätä kokoa ei ole erikseen määritetty. Siksi aluksi 1em on yhtä suuri kuin selaimessa asetettu oletuskirjasinkoko. Vastaavasti, kun asetamme tekstin kokoa koko sivulle emissä, työskentelemme tämän parametrin kanssa. Siinä tapauksessa, että em käytetään tietty elementti, 1em on ylätason kirjasinkoko.
ex määritellään pienen "x"-merkin korkeudeksi. ex on samat säännöt kuin em , nimittäin se, että se on sidottu selaimen oletuskirjasinkokoon tai pääelementin kirjasinkokoon.
Pikseli on peruspiste, jonka näyttö tai jokin muu näyttää vastaava laite esimerkiksi älypuhelin. Pikselikoko riippuu laitteen resoluutiosta ja sen teknisistä ominaisuuksista.
Esimerkki 1 näyttää näiden yksiköiden käytön.
Esimerkki 1: Suhteellisten yksiköiden käyttäminen
Koko 2 em
Koko 2 esim
Koko 30 pikseliä
Koko 200 %
Tulos tämä esimerkki alla (kuva 1).
Riisi. 1. Tekstin koko at eri yksiköitä
Absoluuttiset yksiköt
Absoluuttisia yksiköitä käytetään harvemmin kuin suhteellisia yksiköitä ja yleensä tekstin kanssa työskennellessä. Taulukossa 2 luetellaan tärkeimmät tällaiset yksiköt.
Ehkä yleisin yksikkö on piste, jota käytetään osoittamaan kirjasinkokoa. Monet ihmiset ovat tottuneet asettamaan fontin koon tekstieditorissa, esimerkiksi 12. Mutta he eivät ymmärrä mitä tämä numero tarkoittaa. Nämä ovat siis juuri ne kohdat, ne ovat alkuperäisiä. Ne eivät tietenkään ole meille syntyperäisiä, olemme tottuneet mittaamaan kaiken millimetreissä ja vastaavissa yksiköissä, mutta pointti on ehkä ainoa arvo, joka ei ole Metrijärjestelmä mittaus, jota käytetään kaikkialla maassamme. Ja kaikki kiitos tekstieditorit Ja julkaisujärjestelmät. Esimerkki 2 esittää pisteiden ja muiden yksiköiden käyttöä.
Esimerkki 2: Absoluuttisten yksiköiden käyttäminen
Koko 0,5 tuumaa
Koko 8 mm
Koko 24 pistettä
Absoluuttisten mittayksiköiden käytön tulos on esitetty alla (kuva 2).
Riisi. 2. Tekstin koko eri yksiköillä
Koska kehittäjät käyttävät pikseliarvoja, emme usko kaikkien ymmärtävän em-parametrien todellista tarkoitusta ja niiden toimintaa CSS:ssä.
Joitakin oppaita laadittaessa jouduimme jotenkin käsittelemään näitä merkityksiä, joten tänään meillä on sinulle kerrottavaa. Toivomme, että tämänpäiväinen oppaamme auttaa sinua vetämään verhon taakse tällaisen kätevän ja hyvin harkitun tekniikan suhteen, joka on suunniteltu verkkoprojektien kehittämiseen.
Määritelmä em
Spesifikaatio esittelee melkoisen em-parametrin:
Sama kuin elementissä käytetty laskettu fonttikoon arvo
Toisin sanoen, jos meillä on seuraava CSS-koodi:
Elementti (
fontin koko: 20px;
}
Tämä tarkoittaa, että kyseiseen elementtiin tai sen alapuolelle asetettu 1em on yhtä suuri kuin 20 pikseliä. .
Jos käytät seuraavaa koodia:
Elementti (
fontin koko: 20px;
leveys: 4em;
korkeus: 4em;
}
Tämä tarkoittaa, että elementin leveys ja korkeus (määritetty tässä muodossa 4em x 4em) on 80px x 80px (20px * 4 = 80px).
Katsotaanpa tarkemmin
Avain muistamiseen on niiden tarkoitus ja alkuperä tämä parametri. Seurata:
Em on typografinen muutosyksikkö, joka vastaa tällä hetkellä määritettyä fonttikokoa. Nimi em liittyy kirjaimeen M. Alunperin tämä yksikkö saatiin leveydestä iso kirjain M, kun käytetään tiettyä kirjasinta
Dokumentaatio jatkuu selittämällä, että vaikka nimi perustui alun perin M-kirjaimen leveyteen, tällä ei ole enää merkitystä. Tästä lähtien mittayksikkö em on liitetty fontin pistekokoon.
Käyttämällä tätä menetelmää laskelmia ei tapahdu CSS-tiedostossa tarkka määritelmä mitä ne on. Tämän yksikön merkitys riippuu siitä, kuinka Cascading Style Sheets on rakennettu. Teoriassa, jos määrität kaikkien elementtien pituuden em-yksikössä, pelkkä kirjasinkoon muuttaminen riittäisi "tuhoamaan" kaikki pikselin täydelliset merkinnäsi.
Entä jos en käytä font-size-parametria?
Yllä olevassa esimerkissä ja linkitetyssä JSBinissä font-size-parametri on määritetty tarkasti. em-yksikkö johdetaan myöhemmin "perus"-parametrista. Mutta entä jos elementtiä ei ole määritetty tarkka parametri Fonttikoko?
Tässä tapauksessa, koska font-size-parametri periytyy koko asiakirjapuussa, em-yksikön arvo johdetaan peritystä parametrista. Jos koko asiakirjassa ei mainita fonttikokoa, yhden em-yksikön arvo on 16 pikseliä, mikä on oletusarvo (ja uskomme, että tämä ei vaihtele selaimen välillä).
"rem" pitäisi olla automaattinen ihmisille
On aika tuoda CSS:ään uusi lisäys: . Tämä yksikkö (nimi on johdettu sanasta "root em") on täysin tuettu kaikissa selaimissa: IE9+, FF3.6+, Chrome, Safari 5+ ja Opera 11.6+.
Kaiken kaikkiaan tämä yksikkö on erittäin helppo ymmärtää. Se antaa sinulle mahdollisuuden tehdä em-yksikköarvoja koko HTML-dokumenttiin perustuen yhteen "pää"-arvoon, joka on määritetty " html"-elementti. Näin voit unohtaa font-size-parametrin, koska kaikki dokumentissa käytetyt em-yksiköt perustuvat main rem-arvoon, esimerkiksi:
Html (fonttikoko: 62,5 %; )
body ( font-size: 1.4rem; ) /* =14px */
h1 ( font-size: 2.4rem; ) /* =24px */
Ja kuten emissä, jos et määritä kirjasinkoon arvoa " html"-elementti, "root em" -yksikkö on oletuksena 16 pikseliä.
Tartu tilaisuuteen
Niillä voi keksiä monia muita ilmaisuja :)
Useiden vuosien verkkosivustokehityksen parissa työskenneltyämme voimme vihdoin siirtyä pois kiinteistä leveyksistä. Vaikka monet ovat jo siirtyneet kehitykseen mukautuvat mallit, kaikki käyttävät edelleen pikseliarvoja ajoittain. Vaikka tämä saattaa riittää mallielementeille, mielestämme typografia on käännettävä täysin em-arvoiksi.
Vaikka voisimmekin luoda koko malli käyttämällä em-yksiköitä, meistä näyttää siltä, että in mukautuvat mallit On silti parempi käyttää pikseliarvoja ja prosenttiosuuksia ja, kuten todettiin, käyttää ems typografiassa.
Joten toivomme, että pidit opetusohjelmastamme tänään ja käytät oppimaasi käyttöön.
Älä unohda kommentoida!
CSS:ssä on useita perusmittayksiköitä: suhteellinen ja absoluuttinen. Kun työskentelet CSS:n kanssa, sinun tulee ymmärtää niiden käyttö tarkasti, muuten työskennellä niiden kanssa kaskadipöydät tyylit ovat monimutkaisia ja käsittämättömiä. Absoluuttiset mittayksiköt jaetaan 5 tyyppiin, suhteelliset 4:ään. Sinun tulee tietää, että absoluuttiset mittayksiköt eivät riipu lähtölaitteesta, ts. näytöt ja näytöt, kun taas suhteelliset määrittävät elementin koon suhteessa toiseen kokoon, ts. näyttö, näyttö, yläelementti jne. Nyt lisää niistä.
Suhteelliset mittayksiköt.
Suhteellisia mittayksiköitä käytetään yleensä tekstin kanssa työskentelyssä ja "laajennettavissa" asetteluissa. Seuraavassa taulukossa on esitetty suhteelliset perusmittayksiköt.
E.M.
Mitattu arvo riippuu nykyisen elementin kirjasinkoosta (se asetetaan font-size-attribuutilla). Jos sitä ei ole erikseen asetettu, käytetään selaimessa asetettua tekstin kokoa. Siksi 1em on aluksi yhtä suuri kuin selaimen oletuskirjasinkoko.
EX
Tämä argumentti määritellään pienen "x"-merkin korkeudeksi. Ex on sidottu selaimessa asetettuun oletuskirjasinkokoon, jos pääelementillä on "font-size"-attribuutti, se on sidottu siihen.
PX
Pikseli on tulostuslaitteen (näytön tai näytön) 1 pisteen resoluutio. Nuo. Jos näyttösi resoluutio on 1024*768, sinulla on 1024 pikseliä vaakasuunnassa ja 768 pikseliä pystysuunnassa. Nuo. Pikselikoko riippuu suoraan tulostuslaitteen resoluutiosta ja sen teknisistä ominaisuuksista.
%
Prosenttiyksikkö riippuu pääelementin mitoista.
Absoluuttiset mittayksiköt.
Absoluuttisia mittayksiköitä käytetään harvemmin ja enimmäkseen tekstin kanssa työskenneltäessä. Seuraavat taulukot osoittavat absoluuttiset mittayksiköt.
Näistä yksiköistä vain pt (piste) tulisi kuvata, koska pc on johdannainen sanasta pt ja in, cm:n ja mm:n käyttöä ei tarvitse kuvata.
Piste on yleisin ja laajimmin käytetty fonttien mittayksikkö (muistatko, kuinka kirjasinkoko asetetaan Wordissa tai Open Officessa?).
