Tutorial CSS
Stiluri pentru fonturi
Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.
font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.
Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>
font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.
Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
| CSS keyword | numar FONT size |
| xx-small | 1 |
| x-small | 2 |
| small | 3 |
| medium | 4 |
| large | 5 |
| x-large | 6 |
| xx-large | 7 |
Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.
<!-- p{font-style: italic;}-->
</style>
font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
<!-- p{font-weight: 700;}-->
</style>
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>
13 Dec 2024 4:21 AM