M5 | L3 – Introducere CSS I

Astăzi vom afla despre:

CSS, selectori, clase, borduri

Aplicațiile pe care le vom folosi sunt:

Notepad++; CodePen

PROIECTE:

Stil pentru primul site

Cascading Style Sheets (CSS) spun browserului cum să afișeze textul și alt conținut pe care îl scrieți în HTML. CSS a fost adoptat de toate browserele majore și vă permite să controlați:

  • culoare
  • fonturi
  • poziționare
  • spaţierea
  • dimensionare
  • decoratiuni
  • tranziții

Ideea din spatele CSS este că puteți utiliza un selector pentru a viza un element HTML în DOM (Document Object Model) și apoi aplicați o varietate de atribute acelui element pentru a schimba modul în care este afișat pe pagină.

În această secțiune, veți vedea cum adăugarea de stiluri CSS la elementele din site-ul vostru poate schimba un text simplu la ceva mai mult.

  1. Infrumusetarea unui site

Acum să schimbăm culoarea din textul nostru. Putem face acest lucru schimbând stilul elementului h2. Proprietatea care este responsabilă pentru culoarea textului unui element este proprietatea stilului de culoare.

Iată cum ați seta culoarea textului elementului h2 pe albastru:

Challenge 1:

  • Schimbati culoarea elementului h2 in rosu.

Cu CSS, există sute de proprietăți CSS pe care le puteți utiliza pentru a schimba modul în care arată un element pe pagina. Când ați introdus <h2 style = „color: red;”> CatPhotoApp </h2>, ati stilizat acel element h2 individual cu CSS inline. Aceasta este o modalitate de a specifica stilul unui element, dar există o modalitate mai bună de a aplica CSS folosit blocuri de stil.

Intr-un bloc de stil, puteți crea un selector CSS pentru toate elementele h2. De exemplu, dacă doriți ca toate elementele h2 să fie roșii, adăugați o regulă de stil care arată astfel:

Challenge 2:

  • Creati un bloc de stil cu o regula care schimba toate elemntele h2 in culoarea albastra.

Clasele sunt stiluri reutilizabile care pot fi adăugate la elementele HTML. Iată un exemplu de declarație de clasă CSS:

Puteți aplica o clasă la un element HTML astfel:

Challenge 3:

  • În interiorul elementului style, schimbați selectorul h2 în .red-text și actualizați valoarea culorii de la albastru la roșu.
  • Dați elementului h2 atributul clasei cu o valoare de „.red-text”.
  • Dați primului element p atributul clasei cu o valoare de „.red-text”.

Fontul de text este controlat astfel:

Challenge 4:

  • În aceeași etichetă style care conține clasa red-text, creați un selector pentru elementele p și setați dimensiunea fontului la 16 pixeli (16px).

Familia de font este controlata astfel:

Challenge 5:

  • Fa toate elementele p sa aiba fontul monosapce

Google Fonts este o bibliotecă gratuită de fonturi web pe care o puteți utiliza în CSS, făcând referire la adresa URL a fontului. Pentru a importa un font Google, puteți copia URL-ul fonturilor din biblioteca și apoi lipiți-l în HTML. Pentru acest challenge, vom importa fontul Lobster. Pentru a face acest lucru, copiați următorul fragment de cod și lipiți-l în partea de sus a editorului de coduri (înainte de elementul style):

  • <link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>

Challenge 6:

  • Fa toate elementele h2 sa aiba fontul Lobster

Există mai multe fonturi implicite care sunt disponibile în toate browserele. Aceste familii de fonturi generice includ monospațial, serif și sans-serif. Când un font nu este disponibil, puteți spune browserului să „degradeze” în alt font. De exemplu, dacă ați dorit un element să folosească fontul Helvetica, dar să degradați la fontul sans-serif atunci când Helvetica nu este disponibil, îl veți specifica astfel:

CSS are o proprietate numită width care controlează lățimea unui element. La fel ca în cazul fonturilor, vom folosi px pentru a specifica lățimea imaginii.

Challenge 7:

  • Creeaza o clasa smaller-image si foloseste-o sa schimbi imaginea la 100px

Bordurile CSS au proprietăți precum style, color și width.

Challenge 8:

  • Creeaza o clasa thick-green-border care sa adauge la imagine o bordure verde, solida de 10px. Nu uitați că puteți aplica mai multe clase unui element folosind atributul class, prin separarea fiecărui nume de clasă cu un spațiu.

Fotografia voastra are în prezent colțuri ascuțite. Putem rotunji acele colțuri cu o proprietate CSS numită border-radius.

Challenge 9:

  • Rotunjiti colturile imaginii cu 10px.