Home-theater-designers
Kaskádové štýly (CSS) popisujú, ako HTML zobrazuje prvky na obrazovke. CSS dokáže ovládať rozloženie viacerých webových stránok pomocou niekoľkých riadkov kódu.
CSS má vlastnosti formátovania, ktoré ovplyvňujú medzery, vzhľad a zarovnanie textu. Tu je niekoľko vlastností, ktoré môžete použiť na štýl textu na stránkach aplikácie.
VYUŽITIE VIDEA DŇA
1. Farba textu
The farba vlastnosť určuje hlavnú farbu popredia vášho textu. Môžete použiť preddefinovaný názov farby napr červená , biely , alebo zelená . Môžete použiť aj hexadecimálnu hodnotu alebo iné jednotky ako RGB, HSL a RGBA.
CSS rámce ako Tailwind CSS majú vstavanú funkciu farieb, ktorá zobrazuje rôzne odtiene. To vám uľahčuje výber odtieňa, ktorý preferujete. Zmeňme farbu nasledujúcich nadpisov pomocou niektorých z týchto vlastností:
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS bude vyzerať takto:
h1 {
color: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
A štylizovaný text bude vyzerať takto:
2. Farba pozadia
Môžete použiť farba pozadia vlastnosť vytvoriť príťažlivé pozadie . Použite ho na nastavenie rôznych pozadí pre nasledujúce nadpisy:
<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>
S nasledujúcim CSS:
BA13C1DC5271EE6A4BE05CBBCD389AB8A79FA390Keď váš prehliadač vykreslí túto stránku, bude vyzerať asi takto:
3. Zarovnanie textu
The zarovnanie textu vlastnosť nastavuje vodorovné zarovnanie textu. Táto hodnota môže byť vľavo , správny , centrum , alebo odôvodniť .
Hodnota zarovnania roztiahne každý riadok textu, takže všetky zaberajú rovnakú šírku na pravom a ľavom okraji. Na preskúmanie týchto štyroch hodnôt použite nasledujúci vzorový kód:
<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>
Ak chcete použiť rôzne zarovnania, použite nasledujúci CSS:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
V prehliadači to bude vyzerať takto:
ako zastaviť hackerov vo vašom telefóne
4. Smer textu
The smer textu vlastnosť definuje smer textu. Definujte smer pomocou vlastností rtl (sprava doľava) resp ltr (zľava doprava). Tieto dva určujú, ktorým smerom sa má text pohybovať.
Napríklad použite rtl pri práci s jazykmi písanými sprava doľava, ako je hebrejčina alebo arabčina. Používaš ltr pre jazyky písané zľava doprava, ako je angličtina.
ako zapnúť dotykový displej Windows 10
Znázornime to pomocou kódu nižšie:
<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 týmto sprievodným CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
Konečný výsledok bude vyzerať asi takto:
5. Textová dekorácia
The text-dekorácia vlastnosť nastavuje vzhľad dekoratívnych čiar na texte. Je to skratka pre text-decoration-line, text-dekorácia-farba, text-decoration-style , a text-dekorácia-hrúbka nehnuteľnosť. Ak si neželáte mať vlastnosť na prvkoch, ktoré majú odkazy, použite text-dekorácia: žiadna ;
Mali by ste sa vyhnúť podčiarknutiu normálneho textu, pretože tento štýl zvyčajne označuje odkaz. Nasledujúci obrázok ukazuje niekoľko príkladov v kóde:
<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>
Pomocou tohto CSS môžete použiť rôzne efekty dekorácie:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
A zobrazia niečo takéto:
6. Transformácia textu
The textová transformácia vlastnosť určuje typ veľkých písmen, v ktorých sa písmená zobrazujú. Môže to byť veľké alebo malé písmeno. Môžete ho použiť aj na veľké začiatočné písmeno každého slova:
Nasledujúci príklad ukazuje, ako to urobiť v kóde:
<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>
Súbor CSS:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
S nasledujúcim výsledkom:
7. Medzery medzi písmenami
The medzi písmenami vlastnosť určuje medzeru medzi písmenami v texte. Nasledujúci príklad ilustruje, ako zadať rôzne štýly medzier.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
V súbore CSS použite pixely alebo iné merné jednotky:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
A výsledný text sa roztiahne alebo stlačí:
8. Medzery medzi slovami
The medzery medzi slovami vlastnosť určuje medzeru medzi slovami v texte. Prehliadače majú štandardnú dĺžku medzery medzi slovami, ale môžete si nastaviť vlastnú. Nasledujúci príklad ilustruje, ako zväčšiť alebo zmenšiť medzeru medzi slovami:
<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>
Pomocou tohto CSS:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
Môžete jasne vidieť účinok medzier medzi slovami:
9. Výška riadku
The line-height vlastnosť určuje medzery medzi riadkami v odseku. Štandardná a predvolená výška riadku vo väčšine prehliadačov je približne 110 % až 120 %. Nasledujúci kód ilustruje, ako ho zmeniť:
<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>
Pomocou nasledujúceho CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
Výsledky môžete vidieť medzi jednotlivými riadkami v každom odseku:
10. Textový tieň
The textový tieň vlastnosť aplikuje tiene na text. Musíte určiť horizontálny tieň a vertikálny tieň. Text-tieň môže zahŕňať farbu a polomer rozostrenia. Znázornime to nasledujúcim kódom:
<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 týmto CSS:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Vytvorí niekoľko nezvyčajných a zaujímavých efektov:
ako nabúrať sim kartu do bezplatnej služby
Prečo sa učiť vlastnosti štýlu CSS textu?
CSS je základom moderného webového dizajnu. Či už vo svojej vanilkovej podobe alebo vo frameworkoch, základná funkcia vlastností CSS je rovnaká. Ovládanie vlastností formátovania textu vám umožňuje vytvárať atraktívne a čitateľné používateľské rozhrania.
Najnovšia verzia CSS, CSS3, predstavuje nové koncepty od animácií až po rozloženie s viacerými stĺpcami. Tieto koncepty uľahčujú vytváranie profesionálnych aplikácií a dokumentov.