CSS este folosit pentru a gestiona întregul aspect al unui site Web.

Datorită acestora este posibil să se intervină în formatarea textului, în poziționarea
elementelor grafice și dispoziția pe care aceste elemente le vor avea cu privire la diferite medii și dispozitive.
Acest ghid vă ajută să înțelegeți cele mai importante concepte.

Cum este facuta o foaie de stil CSS

Să ne uităm la aceast fragment de cod:

body {
 background: white;
 color: black;
}
 
/* Stili per i titoli h1 */
 
h1 {
 color: red;
 font: 36px Helvetica, Arial, sans-serif;
}
 
/* Colore del testo delle liste */
 
li {color: green;}
 
/* Colore dei titoli h1 per la stampa */
 
@media print { 
 h1 {color: black;}
}

În snippet am inclus cele trei tipuri de declarații care pot fi inserate într-un CSS:
regoli;
commentarii;
directive @-rules.

Iata deci, o foaie de stil care nu este nimic mai mult decât acest lucru: un set de reguli însoțite.

Inserați foi de stil CSS într-un document

Pentru a înțelege mecanismul este necesar să se clarifice mai întâi distincția fundamentală dintre foile externe și cele interne.

Foi de stil asociate
Există două posibilități pentru încărcarea unei foi de stil externe într-un document. Primul este cel care utilizează elementul HTML <link>. Declarația trebuie întotdeauna plasată în secțiunea <head> din documentul HTML:

.............

Foi interne
... sunt cele inserate direct în documentul HTML utilizând tagul <style>. De asemenea, în acest caz, declarația trebuie plasată în secțiune <head>:

Atenție !

Am presupus că știți sa miscati cel puțin primii pași cu HTML și CSS, deci, dacă nu, multe dintre lucrurile scrise aici ar putea fi de neînțeles ptr. tine. Nu pretind că am învățat toate tehnicile legate de acest mod de integrare a stilului în paginile web, dar vreau să fac o simplă prezentare introductivă despre ce sunt, despre modul în care sunt folosite și despre utilitatea CSS.

Aș dori să reiterez faptul că, pentru a face uz de această "tehnică"

... trebuie să știți în mod necesar un minim de html fiind de fapt foile de stil o extensie a html în sine. Pentru a vorbi despre foile de stil și pentru a vedea în cele din urmă despre ce sunt și despre ce produc, este suficient să notați aspectul acestui site: fundalul, justificarea textului, marginile sale de la margini, diferitele liniuțe de la începutul paragrafului etc. , sunt doar câteva dintre lucrurile care pot fi făcute cu css, care nu sunt raportate în fiecare pagină html, dar definite o dată pentru totdeauna într-o singură foaie de stil externă, numită in toate paginile. Dacă nu aveți un editor specific, vă reamintesc că în acest caz, precum și pentru html, aveți nevoie de un editor curat (ASCII). Vă recomandăm, de exemplu, Notepad ++ sau Atom.

Să trecem la partea practică

Practic, există trei modalități de a utiliza CSS, care este cel mai bun depinde numai de tine, de organizarea dvs. mentală și de nevoile reale ale dvs.:
1.   Direct online - când trebuie să aplicați stilul doar pentru blocul sau piesa de cod cu care avem de-a face, adică acest stil nu afectează alte părți ale aceleiași pagini web.
2.   În partea de sus a paginii cu stil încorporat - Adica atunci când un anumit stil se referă la mai multe elemente html (etichete) egale pe aceeași pagină. Ar fi extrem de distractiv, la fel de laborios, să definim mereu același stil de mai multe ori pe aceeași pagină, deoarece ar servi întotdeauna același scop identic.
3.   În legătură cu o foaie de stil externă - Aceasta înseamnă că, dacă stilurile care vor fi definite sunt multe, dacă mai mult de o singură pagină Web le va folosi, cel mai bine este să creați o structură externă la care să poată accesa toate paginile interesate. Această structură nu ar fi decât foaia de stil, un document text normal cu extensia .css finală care conține toate declarațiile valide pentru o foaie de stil..

Foile externe

Declarația este deja plasată în documentul HTML care îl numește
având grijă să plaseze această linie de reamintire între elementele (etichetele) <head> e </head> din fișierul html. Vezi dedesupt.

Pagina CSS

Pagina HTML

Codul pe care l-am scris aici

este doar un exemplu pentru a vă arăta cum să creați un script elementar CSS utilizând Notepad pentru a verifica elementele html de pe pagina web. Puteți modifica codul CSS în modul în care doriți să formatați stilul și aspectul paginilor dvs. Web în funcție de preferințele dvs.
Exemplele prezentate aici conțin elemente de bază, afișate doar în scopuri informative.

Definițiile sunt în limba originală.

Background Color

Hello World

Iată codul CSS:


  <h1 style="color: #ffffff; background-color:#B8102F;">Hello World</h1>

Border, Rounded Borders & Border Color

Hello World

Iată codul CSS:


  <h1 style="color: #1A76A5; border-style: solid; border-color: red green blue yellow; border-radius: 15px;">Hello World</h1>
  <p style="color: #BA0F31; font-weight: bold;">Iată codul CSS: </p>
	<textarea rows="1" style = "color: #000000; height:100%; width:100%; background-color: #F5F5F5; resize: none; box-shadow:0 3px 3px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.7);">
  <h1 style="color: #1A76A5; border-style: solid; border-color: red green blue yellow; border-radius: 15px;">Hello World</h1>

Padding

Hello World

Iată codul CSS:


  <h1 style="color: #1A76A5; border-style: solid; border-color: red green blue yellow; border-radius: 15px;  padding: 25px 50px 75px 100px;">Hello World</h1>

DIV Height and Width

Acest element div are o înălțime de 150 px și o lățime de 100%:

Iată codul CSS:


  <div style="color: #FFFFFF; height: 150px; width: 100%; background-color: #008D8F; padding: 25px 50px 5px 50px;">Acest element div are o înălțime de 150 px și o lățime de 100%:</div>

Box Model

Modelul cutiei CSS este în esență o cutie care înfășoară în jurul fiecărui element HTML.

Iată codul CSS:


  <div style="color: #ffffff; background-color: #205486; height: 150px; width: auto; border: 25px solid #CE6400; padding: 15px; margin: 25px;">Il modello di box CSS è essenzialmente una scatola che avvolge ogni elemento HTML.</div>

Table & Color

Următorul exemplu specifică culoarea de fundal și culoarea textului <th>:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

Iată codul CSS:


<table>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

Transparența imaginii

Proprietatea de opacitate este adesea folosită împreună cu: hover selector pentru a schimba opacitatea la trecerea mouse-ului.

Iată codul CSS:


				  <div style="text-align: center;"><style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<img src="img/slide-1.png" alt="ac studio" width="350" height="117">
<img src="img/slide-2.png" alt="ac studio" width="350" height="117">
<img src="img/slide-3.png" alt="ac studio" width="350" height="117">
			  </div>

Imagine de fundal de dimensiune totale
Următorul exemplu arată cum se face; Utilizați elementul html (elementul html este întotdeauna cel puțin la înălțimea ferestrei browserului). Apoi setați un fundal fix și centrat pe acesta. Apoi reglați dimensiunea sa cu proprietatea background-size.

Imaginea de fundal
a paginii complete

Iată codul CSS:
```
				  <div style="text-align: center;">
<style>
.div1 {
    border: 0px solid black;
    height:255px;
    width:980px;
    background:url(img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
<div class="div1">
<h1 style="color: #ffffff; text-shadow: 1px 1px 2px black, 0 0 25px #203344, 0 0 5px #040309;">Imaginea de fundal<br> a paginii complete</h1>
</div>
			  </div>
```

Gradiente

Gradient liniar - de sus în jos

Acest gradient liniar începe în partea de sus. Începe în roșu, schimbând în galben

Iată codul CSS:


				  <div>
<style>
#grad1 {
    height: 100px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
</style>
<p>Acest gradient liniar începe în partea de sus. Începe în roșu, schimbând în galben</p>

<div id="grad1"></div>

			  </div>

Shadow Effects

Cu CSS, puteți adăuga umbre la text și elemente cu următoarele proprietăți: text-shadow & box-shadow

Text-shadow effect!

Polaroid Images / Cards

Iată codul CSS:


  			  <div class="container-fluid">
  <div class="row">
    <div class="col-sm-6" style="text-align: center;">
	<h2 style="color: #FFED4B; text-shadow: 2px 2px red;">Text-shadow effect!</h2>
	<h2 style="color: #FFED4B; text-shadow: 2px 2px 4px #000000;">Text-shadow effect!</h2>
	<h2 style="color: #FFED4B; text-shadow: 0 0 3px #A90707, 0 0 5px #8E0000;">Text-shadow effect!</h2>
	<h2 style="color: #ffffff; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">Text-shadow effect!</h2>
	<h2 style="color: #FFED4B; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Text-shadow effect!</h2></div>
    <div class="col-sm-6" style="text-align: center;">
	<div><style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
<div class="polaroid">
  <img src="img/user.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Polaroid Images / Cards</p>
  </div>
</div>
	</div>
  </div>
</div>

Opacity

Proprietatea de opacitate CSS stabilește opacitatea pentru întregul element (atât culoarea de fundal, cât și textul vor fi opace / transparente). Valoarea opacității proprietății trebuie să fie un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Color RGB 179,16,125 / opacity:0.9

Color RGB 179,16,125 / opacity:0.8

Color RGB 179,16,125 / opacity:0.7

Color RGB 179,16,125 / opacity:0.6

Color RGB 179,16,125 / opacity:0.5

Color RGB 179,16,125 / opacity:0.4

Color RGB 179,16,125 / opacity:0.3

Color RGB 179,16,125 / opacity:0.2

Color RGB 179,16,125 / opacity:0.1

Iată codul CSS:


<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.9;">   Color RGB 179,16,125 / opacity:0.9</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.8;">   Color RGB 179,16,125 / opacity:0.8</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.7;">   Color RGB 179,16,125 / opacity:0.7</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.6;">   Color RGB 179,16,125 / opacity:0.6</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.5;">   Color RGB 179,16,125 / opacity:0.5</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.4;">   Color RGB 179,16,125 / opacity:0.4</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.3;">   Color RGB 179,16,125 / opacity:0.3</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.2;">   Color RGB 179,16,125 / opacity:0.2</p>
<p style="color: #ffffff; background-color:rgb(179,16,125);opacity:0.1;">   Color RGB 179,16,125 / opacity:0.1</p>

Cascading Style Sheets

CSS este folosit pentru a gestiona întregul aspect al unui site Web.

Cum este facuta o foaie de stil CSS

Să ne uităm la aceast fragment de cod:

Inserați foi de stil CSS într-un document

Pentru a înțelege mecanismul este necesar să se clarifice mai întâi distincția fundamentală dintre foile externe și cele interne.

Atenție !

Aș dori să reiterez faptul că, pentru a face uz de această "tehnică"

Să trecem la partea practică

Foile externe

Pagina CSS

Pagina HTML

Codul pe care l-am scris aici

Hello World

Hello World

Hello World

Imaginea de fundal a paginii complete

Text-shadow effect!

Text-shadow effect!

Text-shadow effect!

Text-shadow effect!

Text-shadow effect!

Imaginea de fundal
a paginii complete