Kurssitilaus

CSS-yleiskurssi

• CSS lisäkirja
• CSS esittely
• CSS perus语法
• CSS edistyneet语法
• CSS johdannaisvalitsimet
• CSS id-valitsimet
• CSS luokka-valitsimet
• CSS luominen
• CSS tausta
• CSS teksti
• CSS kirjasin
• CSS luettelo

CSS-ruudukkomalli

• CSS kehyssynteesi
• CSS sisätilat
• CSS reunat
• CSS ulkoreunat
• CSS ulkoreunojen yhdistäminen

CSS-sijainti

• CSS sijoittelu yleiskatsaus
• CSS suhteellinen sijoittelu
• CSS absoluuttinen sijoittelu
• CSS kellastus

CSS-valitsimet

• CSS elementti-valitsimet
• CSS valitsimien ryhmittely
• CSS luokka-valitsimen yksityiskohtainen selitys
• CSS ID-valitsimen yksityiskohtainen selitys
• CSS ominaisuus-valitsimen yksityiskohtainen selitys
• CSS jälkeläisvalitsimet
• CSS lapsivalitsimet
• CSS peräsimettyveljivelitsimet

Valinnaiset kurssit

Kurssivihje:

• CodeW3C.com kassakaappi

CSS-tekstitiedot määrittelevät tekstin ulkoasun.

Tekstitiedoilla voit muuttaa tekstin väriä, merkkien välistä tilaa, tekstin tasoa, tekstin koristelua, sisennyksen ja niin edelleen.

Sisennä tekstiä

Web-sivuston kappaleiden ensimmäisten rivien sisennys on yksi yleisimmistä teksti-formaatointitehosta.

CSS tarjoaa text-indent-ominaisuusTämä ominaisuus mahdollistaa helposti tekstin sisennyksen.

Käyttämällä text-indent-ominaisuutta kaikki elementtien ensimmäiset rivit voidaan sisennetä annetulla pituudella, jopa negatiivisella arvolla.

Tämän ominaisuuden yleisimpiä käyttötarkoituksia on kappaleiden ensimmäisen rivin sisennys, seuraavat säännöt sisennettävät kaikki kappaleet 5 em:llä:

p {text-indent: 5em;}

Huomautus:Yleisesti ottaen text-indent voidaan soveltaa kaikkiin lohkoelementteihin, mutta tätä ominaisuutta ei voida soveltaa rinnakkaisiin elementteihin, korvaaville elementeille kuten kuville. Kuitenkin, jos lohkoelementti (esim. kappale) ensimmäisessä rivissä sisältää kuvan, se siirtyy mukana ensimmäisen rivin mukana.

Vinkki:Jos haluat 'sisentää' ensimmäisen rivin rinnakkaisessa elementissä, voit luoda tämän efektin vasemman sisäisen tai ulkoisen reunan avulla.

Käytä miinusarvoja

text-indent voidaan myös asettaa miinuksella. Tämän tekniikan avulla voidaan saavuttaa monia mielenkiintoisia efektejä, kuten '��jytys sisennys', jossa ensimmäinen rivi hyljetään elementin lopun vasemmalle puolelle:

p {text-indent: -5em;}

Kuitenkin, kun asetetaan text-indent-arvoa miinuksella, on oltava varovainen, jos asetetaan miinusarvo kappaleelle, ensimmäisen rivin jokin teksti voi ylittää selaimen vasemman reunan. Välttääksesi tämän näyttöongelman, suositellaan asettamaan ulkoreuna tai sisäreuna miinussisennysarvojen tapauksessa:

p {text-indent: -5em; padding-left: 5em;}

Käytä prosenttilukuja

text-indent-ominaisuus voi käyttää kaikkia mittayksiköitä, mukaan lukien prosenttiluvut.

Prosenttiluvut on määritettävä suhteessa sisennysarvon isän elementin leveys. Toisin sanoen, jos sisennysarvo asetetaan 20%, vaikuttava elementin ensimmäinen rivi sisennetään isän elementin leveyden 20%:n verran.

Esimerkissä seuraavassa, sisennysarvo on isän elementin 20%, eli 100 kuvapistettä:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

Periminen

text-indent-ominaisuus voidaan perivä, harkitse seuraavaa merkintää:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

Muokatut kappaleet sisältävät myös 50 kuvapistettä sisennystä, koska tämä kappale perii id:llä 'inner' varustetun div-elementin sisennysarvon.

horisontaalinen tasapainottaminen

text-align on perusominaisuus, joka vaikuttaaTekstiriviVastavuoroiset tasapainotusmuodot. Ensimmäiset kolme arvoa ovat suoraviivaisia, mutta neljäs ja viides ovat hieman monimutkaisempia.

Arvot left, right ja center saavat elementin sisällä olevan tekstin tasapainotettua vastavuoroisesti.

Länsimaiset kielet luetaan vasemmalta oikealle, joten text-align:n oletusarvo on left. Teksti tasapainotetaan vasemmassa reunassa, oikea reunus on sahamainen (nimeltään "vasemmalta oikealle" teksti). Erikielisille kielille, kuten heprealle ja arabialle, text-align:n oletusarvo on oikea, koska nämä kielet luetaan oikealta vasemmalle. Ei yllätys, center keskittää jokaisen tekstirivin elementissä.

Vinkki:Block- tai taulueelementtien keskittäminen voidaan saavuttaa asettamalla näille elementeille sopivat vasemmat ja oikeat ulkopuoliset reunat.

text-align:center ja <CENTER>

Voit ehkä ajatella, että text-align:center ja <CENTER>-elementin vaikutus ovat samanlaisia, mutta todellisuudessa ne ovat hyvin erilaisia.

<CENTER> ei vaikuta vain tekstiin, vaan myös koko elementin keskittämiseen. text-align ei hallitse elementin tasapainottamista, vaan vaikuttaa vain sisällön tasapainottamiseen. Elementti ei siirry yhdestä osasta toiseen, vaan vain teksti vaikuttaa.

justify

Viimeinen horisontaalinen tasapainotusominaisuus on justify.

Tasapainotetussa tekstissä tekstirivien molemmat reunat sijoitetaan isäntäelementin sisäisiin rajoihin. Sitten säädetään sanojen ja kirjainten välisiä välejä, jotta jokaisen rivin pituus on sama. Oletat, että olet huomannut, että tasapainotettu teksti on yleistä tulostuksessa.

On huomattava, että käyttäjäagentin (ei CSS) on määritettävä, kuinka tekstiä, joka on tasapainotettu molemmin puolin, venytetään täyttääkseen isäntäelementin vasemman ja oikean reunan välinen tila. Yksityiskohtien ymmärtämiseksi katso: CSS text-align ominaisuuden viittaus.

Sanojen väli

word-spacing-ominaisuusVoit muuttaa sanojen (sanat) välillä olevaa standardiväliä. Oletusarvo normal on sama kuin asetettu arvo 0.

word-spacing-ominaisuus hyväksyy positiivisen tai negatiivisen pituusarvon. Jos annetaan positiivinen pituusarvo, sanat laajenevat. word-spacingille asetettu negatiivinen arvo lähentää sanoja:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Tämä on kappale. Sanojen välit laajenevat.
</p>
<p class="tight">
Tämä on kappale. Sanojen väliset välit pienenevät.
</p>

Esimerkki TIY: lisää tai vähennä sanavälistä (sanan välistä) etäisyyttä

Huomautus:Jos haluat syventyä CSS:n 'sana' (word) määritelmään, vieraile CSS word-spacing ominaisuuden tarkistus sivu.

Kirjainten välimatka

letter-spacing ominaisuusEro word-spacing ominaisuuteen on, että kirjainten välimatka muuttaa merkkejä tai kirjaimia välillä olevaa etäisyyttä.

Kuten word-spacing ominaisuudessa, letter-spacing ominaisuuden sallitut arvot sisältävät kaikki mittayksiköt. Oletusarvo on normal (tämä on sama kuin letter-spacing:0). Syötetyn mittayksikön arvo lisää tai vähentää kirjainten välistä etäisyyttä määrätyn määrän:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>Tämä on otsikko 1</h1>
<h4>Tämä on otsikko 4</h4>

Esimerkki TIY: määritä merkkien välimatka (kirjainten välimatka)

Merkkiyhteydet

text-transform ominaisuusKäsittää tekstin ison ja pienen kirjaimen muodon. Tämä ominaisuus voi ottaa neljä eri arvoa:

• none
• uppercase
• lowercase
• capitalize

Oletusarvo none ei tee minkäänlaista muutosta tekstiin, vaan käyttää alkuperäisen dokumentin olevaa kirjaintyyliä. Nimi mukailee tosiasioita: uppercase ja lowercase muuntaa tekstin kokonaisuudessaan isokirjaimiseksi ja pienikirjaimiseksi. Lopuksi, capitalize tekee jokaisen sanan ensimmäisestä kirjaimesta ison.

Vaikka text-transform ominaisuus saattaa näyttää vähäiseltä, se voi olla hyödyllinen, jos yhtäkkiä päätät tehdä kaikki h1-elementit isokirjaimisia. Sinun ei tarvitse muuttaa kaikkien h1-elementtien sisältöä erikseen, vaan voit käyttää text-transform ominaisuutta tekemään muutoksen:

h1 {text-transform: uppercase}

text-transform ominaisuuden käyttö tuo mukanaan kaksi etua. Ensinnäkin, tarvitset vain kirjoittaa yksinkertainen sääntö tämän muutoksen tekemiseksi, ilman että sinun täytyy muuttaa h1-elementin sisältöä itsessään. Toiseksi, jos päättäisit myöhemmin palauttaa kaikki kirjaimet alkuperäiseen muotoonsa, muutos olisi helpompi tehdä.

Esimerkki TIY: hallitse tekstin kirjainten ison ja pienen kirjaimen muotoa

tekstin korostus

Seuraavaksi keskustelemme text-decoration ominaisuus，tämä on erittäin mielenkiintoinen ominaisuus, joka tarjoaa monia erittäin mielenkiintoisia toimintoja.

text-decorationilla on 5 arvoa:

• none
• underline
• overline
• line-through
• blink

underline lisää alaviivan elementtiin, kuten HTML:n U-elementissä. overline toimii päinvastoin, piirtää yliviivan tekstin yläpuolelle. line-through arvo piirtää ylitynnyn tekstin keskelle, mikä on samanarvoinen HTML:n S- ja strike-elementtien kanssa. blink saa tekstin vilkumaan, mikä on samanlainen kuin Netscape:n arvosteltu blink-merkki.

none-arvo sulkee pois kaikki koristelut, jotka on sovellettu elementtiin. Yleensä ilman koristelua oleva teksti on oletusasento, mutta ei aina. Esimerkiksi linkkeillä on oletuksena alaviiva.

a {text-decoration: none;}

Huomautus:Jos linkin alla olevaa viivaa poistetaan tällaisella säännöllä, ainoa visuaalinen ero锚 ja normaalitekstien välillä on väri (ainakin oletuksena tämä on niin, mutta ei voida täysin varmistaa, että väri on erilainen).

Useita koristeluja voidaan yhdistää yhteen sääntöön. Jos halutaan, että kaikki hyperlinkit ovat sekä alaviivattuja että yliviivattuja, sääntö on seuraava:

a:link a:visited {text-decoration: underline overline;}

On kuitenkin huomattava, että jos kaksi eri koristelua sopivat samaan elementtiin, voittavan säännön arvo korvaa täysin toisen arvon. Tarkastellaan seuraavia sääntöjä:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Tiettyjen sääntöjen mukaan kaikki classiksi määritellyt h2-elementit ovat vain yksi ylitynnyskoristelu, eikä alla olevaa tai yläkoristelua, koska text-decoration arvon korvaa eikä kerry.

Käsitellään välilyöntejä

white-space ominaisuusSe vaikuttaa käyttäjäagentin käsittelyyn välilyönneissä, rivinvaihdoissa ja tab-merkeissä alkuperäisessä dokumentissa.

Käyttämällä tätä ominaisuutta voidaan vaikuttaa siihen, miten selain käsittelee välilyöntejä ja tyhjiä välitiloja kirjainten ja tekstin rivien välillä. Jonkin verran oletuksena oleva XHTML-käsittely on jo valmis välilyöntien käsittelyyn: se yhdistää kaikki välilyönnit yhdeksi välilyönniksi. Siksi annetussa merkinnässä, kun se näytetään verkkoselaimessa, kirjainvälit näytetään vain yhdellä välilyönnillä, ja rivinvaihdot elementissä jätetään huomiotta:

<p>This     paragraph has    many
    spaces           in it.</p>

Tämä käyttäytyminen voidaan määrittää seuraavasti:

p {white-space: normal;}

Yllä olevat säännöt kertovat selaimelle, että se käsittelee tekstiä tavalliseen tapaan: hylätään ylimääräiset välilyönnit. Jos annetaan tämä arvo, rivinvaihtomerkit (uudelleenlaskettu) muunnetaan välilyönniksi ja useiden välilyöntien sarjat muunnetaan yhdeksi välilyönniksi.

Esimerkki TIY: white-space: normal

Arvo pre

Kuitenkin, jos white-space asetetaan pre, attribuutin vaikutuksen alaisissa elementeissä välilyöntimerkkien käsittely on erilainen, ja se käyttäytyy samalla tavalla kuin XHTML:n pre-elementti; välilyöntimerkit eivät ole laiminlyöty.

Jos white-space-ominaisuuden arvo on pre, selain kiinnittää huomiota ylimääräisiin välilyöntiin, jopa uudelleenlaskettuihin. Tässä suhteessa ja vain tässä, mikä tahansa elementti voi olla yhtä kuin pre-elementti.

Esimerkki TIY: white-space: pre

Huomautus:Testauksen mukaan IE 7 ja aikaisemmat selaimet eivät tue tätä arvoa, joten käytä muita kuin IE-selaimia tarkastellessasi yllä olevaa esimerkkiä.

Arvo nowrap

Vastaavasti oleva arvo on nowrap, joka estää elementin sisällä olevan tekstin rivivaihdon, ellei käytetä br-elementtiä. CSS:ssä nowrap on hyvin samanlainen kuin HTML 4:ssä <td nowrap>-elementin käyttö, jossa taulukon solua asetetaan niin, ettei se voi vaihtaa riviä, mutta white-space-arvo voidaan soveltaa mihin tahansa elementtiin.

Esimerkki TIY: white-space: nowrap

Arvot pre-wrap ja pre-line

CSS2.1 sisälsi arvot pre-wrap ja pre-line, joita ei ollut aikaisemmissa CSS-versioissa. Näiden arvojen tarkoitus on antaa luojille parempi valta välilyöntimerkkien käsittelyssä.

Jos elementin white-space asetus on pre-wrap, niin elementin sisällä oleva teksti säilyttää välilyöntimerkkijonoja, mutta tekstirivit vaihtuvat normaalisti. Jos asetus on tämä, lähtötekstissä olevat rivinvaihtomerkit ja luodut rivinvaihtomerkit säilytetään. pre-line on pre-wrapin vastakohta ja se yhdistää välilyöntimerkkijonoja normaalien tekstin tavoin, mutta säilyttää rivinvaihtomerkit.

Esimerkki TIY: white-space: pre-wrap

Esimerkki TIY: white-space: pre-line

Huomautus:Testasimme yllä olevia kahta esimerkkiä IE7 ja FireFox2.0 selaimissa, mutta tulokset olivat, että arvot pre-wrap ja pre-line eivät saaneet hyvää tukea.

Yhteenveto

Seuraava taulukko yhteenvetona white-space-ominaisuuden käyttäytymisestä:

Tekstin suunta

Jos luette englanninkielisen kirjan, luette sen vasemmalta oikealle ja ylös alas, mikä on englannin virallinen suunta. Mutta ei kaikki kielet ole näin. Tiedämme, että kiina luetaan oikealta vasemmalle, kuten myös heprea ja arabiski jne. CSS2:ssa otettiin käyttöön ominaisuus, joka kuvaa sen suuntautumista.

direction-ominaisuusMuuttaa blokkiasteikkojen tekstin kirjoitus suuntaa, taulukon sarakkeiden asettelua, sisällön horisontaalisen täyttämisen suuntaa sen elementin kehystä ja tasapainotettujen elementtien viimeisen rivin sijaintia.

Huomautus:Sisäpiirteisillä elementeillä unicode-bidi-ominaisuusdirection-ominaisuus sovelletaan vain, kun arvo on asetettu embed tai bidi-override.

direction-ominaisuudella on kaksi arvoa: ltr ja rtl. Useimmissa tapauksissa oletusarvo on ltr, joka näyttää tekstin vasemmalta oikealle. Jos haluat näyttää tekstin oikealta vasemmalle, käytä arvoa rtl.

CSS-tekstiominaisuudet

Työkalupakka

CSS viittausoppikirja

CSS esimerkit

CSS testit

CSS oppitunnit

Sponsoroitu linkki