Home-theater-designers
Cascading Style Sheets (CSS) apraksta, kā HTML parāda elementus ekrānā. CSS var kontrolēt vairāku tīmekļa lapu izkārtojumu, izmantojot dažas koda rindiņas.
CSS ir formatēšanas rekvizīti, kas ietekmē teksta atstarpi, izskatu un līdzinājumu. Tālāk ir norādīti daži rekvizīti, kurus varat izmantot teksta stila veidošanai lietotņu lapās.
DIENAS VIDEO MAKEUSEOF
1. Teksta krāsa
The krāsa rekvizīts norāda jūsu teksta galveno priekšplāna krāsu. Varat izmantot iepriekš definētu krāsas nosaukumu, piemēram, sarkans , balts , vai zaļš . Varat arī izmantot hex vērtību vai citas vienības, piemēram, RGB, HSL un RGBA.
CSS ietvari, piemēram Tailwind CSS ir iebūvēta krāsu funkcija, kas parāda dažādus toņus. Tādējādi jums ir vieglāk izvēlēties sev vēlamo toni. Mainīsim šādu virsrakstu krāsu, izmantojot dažus no šiem rekvizītiem:
programmatūras lejupielādes vietnes bezmaksas pilna versija
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS izskatīsies šādi:
h1 {
color: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
Un stilizētais teksts izskatīsies šādi:
2. Fona krāsa
Jūs varat izmantot fona krāsa īpašums, ko izveidot pievilcīgs fons . Izmantojiet to, lai iestatītu dažādus fonus šādiem virsrakstiem:
<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>
Izmantojot šādu CSS:
BA13C1DC5271EE6A4BE05CBBD389AB8A79FA390Kad jūsu pārlūkprogramma atveido šo lapu, tā izskatīsies apmēram šādi:
3. Teksta līdzināšana
The teksta līdzināšana rekvizīts nosaka teksta horizontālo līdzinājumu. Šī vērtība var būt pa kreisi , pa labi , centrs , vai attaisnot .
Taisnošanas vērtība izstiepj katru teksta rindiņu, tāpēc tās visas aizņem vienādu platumu labajā un kreisajā malā. Izmantojiet šo koda paraugu, lai izpētītu šīs četras vērtības:
<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>
Izmantojiet šādu CSS, lai lietotu dažādus līdzinājumus:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
Pārlūkprogrammā tas izskatīsies šādi:
4. Teksta virziens
The teksta virziens īpašība nosaka teksta virzienu. Definējiet virzienu, izmantojot īpašības rtl (no labās puses uz kreiso) vai ltr (no kreisās uz labo). Šie divi norāda, kurā virzienā vēlaties teksta plūsmu.
Piemēram, izmantojiet rtl strādājot ar valodām, kas rakstītas no labās uz kreiso, piemēram, ebreju vai arābu. Jūs lietojat ltr valodām, kas rakstītas no kreisās uz labo pusi, piemēram, angļu valodā.
Ilustrēsim to ar tālāk norādīto 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>
Ar šo pievienoto CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
Gala rezultāts izskatīsies apmēram šādi:
5. Teksta dekorēšana
The teksta dekorēšana Īpašums nosaka teksta dekoratīvo līniju izskatu. Tas ir saīsinājums vārdam teksta dekorācijas līnija, teksts-dekorācija-krāsa, teksts-dekorācijas stils , un teksts-dekorācija-biezums īpašums. Ja nevēlaties, lai rekvizīts būtu elementiem, kuriem ir saites, izmantojiet teksta noformējums: nav ;
galaktikas s8 ekrāna nomaiņas izmaksas
Jums nevajadzētu pasvītrot parastu tekstu, jo šis stils parasti norāda uz saiti. Šajā ilustrācijā ir parādīti daži koda piemēri:
<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>
Izmantojot šo CSS, varat izmantot dažādus dekorēšanas efektus:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
Un viņi parādīs kaut ko līdzīgu šim:
6. Teksta pārveidošana
The teksta pārveidošana rekvizīts norāda reģistra veidu, kurā burti parādās. Tas var būt ar lielajiem vai mazajiem burtiem. Varat arī izmantot katra vārda pirmo burtu ar lielo burtu:
Šis piemērs parāda, kā to izdarīt kodā:
<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 fails:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Ar šādu rezultātu:
7. Burtu atstarpes
The burtu atstarpes rekvizīts norāda atstarpi starp burtiem tekstā. Šis piemērs ilustrē, kā norādīt dažādus atstarpju stilus.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
CSS failā izmantojiet pikseļus vai citas mērvienības:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
Un iegūtais teksts tiks izstiepts vai saspiests:
8. Vārdu atstarpes
The vārdu atstarpes rekvizīts norāda atstarpi starp vārdiem tekstā. Pārlūkprogrammām ir standarta garums atstarpei starp vārdiem, taču jūs varat iestatīt savu. Šis piemērs parāda, kā palielināt vai samazināt atstarpi starp vārdiem:
<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>
Izmantojot šo CSS:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
Jūs varat skaidri redzēt vārdu atstarpes efektu:
9. Līnijas augstums
The līnijas augstums rekvizīts norāda atstarpi starp rindām rindkopā. Standarta un noklusējuma līnijas augstums lielākajā daļā pārlūkprogrammu ir aptuveni 110% līdz 120%. Šis kods parāda, kā to mainīt:
<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>
Izmantojot šādu CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
Jūs varat redzēt rezultātus starp katru rindiņu katrā rindkopā:
10. Teksta ēna
The teksts-ēna rekvizīts tekstam piemēro ēnas. Ir jānorāda horizontālā ēna un vertikālā ēna. Teksts-ēna var ietvert krāsu un izplūšanas rādiusu. Ilustrēsim to ar šādu 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>
Izmantojot šo CSS:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Radīs dažus neparastus un interesantus efektus:
kāpēc mans telefons turpina pārkarst?
Kāpēc mācīties CSS teksta stila īpašības?
CSS ir mūsdienu tīmekļa dizaina mugurkauls. Neatkarīgi no tā, vai tas ir vaniļas formā vai ietvaros, CSS īpašību pamatfunkcija ir vienāda. Teksta formatēšanas rekvizītu apgūšana ļauj izveidot pievilcīgas un lasāmas lietotāja saskarnes.
Jaunākā CSS versija CSS3 ievieš jaunas koncepcijas, sākot no animācijas līdz vairāku kolonnu izkārtojumiem. Šīs koncepcijas atvieglo profesionālu lietojumprogrammu un dokumentu izveidi.