Jak psát CSS

Uspořádání CSS vlastností

.selektor {
    content: "";
    cursor: pointer;

    position: relative;

    width: 10em;
    height: 10em;

    margin: 5em 9em;
    padding: 3em 5em;

    display: flex;
    justify-content: center;
    align-items: center;

    color: red;
    font-weight: bold;
    text-transform: uppercase;

    background-color: blue;
    background-image: url("...");
    background-repeat: no-repeat;

    border: 1px solid red;
    border-radius: 0.5em;

    box-shadow: 0 0 0.5em red;

    transform: rotate(45deg);
    transform-origin: 50% 50%;

    transition: all 0.5s;

    z-index: 100;
}

Úkoly

Úkol 1

Vytvořte následující webovou stránku.

Finální podoba úkolu 1

Všechny mezery jsou 1em nebo 0.5em. Použitá barva je mediumvioletred. Snažte se o co nejvíce znovupoužitelné řešení používající BEM metodiku. Nezapomeňte také na pravidla pro pojmenovávání tříd. Barva pozadí se nastavuje pomocí vlastnosti background-color.  

Přijmout úkol.

Úkol 2

Předchozí příklad rozšiřte o nový typ boxu, který je zobrazen níže.

Finální podoba úkolu 2

Přijmout úkol.

Úkol 3

Upravte HTML a CSS tak, aby byl kód srozumitelný, přehledný, znovupoužitelný a snadno rozšířitelný (vše co bylo na přednášce).

<!-- příklad ukazující jak se to dělat nemá -->

<div class="card">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mattis lacinia justo. Integer imperdiet lectus quis justo. <span>Fusce <a href="#">dui leo</a></span>, imperdiet in, aliquam sit amet, <span>feugiat eu, orci</span>.  
</div>
  
<div id="card2">
  <span>Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Proin mattis lacinia justo. Integer imperdiet lectus quis justo. <span>Fusce <a href="#">dui leo</a></span>, imperdiet in, aliquam sit amet, <span>feugiat eu, orci</span>.   
</div>
  
<div class="card card3">
  Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit</span>. Proin mattis lacinia justo. Integer imperdiet lectus quis justo. <span>Fusce <a href="#">dui leo</a></span>, imperdiet in, aliquam sit amet, <span>feugiat eu, orci</span>.  
</div>
/* opravdu valmi špatně napsané CSS
upravte HTML a CSS tak, aby bylo snadno spravovatelné, srozumitelné a rozšířitelné a zachovejte vizualizaci */

div span a:hover {
  color: black;  
}

#card2 {
  color: black;
  border: 1px solid black;
  padding: 1em;
  background-color: lightgreen;
}

.card {
  padding: 1em;
  background-color: lightgreen;
  border: 1px solid darkgreen;
}

span > a {
  color: green;
}

div {
  width: 60ch;
  margin: 1em auto;
  color: #303030;
}

a {
  color: blue;
  background-color: black;
}

div#card2 {
  background-color: lightblue;
}

.card3 span:last-child {
  background-color: red !important;
}

div a {
  background-color: yellow;
}

a {
  padding: 0em 0.4em;  
}

.card span:last-child {
  background-color: yellow;
}

.card3 span:first-child {
  background-color: yellow;
}


Přijmout úkol.

Úkol 4 - dobrovolný

Vraťte se k úkolu 4 z druhého cvičení. Zamyslete se, jak může dědičnost zefektivnit řešení.