Sign in to follow this  
nuţu.

Noțiuni de bază CSS

Recommended Posts

SS (Cascading Style Sheets) este codul pe care îl utilizezi pentru a personaliza pagina ta web. Noțiuni de bază CSS îți oferă tot ceea ce ai nevoie pentru a începe. Voi răspunde la întrebări precum: Cum pot face ca textul meu să fie negru sau roșu? Cum să fac conținutul meu să apară în diferite locuri pe ecran? Cum pot decora pagina mea web cu imagini de fundal și culori?

## Ce este CSS?

La fel ca HTML, CSS nu este chiar un limbaj de programare. Nu este nici limbaj de marcare — este un limbaj de stilizare. Asta înseamnă că îți permite să aplici selectiv stiluri elementelor din documentele HTML. De exemplu, pentru a selecta toate elementele paragraf dintr-o pagină HTML și a transforma textul din interiorul acestora în roșu, vei scrie acest cod CSS:

p {
  color: red;
}

Să încercăm: inserează aceste trei linii de CSS într-un fișier nou în editorul tău de text, și apoi salvează fișierul ca  style.css în directorul tăustyles.

Dar mai trebuie să aplici codul CSS în documentul tău HTML. În caz contrar, stilul CSS nu va modifica modul în care browserul tău afișează documentul HTML (Dacă nu ai urmărit până acum proiectul nostru, citește Gestionarea fișierelor și Noțiuni de bază HTML pentru a afla ce trebuie să faci mai întâi).

Deschide fișierul index.html și inserează următoarea linie undeva în elementul head (adică între tagurile <head> și </head>):

<link href="styles/style.css" rel="stylesheet" type="text/css">

Salvează fișierulindex.html și încarcă-l în browserul tău. Ar trebui să vezi ceva asemănător:
Mozilla logo și câteva paragrafe. Culoarea textului paragrafului a fost modificat în roșu de css scris de noi.

Felicitări dacă textul paragrafului tău este roșu! Tocmai ai scris prima ta linie de cod CSS.

## Anatomia unui set de reguli CSS

Să ne uităm în detaliu la linia CSS de mai sus:

css-declaration-small.png

Întreaga structură este numită set de reguli (dar adesea este prescurtată „regulă”). Reține și numele părților individuale:

Selector
Numele elementului HTML la începutul setului de reguli. Acesta selectează elementul (elementele) care trebuie stilizate (în acest caz, elementele p). Pentru a stiliza un element diferit, doar schimbă selectorul.


Declarația
O singură regulă precum color: red; care precizează care dintre proprietățile elementului vor fi stilizate.


Proprietăți
Moduri în care poți stiliza un element HTML dat. (În acest caz, coloreste o proprietate a elementelor <p>.) În CSS, alegi proprietățile care vrei să le modifici folosindu-te de regula ta.


Valoarea proprietății
La dreapta proprietății după două puncte, ai valoarea proprietății, care alege una dintre numeroasele posibilități pentru o anumită proprietate (există mai multe valori ale proprietății color în afară de red). 


Reține celelalte părți importante ale sintaxei:

  1. Fiecare set de reguli (în afară de selector) trebuie să fie în interiorul acoladelor ({}).
  2. În cadrul fiecărei declarații, trebuie să folosești două puncte (:) pentru a separa proprietatea de valorile sale.
  3. În cadrul fiecărui set de reguli, trebuie să folosești punct și virgulă (;) pentru a separa fiecare declarație de următoarea.

Pentru a modifica simultan mai multe valori ale proprietății, trebuie doar să le separi folosind punct și virgulă, astfel: 

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

## Selectarea mai multor elemente

De asemenea, poți selecta mai multe tipuri de elemente și poți să le aplici un singur set de reguli. Include mai mulți selectori separați prin virgule. De exemplu:

p,li,h1 {
  color: red;
}

## Diferite tipuri de selectori

Există mai multe tipuri diferite de selectori. Mai sus, te-ai uitat numai la selectori de element, care selectează toate elementele de un anumit tip în documentele HTML date. Dar poți face selecții mai specifice de atât. Iată câteva dintre cele mai comune tipuri de selectori:

blob.png.ff72a3002d6b5ed034bb0ecdc4f5acac.png

 

## Fonturi și text

Acum că am exporat câteva noțiuni de bază CSS, să începem să adăugăm mai multe reguli și informații în fișierul nostru style.css pentru a face ca exemplul nostru să arate mai bine. Să începem prin a face textul să arate mai bine.

În primul rând, găsește fontul de la Google Fonts pe care l-ai salvat într-un loc sigur. Adaugă elementul <link> undeva în interiorul elementului head din fișierulindex.html(din nou, oriunde între tagurile <head> și </head>). O să arăte ceva de genul:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

După, șterge regula existentă pe care o ai în fișierul style.css. A fost un test bun, dar textul de culoare roșie nu arată chiar atât de bine.
Adaugă următoarele linii în locul lui, înlocuind linia substituentă cu linia font-family reală pe care ai luat-o de la Google Fonts. (font-family înseamnă doar fonturile pe care vrei să le utilizezi pentru textul tău). Această regulă stabilește mai întâi un font de bază global și dimensiunea fontului pentru întreaga pagină (întrucât <html> este elementul părinte al întregii pagini, și toate elementele din interior acestuia moștenesc același font-size și font-family):

html {
  font-size: 10px; /* px înseamnă 'pixeli': dimensiunea fontul de bază este acum de 10 pixeli înălțime */
  font-family: placeholder: acesta ar trebui să fie rezultatul luat de la Google fonts
}

Acum vei seta dimensiunea fontului pentru elementele care conțin text în interiorul HTML body (<h1>, <li>, și <p>). De asemenea, vom centraliza textul titlului și vom stabili înălțimea liniei și spațiul între litere pentru conținutul body pentru a-l face mai ușor de citit:

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}

Poți modifica aceste valori px în funcție de cum vrei ca designul tău să arate, dar în general designul tău trebuie să arate astfel:

Mozilla logo și câteva paragrafe, a fost setat un font sans-serif, dimensiunea fontului, line height și letter spacing sunt ajustate, iar poziția titlului principal a fost centrat

## Cutii, cutii, este vorba de cutii

Un lucru pe care îl vei observa atunci când scrii CSS este că o mare parte din acesta se referă la cutii — stabilirea dimensiunii, culoarea, poziția, etc. Majoritatea elementelor HTML din pagina ta pot fi gândite ca niște cutii așezate una peste alta.

Nu este surprinzător că apectul CSS se bazează în principal pe model box. Fiecare dintre blocurile care ocupă spațiu pe pagina ta au proprietăți ca:

  • padding, spațiul din jurul conținutului (de exemplu în jurul textului paragrafului)
  • border, linia solidă care se află chiar în afara padding
  • margin, spațiul din exteriorul elementului

trei cutii așezate una în interiorul celeilalte. Din exterior către interior acestea sunt marcate ca margin, border și padding

În această secțiune, de asemenea, utilizăm:

  • width (a unui element)
  • background-color, culoarea din spatele conținutului unui element și a padding
  • color, culoarea conținutului unui element (de obicei textul)
  • text-shadow: stabilește o umbră a textului din interiorul unui element
  • display: setează modul de afișare al unui element (nu-ți face griji pentru acest lucru încă)

Să începem să adăugăm mai mult proprietăți CSS paginii noastre! Continuă să adaugi aceste noi reguli la sfârşitul paginii, și să nu-ți fie teamă să experimentezi cu schimbarea valorilor ca să vezi cum apare.

## Schimbarea culorii paginii

html {
  background-color: #00539F;
}

Această regulă stabilește o culoare de fundal pentru întreaga pagină. Schimbă codul de culoare de mai sus în orice culoare pe care o alegi atunci când planifici siteul tău.

## Sortarea body

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Acum pentru elementul <body>. Există destul de multe declarații aici, așa că hai să parcurgem pe rând:

  • width: 600px; — acesta obligă ca body să aibă întotdeauna o lățime de 600px.
  • margin: 0 auto; — Atunci când setezi două valori unei proprietăți ca margin saupadding, prima valoare afectează partea de sus și de jos a elementului (făcându-l 0 în acest caz), iar a doua valoare partea din stânga și dreapta (aici, auto este o valoarea specială care împarte spațiul orizontal disponibil în mod egal între stânga și dreapta). Poți folosi una, trei sau patru valori, așa cum este documentat aici.
  • background-color: #FF9500; — ca mai înainte, aceasta stabilește culoarea de fundal a elementului. Am folosit un fel de portocaliu roșiatic pentru body spre deosebire de albastrul închis pentru elementul <html>, dar poți experimenta cu acesta.
  • padding: 0 20px 20px 20px; — avem patru valori stabilite pentru padding, pentru a face mai mult spațiu în jurul conținutului nostru. De data aceasta nu vom seta padding deasupra la body, dar vom seta 20 pixeli în stânga, jos și dreapta. Valorile setate sunt sus, dreapta, jos și stânga în această ordine.
  • border: 5px solid black; — acesta stabilește un chenar negru solid de 5 pixeli pentru toate laturile elementului body.

## Poziționarea și stilizarea titlului paginii noastre

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Probabil că ai observat că este un spațiu în partea de sus a elementului. Acest lucru se întâmplă deoarece browserele aplică un anumit stil implicit elementului <h1> (printre altele), chiar dacă nu ai aplicat deloc CSS! Asta ar putea părea o idee nereușită, dar dorim chiar și o pagină web nestilizată să aibă o lizibilitate de bază. Pentru a scăpa de spațiu suprascriem stilul implicit prin setarea margin: 0;.

În continuare, am setat padding sus și jos pentru titlu la 20 pixeli, și am făcut titlul textului să aibă acceași culoare precum culoarea de fundal a elementului html.

O proprietate destul de interesantă pe care am utilizat-o aici este text-shadow, care aplică o umbră de text la conținutul textului elementului. Cele patru valori sunt următoarele:

  • Prima valoare în pixeli setează offesetul orizontal al umbrei din text — cât de departe se mișcă: o valoare negativă trebuie să o mute la stânga.
  • A doua valoare în pixeli setează offsetul vertical al umbrei din text — cât de departe se îndepărtează, în acest exemplu; o valoare negativă ar trebui să o deplaseze în sus.
  • A treia valoare în pixeli setează blur radius a umbrei — o valoare mai mare va însemna o umbră mai neclară.
  • A patra valoare setează culoarea de bază a umbrei.

Din nou, încearcă să experimentezi diferite valori pentru a vedea ce poți face!

## Centrarea imaginii

img {
  display: block;
  margin: 0 auto;
}

În cele din urmă, vom centra imaginea pentru a face să arate mai bine. Am putea folosi din nou trucul margin: 0 auto așa cum am făcut mai devreme pentru body, dar trebuie să mai facem și altceva. Elementul <body> este de nivel de bloc, ceea ce însemnă că ocupă spațiu pe pagină și poate avea margin și alte valori de spațiere aplicate. Imaginile, pe de altă parte, sunt elemente inline, ceea ce înseamnă că acestea nu pot. Și deci pentru a aplica margini imaginii, trebuie să-i dăm imaginii un comportament de nivel bloc folosind display: block;.

 

## Concluzie

Dacă ai urmat toate instrucțiunile din acest articol, ar trebui să ai o pagină care arată astfel

Mozilla logo, centrat, un titlu și paragrafe. Acesta arată frumos, cu un fundal albastru pentru întreaga pagină și fundal portocaliu pentru întreg conținutul centrat.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this