Decorarea paginii web și dimensiunea fontului în HTML

Va fi util pentru designerii web novici să cunoască modalități de stilizare a textului unei pagini web. Acestea includ alinierea, culoarea, dimensiunea fontului și multe altele.

Există mai multe etichete asociate cu formatarea. Cel mai frecvent utilizat este „p” - paragraful. Are parametri opționali care definesc aspectul textului.

Primul și principalul parametru este „aliniați”. Acesta definește alinierea textului și poate fi „stânga”, „dreapta”, „centru” și „justificare” - alinierea pe partea stângă, pe partea dreaptă, în centru și, respectiv, pe toată lățimea blocului. Rețineți că poziția textului nu este setată în raport cu marginile ecranului, ci în cadrul paragrafului.

Apoi urmează parametrii „clasă” și „id”. Ele determină la ce clasă aparține obiectul dat și identificatorul acestuia. Acesta poate include și atributul „stil”. - setează stilul de bloc în linie. Toate aceste proprietăți sunt legate de CSS, care vor fi discutate mai jos.

Eticheta „p” există un dezavantaj - nu îl puteți folosisetați aspectul fontului, de exemplu, culoarea sau dimensiunea acestuia. În aceste scopuri, se intenționează o altă etichetă - „font”. Toți parametrii săi determină modul în care va arăta textul.

Primul atribut al acestei etichete este „culoare”.După cum ați fi putut ghici, acesta setează culoarea. Acest parametru poate lua atât nume („alb”, „galben”, „magenta”), cât și valori în sistemul RGB. Acest lucru se face după cum urmează: mai întâi, se pune un semn # și apoi trei numere sunt indicate în notație hexazecimală de la 00 la ff sau de la 0 la 255 - în zecimal - cantitatea de roșu, verde și albastru în culoarea finală. De exemplu, pentru a folosi roșu, scrieți "# ff0000", galben - "# ffff00".

Următorul atribut este „față”. Acesta definește fontul. De exemplu, poate fi setat la „Times New Roman” sau „Tahoma”.

Și, în sfârșit, parametrul „size” este responsabil pentru dimensiunea fontului în HTML. Este nevoie de o valoare numerică - dimensiune.

De exemplu, pentru a afișa textul în albastru și cu fontul „Comic Sans MS” în 15 puncte, trebuie să definiți eticheta „p” cu parametrii:

color = "# 6666ff" face = "Comic Sans MS" size = "15"

Există, de asemenea, mai multe etichete care vă permit să specificați un anumit tip de formatare: „b” - aldinată, „i” - cursiv, „u” - subliniat. Toate nu au parametri.

Setați atributele textului în HTML - dimensiunea fontului,setul cu cască este destul de incomod. Imaginați-vă că trebuie să alternați blocuri cu diferite modele de text. Apoi, trebuie să definiți aceleași atribute pentru fiecare dintre etichete. Acest lucru se poate face mult mai convenabil folosind foi de stil CSS în cascadă. De exemplu, pentru a crea o clasă de imagine numită „myclass” cu același stil ca în exemplul anterior, adăugați următoarea linie la eticheta „style”:

#myclass {font: rgb (102,102,255) "Comic Sans MS" 15pt;}

Aici „rgb (102.102.255)” setează culoarea, „ComicSans MS "este tipul de caractere, iar" 15pt "este dimensiunea fontului. Culoarea poate fi setată și după numele și fontul - atât în ​​dimensiune, cât și în pixeli (pentru aceasta trebuie să scrieți, de exemplu," 20px " ).

Pentru a aplica acest design, trebuie să scrieți în eticheta „p”:

class = "myclass"

Puteți stiliza orice alt text în același mod. Este suficient să setați parametrul „clasă” cu valoarea clasei pe care doriți să o utilizați.

Și pentru a crea un identificator numit „myid”, trebuie să scrieți în „stil”:

#myid {font: rgb (102,102,255) "Comic Sans MS" 15pt;},

iar în eticheta „p” setați atributul „id” cu valoarea „myid”.

Clasa și ID-ul sunt cam același lucru. În acest caz, o etichetă poate avea atât prima, cât și a doua declarată:

class = "myclass" id = "myid"

Există două moduri de a schimba aspectultext - HTML și CSS. Dacă aveți nevoie să stilizați unul sau două blocuri, atunci utilizați HTML. Și pentru un număr mare de paragrafe cu aceeași formatare, CSS este mai convenabil.

După cum puteți vedea, modificarea dimensiunii fontului în HTML este rapidă. Cheia programării este practica, așa că încercați mai mult și veți reuși!