INF.03 HUB - CSS

width / height

Co robi?

Określa szerokość i wysokość elementu.

Kiedy używać?

• kontenery
• obrazy
• sekcje strony

width:300px;

height:200px;

Typowe polecenie CKE:

Ustaw szerokość bloku na 300px oraz wysokość na 200px.

Częstotliwość: ~80%

background-color

Co robi?

Ustawia kolor tła elementu.

background-color: blue;

background-color: #1d355a;

Częstotliwość: ~90%

color

Ustawia kolor tekstu.

color: white;

Częstotliwość: ~90%

margin

Co robi?

Tworzy odstęp na zewnątrz elementu.

margin:20px;

margin-top:20px;

margin-bottom:20px;

Najczęstszy błąd:

Częstotliwość: ~95%

padding

Tworzy odstęp wewnątrz elementu.

padding:20px;

padding-left:10px;

Częstotliwość: ~95%

border

Tworzy obramowanie.

border:1px solid black;

border:2px dashed red;

Częstotliwość: ~70%

border-radius

Zaokrągla rogi.

border-radius:10px;

border-radius:50%;

Typowe polecenie CKE:

Zaokrągl rogi przycisku o 10px.

text-align

Wyrównanie tekstu.

text-align:center;

text-align:left;

text-align:right;

Częstotliwość: ~70%

display:flex

Co robi?

Ustawia nowoczesny układ elementów.

display:flex;

display:flex;

justify-content:center;

align-items:center;

Typowe zadanie CKE:

Wyśrodkuj elementy w poziomie.

Częstotliwość: ~85%

justify-content

justify-content:center;

justify-content:space-between;

justify-content:space-around;

align-items

align-items:center;

align-items:flex-start;

align-items:flex-end;

:hover

Efekt po najechaniu myszką.

button:hover{

background:red;

}

Częstotliwość: ~50%

float

Stary sposób układania elementów.

float:left;

float:right;

Częstotliwość: ~40%

overflow

Co zrobić gdy treść jest większa niż element.

overflow:hidden;

overflow:auto;

overflow:scroll;

position

Określa sposób pozycjonowania.

position:relative;

position:absolute;

position:fixed;

position:sticky;

Częstotliwość: ~60%

z-index

Który element ma być na wierzchu.

z-index:100;

Gotowiec egzaminacyjny #1

Przykładowe polecenie CKE:

Utwórz blok o szerokości 300px, wysokości 200px, niebieskim tle i zaokrąglonych rogach.

.blok{

width:300px;

height:200px;

background-color:blue;

border-radius:10px;

}

Gotowiec egzaminacyjny #2

Przykładowe polecenie CKE:

Wyśrodkuj elementy za pomocą Flexbox.

.container{

display:flex;

justify-content:center;

align-items:center;

}

Gotowiec egzaminacyjny #3

Przykładowe polecenie CKE:

Po najechaniu myszką zmień kolor przycisku.

button:hover{

background:red;

color:white;

}