Prehľad atribútu štýlu HTML
HTML kód vyžaduje, aby boli webové stránky vykresľované vo webových prehľadávačoch, ako sú Chrome, FireFox, IE, aby boli zobrazené tak, ako majú vyzerať. Značky HTML môžu obsahovať rôzne informácie a atribút štýlu riadi vzhľad informácií obsiahnutých v blokoch HTML pomocou inline štýlu.
V tomto článku sa dozvieme viac o atribúte štýlu HTML, ktorý nie je ničím iným než súborom pravidiel, ktoré určujú spôsob vykresľovania stránky vo webovom prehliadači.
Zoznam atribútov štýlu HTML
Tu je zoznam všetkých vlastností štýlov, ktoré možno použiť na ovplyvnenie a kontrolu návrhu prvkov HTML, spolu s praktickým príkladom:
1. Farba pozadia
Pomocou tejto vlastnosti CSS môžeme nastaviť farbu pozadia pre ľubovoľný prvok HTML, napríklad
atď.
príklad
My background is blue
Výkon:
2. Farba
Farba písma textu v prvku HTML sa dá ovládať nastavením jeho atribútu farby na správny názov farby alebo HEX kód alebo RGB kód.
príklad
My font color is blue
Výkon:
3. Farba orámovania
Ak chceme k nemu pridať ohraničenie, môžeme nastaviť farbu orámovania ľubovoľného prvku HTML.
príklad
Moja hranica je červená
Výkon:
Ako vidíte vo vyššie uvedenom kóde, vlastnosť border prijíma 3 vlastnosti v nasledujúcom poradí: „Farba okraja so šírkou okraja-farba okraja“.
4. Obrázok pozadia
Obrázok môžeme nastaviť aj ako pozadie pomocou vlastnosti background-image takto:
Príklad:
Výkon:
5. Opakovanie pozadia
Ako vidíte vo vyššie uvedenom príklade, keď je obrázok nastavený ako pozadie pomocou vlastnosti background-image; v predvolenom nastavení opakuje obrázok horizontálne aj vertikálne. Niektoré obrázky však možno budete musieť zopakovať vertikálne alebo horizontálne alebo ich nebude potrebné opakovať. Toto správanie sa dá ovládať nastavením požadovanej hodnoty proti vlastnosti opakovania pozadia a môže sa použiť iba vtedy, keď sa používa obrázok na pozadí, nepridá žiadnu hodnotu štýlu, keď sa použije ako samostatná vlastnosť.
Hodnota „opakovať-x“ sa používa na umožnenie opakovania obrázka iba horizontálne.
Hodnota „opakovať-y“ sa používa na umožnenie opakovania obrázka iba vertikálne.
Hodnota „bez opakovania“ sa používa na zastavenie akéhokoľvek opakovania obrázka na pozadí.
Upravme vyššie uvedený príklad, aby sme vylepšili obrázok na pozadí.
príklad
Výkon:
Môžeme porovnávať vyššie uvedené príklady a pochopiť, že s obrázkom na pozadí môžeme pridať obrázok ako pozadie as opakovaním na pozadí môžeme riadiť opakovanie obrázka na pozadí.
6. Pozícia na pozadí
Pomocou tejto vlastnosti môžeme definovať polohu obrázka na pozadí.
príklad
Výkon:
7. Okraje
CSS nám poskytuje vlastnosti na nastavenie okrajov na všetkých štyroch stranách prvku HTML alebo by sme mohli pridať okraje na konkrétnu stranu prvku.
S okrajom-horný môžete pridať okraj na vrchol prvku, okraj-pravý pridá okraj napravo od prvku, okraj-ľavý pridá okraj naľavo od prvku a okraj-dole pridá okraj na spodok prvku. Namiesto použitia týchto 4 vlastností môžeme použiť aj vlastnosť margin a nastaviť jej hodnoty podľa našich požiadaviek.
príklad
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Výplň
Vlastnosť padding definuje medzeru medzi obsahom prvku a jeho hranicami. Môžeme použiť vlastnosť „výplň“ alebo jednotlivé výplňové vlastnosti, ako výplň-hore, výplň-dole, výplň-doľava, výplň-doprava, aby sme výplň nastavili na horný, dolný, ľavý alebo pravý obsah prvku.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Výška a šírka
Výška a šírka sú najzákladnejšie vlastnosti CSS používané na definovanie výšky a šírky ľubovoľného prvku HTML. Môžu byť nastavené na hodnotu pixla ako 200px alebo percento ako 10%, 20% atď.
10. Zarovnanie textu
Táto vlastnosť sa používa na nastavenie vodorovného smeru, v ktorom by sme chceli zarovnať text prvku. Hodnota môže byť nastavená na stred, doprava alebo doľava.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Textové dekorácie
Vlastnosť textovej dekorácie sa dá použiť na nastavenie dekorácií ako podčiarknutie, prelínanie alebo prekrytie textu v HTML.
Príklad:
Toto je podčiarknuté
Výkon:
12. Rozstup písmen
Ako už názov napovedá, táto vlastnosť sa používa na definovanie medzier medzi písmenami / znakmi v slove. Môže byť priradená kladná alebo záporná hodnota pixelu na zväčšenie alebo zmenšenie medzier medzi písmenami.
Príklad:
Moje slová sa prekrývajú
Výkon:
13. Výška riadku
Výška čiary definuje vzdialenosť medzi zvislými čiarami. Rovnako ako medzery medzi písmenami, aj výška riadku môže byť nastavená na kladnú alebo zápornú hodnotu pixla. Pre lepšie pochopenie si prečítajte nasledujúci príklad:
Príklad:
Tento odsek má malú výšku riadku.
Tento odsek má malú výšku riadku.
Výkon:
14. Smer textu
Niekedy, ak obsah webovej stránky nie je v angličtine, ale nejaký iný jazyk, napríklad arabčina, ktorý dodržiava právo na ľavú konvenciu, bolo by potrebné zmeniť smer textu. V takýchto prípadoch môžeme zmeniť smer textu.
Príklad:
Som sprava doľava
Výkon:
15. Tieň textu
Táto vlastnosť pridá tieň k textu.
Príklad:
Mám šedý tieň
Výkon:
16. Rodina písiem
Môžeme definovať triedu písma pre text v prvku. Ako núdzový systém môžeme definovať viacero rodín písiem oddelených čiarkou, aby sme zvládli scenáre, v ktorých nie je možné načítať preferovanú triedu písiem.
- Štýl písma: S vlastnosťou štýlu písma môžeme do textu pridať kurzívu alebo šikmý efekt.
Príklad:
Toto je šikmý štýl.
Výkon:
- Hmotnosť písma: Táto vlastnosť definuje hmotnosť písma.
Príklad:
Toto je odvážny odsek
Výkon :
Atribúty štýlu predstavené nad našimi stavebnými blokmi s návrhmi používateľského rozhrania a UX. Po zavedení nových verzií CSS sa naďalej vyvíjajú.
Odporúčané články
Toto je sprievodca atribútom štýlu HTML. Tu diskutujeme zoznam všetkých vlastností štýlov, ktoré je možné použiť na ovplyvnenie a kontrolu návrhu prvkov HTML pomocou praktických príkladov. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- Štýly písma HTML
- Štýly zoznamu HTML
- Základné značky HTML
- Výhody HTML
- Rámčeky HTML
- Obrátiť sa na JavaScript
- Bloky HTML
- Nastavte farbu pozadia v HTML s príkladom