21MarDespre text

Poţi modifica mărimea şi forma textului, pe pagina ta web, folosindu-te de urmatoarele proprietăţi :

font-family

Acesta este font-ul de bază, precum Times New Roman, Arial sau Verdana.

Font-ul pe care îl precizezi, trebuie să existe şi în celelalte calculatoare, nu numai al tău, deaceea e bine să te foloseşti de cele aflate în majoritatea PC-urilor, şi anume Times New Roman, Arial şi Verdana, dar dacă mai foloseşti şi altele, desparţi cu virgulă şi le scrii.Combinaţia de font-uri primare, se mai întâmplă să difere la unele computere faţă de altele, de exemplu e posibil ca un utilizator să aibă font-family: arial, hervetica, acest lucru fiind dat de browser, şi atunci ce ai menţionat tu în cod să nu corespundă, browserul se va adapta şi va arata fontul primar care corespunde.

Dacă în denumirea font-ului avem mai mult de un cuvânt, atunci vom scrie aşa font-family: “Times New Roman”.

font-size

Această proprietate denotă mărimea font-ului.Trebuie avută mare grijă cu această proprietate, deoarece încă mai avem la dispoziţie tag-urile pentru titluri (h1,h2 etc.) şi nu ar trebui să le uităm, dar puteţi să diferenţiaţi marimea font-ului dintr-un paragraf faţă de cel dintr-un titlu, şi normal să apelaţi la această proprietate.

font-weight

Folosim această proprietate pentru a desemna dacă font-ul este scris cu bold sau normal.În genere avem codul sub forma font-weigt: bold sau font-weight: normal. Pe lângă asta mai potem folosi şi : bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 sau 900, dar opţiunile astea sunt doar teoretic utilizabile, deoarece unele browsere gândesc ceva de genul “de ce să ne complicăm” şi permit doar utilizarea optiunilor bold si normal .

font-style

Această proprietate va spune dacă fontul este italic sau normal şi vom avea scris sub forma : font-style: italic sau font-style: normal.

text-decoration

Această proprietate ne va face textul să fie subliniat sau nu. Codul îl putem scrie astfel :

  • text-decoration: overline - plasează o linie deasupra textului
  • text-decoration: line-through - o linie va trece direct pe mijlocul textului
  • text-decoration: underline - textul este subliniat.

Aceste comenzi in genere sunt folosite pentru a decora link-urile, si deasemenea dacă doreşti să nu se aplice nici o subliniere sau altfel de linie, codul e text-decoration: none .

text-transform

Cu această proprietate aplici testului un stil de scriere.Adică:

  • text-transform: capitalize - prima literă din orice cuvânt va fi scrisă cu majusculă
  • text-transform: uppercase - toate cuvintele sunt scrise cu majuscule
  • text-transform: lowercase - toate cuvintele sunt scrise cu litere mici
  • text-transform: none - va lăsa textul să arate aşa cum este editat manual.

Şi ca să avem un model lucrat, vă ofer urmatorul cod :

body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

Text spacing

Proprietăţile letter-spacing şi word-spacing sunt pentru a determina spatiul dintre litere respectiv dintre cuvinte, şi asta se poate face cu valori în lungime sau normale (normal).

Proprietatea line-height determina distanta dintre rânduri, într-un paragraf de exemplu, şi notaţia se poate face cu numere (asta presupune o notaţie în funcţie de marimea fontului ,de exemplu “2″ va face ca spaţiul sa fie de 2 ori cât fontul), precizând o lungime, procentual sau normal.

Proprietatea text-align , va alinia textul dintr-un element astfel : left, right, center sau justify .

Proprietatea text-idend va identifica primul rând din paragraf şi fie adaugi o proprietate pentru lungime fie procentual, să îl faci mai mare.În general se foloseşte mai puţin această proprietate, în partea web-ului.

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}

Leave a Reply

You must login to post a comment.




Schiţe, design

andrew.cornett posted a photo:


Just squeezed out this HTML email in about an hour or so thanks to MailChimp!. ReadyTech HTML Email Toni Panayotov posted a photo:


The first concept for the homepage of a school project. Client: Mambo Lounge Nightclub San Francisco CA. mambo_lounge tractorpirate posted a photo:


. www.m7lives.com comsodesign88 posted a photo:


planning on a new business card, so im starting to create som mock ups... business card mock up SprittiBee posted a photo:


Who's scared? Looks like he is more than I am.. l-n-c2 tracystone posted a photo:


Website Design and development for Teahouse Media.

teahousemedia.com. Teahouse Media Website Design Noah and Cat posted a photo:


In the next few months, life and time willing, I plan on starting a news website for the canal community in England, Ireland, Scottland and Wales. This is an in-progress design mock-up of where I'm headed. I'm not quite sure what to do with the bottom bit yet but I'm browsing other news sites for ideas.

The content right now is purely artificial. In most spots anyway.. Towpath Telegraph (In Progress) jpguarin posted a photo:


Nueva pagina de VSP*
www.vsp.com.co. www.vsp.com.co kpucu.com posted a photo:


Redesign for www.bgstar.eu. BgStar.EU redesign

Last.fm

  • Încarcă ...