5.1 Atributul de stil al unei etichete
Și încă câteva lucruri utile despre HTML. Pe măsură ce web-ul a început să câștige popularitate, a existat o cerere din ce în ce mai mare pentru paginile web care să fie frumos sau foarte frumos proiectate. Această problemă a fost rezolvată prin utilizarea style
.
Forma generală a acestui atribut are următorul format:
<tag style="name=value;name2=value2;nameN=valueN">
Valoarea atributului, separată style
de punct și virgulă, listează toate „stilurile” care trebuie aplicate etichetei.
Să presupunem că doriți să afișați o imagine ca un pătrat 100*100
și, de asemenea, să o faceți pe jumătate transparentă. Pentru a face acest lucru, trebuie să îi adăugați stiluri speciale:
- lățime=100px;
- înălțime=100px;
- opacitate=0,5;
Apoi codul HTML cu această imagine va arăta astfel:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Există sute, dacă nu mii, de stiluri. Și dezvoltatorii de browsere vin în mod constant cu altele noi. E bine că studiezi pentru a fi dezvoltator Java, nu designer web :)
5.2 Stiluri CSS populare
Este puțin probabil să scrieți mult cod HTML sau să îi editați stilurile în viața dvs., dar orice se poate întâmpla. De exemplu, scrieți câteva pagini HTML mici pentru a testa fișierul API
. Prin urmare, cunoașterea stilurilor de bază HTML
poate fi de ajutor.
Mai jos sunt cele 10 cele mai comune pentru dezvoltatorii backend:
# | Nume | Exemplu | Descriere |
---|---|---|---|
1 | lăţime | lățime: 100px | lățimea elementului în pixeli |
2 | înălţime | inaltime: 50% | înălțimea elementului ca procent (din lățimea părintelui) |
3 | afişa | display: niciunul | element de afișare (nu afișa element) |
4 | vizibilitate | vizibilitate: ascuns | vizibilitatea elementului (elementul este ascuns, dar spațiul îi este rezervat) |
5 | culoare | culoarea rosie; | culoarea textului |
6 | culoare de fundal | culoare de fundal: fum | culoare de fundal |
7 | frontieră | chenar: 1px negru solid; | chenar (lățime 1px, culoare neagră, linie continuă) |
8 | font | font: verdana 10pt | font: verdana, dimensiune 10pt |
9 | aliniere text | text-align: centru; | alinierea textului pe orizontală |
10 | marginea | margine: 2px | umplutură în afara elementului |
Nu trebuie să vă amintiți aceste etichete, totul este pe Internet. Mai mult, fiecare „stil” are propriul său set de valori valide și propriul format pentru descrierea valorii. Uită-te cel puțin la border
sau font
.