10 CSS teksto stiliaus ypatybių

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Kaskadiniai stiliaus lapai (CSS) aprašo, kaip HTML rodo elementus ekrane. CSS gali valdyti kelių tinklalapių išdėstymą keliomis kodo eilutėmis.

CSS turi formatavimo ypatybes, kurios turi įtakos teksto tarpui, išvaizdai ir lygiavimui. Štai keletas ypatybių, kurias galite naudoti teksto stiliui programuoti programos puslapiuose.

DIENOS VAIZDO ĮRAŠO PAGALBA

1. Teksto spalva

The spalva ypatybė nurodo pagrindinę teksto priekinio plano spalvą. Galite naudoti iš anksto nustatytą spalvos pavadinimą, pvz raudona , baltas , arba žalias . Taip pat galite naudoti šešioliktainę vertę arba kitus vienetus, pvz., RGB, HSL ir RGBA.

CSS sistemos kaip Tailwind CSS turi įmontuotą spalvų funkciją, kuri rodo įvairius atspalvius. Taip lengviau išsirinkti pageidaujamą atspalvį. Pakeiskime šių antraščių spalvą naudodami kai kurias iš šių savybių:

 <body> 
    <h1>Change My Color</h1> 
 
    <h2>Change My Color</h2> 
 
    <h3>Change My Color</h3> 
 
    <h4>Change My Color</h4> 
</body>

CSS atrodys taip:

 h1 { 
    color: orange; 
} 
 
h2 { 
    color: #ff6600; 
} 
 
h3 { 
    color: rgb(255, 102, 0); 
} 
 
h4 { 
    color: hsl(24, 100%, 50%); 
}

Ir stilizuotas tekstas atrodys taip:

2. Fono spalva

Galite naudoti fono spalva sukurti nuosavybę patrauklūs fonai . Naudokite jį norėdami nustatyti skirtingus fonus šioms antraštėms:

 <body> 
    <h1>Change My Background Color</h1> 
 
    <h2>Change My Background Color</h2> 
 
    <h3>Change My Background Color</h3> 
 
    <h4>Change My Background Color</h4> 
</body>

Su šiuo CSS:

BA13C1DC5271EE6A4BE05CBBD389AB8A79FA390

Kai naršyklė pateiks šį puslapį, jis atrodys maždaug taip:

3. Teksto lygiavimas

The teksto lygiavimas ypatybė nustato horizontalų teksto lygiavimą. Ši vertė gali būti paliko , teisingai , centras , arba pateisinti .

Lygiavimo reikšmė ištempia kiekvieną teksto eilutę, todėl jos visos užima vienodą plotį dešinėje ir kairėje paraštėse. Norėdami ištirti šias keturias reikšmes, naudokite šį pavyzdinį kodą:

 <body> 
    <h1>Align Me Left</h1> 
 
    <h2> Align Me Right</h2> 
 
    <h3>Align Me center</h3> 
 
    <p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>  
 
    <p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p> 
 
</body>

Naudokite šį CSS, kad pritaikytumėte skirtingus lygiavimus:

 h1 { 
   text-align: left; 
} 
 
h2 { 
   text-align: right; 
} 
 
h3 { 
   text-align: center; 
} 
 
.ex4{ 
   text-align: justify; 
}

Naršyklėje tai atrodys taip:

4. Teksto kryptis

The teksto kryptis savybė apibrėžia teksto kryptį. Apibrėžkite kryptį naudodami savybes rtl (iš dešinės į kairę) arba ltr (iš kairės į dešinę). Šie du nurodo, kuria kryptimi norite tekėti tekstui.

Pavyzdžiui, naudoti rtl kai dirbate su kalbomis, parašytomis iš dešinės į kairę, pavyzdžiui, hebrajų ar arabų. Tu naudoji ltr kalboms, parašytoms iš kairės į dešinę, pavyzdžiui, anglų.

Pavaizduokime tai toliau pateiktu kodu:

 <body> 
    <div> 
         <p class='ex1'>This paragraph goes from right to left. The cursor 
        moves from right to left when you type more information on the 
        page.</p> 
 
         <p id="ex2">This paragraph goes from left to right. The cursor moves 
         from left to write when you type more information on the page!</p> 
    </div> 
</body>

Su šiuo pridedamu CSS:

 .ex1 { 
    direction: rtl; 
} 
 
#ex2 { 
    direction: ltr; 
}

Galutinis rezultatas atrodys maždaug taip:

text-direction lygiuoja tekstą skirtingomis kryptimis

5. Teksto dekoravimas

The tekstas-dekoravimas ypatybė nustato dekoratyvinių eilučių išvaizdą tekste. Tai trumpinys teksto dekoravimo eilutė, tekstas-dekoracija-spalva, tekstas-dekoravimo-stilius , ir tekstas-dekoracija-storis nuosavybė. Jei nenorite turėti nuosavybės elementuose, kuriuose yra nuorodos, naudokite tekstas-dekoravimas: nėra ;

Turėtumėte vengti pabraukti įprastą tekstą, nes šis stilius paprastai nurodo nuorodą. Šioje iliustracijoje pateikiami keli kodo pavyzdžiai:

 <body> 
    <h1>Overline text decoration</h1> 
 
    <h2>Line-through text decoration</h2> 
 
    <h3>Underline text decoration</h3> 
 
    <p class="ex">Overline and underline text decoration.</p> 
 
    <p><a href="default.asp">This is a link</a></p> 
</body>

Naudodami šį CSS galite pritaikyti įvairius dekoravimo efektus:

 h1 { 
    text-decoration: overline; 
} 
 
h2 { 
    text-decoration: line-through; 
} 
 
h3 { 
    text-decoration: underline; 
} 
 
p.ex { 
    text-decoration: overline underline; 
} 
 
a { 
    text-decoration: none; 
}

Ir jie parodys maždaug taip:

6. Teksto transformacija

The teksto transformacija ypatybė nurodo, kokio tipo raidės rodomos. Tai gali būti didžiosios arba mažosios raidės. Taip pat galite jį naudoti norėdami rašyti didžiąją kiekvieno žodžio pirmąją raidę:

Toliau pateiktame pavyzdyje parodyta, kaip tai padaryti kode:

 <body> 
    <h1>Examples of text-transform property</h1> 
 
    <p class="uppercase">This sentence is in uppercase.</p> 
 
    <p class="lowercase">This sentence is in lower case.</p> 
 
    <p class="capitalize">Capitalize this text.</p> 
</body>

CSS failas:

 p.uppercase { 
    text-transform: uppercase; 
} 
 
p.lowercase { 
    text-transform: lowercase; 
} 
 
p.capitalize { 
    text-transform: capitalize; 
}

Su tokiu rezultatu:

teksto pakeitimas keičia tekstą į skirtingus atvejus

7. Tarpai tarp raidžių

The tarpai tarp raidžių ypatybė nurodo tarpą tarp raidžių tekste. Šis pavyzdys iliustruoja, kaip nurodyti skirtingus tarpų stilius.

 <body> 
    <h1>Examples of Letter-spacing</h1> 
 
    <h2>This is heading 1</h2> 
 
    <h3>This is heading 2</h3> 
</body>

CSS faile naudokite pikselius ar kitus matavimo vienetus:

 h2 { 
    letter-spacing: 7px; 
} 
 
h3 { 
    letter-spacing: -2px; 
}

Ir gautas tekstas bus ištemptas arba suspaustas:

tarpai tarp raidžių leidžia naudoti skirtingus tarpus tekste

8. Tarpai tarp žodžių

The žodžių tarpai ypatybė nurodo tarpą tarp žodžių tekste. Naršyklėse yra standartinis tarpų tarp žodžių ilgis, tačiau galite nustatyti savo. Šis pavyzdys iliustruoja, kaip padidinti arba sumažinti tarpą tarp žodžių:

 <body> 
    <h1>Examples of the Word-spacing Property</h1> 
 
    <p>Normal word spacing.</p> 
 
    <p class="ex1">Large word spacing.</p> 
 
    <p class="ex2">Small word spacing.</p> 
</body>

Naudojant šį CSS:

 p.ex1 { 
    word-spacing: 1rem; 
} 
 
p.ex2 { 
    word-spacing: -0.3rem; 
}

Galite aiškiai matyti žodžių tarpų poveikį:

9. Linijos aukštis

The linijos aukštis ypatybė nurodo tarpą tarp eilučių pastraipoje. Standartinis ir numatytasis eilutės aukštis daugumoje naršyklių yra apie 110–120%. Šis kodas parodo, kaip jį pakeisti:

 <body> 
    <h1>Using line-height</h1> 
 
    <p> 
        Standard line-height. 
 
        Standard line-height. 
 
    </p> 
 
    <p class="small"> 
        Small small line-height. 
 
        Small line-height 
 
    </p> 
 
    <p class="big"> 
        Bigger line-height. 
 
        Bigger line-height. 
 
    </p> 
</body>

Naudojant šį CSS:

„Windows 10“ sako, kad nėra interneto, bet yra

 p.small { 
    line-height: 0.7; 
} 
 
p.big { 
    line-height: 1.8; 
}

Rezultatus galite matyti tarp kiekvienos pastraipos eilutės:

10. Teksto šešėlis

The tekstas-šešėlis ypatybė tekstui taiko šešėlius. Turite nurodyti horizontalų šešėlį ir vertikalų šešėlį. Tekstas-šešėlis gali apimti spalvą ir suliejimo spindulį. Pavaizduokime tai tokiu kodu:

 <body> 
    <h1>Examples of Text-shadow effect.</h1> 
 
    <h1 class="ex1">Text-shadow with color</h1> 
 
    <h1 class="ex2">Text-shadow with blur effect.</h1> 
</body>

Su šiuo CSS:

 h1 { 
    text-shadow: 2px 2px; 
} 
 
.ex1 { 
    text-shadow: 2px 2px orange; 
} 
 
.ex2 { 
    text-shadow: 2px 2px 10px red; 
}

Suteiks keletą neįprastų ir įdomių efektų:

Kodėl verta mokytis CSS teksto stiliaus ypatybių?

CSS yra šiuolaikinio interneto dizaino pagrindas. Ar vanilės pavidalu, ar rėmuose, pagrindinė CSS savybių funkcija yra ta pati. Įvaldę teksto formatavimo ypatybes, galite sukurti patrauklias ir skaitomas vartotojo sąsajas.

Naujausioje CSS versijoje CSS3 pristatomos naujos koncepcijos nuo animacijos iki kelių stulpelių išdėstymo. Šios koncepcijos palengvina profesionalių programų ir dokumentų kūrimą.