CSS3

Opracowanie na podstawie witryny:

https://www.w3schools.com/cssref/default.asp

(materiały w języku angielskim skopiowane zostały z podanej witryny)

To opracowanie nie zawiera opisu wszystkich właściwości CSS

(pytania proszę kierować na: Teams lub fon@amu.edu.pl)

Spis treści
Zapisywanie reguł CSS....................................................................................................................................................................... 3
Podstawowe selektory ...................................................................................................................................................................... 4
Najważniejsze kombinatory .............................................................................................................................................................. 6
Podstawowe jednostki CSS ............................................................................................................................................................... 7
Najważniejsze właściwości akapitów i czcionki ................................................................................................................................ 8
Model pudełkowy ........................................................................................................................................................................... 13
Kolor i tło ......................................................................................................................................................................................... 13
Pozycjonowanie elementów ........................................................................................................................................................... 15
Z-index ............................................................................................................................................................................................ 15
Flexbox ............................................................................................................................................................................................ 16
Grid ................................................................................................................................................................................................. 20
Przykład 1 - formatowanie akapitu ................................................................................................................................................. 21
Przykład 2 - formatowanie akapitu ................................................................................................................................................. 22
Przykład 3 - formatowanie akapitu ................................................................................................................................................. 23
Przykład 4 - formatowanie tabeli .................................................................................................................................................... 24
Przykład 5 - formatowanie tabeli .................................................................................................................................................... 26
Przykład 6 - formatowanie tabeli .................................................................................................................................................... 28
Przykład 7 - formatowanie tabeli .................................................................................................................................................... 30
Przykład 8 - formatowanie listy punktowanej ................................................................................................................................ 32
Przykład 9 - formatowanie obrazka ................................................................................................................................................ 33
Przykład 10 - formatowanie linku ................................................................................................................................................... 34
Przykład 11 - tworzenie ramki z obrazkiem i tekstem przy użyciu znacznika <a></a> ................................................................... 35
Przykład 12 - tworzenie ramki z obrazkiem i tekstem przy użyciu kontenera flexbox ................................................................... 37
Przykład 13 - tworzenie galerii w kontenerze Flexbox ................................................................................................................... 39
Przykład 14 - tworzenie kolumn z tekstem w kontenerze Flexbox................................................................................................. 42
Przykład 15 - tworzenie wysokiego nagłówka strony w kontenerze Flexbox ................................................................................. 44
Przykład 16 - Tworzenie złożonego kontenera flexbox zaweierającego trzy kontenery flexbox (każdy z tekstem i ze zdjęciem) . 47
Przykład 17 - tworzenie złożonego kontenera opartego na flexboxie i zawierającego tekst oraz galerię trzech zdjęć również
opartą na flexboxie ......................................................................................................................................................................... 49
1
Przykład 18 - tworzenie menu pionowego w kontenerze Flexbox ................................................................................................. 51
Przykład 19 - tworzenie menu poziomego w kontenerze Flexbox ................................................................................................. 53
Przykład 20 - tworzenie layoutu strony przy użyciu siatki Grid ...................................................................................................... 55

2
Zapisywanie reguł CSS

Reguły CSS można zapisywać w trzech miejscach:

a) bezpośrednio w znaczniku elementu, który ma być sformatowany

<p style=”color:yellow;”>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst</p>
Reguły zapisywane w znaczniku elementu mają najwyższy priorytet - przesłaniają one
reguły tworzone przy użyciu selektorów.

b) W znaczniku <style></style> umieszonym w sekcji nagłówka (do konkretnych

fragmentów dokumentu odnosimy się przy użyciu selektorów)

<style>
p{
color:yellow;
}
</style>

c) W zewnętrznym pliku tekstowym .css

W sekcji nagłówka trzeba dodać znacznik <link></link> wraz z odpowiednimi
parametrami:
<link rel=”stylesheet” href=”nazwa_pliku.css”>
W pliku tym zapisujemy reguły tak samo jak w znaczniku <style></style> - aby odnieść
się do konkretnych fragmentów formatowanego dokumentu trzeba używać
odpowiednich selektorów

3
Podstawowe selektory

Selektory określają to do jakiego fragmentu kodu html odnosi się określony zbiór reguł
CSS (zbiór ujęty w nawiasach klamrowych). Najważniejsze selektory:

a) Selektor elementu
p{
font-size:70px;
}
Podana reguła odnosi się do wszystkich wystąpień znacznika <p></p>
b) Selektor klasy:
.yellow {
color:yellow;
}
Podana reguła odnosi się do wszystkich znaczników w kodzie html, w których zawarto
zapis klasy yellow, np.:
<p class=”yellow”>tekst</p>
W jednym elemencie (w kodzie html) można odnieść się do kilku zdefiniowanych klas
css (rozdzielamy je spacją):
<p class=”yellow black-background”>tekst</p>
c) Selektor identyfikatora:
#main-header{
}
W kodzie html w danym znaczniku trzeba włączyć atrybut id, który określa
zdefiniowany identyfikator:
<h1 id=”main-header”></h1>
Konkretny identyfikator powinien być użyty w kodzie html tylko jeden raz (tylko dla
jednego elementu).
4
Często przyjmuje się, że selektora identyfikatora używa się tylko w kodzie javascript,
natomiast w formatowaniu css używa się selektorów klasy, nawet jeżeli określony zbiór
reguł dotyczy tylko jednego elementu html.
d) Grupowanie selektorów
Konkretny zbiór reguł CSS (ujęty w nawiasach klamrowych) może być przypisany do
kilku selektorów różnego typu:
h1, h2, .intro {
color:red;
}
e) Selektor uniwersalny *
Dotyczy wszystkich elementów w danym dokumencie html. Najczęściej przy jego
pomocy ustawia się dwie właściwości:
*{
margin: 0;
box-sizing: border-box;
}
Pierwszy zapis przesłania domyślne wartości marginesów, które nie zawsze wynoszą 0.
Natomiast właściwość box-sizing ustawiona na border-box zapewnia, że rozmiary
elementów blokowych (width oraz height) są liczone według zewnętrznego
obramowania. Domyślna wartość to: content-box - przy niej rozmiary elementów
blokowych są liczone według zawartości - bez uwzględnienia dopełnienia (padding)
oraz obramowania. W obu omówionych opcjach margines ustalony dla elementu nie
jest wliczany do rozmiaru elementu.
e) Selektor dla elementu html (root)
znacznik <html></html> jest nadrzędny w danym dokumencie i często umieszcza się w
nim bazowy rozmiar czcionki, np.:
html{
font-size: 10px;
}
W dokumencie można odnosić się do tego bazowego rozmiaru przy użyciu jednostek
rem (np. font-size:1.6rem; ustali rozmiar na 16px)

5
Najważniejsze kombinatory
(kombinacje selektorów)

Struktura kodu html najczęściej obejmuje elementy zagnieżdżone, np. kontener może
zawierać inne kontenery, tabela zawiera wiersze, które z kolei zawierają komórki.
Często spotykane są wielopoziomowe zagnieżdżenia.
Kombinatory tworzymy przy użyciu wymienionych w poprzednim punkcie selektorów
podstawowych.

a) kombinator potomka (spacja) - potomkiem danego elementu jest dowolny element

zagnieżdżony w tym elemencie na dowolnym poziomie, np.
.pojemnik p {zbiór reguł} (reguły dotyczą wszystkich akapitów zagnieżdżonych w
elementach klasy pojemnik - na dowolnym poziomie zagnieżdżenia)
.tabela1 td {zbiór reguł} (reguły dotyczą wszystkich komórek zagnieżdżonych w
elementach klasy pojemnik - na dowolnym poziomie zagnieżdżenia)
div p {zbiór reguł} - (reguły dotyczą wszystkich akapitów zagnieżdżonych w
pojemnikach div - na dowolnym poziomie zagnieżdżenia)

b) kombinator dziecka (znak >)

Dziecko to bezpośredni potomek danego elementu, a więc takie kombinatory dotyczą
tylko pierwszego stopnia zagnieżdżenia, np.:
.pojemniki > img {zbiór reguł} - (reguły dotyczą wszystkich znaczników img
zamieszczonych bezpośrednio w tagu klasy pojemniki)
div > p {zbiór reguł} - (reguły dotyczą wszystkich akapitów zamieszczonych
bezpośrednio w kontenerze div)

6
Podstawowe jednostki CSS

Jednostki bezwzględne:
px (liczba pikseli)
Jednostki rzadko lub praktycznie nigdy nie używane to: pt, pc, mm, cm, in
Przykład:
h1{
width:380px;
}

Jednostki względne (relatywnie do nadrzędnego elementu):

em (używana dla ustalania wielkości czcionki względem wielkości ustalonej dla
elementu nadrzędnego)
rem (używana dla ustalania wielkości czcionki względem wielkości ustalonej dla
elementu <html> )
vh (viewport height) -np. 50vh = 50% wysokości okna
vw (viewport width) - np. 50vw = 50% szerokości okna
% - wartość procentowa względem szerokości lub wysokości pojemnika nadrzędnego

7
Najważniejsze właściwości akapitów i czcionki

Poziome wyrównanie tekstu:

text-align
Najważniejsze wartości: left|right|center|justify;
Przykłady:
text-align:center;
text-align:left;
text-align:right;
text-align:justify;

Pionowe wyrównanie tekstu (szczególnie dla komórek tabeli):

vertical-align
Najważniejsze wartości:
top|middle|bottom
Przykłady:
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

Wcięcie akapitu
text-indent
dopuszczalne wartości:
length (np. 10px, 2em, 10pt, 2rem)
Przykład:
text-indent: 50px;

Dekoracja tekstu
text-decoration
Jest to połączenie trzech właściwości:
text-decoration-line (required !!!)
text-decoration-color
text-decoration-style

8
text-decoration-line
Najważniejsze dopuszczalne wartości:
underline|overline|line-through

text-decoration-color
(zob. informacje dot. ustawiania kolorów)

text-decoration-style
Najważniejsze dopuszczalne wartości:
solid|wavy|dotted|dashed|double

Przykłady dla text-decoration:

text-decoration: underline overline dotted red;
text-decoration: underline wavy blue;

Przekształcenie tekstu
text-transform
Najważniejsze dopuszczalne wartości:
capitalize|uppercase|lowercase|none

none – no capitalization. The text renders as it is. This is default;

capitalize – transforms the first character of each word to uppercase;
uppercase – transforms all characters to uppercase;
lowercase – transforms all characters to lowercase.
Przykłady:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Odstępy pomiędzy literami

letter-spacing
Najważniejsze dopuszczalne wartości: normal|length
normal – no extra space between characters. This is default
length – defines an extra space between characters (negative values are allowed).
Przykład:
letter-spacing: 3px;

9
Odstępy pomiędzy wyrazami
word-spacing
Najważniejsze dopuszczalne wartości:
normal|length;
normal - Defines normal space between words (0.25em) . This is default
length - Defines an additional space between words (in px, pt, cm, em, etc). Negative
values are allowed.
Przykład:
word-spacing: 30px;

Odstępy pomiędzy liniami:

line-height
dopuszczalne wartości:
normal|length
normal - wartość domyślna,
Najważniejsze dopuszczalne możliwości dla length:
1) liczba, która będzie przemnożona przez aktualną wielkość czcionki (np. 1.4, 2, 1.6
itp.). Rezultatem będzie aktualna wysokość linii,
2) wysokość linii wyrażona w konkretnych jednostkach (np.10px, 2em, 30pt itd.),
3) wartość procentowa aktualnej wielkości czcionki (np.: 150%, 200% itd.).
Przykłady:
line-height: normal;
line-height: 1.6;
line-height: 30px;
line-height: 200%;

Krój czcionki
font-family
Do tej właściwości można przypisać dowolną liczbę nazw krojów czcionki, przy czym
użyty zostanie pierwszy krój dostępny w danym systemie operacyjnym. Można też
używać nazw grup czcionek (generic family) z następującego zbioru:
serif – czcionki szeryfowe
sans-serif – czcionki bezszeryfowe
monospace – czcionki z rodziny monospace
cursive – czcionki z rodziny cursive
fantasty – czcionki z rodziny fantasty
W przypadku umieszczenia na liście jednej z wymienionych grup zostanie użyta
domyślna czcionka systemowa dla danej grupy.
10
Przykłady:
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif;
(nazwy wieloczłonowe należy ująć w cudzysłów).

Wielkość czcionki
font-size
Najważniejsze wartości: length|%|medium|small|large
length – ustalenie wielkości liczbowej przy użyciu konkretnych jednostek (np. 14px,
2em, 1 rem);
% - ustalenie wartości procentowej w odniesieniu do wielkości czcionki elementu
nadrzędnego (np. 150%);
medium – wartość domyślna (wielkość czcionki elementu nadrzędnego)
small, x-small, xx-small – wielkości mniejsze niż medium
large, x-large,xx-large – wielkości większe niż medium.
Przykłady:
font-size: 15px;
font-size: large;
font-size: 150%;

Waga czcionki
font-weight
Najważniejsze wartości:
normal|bold|number
normal – wartość domyślna
bold – czcionka pogrubiona
number (100, 200, 300, 400, 500, 600, 700, 800, 900) - Defines from thin to thick
characters. 400 is the same as normal, and 700 is the same as bold
Przykłady:
font-weight: normal;
font-weight: bold;
font-weight: 900;

11
Styl czcionki
font-style
dopuszczalne wartości: normal|italic|oblique|initial|inherit

normal -The browser displays a normal font style. This is default

italic - The browser displays an italic font style
oblique -The browser displays an oblique font style

Przykłady:
font-style: normal;
font-style: italic;
font-style: oblique;

Wariant czcionki
font-variant
Najwazniejsze wartości:
normal|small-caps
normal - The browser displays a normal font. This is default
small-caps - The browser displays a small-caps font (kapitaliki)
Przykłady:
font-variant: normal;
font-variant: small-caps;
Zbiorczy zapis dla czcionki
font
The font property is a shorthand property for:
font-style
font-variant
font-weight
font-size/line-height
font-family
The font-size and font-family values are required. If one of the other values is missing,
their default value are used.
Przykłady:
font: 15px Arial, sans-serif;
font: italic small-caps bold 12px/30px Georgia, serif;

12
Model pudełkowy
Szerokość marginesu
margin (wszystkie krawędzie), margin-
top, margin-right, margin-bottom,
margin-left
Najważniejsze wartości:
length|%
length – wielkość marginesu podana w
konkretnych jednostkach px, pt, cm,
etc. Domyślnie 0,
% – Specifies a margin in percent of the
width of the containing element
auto – The browser calculates a margin
Przykłady:
margin-bottom:50px;
margin: 35px; (wszystkie strony 35px)
margin: 35px 70px; (35px górna i dolna
krawędź, 70px prawa i lewa)
margin: 35px 70px 50px; (35px górna
krawędź, 70px prawa i lewa, 50px
dolna)
margin: 35px 70px 50px 90px; (35px
górna krawędź, 70px prawa, 50px
dolna, 90px lewa)
Styl obramowania
border-style (dotyczy wszystkich
krawędzi), border-top-style, border-
right-style, border-bottom-style,
border-left-style
Najważniejsze wartości: none|dotted|
dashed| solid| double| groove| ridge|
inset| outset|
none – brak obramowania
dotted – obramowanie kropkowanie
dashed - obramowanie kreskowane
solid – obramowanie jednolite
double – obramowanie podwójne
groove, ridge, inset, outset – style
obramowania 3D, końcowy efekt
uzależniony od użytego koloru
Przykład:
border-style: dotted;
Kolor obramowania
border-color (dotyczy wszystkich
krawędzi), border-top-color, border-
right-color, border-bottom-color,
border-left-color.
Najważniejsze wartości:
color|transparent
color – określony kolor obramowania
zgodny z jednym z dopuszczalnych
sposobów zapisu
transparent – obramowanie
tranparentne
Przykłady:
border-color: #92a8d1;
border-color: rgb(201, 76, 76);
border-color: rgba(201, 76, 76, 0.3);
border-color: hsl(89, 43%, 51%);
border-color: hsla(89, 43%, 51%, 0.3);
Grubość obramowania
border-width (obejmuje wszystkie
strony), border-top-width, border-
right-width, border-bottom-width,
border-left-width
dopuszczalne wartości:
medium|thin|thick|length
medium - Specifies a medium border.
This is default
thin - Specifies a thin border
thick - Specifies a thick border
length - Allows you to define the
thickness of the border.
Przykład:
border-width: 15px;
Zaokrąglenie obramowania:
border-radius
Najważniejsze wartości:
length|%
length Defines the shape of the
corners. Default value is 0,
% Defines the shape of the corners in %
Przyklady:
border-radius: 25px;
border-radius: 10%;
Zapis zbiorczy dla obramowania
border
Najważniejsze wartości:
border-width border-style border-color
Przykłady:
border: 5px solid red;
border: 4px dotted blue;
Dopełnienie
padding (wszystkie strony), padding-
top, padding-right, padding-bottom,
padding-left
Dopuszczalne wartości:
length|%
length – wielkość dopełnienia podana w
konkretnych jednostkach: px, pt, cm,
itd. (np. 20px, 30pt, 20%),
% - wielkość dopełnienia podana w
wartości procentowej w stosunku do
szerokości kontenera
Przykłady:
padding: 35px; (wszystkie strony 35px)
padding: 35px 70px; (35px górna i
dolna krawędź, 70px prawa i lewa)
padding: 35px 70px 50px; (35px górna
krawędź, 70px prawa i lewa, 50px
dolna)
padding: 35px 70px 50px 90px; (35px
górna krawędź, 70px prawa, 50px
dolna, 90px lewa)
Przykłady:
padding:20px;
padding-left:10px;
Kolor i tło
Najpopularniejsze sposoby
zapisywania kolorów:
a) nazwa koloru w języku angielskim,
np.: blue, red, yellow, lightblue.
b) rgb - składowe: red, green, blue w
zakresie od 0 do 255.
color: rgb(201, 76, 76);
color:rgb(123,220,12);
color:rgb(250,20,167);
c) rgba - składowe: red, green, blue w
zakresie od 0 do 255 oraz dodatkowo
parametr (alfa), który wskazuje na
transparentność (alfa = 0 oznacza pełną
transparentność, alfa = 1 oznacza pełną
nieprzezroczystość, czyli alfa jest liczbą
w zakresie od 0 do 1), np.:
color:rgba(123,220,12,0.5);
color:rgba(123,220,12,0.1);
color:rgba(250,20,167,0.4);
d) zapis szesnastkowy, np.:
color:#FFFFFF;
color:#83A556;
color:#A57D55;
13
e) HSL
HSL stands for hue, saturation, and
lightness - and represents a cylindrical-
coordinate representation of colors.
An HSL color value is specified with the
hsl() function, which has the following
syntax:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel
(from 0 to 360) - 0 (or 360) is red, 120 is
green, 240 is blue. Saturation is a
percentage value; 0% means a shade of
gray and 100% is the full color.
Lightness is also a percentage; 0% is
black, 100% is white.
Przykłady:
background-color: hsl(120, 100%, 50%);
/* green */
background-color: hsl(120, 100%, 75%);
/* light green */
background-color: hsl(120, 100%, 25%);
/* dark green */
background-color: hsl(120, 60%, 70%);
/* pastel green */
f) HSLA
Metoda HSLA różni się od HSL
parametrem Alpha (wartość od 0.0 do
1.0), który określa stopień
transparentności, przykłady:
color: hsla(120,100%,50%,0.3);
/* green */
color: hsla(120,100%,75%,0.3);
/* light green */
color: hsla(120,100%,25%,0.3);
/* dark green */
color: hsla(120,60%,70%,0.3);
/* pastel green */
Kolor czcionki
color
najwazniejsze wartości:
color
Przykłady
color: red;
color: #00ff00;
color: rgb(0,0,255);
Kolor tła
background-color
najważniejsze wartości:
color|transparent
color - Specifies the background color
transparent - Specifies that the
background color should be
transparent. This is default
Przykład:
background-color: #92a8d1;
Rysunek jako tło
background-image
najważniejsze wartości:
url
url('URL') - The URL to the image. To
specify more than one image, separate
the URLs with a comma.
none -No background image will be
displayed. This is default
Można użyć dwa lub więcej rysunków
jako tło – wymieniony w pierwszej
kolejności jest na wierzchu, jednak
jako rysunek może być użyty również
gradient z kolorami transparentnymi –
w ten sposób można tworzyć ciekawe
filtry kolorystyczne dla zdjęć.
Przykłady:
background-image: url("paper.gif");
background-image: url("img_tree.gif");
background-image: linear-gradient(to
right,rgba(255, 0, 0, 0.535),rgba(255,
255, 0, 0.665)), url(5.jpg);
Gradienty liniowe
Gradienty liniowe są ustalane poprzez
użycie polecenia linear-gradient w
ramach właściwości background-image
Składnia:
background-image: linear-
gradient(direction, color-stop1, color-
stop2, ...);
direction:
to bottom (wartość domyślna, nie
trzeba jej wpisywać)
to right
to left
to top
Przykłady:
background-image: linear-gradient(red,
yellow);
background-image: linear-gradient(to
right, red , yellow);
Zamiast powyższych wartości dla
direction można podać wartość kąta
(jednostka deg), np.:
background-image: linear-
gradient(180deg, red, yellow);
Można użyć większej liczby kolorów
(color-stop):
background-image: linear-gradient(red,
yellow, green);
Można uzyskać przezroczystość poprzez
użycie funkcji rgba:
background-image: linear-gradient(to
right, rgba(255,0,0,0), rgba(255,0,0,1))
Można też określić położenie
poszczególnych składowych kolorów
gradientu:
background-image: linear-gradient(red
10%, green 85%, blue 90%);
Gradienty radialne:
https://www.w3schools.com/css/css3_
gradients_radial.asp
Powtarzalność rysunku tła
background-repeat
najważniejsze wartości: repeat|repeat-
x|repeat-y|no-repeat|initial|inherit;
repeat - The background image is
repeated both vertically and
horizontally. The last image will be
clipped if it does not fit. This is default
repeat-x - The background image is
repeated only horizontally
repeat-y - The background image is
repeated only vertically
no-repeat - The background-image is
not repeated. The image will only be
shown once
space - The background-image is
repeated as much as possible without
clipping. The first and last images are
pinned to either side of the element,
and whitespace is distributed evenly
between the images
14
Przykłady:
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
Wielkość rysunku tła
background-size
najważniejsze wartości:
auto|length|percentage|cover|contain
auto - Default value. The background
image is displayed in its original size
length - Sets the width and height of
the background image. The first value
sets the width, the second value sets
the height. If only one value is given,
the second is set to "auto". Read about
length units
percentage - Sets the width and height
of the background image in percent of
the parent element. The first value sets
the width, the second value sets the
height. If only one value is given, the
second is set to "auto"
cover - Resize the background image to
cover the entire container, even if it has
to stretch the image or cut a little bit off
one of the edges
contain - Resize the background image
to make sure the image is fully visible
Przykłady:
background-size: auto;
background-size: 300px 100px;
Pozycja rysunku tła
background-position
najważniejsze wartości:
value
Value:
a) left top, left center, left bottom, right
top, right center, right bottom, center
top, center center, center bottom - If
you only specify one keyword, the
other value will be "center".
b) x% y% - The first value is the
horizontal position and the second
value is the vertical. The top left corner
is 0% 0%. The right bottom corner is
100% 100%. If you only specify one
value, the other value will be Note: This prevents the value of the
50%.Default value is: 0% 0%. height property from becoming larger
c) xpos ypos - The first value is the than max-height. The value of the
horizontal position and the second max-height property overrides the
value is the vertical. The top left corner height property.
is 0 0. Units can be pixels (0px 0px) or
any other CSS units. If you only specify The min-width property defines the
one value, the other value will be 50%. minimum width of an element.
You can mix % and positions
If the content is smaller than the
Wysokość i szerokość minimum width, the minimum width
will be applied.
The height and width properties may
have the following values:
If the content is larger than the
auto - This is default. The browser
minimum width, the min-width
calculates the height and width
property has no effect.
length - Defines the height/width in px,
cm etc.
Note: This prevents the value of the
% - Defines the height/width in
width property from becoming
percent of the containing block
smaller than min-width.
initial - Sets the height/width to its
default value
The min-height property defines the
inherit - The height/width will be
minimum height of an element.
inherited from its parent value
If the content is smaller than the
The max-width property defines the
minimum height, the minimum height
maximum width of an element.
will be applied.
If the content is larger than the
If the content is larger than the
maximum width, it will automatically
minimum height, the min-height
change the height of the element.
property has no effect.
If the content is smaller than the
Note: This prevents the value of the
maximum width, the max-width
height property from becoming
property has no effect.
smaller than min-height.
Note: This prevents the value of the
width property from becoming larger
than max-width. The value of the
max-width property overrides the Pozycjonowanie
width property. elementów
The max-height property defines the https://www.w3schools.com/css/css_
maximum height of an element.
positioning.asp
If the content is larger than the
maximum height, it will overflow.
How the container will handle the
overflowing content is defined by the
Z-index
overflow property.
https://www.w3schools.com/css/css_z-
index.asp
If the content is smaller than the
maximum height, the max-height
property has no effect.
15
Flexbox

CSS Flex Box Layout – moduł zapewniający efektywniejszy i skuteczniejszy sposób na zarządzanie
wyrównaniem, rozkładem elementów wewnątrz kontenerów oraz samymi kontenerami
(Wikipedia).
Flexbox jest kontenerem jednowymiarowym z opcją zwijania zawartości (właściwość flex-wrap),
opcją ustawienia poziomego i pionowego elementów (właściwość flex-direction). Przy użyciu
właściwości flex-direction można też ustawić elementy w odwrotnej kolejności.
W kontenerze który jest flexboxem można umieszczać dowolne elementy. Ustawienia tych
elementów tracą właściwości elementów liniowych lub blokowych i ich zachowanie jest narzucane
przez technologię Flexbox (stają się elementami: flexbox-items)

Najważniejsze właściwości kontenera FlexBox (np. <div></div>):

➢ display:flex (włączenie FlexBox-a dla danego kontenera, to jest właściwość obowiązkowa,
jeżeli chcemy, aby dany kontener był flexboxem)

➢ flex-direction:row(wartość domyślna)|column|row-reverse|column-reverse;

➢ flex-wrap:wrap|nowrap(wartość domyślna);

➢ justify-content(równoległe do osi głównej): flex-start(wartość domyślna)|flex-

end|center|space-around|space-between|space-evenly (demonstracja poszczególnych
ustawień dla tej właściwości na grafice poniżej);

➢ align-items(prostopadłe do osi głównej): stretch(wartość domyślna dla elementów o

nieokreślonej wysokości)|flex-start|flex-end|center (demonstracja poszczególnych
ustawień dla tej właściwości na grafice poniżej);

➢ align-content:stretch(wartość domyślna)|center|flex-start|flex-end| space-around|space-

between; (dotyczy tylko dwóch lub więcej rzędów przy włączonej właściwości flex-wrap –
wyrównywanie linii)

➢ gap: precyzuje stałe odstępy między flex-items

UWAGA!!! Dany kontener fexbox może zawierać mniejsze kontenery flexbox, które będą zawierały
swoje elementy flexitems. Poza tym kontener flexbox może być umieszczony w siatce Grid.

16
Najważniejsze właściwości elementów flex-items (elementy wewnątrz kontenera flexbox)

align-self Specifies the alignment for a flex item (overrides the flex container's align-items
property) - To samo co align-items (dla kontenera flex-box w odniesieniu do flex-
items), ale ustawiane indywidualnie dla danego flex-itema

flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties -
To jest właściwość o nazwie flex dla flex-iteama - można przypisać do wszystkich
flex-itemów w dany flex boxie liczby w pewnych proporcjach, na przykład 1 1 2

flex-basis Specifies the initial length of a flex item - przesłania standardowe właściwości

flex-grow Specifies how much a flex item will grow relative to the rest of the flex items
inside the same container

flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items
inside the same container

order Specifies the order of the flex items inside the same container - można zmienić
kolejność wyświetlania poszczególnych elementów, odpowiednie numery (od 1)
do poszczególnych elementów flex-items - do właściwości order

UWAGA!!! W odniesieniu do flex-items można stosować również standardowe właściwości width

oraz height (są to właściwości zwykłych kontenerów, np. div). W szczególności stosowanie tych
dwóch właściwości połączonych z wartością podaną w procentach może być skuteczną alternatywą
dla właściwości wymienionych w powyższej tabeli (wartości podane w procentach zapewniają
responsywność elementów przy zmianie rozmiarów kontenera nadrzędnego). A więc nie można
przy takim podejściu stosować właściwości podanych w tabeli (oprócz order), w szczególności nie
można używać flex-basis.
Przy stosowaniu właściwości width oraz height z wartościami podanymi w procentach najlepiej
zapewnić sumę szerokości lub wysokości wszystkich flex-items na 100%. Przy ustalaniu rozmiarów
zostanie uwzględnione tylko swobodne miejsce wewnątrz flexboxa (nie będą przeszkadzały na
przykład odstępy między flex-itemami - ustalone we właściwości gap flexboxa).
Trzeba jednak pamiętać, że właściwość width zawsze odnosi się do osi x a height do osi y -
właściwość flex-direction (row lub column) kontenera flexbox nie jest powiązana z tymi
właściwościami, to znaczy, że zmiana tej właściwości np. z row na column nie spowoduje
automatycznego zmiany odniesienia wartości ustalonych dla width do height.

17
18
19
Grid

Technologia Grid służy do ustalania układu kontenerów na stronie strony internetowej (layoutu strony).
Występuje jeden pojemnik nadrzędny (którego właściwość display jest ustawiana na: grid) oraz pojemniki wewnętrzne (grid-
items), które można dowolnie układać

Najważniejsze właściwości kontenera Grid:

display:grid; (włączenie Grid-a dla danego kontenera. Użycie tej właściwości jest niezbędne, żeby korzystać z tej technologii.
Właściwość ta jest włączana tylko dla kontenera zawierającego inne kontenery, które mają być ustawiane )

Układ kolumn (w px (pikselach) lub we fr (frakcjach)):

grid-template-columns:repeat(3, 350px);
grid-template-columns: 100px 200px 100px;
grid-template-columns: 2fr 1fr 2fr;
grid-template-columns: 200px 1fr 1fr;
grid-template-columns: 200px auto; (w tym przypadku druga kolumna będzie miała szerokość równą aktualnej szerokości
pojemnika nadrzędnego minus 200px)

(fr – frakcje ustalają proporcję szerokości lub wysokości poszczególnych kontenerów. Jeżeli dla jednych pojemników szerokości
są podawane w pikselach a dla innych we frakcjach, to szerokość we frakcjach obejmuje całą szerokość pojemnika
nadrzędnego pomniejszoną o sumę wszystkich szerokości podanych w pikselach). Natomiast ustawienie auto pokrywa całą
szerokość, która nie jest wykorzystana przez rozmiary podane w pikselach.

Układ wierszy:
grid-template-rows:200px 200px;
grid-template-rows:200px auto 200px;
W wypadku wierszy auto oznacza dopasowanie do zawartości kontenerów. Czyli wiersz w którym są puste kontenery będzie
miał wysokość 0px

Odstępy między kontenerami:

gap:15px;
row-gap:30px;
column-gap:45px;

Ustalanie layout strony przy użyciu (dowolnych) liter (trzeba uwzględnić liczbę kolumn i wierszy ustalonych we
właściwościach grid-template-columns oraz grid-template-rows):
grid-template-areas:
"h h h"
"m c p"
"m c p"
"m f p";
}

Poszczególne litery trzeba powiązać z kontenerami wewnętrznymi przy użyciu właściwości grid-area (jest to właściwość
kontenera wewnętrznego a nie nadrzędnego kontenera GRID), np:

#pole1{
grid-area:h;
}

W sekcji Body:

<div id="pole1"></div>

20
Przykład 1 - formatowanie akapitu

Poniższy akapit (element blokowy) ma szerokość 70% szerokości kontenera go zawierającego. Górny i dolny
margines ustawiony na 30px, lewy i prawy margines zawsze taki sam auto).
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.akapit1{
font-size: 20px;
font-family: sans-serif;
text-align: justify;
color: blue;
background-color: rgb(198, 198, 225);
border-color: rgb(81, 14, 238);
border-radius: 20px;
border-width: 5px;
border-style: solid;
padding: 20px;
width: 70%;
margin:30px auto;
}

Kod w sekcji <body></body>:

<p class="akapit1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
odit, nisi dignissimos illum numquam commodi nobis, eveniet provident reprehenderit
vero inventore laboriosam alias possimus ducimus eius atque adipisci culpa amet
neque? Obcaecati sed velit, veniam alias maxime quo ullam est, ea facere incidunt
dignissimos molestias magni ipsam assumenda ipsum nihil.</p>

Rezultat:

21
Przykład 2 - formatowanie akapitu

Ten akapit ma podwójne tło (background), przy czym wierzchnia warstwa jest gradientem liniowym (linear-gradient)
skierowanym w prawo (to right). Początkowy oraz końcowy kolor tego gradientu mają ustawione parametr alfa na 0.535 oraz
0.665, a więc są to kolory transparentne zgodne z zapisem rgba. Właściwość background-size jest ustawiona na cover, a więc
wielkość obrazka (spodnia warstwa tła) jest dopasowana do wielkości akapitu. Właściwość background-attachment ustawiona
na fixed sprawia, że obrazek tła nie przesuwa się przy skrolowaniu strony.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.akapit2{
border:5px solid rgb(106, 18, 18);
font-size: 24px;
width: 80%;
margin: 20px auto;
padding: 20px;
color: rgb(238, 241, 162);
background-image: linear-gradient(to right,rgba(255, 0, 0, 0.535),rgba(255, 255, 0,
0.665)), url(5.jpg);
background-attachment: fixed;
background-size: cover;
}
Kod w sekcji <body></body>:

<p class="akapit2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
consectetur facilis natus corrupti accusantium! Accusamus eos, alias error nesciunt
ratione eligendi. Adipisci facilis iure rerum cum? Aspernatur in quod voluptatum
consectetur ab nam, cum velit, esse dolor facere nisi quaerat impedit neque
voluptatem recusandae mollitia. Eaque iste ipsam quae totam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur esse asperiores,
dolore molestiae harum, dicta illo numquam nostrum ipsam cum sint tenetur veniam,
illum natus ullam in quas nesciunt dolorum.</p>
Rezultat:

22
Przykład 3 - formatowanie akapitu

Podobny przykład jak poprzedni, jednak tło jest pojedyncze i nie jest transparentne.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.akapit3{
background-image: url('5.jpg');
font-size: 24px;
padding: 20px;
padding-left: 60px;
color: yellow;
font-family: sans-serif;
font-weight: bold;
line-height: 1.5;
margin: 20px auto;
width: 100vw;
background-size: cover;
background-attachment: fixed;
}

Kod w sekcji <body></body>:

<p class="akapit3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
odit, nisi dignissimos illum numquam commodi nobis, eveniet provident reprehenderit
vero inventore laboriosam alias possimus ducimus eius atque adipisci culpa amet
neque? Obcaecati sed velit, veniam alias maxime quo ullam est, ea facere incidunt
dignissimos molestias magni ipsam assumenda ipsum nihil.</p>

Rezultat:

23
Przykład 4 - formatowanie tabeli

Prosta sformatowana tabela. Właściwość border-collapse jest wyłączona (ujęta tutaj jako komentarz), a więc
obramowania poszczególnych komórek oraz obramowanie całej tabeli nie łączą się w pojedynczą linię.
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.tabela1{
font-size: 24px;
border: 2px solid black;
margin: 30px;
background-color: beige;
//*border-collapse: collapse;*//
font-family: sans-serif;
}
.tabela1 th{
border: 1px solid black;
padding: 10px;
background-color: bisque;
}
.tabela1 td{
border: 1px solid black;
padding: 10px;
text-align: center;
}

Kod w sekcji <body></body>:

<table class="tabela1">
<tr>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>

24
 <td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
</table>

Rezultat:

25
Przykład 5 - formatowanie tabeli

W tej tabeli właściwość border-collapse jest ustawiona na collapse, a więc obramowanie komórek łączy się. Jednak dla
poszczególnych komórek jest ustawione tylko dolne obramowanie (border-bottom), natomiast dla całej tabeli obramowanie
zewnętrzne w ogóle nie jest ustawione. Mimo wszystko border-collapse musi być ustawione na: collapse – żeby nie było
przerw w poziomych liniach widocznego obramowania. Użycie selektor tr:hover (w ramach tabeli #tabela2) sprawia, że podana
reguła (zmiana koloru tła wiersza) jest aktywna tylko w czasie najechania wskaźnikiem myszy na ten wiersz.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.tabela2{
font-size: 16px;
margin: 20px;
background-color:gainsboro;
border-collapse: collapse;
font-family: sans-serif;
}
.tabela2 th{
border-bottom: 1px solid black;
padding: 10px;
background-color: darkseagreen;
}
.tabela2 td{
border-bottom: 1px solid black;
padding: 10px;
}
.tabela2 tr:hover{
background-color: darkgrey;
}

Kod w sekcji <body></body>:

<table class="tabela2">
<tr>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
</tr>
<tr>

26
 <td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
</table>

Rezultat:

27
Przykład 6 - formatowanie tabeli
W tej tabeli został użyty selector tr:nth-child(even). To oznacza, że reguła dotycząca formatowania tła wierszy (tr) na
kolor ciemnoszary dotyczy tylko wierszy parzystych. Alternatywą jest przekazanie w nawiasach słowa: odd lub
konkretnej wartości liczbowej. Wiersze <tr></tr> to dzieci (children) w ramach tabeli.
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.tabela3{
font-size: 18px;
margin: 20px;
background-color:gainsboro;
border-collapse: collapse;
font-family: sans-serif;
}
.tabela3 th{
border-bottom: 1px solid black;
padding: 10px;
background-color: darkseagreen;
}
.tabela3 td{
padding: 10px;
}
.tabela3 tr:nth-child(even){
background-color: darkgrey;
}

Kod w sekcji <body></body>:

<table class="tabela3">
<tr>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>

28
 <td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
</table>

Rezultat:

29
Przykład 7 - formatowanie tabeli
Przykład podobny do poprzedniego, jednak selektor :nth-child został użyty w odniesieniu do komórek th i td
(formatowanie tła i koloru czcionki). Komórki th i td sa dziećmi (children) w ramach poszczególnych wierszy. A więc
selektor th:nth-child(4) dotyczy czwartej komórki <th></th> w wierszu.
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.tabela4{
font-size: 24px;
text-align: center;
margin: 20px;
border-collapse: collapse;
border: 4px solid orange;
}
.tabela4 th{
background-color: rgb(244, 225, 207);
padding: 10px;
}
.tabela4 td{
padding: 5px;
}
.tabela4 tr{
background-color: cornsilk;
}
.tabela4 th:nth-child(4) {
color: red;
background-color:orange;
}
.tabela4 td:nth-child(4){
color: red;
background-color:yellow;
}

Kod w sekcji <body></body>:

<table id="tabela4">
<thead>
30
 <tr>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
<th>Nagłówek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
<tr>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
<td>Dane</td>
</tr>
</tbody>
</table>

Rezultat:

31
Przykład 8 - formatowanie listy punktowanej

Listy można formatować jak w tym przykładzie. Ustawienie właściwości list-style-type na none wyłącza punktory.
Ustawienie padding (dla całej listy) na 0px usuwa domyślne dopełnienie z lewej strony.
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.lista1{
list-style-type:none;
font-size: 20px;
font-family: sans-serif;
background-color: greenyellow;
width: 200px;
padding: 0px;
border: 1px solid black;
margin-left: 40px;
}
.lista1 li{
background-color: yellow;
padding: 10px;
margin: 10px;
}
Kod w sekcji <body></body>:

<ul class="lista1">
<li>Dane</li>
<li>Dane</li>
<li>Dane</li>
<li>Dane</li>
</ul>
Rezultat:

32
Przykład 9 - formatowanie obrazka

Przykład formatowania obrazka. Przy zmianie szerokości (width) obrazek zachowuje swoje proporcje, a więc wysokość również
zmienia się automatycznie. W tym przykładzie użyto właściwości box-shadow do którego zostały przekazane się 4 parametry:
przesunięcie cienia na osi X, przesunięcie cienia na osi Y, rozmycie cienia, kolor cienia.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.obraz1{
width: 500px;
margin: 50px;
box-shadow: 15px 15px 10px gray;
border: 10px solid lightblue;
border-radius: 50px;
}

Kod w sekcji <body></body>:

<img class="obraz1" src="5.jpg" alt="Poznań">

Rezultat:

33
Przykład 10 - formatowanie linku

Znacznik <a></a> również można formatować. Najprawdopodobniej najczęściej jest używane ustawienie właściwości
text-decoration na: none (usunięcie domyślnego podkreślenia linku) oraz zmiana koloru czcionki (właściwość color). Trzeba
pamiętać, że jest to element liniowy, zatem formatowanie (ustawienia szerokości i wysokości) jest inne niż przy elementach
blokowych. Element <a></a> może też znajdować się wewnątrz kontenera Flexbox (jako flexbox-item). Może on również sam
być flexboxem (poprzez ustawienie właściwości display na flex). W tych wypadkach możliwości formatowania są zgodne z
technologią Flexbox.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.linki1{
text-decoration: none;
color: black;
font-size: 2rem;
background-color: beige;
border: 1px solid brown;
padding: 10px;
}

Kod w sekcji <body></body>:

<a href="http://www.amu.edu.pl" class="linki1"> Link do strony UAM </a>

Rezultat:

Zamieszczenie elementu blokowego <div></div> w elemencie liniowym <a></a> sprawi że link

będzie miał całą szerokość strony. Aby temu zapobiec można zmienić właściwość display znacznika
<a></a> na inline-block lub zamieścić ten element w kontenerze flexbox.

34
Przykład 11 - tworzenie ramki z obrazkiem i tekstem przy użyciu znacznika <a></a>
W tym przykładzie ramka z obrazkiem i tekstem jest umieszczona w znaczniku <a></a>, co sprawia, że cała ramka
staje się linkiem. Jednak właściwość display elementu <a> zostala zmieniona na block, a więc hiperłącze stało się
elementem blokowym.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.ramka1{
display: block;
padding: 15px;
margin: 10px;
width: 250px;
border: 1px solid gray;
height: 250px;
background-color: rgb(137, 227, 151);
text-decoration: none;
color: darkslategray;
border-radius: 20px;
}

.ramka1:hover{
box-shadow: 0 0 15px gray;
}

.ramka1 img{
width: 100%;
height: 80%;
object-fit:cover;
}

Kod w sekcji <body></body>:

Rezultat:

35
36
Przykład 12 - tworzenie ramki z obrazkiem i tekstem przy użyciu kontenera flexbox

Podobny rezultat jak w omówionym przykłądziemożna uzyskać przy użyciu technologii flexbox. A więc właściwość
display elementu <a> zostala zmieniona na flex, czyli tym razem hiperłącze stało się kontenerem flexbox.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.ramka2{
display: flex;
flex-direction: column;
padding: 15px;
margin: 10px;
width: 250px;
border: 1px solid gray;
height: 250px;
background-color: rgb(191, 187, 184);
text-decoration: none;
color: darkslategray;
border-radius: 20px;
}

.ramka2:hover{
box-shadow: 0 0 15px gray;
}

.ramka2 img{
width: 100%;
height: 80%;
object-fit:cover;
}

Kod w sekcji <body></body>:

<a href="http://www.wp.pl" class="ramka2">

<img src="1.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
37
Rezultat:

38
Przykład 13 - tworzenie galerii w kontenerze Flexbox
W tym przykładzie kontener Flexbox został użyty do utworzenia galerii z ramkami opartymi również na flexboxie.

A więc jest to zagnieżdżenie kontenerów Flexbox w kontenerze Flexbox.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.galeria1{
display: flex;
background-color: rgb(206, 245, 240);
flex-wrap: wrap;
justify-content: space-evenly;
margin: 30px;
}

.ramka2{
display: flex;
flex-direction: column;
padding: 15px;
margin: 10px;
width: 250px;
border: 1px solid gray;
height: 250px;
background-color: rgb(191, 187, 184);
text-decoration: none;
color: darkslategray;
border-radius: 20px;
}

.ramka2:hover{
box-shadow: 0 0 15px gray;
}

.ramka2 img{
width: 100%;
height: 80%;
object-fit:cover;
}
39
Kod w sekcji <body></body>:

<div class="galeria1">
<a href="http://www.wp.pl" class="ramka2">
<img src="1.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="2.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="3.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="4.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="5.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="6.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="7.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
<a href="http://www.wp.pl" class="ramka2">
<img src="8.jpg" alt="">
<p>Lorem ipsum dolor sit amet.</p>
</a>
</div>

40
Rezultat:

41
Przykład 14 - tworzenie kolumn z tekstem w kontenerze Flexbox

W tym przykładzie kontener flexbox jest utworzony przy użyciu kontenera <div></div>. Zawiera on trzy kontenery
<div></div> (flexbox-items), i każdy z nich zawiera akapit z tekstem. Dla tych flexbox-items (kolumna 1-3)
właściwość flex jest ustawiona na: 1, 1 i 2. To sprawia, że szerokość tych kontenerów ma wyjściowe proporcje: 1 do
1 do 2. (alternatywnie: podobny efekt można uzyskac przy użyciu wartości procentowych dla własciwości width
wewnętrznych kontenerów flex-items)

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.flex1{
display: flex;
width: 600px;
font-family: sans-serif;
font-size: 1rem;
border: 10px solid rgb(243, 143, 35);
border-radius: 20px;
}
.kolumna1{
flex:1;
background-image: linear-gradient(to right, orange , yellow);
padding: 20px;
}
.kolumna2{
flex:1;
background-image: linear-gradient(to right, orange , yellow);
padding: 20px;
}
.kolumna3{
flex:2;
background-image: linear-gradient(to right, orange , yellow);
padding: 20px;
}

42
Kod w sekcji <body></body>:

<div class="flex1">
<div class="kolumna1"><p>Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Sapiente delectus, sit, qui quibusdam ex ab doloremque voluptas recusandae
alias incidunt consectetur magni voluptatibus a fuga minus. Adipisci blanditiis modi
incidunt.</p></div>

<div class="kolumna2"><p>Lorem, ipsum dolor sit amet consectetur adipisicing

elit. Sapiente delectus, sit, qui quibusdam ex ab doloremque voluptas recusandae
alias incidunt consectetur magni voluptatibus a fuga minus. Adipisci blanditiis modi
incidunt.</p></div>
<div class="kolumna3"><p>Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Sapiente delectus, sit, qui quibusdam ex ab doloremque voluptas recusandae
alias incidunt consectetur magni voluptatibus a fuga minus. Adipisci blanditiis modi
incidunt.</p></div>
</div>

Rezultat:

43
Przykład 15 - tworzenie wysokiego nagłówka strony w kontenerze Flexbox

Nagłówek strony oparty na kontenerze flexbox, zajmuje całą szerokość strony oraz 3/4 wysokości okna przeglądarki,
Zawiera trzy elementy, z czego dwa to również flexboxy (menu oraz środkowy prostokąt), natomiast trzeci element
wewnętrzny jest pusty i został użyty tylko po to, żeby dwa pierwsze wewnętrzne kontenery można było wyrównać
pionowo przy użyciu właściwości justify-content (space-between). Kierunek kontenera głównego (flex-direction) to:
column.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

*{
margin: 0;
box-sizing: border-box;
}
.naglowek1{
width: 100%;
height: 75vh;
display: flex;
justify-content: space-between;
flex-direction: column;
background-image: linear-gradient(rgba(220, 231, 20, 0.582),rgba(23, 204, 198,
0.755)), url(2.jpg);
background-size: cover;
}
.naglowek1 .napis{
align-self: center;
display: flex;
font-family: sans-serif;
flex-direction: column;
align-items: center;
justify-content: center;
width: 350px;
height: 150px;
border-radius: 30px;
background-color: rgba(223, 211, 189, 0.544);
font-size: 30px;

44
 border-style:double;
border-color: gold;
border-width: 15px;
color: yellow;
}

.naglowek1 .menu3{
display: flex;
font-family: sans-serif;
flex-direction: row;
align-self: flex-end;
width: 400px;
margin-top: 15px;
font-size: 24px;
justify-content: space-between;
margin-right: 30px;
}

Kod w sekcji <body></body>:

<div class="naglowek1">
<div class="menu3">
<a href="http://www.onet.pl">Link1</a>
<a href="dowolony link">Link2</a>
<a href="dowolony link">Link3</a>
<a href="dowolony link">Link4</a>
<a href="dowolony link">Link5</a>
</div>
<a class="napis" href="http://www.wp.pl">
<p>Tytuł Strony</p>
</a>
<div></div>
</div>

45
46
Przykład 16 - Tworzenie złożonego kontenera flexbox zaweierającego trzy kontenery
flexbox (każdy z tekstem i ze zdjęciem)

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

*{
margin: 0;
box-sizing: border-box;
}
.gal1{
display: flex;
gap:30px;
margin: 20px;
background-color: rgb(200, 224, 246);
padding: 20px;
}
.gal1-el{
margin-top: 10px;
display: flex;
width: 33%;
flex-direction: column;
}
.gal1-el img{
width: 100%;
border-radius: 20px;
height: 60%;
}
.gal1-el p{
margin-top: 5px;
font-size: 16px;
font-family: sans-serif;
}
.gal1-el h2{
margin-top: 15px;
}

47
Kod w sekcji <body></body>:

<div class="gal1">
<div class="gal1-el">
<img src="1.jpg" alt="">
<h2> Nagłówek</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus atque
fugiat nulla quasi placeat consequuntur nostrum ad aliquam magni pariatur?</p>
</div>
<div class="gal1-el">
<img src="2.jpg" alt="">
<h2>Nagłówek</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus atque
fugiat nulla quasi placeat consequuntur nostrum ad aliquam magni pariatur?</p>
</div>
<div class="gal1-el">
<img src="3.jpg" alt="">
<h2>Nagłówek</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus atque
fugiat nulla quasi placeat consequuntur nostrum ad aliquam magni pariatur?</p>
</div>
</div>

48
Przykład 17 - tworzenie złożonego kontenera opartego na flexboxie i zawierającego
tekst oraz galerię trzech zdjęć również opartą na flexboxie
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.info1{
display: flex;
flex-direction: column;
width: 400px;
background-color: rgb(242, 242, 123);
font-family: sans-serif;
padding: 10px;
border-radius: 20px;
margin: 20px;
}
.info1 h3{
font-size: 24px;
margin-top: 10px;
}
.info1 h5{
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.info1 p{
margin-top: 10px;
text-align: justify;
}
.info1 .gal{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 5px;
margin-top: 10px;
}
.info1 img{
width: 33%;
border-radius: 10px;
}

49
Kod w sekcji <body></body>:

<div class="info1">
<h3>Lorem, ipsum dolor.</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, unde.</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis sit eligendi
nesciunt pariatur perspiciatis optio deserunt. Sunt mollitia vitae at a veritatis
maiores laboriosam illum blanditiis dolor tenetur, perferendis incidunt?</p>
<div class="gal">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dicta facere
nobis enim labore ab obcaecati. Culpa consectetur, quae ipsum cupiditate, unde rerum
suscipit dolor nulla ducimus magni earum! Enim!</p>
</div>

Rezultat (przy powyższym kodzie tylko jeden kontener, a nie dwa jak poniżej):

50
Przykład 18 - tworzenie menu pionowego w kontenerze Flexbox

Menu utworzone przy użyciu flexboxa (kontener menu1). Właściwość flex-direction tego kontenera ustawiona na
column. Ten kontener nie ma ustalonej szerokości, dlatego będzie zajmował całą szerokość kontenera nadrzędnego.
Elementy <a></a> są elementami wewnętrznymi (flex-items) i ich właściwość display również jest ustawiona na flex.
A wiec każdy taki element (pozycja menu) jest flexboxem z ustawioną właściwością justify-content oraz align-items.

Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.menu1{
display: flex;
flex-direction:column;
width: 250px;
}

}
.menu1 a{
text-decoration: none;
padding: 10px;
background-color: rgb(202, 226, 194);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: sans-serif;
color: rgb(65, 64, 64);
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}

.menu1 a:hover{
background-color: darkseagreen;
}

Kod w sekcji <body></body>:

<div class="menu1">

51
 <a href="dowolny link">Element 1</a>
<a href="dowolny link">Element 2</a>
<a href="dowolny link">Element 3</a>
<a href="dowolny link">Element 4</a>
<a href="dowolny link">Element 5</a>
<a href="dowolny link">Element 6</a>
<a href="dowolny link">Element 7</a>
<a href="dowolny link">Element 8</a>
</div>

Rezultat:

52
Przykład 19 - tworzenie menu poziomego w kontenerze Flexbox

Przykład podobny jak poprzedni, jednak właściwość flex-direction jest ustawiona na row;
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

.menu2{
display: flex;
flex-direction: row;
}

.menu2 a{
text-decoration: none;
padding: 10px;
width: 150px;
background-color: rgb(202, 226, 194);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: sans-serif;
color: rgb(65, 64, 64);
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}

.menu2 a:hover{
background-color: darkseagreen;
}

Kod w sekcji <body></body>:

<div class="menu2">
<a href="http://www.onet.pl">Element 1</a>
<a href="plik1.html">Element 2</a>
<a href="dowolny link">Element 3</a>
<a href="dowolny link">Element 4</a>

53
 <a href="dowolny link">Element 5</a>
<a href="dowolny link">Element 6</a>
<a href="dowolny link">Element 7</a>
<a href="dowolny link">Element 8</a>
</div>

Rezultat:

54
Przykład 20 - tworzenie layoutu strony przy użyciu siatki Grid

W tym przykładzie użyto technologii Grid dla rozplanowania layoutu strony. Kontener nadrzędny (grid1) zawiera
cztery inne kontenery (grid-items). Każdy z nich może zawierać kolejne elementy. Każdy grid-item może być też flex-
boxem (jego właściwość flex trzeba ustawić na: flex). Dzięki użyciu wartości auto dla drugiej kolumny (właściwość
grid-template-columns) będzie ona miała szerokość zależną od aktualnej szerokości pojemnika nadrzędnego
(pomniejszona o szerokość pierwszej kolumny, czyli 200px). Ewentualne użycie wartości auto w odniesieniu do
dowolnego wiersza sprawiłoby, że jego wysokość będzie się dopasowywać do zawartości.
Kod w znaczniku <style></style> lub w zewnętrznym pliku .css:

#grid1{
display: grid;
grid-template-columns: 150px auto;
grid-template-rows: 150px 400px 100px;
grid-template-areas:
"h h"
"n m"
"f f";
}
#header1{
background-color: lightblue;
grid-area: h;
}
#nav1{
background-color: lightsalmon;
grid-area: n;
}
#main1{
background-color: lightgreen;
grid-area: m;
}
#footer1{
background-color: yellow;
grid-area: f;
}

55
Kod w sekcji <body></body>:
<div id="grid1">
<header id="header1">
</header>
<nav id="nav1">
</nav>
<main id="main1">
</main>
<footer id="footer1">
</footer>
</div>

Rezultat:

56