Home-theater-designers
Cascading Style Sheets (CSS) opisuju kako HTML prikazuje elemente na zaslonu. CSS može kontrolirati izgled više web stranica s nekoliko redaka koda.
CSS ima svojstva oblikovanja koja utječu na razmak, izgled i poravnanje teksta. Evo nekih svojstava koja možete koristiti za stiliziranje teksta na stranicama svoje aplikacije.
što znači ovaj emoji?MAKEUSEOF VIDEO DANA
1. Boja teksta
The boja Svojstvo određuje glavnu boju prednjeg plana vašeg teksta. Možete koristiti unaprijed definirani naziv boje kao što je Crvena , bijela , ili zelena . Također možete koristiti hex vrijednost ili druge jedinice kao što su RGB, HSL i RGBA.
CSS okviri poput Stražnji vjetar CSS imaju ugrađenu značajku boja koja prikazuje različite nijanse. To vam olakšava odabir željene nijanse. Promijenimo boju sljedećih naslova koristeći neka od ovih svojstava:
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS će izgledati ovako:
h1 {
color: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
A stilizirani tekst će izgledati ovako:
2. Boja pozadine
Možete koristiti boja pozadine vlasništvo stvoriti privlačne pozadine . Koristite ga za postavljanje različitih pozadina za sljedeće naslove:
<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>
Sa sljedećim CSS-om:
h1 {
background-color: orange;
}
h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
Kada vaš preglednik prikaže ovu stranicu, izgledat će otprilike ovako:
3. Poravnanje teksta
The poravnanje teksta svojstvo postavlja horizontalno poravnanje teksta. Ova vrijednost može biti lijevo , pravo , centar , ili opravdati .
Vrijednost poravnanja rasteže svaki redak teksta, tako da svi zauzimaju istu širinu na desnoj i lijevoj margini. Upotrijebite sljedeći primjer koda da istražite ove četiri vrijednosti:
<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>
Koristite sljedeći CSS za primjenu različitih poravnanja:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
U pregledniku će se ovo pojaviti ovako:
4. Smjer teksta
The tekst-smjer svojstvo definira smjer teksta. Definirajte smjer pomoću svojstava rtl (zdesna na lijevo) ili ltr (s lijeva nadesno). Ova dva određuju smjer u kojem želite da tekst teče.
Na primjer, koristite rtl kada radite s jezicima koji se pišu s desna na lijevo poput hebrejskog ili arapskog. Ti koristiš ltr za jezike koji se pišu s lijeva na desno poput engleskog.
Ilustrirajmo to pomoću koda u nastavku:
<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>
S ovim popratnim CSS-om:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
Krajnji rezultat će izgledati otprilike ovako:
5. Dekoracija teksta
The tekst-ukras svojstvo postavlja izgled ukrasnih linija na tekstu. To je skraćenica za tekst-dekoracija-linija, boja-ukrasa-teksta, text-decoration-style , i tekst-ukras-debljina imovine. Ako ne želite imati svojstvo na elementima koji imaju veze, koristite tekst-ukras: nema ;
Trebali biste izbjegavati podcrtavanje uobičajenog teksta jer taj stil obično označava vezu. Sljedeća ilustracija prikazuje neke primjere u kodu:
<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>
Pomoću ovog CSS-a možete primijeniti različite efekte ukrašavanja:
najbolja besplatna aplikacija za čišćenje za android
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
I prikazat će nešto poput ovoga:
6. Transformacija teksta
The tekstualna transformacija svojstvo specificira vrstu slova koja se pojavljuju. To može biti velikim ili malim slovima. Možete ga upotrijebiti i za veliko slovo svake riječi:
Sljedeći primjer pokazuje kako to učiniti u kodu:
<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 datoteka:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Sa sljedećim rezultatom:
7. Razmak između slova
The razmak između slova Svojstvo određuje razmak između slova u tekstu. Sljedeći primjer ilustrira kako odrediti različite stilove razmaka.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
Koristite piksele ili druge mjerne jedinice u svojoj CSS datoteci:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
A rezultirajući tekst bit će rastegnut ili stisnut:
8. Razmak između riječi
The razmak između riječi Svojstvo određuje razmak između riječi u tekstu. Preglednici imaju standardnu duljinu razmaka između riječi, ali možete postaviti vlastitu. Sljedeći primjer ilustrira kako povećati ili smanjiti razmak između riječ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>
Koristeći ovaj CSS:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
Možete jasno vidjeti učinak razmaka riječi:
9. Visina linije
The linija-visina Svojstvo određuje razmak između redaka u odlomku. Standardna i zadana visina retka u većini preglednika je oko 110% do 120%. Sljedeći kod ilustrira kako to promijeniti:
<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>
Koristeći sljedeći CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
Možete vidjeti rezultate između svakog retka u svakom odlomku:
10. Sjena teksta
The tekst-sjena svojstvo primjenjuje sjene na tekst. Morate odrediti vodoravnu sjenu i okomitu sjenu. Tekst-sjena može uključivati boju i radijus zamućenja. Ilustrirajmo to sljedećim kodom:
<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>
S ovim CSS-om:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Proizvodit će neke neobične i zanimljive efekte:
Zašto učiti CSS svojstva stiliziranja teksta?
CSS je okosnica modernog web dizajna. Bilo u svom vanilla obliku ili u okviru, osnovna funkcija CSS svojstava je ista. Ovladavanje svojstvima oblikovanja teksta omogućuje vam stvaranje atraktivnih i čitljivih korisničkih sučelja.
Najnovija verzija CSS-a, CSS3, uvodi nove koncepte od animacija do izgleda s više stupaca. Ovi koncepti olakšavaju izradu profesionalnih aplikacija i dokumenata.