Miten tekstin sulkeminen tai välilehti Web-sivulle tai HTML: lle?

Tekstiä voidaan erottaa eri tavoin. Kuitenkin yhteensopivuuden varmistamiseksi useiden selaimien ja saavutettavuuden kanssa keskustelemme suosituimmista menetelmistä tekstin syventämiseksi Web-sivullesi.

Suositeltu menetelmä CSS & HTML: n avulla

Tekstin tai kappaleen syventämiseksi yleisimmin käytetty ja suositeltavin menetelmä olisi käyttää CSS: ää. Alla on erilaisia ​​esimerkkejä siitä, miten CSS: ää voidaan käyttää tekstin syöttämiseen. Jokainen näistä esimerkeistä sijoitetaan HTML-tunnisteiden väliin.

Seuraavassa esimerkissä luodaan tyyli luokka nimeltä "välilehti", joka viittaa tekstiin ja kappaleeseen 40 pikseliä vasemmalta.

Kun yllä oleva koodi on kohdassa, voit käyttää sitä missä tahansa vaiheessa lisäämällä sen kohtaan (

) tunnisteet kuten kuvassa.

Esimerkki välilehdestä

CSS: n sisällyttäminen HTML-dokumenttiin, kuten edellä on esitetty, on nimeltään "in-line" CSS. Se on hyödyllinen muutosten tekemiseen nopeasti, mutta pitkällä aikavälillä on vaikeaa muuttaa myöhemmin.

Sen sijaan voit ottaa kaikki CSS-koodisi ja sijoittaa sen erilliseen tiedostoon .css. Tämän jälkeen voit linkittää tähän yhteen tiedostoon mistä tahansa HTML-dokumentista, ja kyseinen asiakirja voi käyttää näitä CSS-ominaisuuksia. Ulkoisen CSS-tiedoston käyttäminen helpottaa CSS: n vaihtamista myöhemmin, koska kaikki CSS on määritelty yhdessä paikassa.

Jos haluat linkittää ulkoiseen CSS-tiedostoon, lisää HTML-dokumenttiin seuraava rivi elementtiin (sen jälkeen, kun basic.css

Kun tämä .css-tiedosto on luotu, muokkaa tiedostoa ja lisää sama CSS-koodi.

.tab {margin-left: 40px; }

Lopuksi, kun edellä mainitut vaiheet on suoritettu, voit siirtää minkä tahansa tekstin käyttämällä samaa

esimerkki olemme osoittaneet edellä.

On myös muita syvennystapoja. Jos esimerkiksi halusit vain lisätä kohdan ensimmäisen rivin, käytät yllä olevaa CSS-riviä käytettäessä seuraavaa riviä.

.tab {text-indent: 40px}

Vinkki: Voit myös syöttää prosenttiosuuden. Esimerkiksi 40px: n (pikseliä) korottamisen sijasta voit korvata viivan 5%: lla tekstin tekstin 5%: lla nykyisestä näkymästä. Voit myös käyttää em-tilaa, kun määritetään sisennyksen leveys.

Bonus Vihje: Voit myös vaihtaa vasemmasta syvennyksestä oikealle syvennykselle muuttamalla marginaalia vasemmalle marginaalin oikealle.

Suositeltu menetelmä HTML: n avulla

Samat tulokset voidaan saavuttaa käyttämällä HTML: n sisäistä tyyliä. Yllä olevaa CSS-esimerkkiä käytettäessä on helpompi ylläpitää useita web-sivuja, jos tarvitset vain yhtä tyyliä, kun voit käyttää seuraavaa esimerkkiä.

Tämä teksti on sisennetty.

Tässä ensimmäisessä esimerkissä kaikki kappaleetunnisteen teksti on upotettu 40 pikseliä vasemmalta. Kaikki muut kohdatunnisteet eivät ole sisäkkäisiä.

Tämä teksti on sisennetty.

Tässä toisessa esimerkissä vain kappaleen ensimmäinen tekstirivi on syvennetty 40 pikseliä vasemmalta. Mitään ylimääräisiä tekstirivejä kyseisessä kohdassa ei tueta.

Vinkki: Voit myös syöttää prosenttiosuuden. Esimerkiksi 40px: n (pikseliä) korottamisen sijasta voit korvata viivan 5%: lla tekstin tekstin 5%: lla nykyisestä näkymästä. Voit myös käyttää em-tilaa, kun määritetään sisennyksen leveys.

Bonus Vihje: Voit myös vaihtaa vasemmasta syvennyksestä oikealle syvennykselle muuttamalla marginaalia vasemmalle marginaalin oikealle.

Vaihtoehtoinen menetelmä

Toinen yleinen (mutta virheellinen) menetelmä tekstin syventämiseksi käyttää tunnisteita, kuten seuraavassa esimerkissä on esitetty. Vaikka tämä on paljon helpompi ratkaisu, on olemassa esteettömyysongelmia, jotka voivat aiheutua käyttämällä tätä ratkaisua tekstin syventämiseen. Tämä tunniste on tarkoitettu tekstin lainaamiseen eikä syvennykseen.

Tämä teksti olisi sisennetty