CSS3: 52 pytania

Napisz na kartce kod strony, który odzwierciedli wygląd szablonu. Użyj flexboxa.

mid
<div class="wrapper">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>
.wrapper {
 width: 240px;
}
.box {
 width: 50px;
 padding: 10px;
 margin: 5px;
 border: 2px;
 float: left;
}
  1. Jak będą wyświetlone elementy wewnątrz elementu .wrapper?
  2. Jaką wysokość będzie miał element .wrapper?
junior
<div id="wrapper">
	<p class="text"></p>
</div>
#wrapper {
 color: green;
}
.text {
 color: red;
}
#wrapper .text {
 color: yellow;
}
html > body .text {
 color: blue;
}

Jaki kolor będzie miał tekst w tagu p?

junior

Jaki kolor zostanie zaaplikowany?

// plik CSS
.menu h1 {
 color: red !important
}
// plik HTML
<div class="menu"> 
	<h1 style="color:blue;">Home</h1>
</div>
junior

Jak zastosować dziedziczenie w SCSS?

junior

Jak wyśrodkować element w pionie? (omów kilka różnych technik)

junior

W jaki sposób można zamienić 2 elementy <div> miejscami nie używając float. Podaj klika sposobów.

mid

Na co uważać przy float, gdy mamy np. 3 divy i na środkowy damy float: right ?

junior

Clearfix? Kiedy używać, po co?

junior

Czym różni się display: inline, inline-block i block?

junior

Co w Bootstrapie oznacza pushowanie kolumn?

junior

Czym jest kaskadowość w CSS?

junior

Względem czego pozycjonuje się element, jeśli nie znajdzie rodzica o pozycji relatywnej?

junior

Container vs container-fluid (biblioteka Bootstrap) - jakie są różnice?

junior

Dodawanie czcionek poprzez link vs poprzez import. Co wybierzesz?

junior

Stylowanie elementów w CSS vs JavaScript. Co wybierzesz?

junior

Po co stosujemy normalizację CSS?

junior

Jaki kod (kolory) wyświetli powyższy mixin?

$color: #f00;

@mixin button($color: #fff) {
  font-size: 1.6rem;
  text-decoration: none;
  color: $color;
  @content;
}

.button-error {
  @include button {
    background-color: $color;
  }
}
mid

SASS: Jakie są różnice między @mixin, @function i @extends?

mid

Czym jest stos Z-INDEX, jak działa?

mid

Czy właściowości CSS margin-bottom i margin-top mają wpływ na inline element?

junior

Czy CSS obsługuje zmienne?

junior

Czym są Levele w CSS?

junior

Jakie właściwości powinniśmy animować, aby zapewnić wysoką płynność animacji, a jakie nie powinny być animowane?

mid

Czym są poniższe etapy renderowania: Layout, Paint, Composite?

senior

Wyjaśnij jakie elementy zostaną zawarte w następujących selektorach CSS

  • div, p
  • div p
  • div > p
  • div + p
  • div ~ p
junior

Czym jest RWD

junior

Jak wykonujemy animacje w CSS

junior

Jakie są różnice między CSS2 a CSS3

junior

Czy element z position: fixed może się pozycjonować względem dowolonego elementu na stronie?

junior

Na czym polega technika CSS Sprites

junior

Czym jest plik reset.css i czym różni się od normalize.css

junior

Animacje - lepiej używać za pomocą CSS czy JS i czemu

junior

Jakie znasz pseudo-klasy i pseudo-elementy

junior

Jak wpływa ustawienie właściwości float w css na zachowanie elementu HTML?

junior

Wymień parę zasad CSS, które są dziedziczone i aplikowane na elementy potomne (np. color)

junior

Rożnica między position: relative a position: absolute

junior

Jaki jest efekt dodania flagi !important

junior

Opisz model pudełkowy (box model)

junior

Co powoduje ustawienie właściwości box-sizing: border-box

junior

Jaka jest różnica między display: none a visibility: hidden

junior

Jaka jest hierarchia aplikowania styli (co ma wyższy priorytet, np. czy inline style na tagu czy arkusz styli, czy np. styl podpięty w head)

junior

Czym jest plik reset w CSS i dlaczego jest użyteczny

junior

Czym różni się selektor po klasie a po ID

junior

Jak pogrubić fragment tekstu

junior

Do czego służy Flexbox

junior

Opisz na czym polega metodyka BEM

junior

Jakie znasz metodyki CSS?

junior

Jaka jest różnica pomiędzy elementem liniowym a blokowym

junior

Czym są pseudoelementy w CSS. Wymień przykłady.

junior

Czym jest SASS i LESS

junior

Co nowego w CSS 4?

junior

Czegoś brakuje? Możesz dodać własne pytania!