Tutorial Introducere in CSS

Alexandru C.

Member
Registered
Salutare! In acest tutorial va voi invata ce este si cum se foloseste CSS. CSS(Cascading Style Sheets)este un standard pentru formatarea elementelor unui documentHTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul<style> și/sau atributul style . CSS se poate utiliza și pentru formatarea elementelorXHTML,XMLșiSVGL.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.

Unele dintre cele mai importantemodule noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Mai jos sunt prezente in listă cele mai importante modulele adăugate inCSS3:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

Avantajele CSS:
– controlul layoutului documentelor dintr-o singura pagina de stiluri,
– controlul mai exact al layoutului,
– aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc),
– tehnici numeroase si sofisticate.

Practic, pentru a formata continutul cu CSS, trebuie sa cream o clasa si sa atribuim acea clasa continutului. Atributul HTML pentru clase este class="" .
Cod:
<pclass="paragraf">Textul tau formatat aici!</p>
Dupa cum vedeti am aplicat paragrafului de mai sus clasa paragraf. Acum nu trebuie decat se definim aceasta clasa.
Cod:
.paragraf {
color:#ff5566;
font-family:Tahoma;
background-color:#ff4455;
}
Acum probabil ca va intrebati unde se pune aceasta bucata de cod. Pentru a adauga un cod CSS avem mai multe optiuni:

1. FormatareCSS inline(in interiorul tag-ului HTML)
2. FormatereCSS interna(in sectiunea head a documentului)
3. FormatareCSS externa(fisier .css extern)

1. FormatareCSS inline
Cod:
<pstyle="color: #ff5566;">Text aici...</p>
2. FormatereCSS interna
Cod:
...
<head>
<style>
.paragraf {
color:#ff5566;
font-family:Tahoma;
background-color:#ff4455;
}
</style>
</head>
...
3. FormatareCSS externa
Fisierul extern va avea extensia .css.
Cod:
/* foaiedestil.css */
.paragraf{
color:#ff5566;
font-family:Tahoma;
background-color:#ff4455;
}
Tag-ul HTML:
Cod:
<link rel="stylesheet"type="text/css"href="foaiedestil.css"/>

http://tuwer.eu/introducere-in-css/
 
+1 foarte buna introducere, dar ma asteptam sa vad parerea ta despre introducere in CSS3 fiindca ai inceput cu informatii despre CSS3. Deasemenea pentru inline CSS si inpage CSS as recomanda sa adaugi "… nu este recomandat, dar este o optiune" .

Deasemenea <style> nu neaparat trebuie sa fie in header, deobicei se pune in header pentru a fi sigur ca la incarcarea paginii designul este incarcat, altfel poti vedea designul paginii mai tarziu sau deloc .
 
Loading...
Back
Sus