M5 | L2 – Introducere CSS III

Astăzi vom afla despre:

  • Marimi absolute si relative, Mostenire

Aplicațiile pe care le vom folosi sunt:

Notepad++; CodePen

PROIECTE:

Stil pentru site

Ați adăugat atribute de id sau de clasă la elemente pe care doriți să le modelati în mod specific. Acestea sunt cunoscute sub numele de selectori de clasă sau id. Există și alți selectori CSS pe care îi puteți utiliza pentru a selecta grupuri de elemente personalizate care să fie stilate.

Pentru aceast challenge, veți utiliza selectorul de atribute [attr = value] pentru a stila checkbox-urile din CatPhotoApp. Acest selector se potrivește și stilează elemente cu o valoare specifică a atributului. De exemplu, codul de mai jos modifică marginile tuturor elementelor cu atributul type și o valoare corespunzătoare radio:

Challenge 1:

  • Folosind selectorul de atribut type, dati checkbox-urilor marginea de sus 10 px si marginea de jos 15px

Pixelii sunt un tip de unitate de lungime ce îi spune browserului cum să măreasca sau să spațieza un element. Pe lângă px, CSS are o serie de opțiuni pentru diferite unități de lungime pe care le puteți utiliza.

Cele două tipuri principale de unități de lungime sunt cele absolute și cele relative. Unitățile absolute se leagă de unitățile fizice de lungime. De exemplu, in și mm se referă la inci, respectiv milimetri. Unitățile de lungime absolută aproximează măsurarea reală pe un ecran, dar există unele diferențe în funcție de rezoluția unui ecran.

Unitățile relative, cum ar fi em sau rem, sunt relative unei alte valori a lungimii. De exemplu, em se bazează pe dimensiunea fontului unui element. Dacă îl utilizați pentru a seta proprietatea dimensiunii fontului, este relativ la dimensiunea fontului original.

Creati un nou ducument html cu codul:

<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: 20px 40px 20px 40px;

  }

  .red-box {

    background-color: red;

    margin: 20px 40px 20px 40px;

  }

  .green-box {

    background-color: green;

    margin: 20px 40px 20px 40px;

  }

</style>

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

<div class=”box yellow-box”>

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

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

</div>

Challenge 2:

  • Adaugati la clasa red-box, padding de 1.5 em

Să începem să vorbim despre moștenirea CSS. Fiecare pagină HTML are un element de body. Putem dovedi că elementul body există aici, oferindu-i o culoare de fundal negru.

Puteți stila elementului body la fel ca orice alt element HTML și toate celelalte elemente vor moșteni stilurile elementului body.

Challenge 3:

  • Mai întâi, creați un element h1 cu textul “Hello World”. Apoi, oferiti tuturor elementelor de pe pagina culoarea verde adăugând color: green; la selectorul de stil a elementului body.
  • În cele din urmă, acordați elementului body familia de caractere monospace adăugând font-family: monospace; selectorul de stil a elementului body.

Uneori, elementele HTML vor primi mai multe stiluri care intră în conflict. De exemplu, elementul h1 nu poate fi verde și roz în același timp. Să vedem ce se întâmplă când cream o clasă care face ca textul să fie roz, apoi o aplicăm unui element. Clasa noastră va trece peste proprietatea color: green a elementului body?

Challenge 4:

  • Creaza o clasa pink-text si dai-o elemetului h1

Clasa noastră „pink-text” a suprascris stilul CSS a elementului body! Deci, următoarea întrebare logică este: ce putem face pentru suprascrie clasa noastră „pink-text”?

Challenge 5:

  • Creați o clasă CSS suplimentară numită blue-text care conferă unui element culoarea albastră. Asigurați-vă că este sub declarația de clasă cu pink-text.
  • Aplicați clasa blue-text pe elementul h1 pe lângă clasa pink-text, și să vedem care câștigă.

Aplicarea mai multor atribute de clasă unui element HTML se face cu un spațiu între ele astfel:

  • class = „class1 class2”

Nu contează in ce ordine sunt listate clasele în elementul HTML. Cu toate acestea, ordinea declarațiilor de clasă din secțiunea <style> este importantă. A doua declarație va avea întotdeauna prioritate față de prima. Deoarece .blue-text este declarat al doilea, el înlocuiește atributele .pink-text

Există și alte modalități prin suprascrie CSS. Vă amintiți atributele id? Haideti să înlocuim clasele cu pink-text și blue-text și să facem ca elementul h1 să fie portocaliu, dând elementului h1 un id și apoi stilizându-l.

Challenge 6:

  • Dă elementului tău h1 atributul id: orange-text.
  • Lăsați clasele cu blue-text și pink-text pe elementul h1.
  • Creați o declarație CSS pentru ID-ul de orange-text în elementul style.

Challenge 7:

  • Utilizați un stil inline pentru a încerca să faceti elementul h1 alb. Lăsați clasele blue-text și pink-text pe elementul h1.

Există o ultimă modalitate de a suprascrie CSS. Aceasta este cea mai puternică metodă dintre toate. Dar înainte de a face acest lucru, să vorbim despre motivul pentru care ați dori vreodată suprascrieti CSS.

În multe situații, veți utiliza bibliotecile CSS. Acestea pot suprascrie accidental propriul CSS. Deci, atunci când trebuie să fii sigur că un element are CSS specific, poți folosi !important

Să mergem până la declarația noastră de clasă cu pink-text. Nu uitați că clasa noastră .pink-text a fost anulată de declarațiile de clasă ulterioare, declarațiile id și stilurile inline.

Challenge 8:

  • Să adăugăm cuvântul cheie !important la declarația color a elementului pink-text, pentru a vă asigura că 100% elementul h1 va fi roz.