Web design si fonturi cu CSS

Astazi vom vorbi despre optiunile pe care le avem la dispozitie atunci cand dorim sa lucram cu fonturi in CSS pentru realizarea proiectului nostru de design web. Primul pas este sa decidem ce proprietati dorim sa atasam segmentului de text pe care il tintim. Pentru font putem sa folosim mai multe proprietati:

  • font-family (Times New Roman, Arial, Helvetica, Verdana, Georgia, Palatino, etc.)
  • font-size (px,pt,em - 1em=16px)
  • font-style (normal, italic, oblique, inherit)
  • font-variant (normal, small-caps, inherit)
  • font-weight (normal, bold, bolder, lighter, 100...900, inherit)

Daca din ratiuni de design sau pur si simplu din neatentie nu specificam anumite proprietati pentru textul din cadrul siteului web, atunci browserul va folosi proprietatile predefinite, cum ar fi de exemplu dimensiunea fontului - 16px sau 1em. Este recomandat sa se foloseasca unitatea de masura em pentru a evita problemele de conversie care pot aparea in cazul unor versiuni de Internet Explorer.

In continuare vom folosi urmatoarea secventa html pentru a exemplifica utilizarea proprietatilor pentru font in cadrul majoritatii elementelor care pot contine text:

Titlu 1

Titlu 2

Titlu 3

Titlu 4

Titlu 5
Titlu 6

Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.

Enimnunc et habitur mollisi sagittis velit a eu famet leo in. Habitaemauris non wisi sit dolorem laoreet ac semper nam nunc sapientum. Malesuadatellus estique accum cum convallicitur id quis habituris cursus congue loreet.
  • Elementul 1
  • Elementul 2
  • Elementul 3
  • Elementul 4
  • Elementul 5

Incepem prin a defini unele elemente de baza valabile pentru toate tagurile din codul html. Definim o culoare predefinita a textului, setam o culoare pentru fundal si setam dimensiunea standard a fontului la 100% din valoarea predefinita a browserului. Pentru a defini familia de fonturi vom folosi o enumerare pentru a preintampina eventualele probleme care pot aparea in cazul in care utilizatorul nu are instalat fontul pe care dorim noi sa-l folosim pentru afisare. In cazul in care se parcurge intreaga lista de familii de fonturi atunci se foloseste un font din familia sans-serif.

Puteti sa remarcati ca pentru setarea culorii textului se foloseste varianta americana a cuvantului "color" in loc de varianta englezeasca "colour". Aceasta din urma nu va functiona, deci nu o folositi.

In continuare stabilim reguli de afisare a textului pentru fiecare element prezent in HTML si adaugam si distantele fata de margini precum si grosimea si culoarea acestora.

Deci codul CSS aferent:

body{
font-size:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFFFF;
}

h1{font-size:1.5em;}
h2{font-size:1.2em; color:#333333;}
h3{font-size:1em; color:#666666;}
h4{font-size:.9em; color:#999999;}
h5{font-size:.8em; color:#CCCCCC;}
h6{font-size:.7em; color:#666600;}

p{
font-size:.8em;
font-weight:bold;
}

blockquote{
font-size:.8em;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#999999;
border-right-color:#999999;
border-bottom-color:#999999;
border-left-color:#999999;
background-color:#DEDEDE;
}

ul{
font-size:.8em;
font-variant:small-caps;
}

Atat pentru astazi, va multumesc pentru timpul petrecut citind acest articol, sper ca ati gasit informatii utile si nu uitati sa ne spuneti despre ce doriti sa scriem folosind comentariile si datele de contact.

La revedere!

 

Daniel Ispas

0Comentarii la "Web design si fonturi cu CSS"

Adauga Comentariu

Mesaj

Trimite