Descriere: Stiluri pentru fonturi
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
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:
Cod: Selectaţi tot
<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: Selectaţi tot
<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 <font>.
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimată în pixeli:
Cod: Selectaţi tot
<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> Dimensiunea exprimată prin keywords foloseşte cuvinte în loc de cifre. Şapte cuvinte înlocuiesc dimensiunile de la 1 la 7 de la vechea etichetă FONT FACE din HTML.
Cod: Selectaţi tot
[b]CSS keyword numar FONT size[/b]
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7 Procentele sunt o altă valoare pe care o poate lua font-size. Această modalitate poate fi vizualizată diferit de browsere diferite.
Ca verificare folosiţi acelaşi 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: Selectaţi tot
<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: Selectaţi tot
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style> 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: Selectaţi tot
<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>