simple-webdesign.com » CSS http://www.simple-webdesign.com/blog Web design made simple! Mon, 05 Dec 2011 13:13:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Scurt tutorial CSS: formatarea textului http://www.simple-webdesign.com/blog/scurt-tutorial-css-formatarea-textului/ http://www.simple-webdesign.com/blog/scurt-tutorial-css-formatarea-textului/#comments Tue, 10 Feb 2009 11:34:47 +0000 Simple http://www.simple-webdesign.com/blog/?p=591
  • Scurt tutorial CSS – Diferenta dintre CLASS si ID
  • Scurt tutorial CSS: elementul text
  • Scurt tutorial CSS – Introducerea CSS in pagina
    • ]]>     Nu de mult spuneam cate ceva despre cum poti formata un text folosind doar css-ul. Insa cum procedam in cazul in care ne dorim mai multe tipuri si mai multe formate de text in aceasi pagina? Voi incerca sa spun doar cateva cuvinte despre asta, nu inainte de a preciza ca acest tutorial este valabil doar daca se folosesc div-uri in crearea unui site sau a unei pagini. Dar sa pornesc la drum.

    Pentru simplitate, presupunem ca avem urmatoarea structura pentru o pagina simpla:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->

	<div id="continut">
       <h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>


    Dupa cum se vede, aceasta este o structura simpla, in care am folosit un div denumit “container” in care practic voi ingloba tot continutul, iar apoi inca doua div-uri pentru partea de inceput a site-ului (header) si continut. Nu am mai inclus si partea de final sau un meniu pentru a simplifica acest tutorial. In header avem un “heading” pentru titlul site-ului si o mica descriere, iar in continut, un titlu, un paragraf cu un text si un link. Acestea sunt si elementele pe care dorim sa le formatam folosind CSS-ul. Pentru fiecare din aceste div-uri, am folosit ID-uri (click aici pentru e afla de ce).

    Cea mai simpla metoda e sa definim in tag-ul “body” proprietatile textului pe care il dorim, de exemplu:

    body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #0066CC;
}

    In acest fel insa, toate textele de pe site vor avea culoarea albastra si marimea de 16 pixeli, mai putin heading-ul h1 care va avea o marime standard, ceva mai mare. Pentru a evita acest lucru, vom formata practic fiecare text in parte. Sa spunem ca ne dorim ca textul din header sa fie scris cu Arial, heading-ul il vrem negru si scris mare, iar descrierea site-ului, o vrem sa fie ceva mai mica si scrisa cu un font gri. Pentru asta va trebui sa definim in css fiecare element, insa va trebui sa precizam si locatia elementului. Daca am defini doar un singur element h1 ca avand marimea de 20 pixeli, atunci toate heading-urile h1 din site vor avea marimea de 20 de pixeli. Daca insa definim elementul h1 din div-ul “header”, atunci toate proprietatile definite pentru el vor avea efect doar in “header”, iar asta se face asa:

    #header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

    Ce am facut mai sus? Practic i-am spus browser-ului ca fiecare text din interior-ul div-ului “header” sa fie de tip Arial. Puteam sa definesc fontul pentru fiecare element in parte, insa asta ar insemna sa scriu de cel putin doua ori acelasi lucru, fapt care mareste inutil marimea fisierului CSS.
    Este indicat sa se foloseasca mai multe elemente care au proprietati comune, in acelasi loc, separate prin virgula.
    Mai departe, am definit heading-ul H1 ca fiind negru si avand marimea de 24 pixeli, iar mai jos, descrierea site-ului care se afla in paragraf, ca fiind de doar 16 pixeli, de culoare gri.
    Pentru ca in general atat un paragraf cat si un heading au implicit marginea ceva mai indepartata decat marginea textului efectiv, am adaugat si un “margin: 0px;” pentru a elimina distanta dintre cele doua elemente.

    In acest fel am formatat elementele din header, pentru cele din paragrag, procedura fiind aceeasi, cu diferenta ca aici am definit si un link:

    #continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}

    Nu o mai lungesc pentru ca pana acum v-ati dat seama ca aici fontul si culorile sunt schimbate, nu-i asa? Codul final, unde sunt adaugate toate cele de mai sus arata asa:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
<style type="text/css">
<!--
body {
	margin: 10px;
}
#header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

#continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->

	<div id="continut">
	<h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>

    Iar pentru a vedea rezultatul final, este suficient sa introduceti acest cod intr-un fisier html pe care sa il vizualizati in browerul vostru preferat. Retineti insa ca aici eu am inclus css-ul in fisierul html, insa aceasta practica nu este deloc recomandata. Eu am folosit-o doar pentru a vizualiza mai bine formatarea textelor din diferite zone ale unei pagini sau a unui site. Daca nu stiti inca cum se adauga fisierele CSS, click aici.

    Related posts:

    1. Scurt tutorial CSS – Diferenta dintre CLASS si ID
    2. Scurt tutorial CSS: elementul text
    3. Scurt tutorial CSS – Introducerea CSS in pagina
    ]]>     http://www.simple-webdesign.com/blog/scurt-tutorial-css-formatarea-textului/feed/ 2     Scurt tutorial CSS: elementul text http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-text/ http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-text/#comments Tue, 20 Jan 2009 09:14:12 +0000 Simple http://www.simple-webdesign.com/blog/?p=304
  • Scurt tutorial CSS: formatarea textului
  • Scurt tutorial CSS: elementul body
  • Scurt tutorial CSS – sintaxa CSS
    • ]]>     De astazi voi incerca (din nou) sa reiau seria tutorialelor CSS, nu de alta, dar poate pentru unii sunt folositoare. Astazi, incerc sa spun doar cateva cuvinte despre formatarea textului folosind proprietatile CSS-ului.

    Sa luam exemplul de mai jos:

    <!--
p {
color: #003366;
word-spacing: 10px;
letter-spacing: 10px;
text-decoration: underline;
vertical-align: baseline;
text-transform: capitalize;
text-align: right;
}
-->

    Acest cod practic va controla cum se afiseaza text-ul dintr-un paragraf, adica cam tot ce se afla intre <p> si </p>. Ce face insa fiecare linie in parte:

    color: #003366; - am atribuit o culoare textului.  Aceasta poate sa fie o valoare scrisa in hexa, ca in acest exemplu sau pur si simplu se poate preciza direct culoarea, de exemplu red.
    word-spacing: 10px; – face exact ceea ce spune ca face. Adica mareste spatiul dintre cuvinte cu 12 pixeli. Valoarea implicita este normal, daca nu se specifica nimic.
    letter-spacing: 10px; – ca si mai sus, aceasta proprietate mareste practic distanta dintre litere cu 10 pixeli sau desigur, cu cat se specifica. Aceasta valoare poate sa fie si negativa
    text-decoration: underline; - si aici cred ca e destul de evident, nu? Aceasta proprietate practic ii spune textului sa fie subliniat. Mai poate lua valorile: overline, blink, line-through.
    text-transform: capitalize; – transforma afisarea cu majuscula a primei litere dintr-un cuvant. Mai poate lua valorile:  uppercase si lowercase.
    text-align: right; – am aliniat textul la stanga. Valoarea implicita este left, insa poate sa fie si center.

    Daca e sa aplicam toate aceste proprietati unui paragraf aflat intr-un html, rezultatul ar arata asa:
    Paragraf formatat cu CSS

    Pe langa cele precizate mai sus, pentru formatarea unui text folosind CSS-ul, se mai pot utiliza si urmatoarele proprietati:

    line-height – pentru a stabili distanta dintre 2 randuri de text succesive.
    font-style – pentru a face textul italic.
    font-size – pentru a stabili marimea fontului.
    font-family – pentru a preciza ce fonturi se vor folosi.

    Legat de font-family e bine de stiut ca cel putin deocamdata este indicat sa se foloseasca doar urmatoarele fonturi:

    Arial, Helvetica, sans-serif
    Times New Roman, Times, serif
    Courier New, Courier, monospace
    Georgia, Times New Roman, Times, serif
    Verdana, Arial, Helvetica, sans-serif
    Geneva, Arial, Helvetica, sans-serif

    Si asta pentru ca aceste fonturi sunt prezente pe majoritatea calculatoarelor. Folosirea unui font mai special face ca pagina sa se afiseze corect doar pe calculatoarele care are instalat acel font.

    In mare cam asta este, desi se mai pot spune multe despre formatarea unui text dintr-o pagina web. Promit sa revin insa cat de curand cu detalii legate de aceste aspecte (de exemplu, cum aranjam si formatam textele in zone diferite ale unui site).

    Related posts:

    1. Scurt tutorial CSS: formatarea textului
    2. Scurt tutorial CSS: elementul body
    3. Scurt tutorial CSS – sintaxa CSS
    ]]>     http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-text/feed/ 2     Free download: The Art & Science of CSS http://www.simple-webdesign.com/blog/free-download-the-art-science-of-css/ http://www.simple-webdesign.com/blog/free-download-the-art-science-of-css/#comments Wed, 26 Nov 2008 07:25:17 +0000 Simple http://www.simple-webdesign.com/blog/?p=482
  • Download day
  • sxc.hu si alte resurse foto free
  • Download Google Chrome
    • ]]>     The art & science of CSS Aham, ati citit bine. Sitepoint.com ofera gratuit spre download, o carte (format PDF) ce in mod normal costa aproape 30$. Acum insa, pentru o perioada scurta, puteti sa descarcati aceasta carte gratuit. De fapt, va trebui sa avetit totusi un cont de twitter, de unde sa dati un Folow celor de la sitepoint.com. Contul lor de twitter este aici. Dupa ce intrati in “urmarire generala”, veti primi in foarte scurt timp si link-ul de download.

    Cat despre carte, inca nu am apucat sa o citesc, insa am “rasfoit-o” putin si pot sa va spun ca merita un mic efort pentru a o avea.

    Related posts:

    1. Download day
    2. sxc.hu si alte resurse foto free
    3. Download Google Chrome
    ]]>     http://www.simple-webdesign.com/blog/free-download-the-art-science-of-css/feed/ 0     Scurt tutorial CSS: elementul body http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-body/ http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-body/#comments Wed, 30 Jan 2008 07:22:13 +0000 Simple http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-body/
  • Scurt tutorial CSS: elementul text
  • Scurt tutorial CSS – sintaxa CSS
  • Vand baza de date cu 2 milioane adrese mail
    • ]]>     Astazi m-am uitat din nou in header-ul acestui blog si am vazut pe undeva ca scrie cate ceva despre web design :), asa ca m-am pus putintel pe treaba ca sa va pot prezenta un nou tutorial legat de folosirea css-ului in compozitia unei pagini web. Unul din elementele esentiale si cu care practic ar trebui sa se inceapa constructia propriu zisa a fisierului .css este “body“. Body este elementul care practic defineste “starea” generala a paginii si a site-ului ce se doreste a fi construit. Sa luam exemplu de mai jos:

    <style>
BODY {
background-color: red;
background-image: url(imagini/imagine.jpg);
background-attachment:fixed;
background-repeat: repeat-y;
}
</style>

    Prin background-color: blue; se seteaza culoarea fundalului, in acest caz, culoarea rosie (red). In loc de “red”, puteam scrie numele oricarei alte culori, insa e preferabil codul hexazecimal al acesteia (#FF0000 pentru rosu) sau transparent, care de fapt este valoarea implicita.


    Prin background-image; url(imagini/imagine.jpg); se impune ca fundal imaginea imagine.jpg din directorul imagini.

    Scriind background-attachment: fixed; se va otine un fundal static.

    Sa presupunem ca avem un fundal rosu de 50×50 pixeli, avand in centru un cerc alb. Implicit, fundalul se va repeta de un numar de ori pe verticala si de alt numar de ori pe orizontala. Daca dorim ca acest jundal sa se repete doar pe o directie, vom folosi background-repeat: repeat-y; sau background-repeat: repeat-x; pentru a repeta imaginea pe verticala, respectiv orizontala.

    Daca insa dorim ca fundalul sa nu se repete, atunci vom scrie: background-repeat: no-repeat;.

    In concluzie, proprietatea background-repeat poate lua 4 valori:

    • repeat ( care e implicita )
    • repeat-x
    • repeat-y
    • no-repeat.

    Pozitia imaginii de fundal va fi stabilita atribuind valori proprietatii background-position. Aceste valori pot fi:

    1. Un ansamblu de doua procente:
      Exemplu: background-position: 15% 50%;. In acest caz, coltul din stanga-sus al imaginii se va afla, fata de coltul din stanga-sus al paginii, la 15% pe orizontala si 50% pe verticala.
      Setarea implicita este: background-position: 0%0%;. Daca scriem background-position: 100%100%;, coltul din dreapta-jos al imaginii se va afla in coltul din dreapta-jos al paginii.
    2. Un singur procent:
      Se subintelege ca acesta se refera la directia orizontala. Implicit, pentru verticala avem 50%.
    3. Un ansamblu de doua distante:
      Exemplu: background-position: 10px 15px;. Coltul din stanga-sus al imaginii e la 10 pixeli pe orizontala si la 15 pixeli pe verticala de coltul din stana-sus al ecranului. Aceste distante pot lua si valori negative (-5px sau -10px, etc. )
    4. O combinatie procent + distanta:
      Exemplu: background-position: 10cm 15%;
    5. Un cuvant-cheie sau o combinatie de doua cuvinte-cheie:
      Cuvintele-cheie sunt top, center, bottom pentru directia orizontala si left, center, right pentru verticala. Cuvintele-cheie nu pot fi combinate cu un procent sau o distanta.

    Exemplul 2:

    <style>
BODY {
background-image: url(imagini/imagine.gif);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: 20%;
}
</style>

    Codul de mai sus va avea ca rezultat o pagina web av�nd imagine.gif din directorul imagini drept fundal. Fundalul este fix si nu se repeta. Imaginea imagine.gif se va afla la 20% pe orizontala si la 50% pe verticala de coltul din stanga-sus al paginii.

    Exemplul 3:

    <style>
BODY {
background-image: url(fundal.gif);
background-repeat: no-repeat;
}
</style>

    Aceste doua linii de cod CSS rezolva o problema pe care HTML-ul nu era capabil sa o rezolve satisfacator: problema repetarii fundalului. Ca sa nu se repete la rezolutia de 800 x 600 de exemplu, ar fi fost necesar ca fundalul sa fie o imagine de 800 x 600; totusi, la rezolutii mai mari, fundalul s-ar fi repetat. Designerul paginii ar fi putut realiza un fundal avand dimensiunile egale cu cea mai mare rezolutie folosita pe monitoarele actuale, dar acesta ar fi avut dimensiuni de zeci de KB si deci n-ar fi fost practic. Paginile web de acest gen nu mai sunt la moda, insa o practica des intalnita acum este acea de a folosi sintagma background-repeat: repeat-x; in combinatie cu o imagine avand doar 1 pixel latime si o marime mult mai mare pe inaltime. De exemplu, o imagine in degrade de la rosu spre alb (de sus in jos) de doar 1×500 pixeli nu este foarte mare in KB, iar daca o punem sa se repete doar pe axa x a site-ului, vom obtine un efect reusit cu minim de efort si cu un consum foarte redus de banda. Astfel de imagini in degrade se mai numesc si gradieti, sau “gradients” in engleza (sper ca e ok traducerea).

    Daca sunteti in lipsiti de inspiratie, iata mai jos o mica lista cu gradienti, pusa la dispozitie de www.dezinerfolio.com:


    (click aici pentru download)
    Fisierul se poate importa in Photoshop, insa daca folositi alte programe, se pot folosi cu usurinta culorile sau combinatiile de culori folosindu-va de un Color Picker.

    O alta practica obisnuita pentru imaginile de background ale site-urilor, este folosirea imaginilor dingate (cam asa cum se vede in partea de sus a acestui site. Aceste imagini sunt putini mai mari, insa ideea de baza este aceeasi: folosirea unei imagini care se repeta pe axa x in general. Acest blog foloseste de exemplu urmatorul cod pentru background:

    background:#1e1e1e url(images/headerstripe_loop.jpg) repeat-x 0 0;

    Deja stiti ce inseamna fiecare, nu? Si o ultima recomandare: daca nu vreti sa va chinuiti sa faceti imaginea “dungata”, gasiti pe internet o serie de astfel de generatoare gratuite cu ajutorul carora puteti genera o imagine dungata in cateva minutele. Poate cel mai bun exemplu in acest sens il gasiti la www.stripegenerator.com.Si cu asta…basta. Spor la treaba :)

    Related posts:

    1. Scurt tutorial CSS: elementul text
    2. Scurt tutorial CSS – sintaxa CSS
    3. Vand baza de date cu 2 milioane adrese mail
    ]]>     http://www.simple-webdesign.com/blog/scurt-tutorial-css-elementul-body/feed/ 1     Scurt tutorial CSS – Diferenta dintre CLASS si ID http://www.simple-webdesign.com/blog/scurt-tutorial-css-diferenta-dintre-class-si-id/ http://www.simple-webdesign.com/blog/scurt-tutorial-css-diferenta-dintre-class-si-id/#comments Tue, 22 May 2007 11:28:16 +0000 Simple http://www.simple-webdesign.com/blog/scurt-tutorial-css-diferenta-dintre-class-si-id/
  • Scurt tutorial CSS – sintaxa CSS
  • Scurt tutorial CSS: formatarea textului
  • Scurt tutorial CSS: elementul body
    • ]]>     Nu de mult va spuneam ca am sa revin putin la selectorii de tip CLASS si ID, deoarece nu e chiar tot una care dintre ei sunt folositi, iar daca sunteti incepatori in ai CSS-ului, e bine de stiut care este diferenta dintre cei doi.

    In primul rand, ID-urile se pot folosi doar o singura data intr-un document html. CLASS-urile se pot folosi de mai multe ori. In general, ID-urile se folosesc pentru elementele principale ale unei pagini, de exemplu header-ul, continutul principal, elementele din subsolul paginii (footer), etc. Selectorii de tip CLASS se folosesc pentru elementele care apar de mai multe ori intr-un fisier html sau intr-un document (la meniuri de exemplu).

    In al doilea rand, e bine de stiut ca ID-urile vor fi intotdeauna prioritare fata de selectorii de tip CLASS.

    <style type="text/css">
#verde {color:green}
.rosu {color:red}
</style>
<body>
<p id="verde">rand pentru ID verde</p>
<p class="rosu">rand pentru CLASS rosu</p>
<p id="verde" class="rosu">rand pentru ID si CLASS combinat</p>
</body>

    Codul de mai sus va avea urmatorul efect:

    rand pentru ID verde
    rand pentru CLASS rosu
    rand pentru ID si CLASS combinat

    Mai exact, in primul rand am setat un ID pentru un font verde si s-a afisat verde, apoi un CLASS pentru un font rosu si se afiseaza rosu, iar in ultimul rand le-am introduse pe amandoua. Se vede insa in rezultat ca doar ID-ul are efect, din moment ce randul este in afisat in verde. In practica, e bine sa nu se procedeze astfel, mai sus fiind doar un exemplu. Cei doi selectori trebuiesc folositi separat pentru elementele html dintr-o pagina.

    Related posts:

    1. Scurt tutorial CSS – sintaxa CSS
    2. Scurt tutorial CSS: formatarea textului
    3. Scurt tutorial CSS: elementul body
    ]]>     http://www.simple-webdesign.com/blog/scurt-tutorial-css-diferenta-dintre-class-si-id/feed/ 3