2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7791367417b2b2512ab3	Creare equilibrio visivo usando la proprietà text-align	0	https://scrimba.com/c/c3b4EAp	301053	create-visual-balance-using-the-text-align-property

--description--

Questa sezione del curriculum si concentra sul Visual Design applicato. Il primo gruppo di sfide si basa sul layout delle card fornite, per mostrare una serie di principi fondamentali.

Il testo è spesso una buona parte del contenuto web. Il CSS ha diverse opzioni su come allinearlo con la proprietà text-align.

text-align: justify; fa sì che tutte le righe di testo tranne l'ultima riga incontrino i bordi sinistro e destro della riga.

text-align: center; centra il testo

text-align: right; allinea il testo a destra

E text-align: left; (il predefinito) allinea il testo a sinistra.

--instructions--

Allinea il testo del tag h4, quello che dice "Google", al centro. Giustifica quindi il tag paragrafo che contiene informazioni su come Google è stato fondato.

--hints--

Il tuo codice dovrebbe utilizzare la proprietà text-align sul tag h4 per impostarlo a center.

assert($('h4').css('text-align') == 'center');

Il tuo codice dovrebbe utilizzare la proprietà text-align sul tag p per impostarlo su justify.

assert($('p').css('text-align') == 'justify');

--seed--

--seed-contents--

<style>
  h4 {

  }
  p {

  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

--solutions--

<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

2.9 KiB Raw Blame History