9
Mai
2012

Introducere în CSS

VN:F [1.9.22_1171]
Dă o notă
Rating: 7.0/10 (3 votes cast)

Dragi prieteni, de astăzi o să încep tutorialele CSS (Cascading Style Sheet), HTML (Hyper Text Markup Language), PHP (Hypertext PreProcessor) şi Photoshop. Astăzi o să începem cu CSS-ul, deoarece cu ajutorul lui putem să aranjăm conţinutul unui site aşa cum dorim noi, de la introducerea unui fundal la stilul textului la stilul textelor, tabelelor, etc.

 

Stilurile interne

Metoda stilurilor interne se foloseşte când doriţi să utilizaţi un stil doar pentru fişierul dorit. Stilul afectează doar fişierul unde aţi plasat coduul CSS, nu şi restul fişierelor ale site-ului. Deci, dacă doriţi ca stilul să afecteze şi celelalte pagini ale site-ului sau alte pagini, este necesară introducerea codului CSS şi în respectivele fişiere.

Codurile CSS se introduc între tagurile <head> şi </head>. Codul CSS este delimitat de  <style type=”text/css”> şi </style>. Pentru a înţelege mai bine, examinaţi exemplul de mai jos:

[code type=html]

<head>

<title>Introducere în CSS - DanyDeejaay.ro</title>

<style type="text/css">

body {

background:#000;
font-size:15px;
color:#7DCDF1;

}

</style>
</head>

[/code]

Codul introdus mai sus va afecta doar fişierul în care lucrăm. El va face fundalul paginii negru, mărimea scrisului de 15px, iar culoarea lui va fi un albastru deschis.
NU uitaţi ! Dacă doriţi să faceţi anumite schimbări în stil,veţi fi nevoit să schimbaţi stilul din fiecare fişier, asta dacă doriţi să fie la fel peste tot.

Stilurile externe

O altă metodă, preferată de foarte mulţi, este cea a stilurilor externe. Un fişier CSS se poate face cu orice editor de text, pornind de la cele simple ca Notepad,Wordpad, etc. până la cele complexe, ca Adobe Dreamweaver. Fişierele CSS nu pot conţine alte coduri, decât coduri CSS, iar ele trebuiesc salvate cu extensia .css. Inserarea fişierelor externe CSS în paginile (X)HTML se face foarte simplu, prin amplasarea unui cod în secţiunea <head> </head>. Iată un exemplu:

[code type=html]

<link rel="stylesheet" type="text/css" href="link catre fisierul.css" />

sau

<style type="text/css"> @import url( linkul către fişierul.css ) </style>

[/code]

Folosind această metodă în toate paginile (X)HTML înseamnă că toate paginile vor folosi acelaşi stil CSS. Pentru a modifica stilul este necesară doar editarea fişierului .css ca schimbarea să se vadă la toate paginile ce folosesc acel stil.

Dacă aţi înţeles ceea ce am explicat mai sus, ţin să vă zic că puteţi folosi ambele metode. Totuşi, ar mai fi o metodă, “în linie”, care se introduce chiar în elementul pe care doriţi să îl utilizaţi. Exemplu:

[code type=html]

<p style="color:#7DCDF1;">Text albastru</p>

[/code]

Eu unul nu aş recomanda deloc această metodă, deoarece dacă vreţi să schimbaţi ceva, va trebui să schimbaţi la fiecare element în parte.

Eu folosesc metoda stilurilor externe, deoarece site-urile la care lucrez au peste 2-3 pagini, aşa că îmi vine foarte uşor să editez stilul site-ului prin această medotă, deoarece folosesc un singur stil pentru toate paginile, iar dacă doresc să schimb ceva, editez fişierul .css şi gata.
Plus că, această metodă are şi mai multe avantaje, precum o întreţinere mai uşoară a stilurilor, flexibilitate, dimensiuni mai reduse ale paginilor şi economie de bandă de internet.

Desigur, dvs. puteţi utiliza orice medotă doriţi,  fără probleme.

Ar mai fi de zis foarte multe, dar ca să nu vă încarc de la început, o să pun capăt acum lecţiei de azi. Dacă nu aţi înţeles ceva (nu m-aş mira pentru că e prima oară când fac un tutorial) mă puteţi contacta oricând folosind pagina de contact sau pe Yahoo Messenger.

Introducere în CSS, 7.0 out of 10 based on 3 ratings


Trimite prin Yahoo Messenger!


2 comentarii

  1. Elena-Alina la 09-05-2012 ora 20:29

    Felicitări pentru iniţiativă ! Eram şi eu odată, demuuuult, pasionată de html şi site-uri, dar a devenit prea complicat pentru mine. :-j
    Eu aştept tutorialele în Photoshop pentru că acolo mai am habar de ceva. :*

    VA:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
    Mergi sus
  2. Roxana Serban la 09-05-2012 ora 22:29

    IMi place…simplut pana acum:D

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    Mergi sus

Welcome DanyDeeJaay

Autentificare

Ți-ai uitat parola?

Înregistrare pe site



+ 6 = paisprezece


Join

Join us as we spread the word.