Acasa
Aceste elemente specifică argumentul fontului care se asociază unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.
În cazul de faţă se remarcă asemănarea cu eticheta font din HTML care acceptă argumentele type, style, size şi weight.
font-family
font-family este de fapt o listă de fonturi din care browserul va folosi în ordinea în care le recunoaşte (primul folosit va fi primul din listă, dacă nu este recunoscut îl foloseşte pe al doilea şi tot aşa mai departe). Este recomandat ca ultima poziţie din listă să fie un font generic (de exemplu serif, sans-serif sau monospace).
În situaţia în care numele fontului este format din două cuvinte, se încadrează între ghilimele duble pentru ca browserul să le interpreteze împreună.
Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaşte primele două fonturi din listă, folosindu-l pe al treilea:
Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o funcţionare asemănătoare cu eticheta .
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimată în pixeli:
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 în care se înlocuieşte 20px cu unul din cuvintele de mai sus.
Procentele sunt o altă valoare pe care o poate lua font-size. Această modalitate poate fi vizualizată diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.
font-style
font-style este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal şi italic.
font-weight este parametrul care stabileşte grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan în interiorul aceeaşi etichete fiind despărţite de caracterul ; (punct şi virgulă).
Exemplu: folosirea unui stil compus aplicat etichetei p
În cazul de faţă se remarcă asemănarea cu eticheta font din HTML care acceptă argumentele type, style, size şi weight.
font-family
font-family este de fapt o listă de fonturi din care browserul va folosi în ordinea în care le recunoaşte (primul folosit va fi primul din listă, dacă nu este recunoscut îl foloseşte pe al doilea şi tot aşa mai departe). Este recomandat ca ultima poziţie din listă să fie un font generic (de exemplu serif, sans-serif sau monospace).
În situaţia în care numele fontului este format din două cuvinte, se încadrează între ghilimele duble pentru ca browserul să le interpreteze împreună.
Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaşte primele două fonturi din listă, folosindu-l pe al treilea:
- Cod:
<html>
<head>
<title>Exemplu</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>
- Cod:
<html>
<head>
<title>Exemplu</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>
Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o funcţionare asemănătoare cu eticheta .
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimată în pixeli:
- Cod:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</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 în care se înlocuieşte 20px cu unul din cuvintele de mai sus.
Procentele sunt o altă valoare pe care o poate lua font-size. Această modalitate poate fi vizualizată diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.
font-style
font-style este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal şi italic.
- Cod:
<style type="text/css">
<!-- p{font-style: italic;}-->
</style>
font-weight este parametrul care stabileşte grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
- Cod:
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan în interiorul aceeaşi etichete fiind despărţite de caracterul ; (punct şi virgulă).
Exemplu: folosirea unui stil compus aplicat etichetei p
- Cod:
<html>
<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>
