Cunostinte de Baza

postat acum 4 ani de Stefanescu Mihai in categorie CSS

Cand browserul incepe sa afiseze fisierul HTML il aranjeaza dupa cum este in fisierul CSS definit.

Tipuri de CSS

CSS-ul este de 3 feluri:

  • Extern
  • Intern
  • Inline

CSS Extern

Un stil extern este ideal atunci cand doresti sa aplici acelasi design mai multor pagini. Cu acest tip de CSS ai posibilitatea sa schimbi look-ul unui website modificand doar un fisier. Toate fisierele HTML trebuie sa aiba in head tag-ul <link> care include stylesheet-ul.

<head>
<link rel="stylesheet" type="text/css" href="fisieruldestil.css">
</head>

Acest tip de fisier poate fii creat in orice editor de text, cu conditia sa aiba extensia css si sa nu contina niciun tag HTML.

Exemplu fisier CSS extern:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

! Nu adauga spatiu intre valoare si unitatea de masura: margin-left:20 px; margin-left:20px;

CSS Intern

CSS-ul intern trebuie sa fie folosit doar atunci cand vreti sa folositi stilurile respective pe o singura pagina. Acest css intern se defineste in sectiunea de head a fisierului html intre tag-urile <style>:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

CSS Inline

CSS-ul inline este lipsit de o multime de avantaje fata de css-ul extern si chiar si de cel intern. Folositi-l cu grija si unde este posibil sa folosesti extern, fa-o!

Pentru a aplica tag-uri css inline te ajuti de tag-ul style folosit intr-un element HTML relevant.

<p style="color:sienna;margin-left:20px">Paragraf CSS Inline.</p>

Stiluri Multiple

Daca ai mai definit un element in 2 stiluri diferite browserul va prealua valoarea mai specifica. Sa presupunem ca avem un css extern cu acest selector h2:

h2
{
color:red;
text-align:left;
font-size:8pt;
}

Si css-ul intern are aceste proprietati pentru acelasi tag, h2:

h2
{
text-align:right;
font-size:20pt;
}

Daca in fisierul HTML cu css-ul intern ai un link si catre css-ul extern tag-ul h2 va lua aceste valori:

color:red;
text-align:right;
font-size:20pt;

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!