Sunteți pe pagina 1din 3

CSS IN WEB DESIGN

Badea George *

Lucrarea prezenta trateaza pe scurt un aspect destul de important pentru persoanele implicate mai mult sau mai putin in web design.Se va prezenta rolul fisierelor de tip CSS in realizarea unui site web; cele trei moduri de aplicare in cadrul codului HTML si avantajele folosirii foilor de stil.Un punct de plecare pentru cei neinitiati si interesati in a isi dezvolta abilitatile de proiectare a paginilor web.

Inainte de a putea vorbi despre ce inseamna, la ce foloseste si cum se aplica CSS-ul (Cascading Style Sheets) in cadrul realizarii unui site web trebuie imi primul rand sa mentionam ca acesta se aplica asupra codului de tip HTML (Hyper Text Markup Language). Daca prin simpla utilizare a limbajului HTML se poate obtine un site, in cazul CSS-ul de sine statator nu. De obicei, utilizati codul HTML pentru aranjarea continutului in pagina, iar tot ceea ce tine de prezentare (culori, fonturi, fundaluri, borduri, margini etc) se realizeaza cu ajutorul fisierul de tip CSS.Pe scurt se poate afirma ca CSS-ul realizeaza separarea prezentarii paginii de structura sa. Aplicarea foilor de stil in cascada asupra codului HTML se poate realiza in trei moduri:

1. Stiluri interne;

Dupa cum se poate deduce si din nume, aceasta modalitate presupune inserarea foilor de stil direct in interiorul fiecarei pagini HTML pe care doriti sa utilizati stilurile respective.Plasarea se face intre tagurile <head> </head> ca in modelul de mai jos.Aceasta metoda este indicat sa fie folosita atunci cand aveti un numar mic de pagini.Inserarea codului direct in pagina HTML inseamna ca atunci cand veti dori sa modificati un anumit aspect va trebui sa modificati stilurile din fiecare pagina in parte.

.

<head> <title>titlu pagina</title> <style type="text/css">Aici se vor defini stilurile CSS</style>

</head>

vor defini stilurile CSS</style> </head> 2. Stiluri externe; Stilurile externe constau in realizarea

2. Stiluri externe;

Stilurile externe constau in realizarea cu ajutorul oricarui editor de text simplu sau cu editoare avansate a unui fisier de tip CSS.Acesta va contine doar codul CSS fara cel HTML.Fisierul va fi salvat cu extensia .css.Inserarea se realizeaza prin plasare unui link intre tagurile <head> </head> ca in aceste doua exemple:

* student, an II, Facultatea de Stiinta si Tehnologia Informatiei, Universitatea Titu Maiorescu

- 1

-

<link rel="stylesheet" type="text/css" href="Calea fisierului.css" />
<link rel="stylesheet" type="text/css" href="Calea fisierului.css" />
<style type="text/css">@import url( Calea fisierului.css )</style>
<style type="text/css">@import url( Calea fisierului.css )</style>

Aceasta a doua metoda este ideala in momentul in care aveti un numar mare de pagini deoarece atunci cand veti dori sa aduceti o modificare aspectului va trebui doar sa modificati fisierul CSS ca efectul sa se faca resimtit asupra tuturor paginilor ce folosesc foaia de stil.Este considerata de multi ca fiind si cea mai buna metoda de aplicare a stilurilor CSS deoarece are ca beneficii o intretinere mai usoara, o reducere in dimensiunea paginilor, economie de banda de internet si nu in ultimul rand o mai mare flexibilitate.

3. Stiluri in linie;

Stilurile in linie sunt foarte putin utilizate deoarece presupun definirea chiar in codul HTML, in elementul pe care doriti sa fie aplicat stilul.Tocmai datorita acestei caracteristici nu sunt permise schimbari usoare si rapide pe mai multe pagini in acelasi timp.Un exemplu de cod pentru exemplificare ar fi:

<p style="color: #00FF00;">Textul va fi verde</p>
<p style="color: #00FF00;">Textul va fi verde</p>

Acestea fiind spuse alegerea folosirii unei metode in defavoarea celorlalte va apartine. Daca am vorbit despre modul de implementare nu putem sa nu mentionam cateva lucruri cu privire la sintaxa CSS.Aceasta este destul de simpla si usor de inteles odata ce incepi sa lucrezi cu ea.Sintaxa este compusa din trei parti:selector, proprietate si valoare. Selectorul reprezinta elementul HTML la care vrei sa aplici stilul, proprietatea este chiar numele proprietatii respective pe cand valoarea defineste stilul pe care il aplici proprietatii. Un exemplu de sintaxa ar fi:

body { background: #00FF00; font-family: Verdana, Arial, Serif;

}

: #00FF00 ; font-family : Verdana, Arial, Serif ; } Layoutul codului de tip CSS se

Layoutul codului de tip CSS se poate modifica.Motivul pentru care se prezinta sub aceasta forma este datorita faptului ca se poate urmarii mult mai usor codul daca fiecare proprietate este pe cate o linie distincta, una sub alta. Dupa cum rolul acestui proiect a fost cel de a prezenta pe scurt caracteristicile de baza ale CSS-ului nu o sa intram in detalii cu privire la clase, id-uri, divizii si span.

- 2 -

O documentatie destul de vasta cu privire la CSS se poate regasii atat pe internet in cadrul paginilor web specializate cat si intr-un numar semnificativ de publicatii. Intr-un final alegerea de a va consolida cunostintele in ce priveste CSS va apartine in totalitate.Tot ce se poate spune este ca reprezinta o unealta foarte folositoare pentru cei care doresc sa creeze siteuri din ce in ce mai atractive si flexibile.

Spor la treaba…

Bibliografie

“DHTML si CSS” Autor: Jason Cranford Teague Editura: Teora

“HTML, XHTML, CSS si XML prin exemple” Autor: Teodoru Gugoiu Editura: Teora

- 3 -