Prezentare generală a atributului HTML Style
Codul HTML are nevoie de atributul de stil pentru paginile web care să fie redate în browserele web cum ar fi Chrome, FireFox, IE pentru ca acestea să fie afișate așa cum sunt destinate să arate. Etichetele HTML pot conține o varietate de informații, iar atributul de stil controlează aspectul informațiilor conținute în blocurile HTML folosind stilul în linie.
În acest articol, vom învăța mai multe despre atributul stilului HTML, care nu este altceva decât un set de reguli care definesc modul în care va fi redată o pagină în browserul web.
Lista atributelor de stil HTML
Iată o listă a tuturor proprietăților de stil care pot fi utilizate pentru a influența și controla designul elementelor HTML însoțite de un exemplu practic:
1. Culoare de fundal
Cu această proprietate CSS, putem seta culoarea de fundal pentru orice element HTML cum ar fi,
etc.
Exemplu
My background is blue
ieşire:
2. Culoare
Culoarea fontului textului într-un element HTML poate fi controlată prin setarea atributului de culoare la numele de culoare corect sau la codul HEX sau la codul RGB.
Exemplu
My font color is blue
ieşire:
3. Culoare de graniță
Putem seta culoarea chenarului oricărui element HTML dacă dorim să-i adăugăm un chenar.
Exemplu
Granița mea este roșie
ieşire:
Așa cum vedeți în codul de mai sus, proprietatea de bord acceptă 3 proprietăți în următoarea ordine: „Culoare de bordură pentru lățimea marginii”.
4. Imagine-fundal
De asemenea, putem seta o imagine ca fundal folosind proprietatea imaginii de fundal după cum urmează:
Exemplu:
ieşire:
5. Repetare de fundal
După cum vedeți în exemplul de mai sus, când o imagine este setată ca fundal folosind proprietatea de fundal imagine; în mod implicit, repetă imaginea atât pe orizontal cât și pe verticală. Cu toate acestea, este posibil ca unele imagini să fie repetate vertical sau orizontal sau este posibil să nu fie necesare. Acest comportament poate fi controlat prin setarea valorii dorite în raport cu proprietatea de fundal-repetare și poate fi utilizat doar atunci când se folosește imaginea de fundal, altfel nu va adăuga nicio valoare de styling atunci când este utilizat ca proprietate autonomă.
Valoarea „repeta-x” este utilizată pentru a permite repetarea imaginii doar pe orizontală.
Valoarea „repeta-y” este utilizată pentru a permite imaginea să fie repetată doar pe verticală.
Valoarea „nu se repetă” este utilizată pentru a opri orice fel de repetare a imaginii de fundal.
Să modificăm exemplul de mai sus pentru a îmbunătăți imaginea de fundal.
Exemplu
ieşire:
Putem compara exemplele de mai sus și putem înțelege că cu imaginea de fundal putem adăuga o imagine ca fundal și cu repetare de fundal, putem controla repetarea imaginii de fundal.
6. Poziția de fundal
Cu această proprietate, putem defini poziția imaginii de fundal.
Exemplu
ieşire:
7. Margini
CSS ne oferă proprietăți pentru a stabili marjele pe toate cele patru laturi ale unui element HTML sau am putea adăuga margini la o anumită parte a elementului.
Cu marginea de sus poate adăuga o marjă în partea de sus a elementului, marginea-dreapta va adăuga o marjă la dreapta elementului, marginea-stânga va adăuga o marjă în stânga elementului și marginea-jos va adăuga o marjă spre partea de jos a elementului. În loc să utilizăm aceste 4 proprietăți, putem folosi, de asemenea, proprietatea de marjă și să-i setăm valorile conform cerinței noastre.
Exemplu
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Căptușeală
Proprietatea de umplere definește spațiul dintre conținutul unui element și marginile acestuia. Putem folosi proprietatea „padding” sau proprietăți individuale de umplere, cum ar fi padding-top, padding-bottom, padding-left, padding-right pentru a seta căptușeala pentru partea de sus, jos, stânga sau dreapta a conținutului unui element.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Înălțimea și lățimea
Înălțimea și lățimea sunt cele mai de bază proprietăți CSS utilizate pentru a defini înălțimea și lățimea oricărui element HTML. Acestea pot fi setate la o valoare a pixelului de 200px sau la un procent de 10%, 20% etc.
10. Aliniere text
Această proprietate este utilizată pentru a seta direcția orizontală în care am dori să aliniem textul unui element. Valoarea poate fi setată la centru, la dreapta sau la stânga.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Decorarea textului
Proprietatea de decorare a textului poate fi utilizată pentru a seta decorațiuni precum subliniere, linie sau suprasolicitare peste text în HTML.
Exemplu:
Acest lucru este subliniat
ieşire:
12. Spațiu de scrisori
După cum sugerează și numele, această proprietate este utilizată pentru a defini distanța dintre litere / caractere dintr-un cuvânt. I se poate atribui o valoare de pixel pozitivă sau negativă pentru a mări sau micșora distanța dintre litere.
Exemplu:
Cuvintele mele sunt suprapuse
ieşire:
13. linie-înălțime
Înălțimea liniei definește distanța dintre liniile verticale. Ca și distanța dintre litere, înălțimea liniei poate fi setată la o valoare pozitivă sau negativă a pixelilor. Să trecem în revistă exemplul de mai jos pentru a înțelege mai bine:
Exemplu:
Acest paragraf are o înălțime de linie mică.
Acest paragraf are o înălțime de linie mică.
ieşire:
14. Direcția textului
Uneori, dacă conținutul paginii web nu este în engleză, ci în alte limbi precum araba, care urmează o convenție de la dreapta la stânga, va trebui să schimbăm direcția textului. În astfel de cazuri, putem inversa direcția textului.
Exemplu:
Sunt de la stânga
ieşire:
15. Umbra textului
Această proprietate adaugă o umbră textului.
Exemplu:
Am o umbră cenușie
ieşire:
16. Familia fontului
Putem defini clasa de font pentru text într-un element. Putem defini mai multe familii de fonturi separate printr-o virgulă ca un sistem fallback pentru a gestiona scenariile în care o clasă de font preferată nu poate fi încărcată.
- Stil de font: cu proprietatea stilului de font putem adăuga efectul italic sau oblic la text.
Exemplu:
Acesta este stilul oblic.
ieşire:
- Greutatea fontului: Această proprietate definește greutatea unui font.
Exemplu:
Acesta este un paragraf îndrăzneț
Rezultat:
Atributele de design prezentate deasupra blocurilor noastre de construcție cu design UI și UX. Ei continuă să evolueze pe măsură ce noile versiuni de CSS sunt introduse.
Articole recomandate
Acesta este un ghid pentru atributul HTML Style. Aici discutăm lista tuturor proprietăților de stil care pot fi utilizate pentru a influența și controla designul elementelor HTML cu ajutorul unor exemple practice. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- Stiluri de fonturi HTML
- Stiluri de listă HTML
- Etichete HTML de bază
- Avantajele HTML
- Rame HTML
- Inversează JavaScript
- Blocuri HTML
- Setați o culoare de fundal în HTML cu Exemplu