Cunostinte de Baza

Stefanescu Mihai 2 years ago 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;

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.