M5 | L2 – Introducere CSS II

Astăzi vom afla despre:

  • Id-uri, Margini si Padding

Aplicațiile pe care le vom folosi sunt:

Notepad++; CodePen

PROIECTE:

Stil pentru primul site

Puteți seta culoarea de fundal a unui element cu proprietatea background-color.

Challenge 1:

  • Creati o clasa silver-background care sa dea culoarea argintie fundalului a elemtului div.

În plus față de clase, fiecare element HTML poate avea și un atribut id. Există mai multe avantaje în utilizarea atributelor id. Puteți utiliza un id pentru a stila un singur element. id ar trebui să fie unic pentru fiecare element.

Challenge 2:

  • Dati un id formularului vostru cu textul cat-photo-form.

Un lucru interesant despre atributele ID este că, la fel ca clasele, le puteți stila folosind CSS. Cu toate acestea, un ID nu poate fi reutilizabil și ar trebui aplicat doar unui singur element. Un id are, de asemenea, o specificitate (importanță) mai mare decât o clasă, astfel dacă ambele sunt aplicate aceluiași element și au stiluri conflictuale, stilurile de id vor fi aplicate.

Iată un exemplu despre cum poți să-ți stilezi elementul cu atributul id cat-photo-element:

Rețineți că în interiorul elementului style, faceți întotdeauna referință la clase punând un “.” în fața numelor lor. Întotdeauna faceți referință la ID-uri, punând un “#” în fața numelor.

Challenge 3:

  • Dati un id-ului cat-photo-form un fond verde.

Poate ați observat deja acest lucru, dar toate elementele HTML sunt în esență dreptunghiuri mici. Trei proprietăți importante controlează spațiul care înconjoară fiecare element HTML: padding, margin și border.

Padding-ul unui element controlează cantitatea de spațiu dintre conținutul elementului și bordura acestuia.

Creati un nou ducument html cu urmatorul cod:

<style>

  .injected-text {

    margin-bottom: -25px;

    text-align: center;

  }

  .box {

    border-style: solid;

    border-color: black;

    border-width: 5px;

    text-align: center;

  }

  .yellow-box {

    background-color: yellow;

    padding: 10px;

  }

  .red-box {

    background-color: crimson;

    color: #fff;

    padding: 20px;

  }

  .blue-box {

    background-color: blue;

    color: #fff;

    padding: 10px;

  }

</style>

<h5 class=”injected-text”>margin</h5>

<div class=”box yellow-box”>

  <h5 class=”box red-box”>padding</h5>

  <h5 class=”box blue-box”>padding</h5>

</div>

Aici, putem vedea că caseta albastră și caseta roșie sunt în caseta galbenă. Rețineți că caseta roșie are mai mult padding decât cea albastră. Când măriți padding-ul căsuței albastre, aceasta va crește distanța (padding-ul) dintre text și bordura din jurul său.

Challenge 4:

  • Schimbati padding-ul casuteti albastre sa fie egal cu cel al casutei rosii

Marginea unui element controlează cantitatea de spațiu dintre bordura unui element și elementele înconjurătoare. Putem vedea că caseta albastră și caseta roșie sunt în caseta galbenă. Rețineți că caseta roșie are o margine mai mare decât cea albastră, făcând-o să pară mai mică. Când măriți marginea casetei albastre, aceasta va crește distanța dintre bordura și elementele înconjurătoare.

Challenge 4:

  • Schimbati prorpietatea margin casuteti albastre sa fie egala cu cea a casutei rosii

Challenge 5:

  • Schimbati prorpietatea margin a casuteti albastre si a celei rosii in valori negative

Uneori veți dori să personalizați un element, astfel încât să aibă cantități diferite de padding pe fiecare dintre fețele sale. CSS vă permite să controlați padding-ul tuturor celor patru laturi individuale ale unui element cu proprietățile de padding-top, padding-right, padding-bottom, and padding-left.

Challenge 6:

  • Dati casutei albastre padding de 40px sus si stanga, dar numai 20px jos si dreapta

Challenge 7:

  • Dati casutei albastre marginea de 40px sus si stanga, dar numai 20px jos si dreapta

În loc să specificați individual proprietățile de padding-top, padding-right, padding-bottom și padding-left, puteți să le specificați într-o singură linie, astfel:

  • padding: 10px 20px 10px 20px;

Aceste patru valori funcționează ca un ceas: sus, dreapta, jos, stânga și vor produce exact același rezultat ca și utilizarea instrucțiunilor de padding specifice laturii. La fel si cu prorpietatea margin.