Wartości wyrażone w procentach
- Data publikacji
- Ostatnio edytowano
W poprzedniej części kursu CSS poznaliśmy kilka jednostek relatywnych i dowiedzieliśmy się w jaki sposób przeglądarka internetowa reaguje na tego typu jednostki.
W tej części kursu CSS poznamy kolejną jednostkę relatywną, która pozwala na to, aby wartości niektórych właściwości CSS zmieniały się w nieco bardziej dynamiczny sposób. Poznamy jednostkę %
, czyli procenty.
Gdy przeglądarka internetowa "zauważy", że jakaś wartość właściwości CSS elementu HTML ma być wyrażona w procentach, to przeglądarka internetowa będzie starała się obliczyć wartość, danej właściwości CSS, na podstawie wartości tej samej właściwości CSS elementu rodzica (chociaż mogą zdarzyć się wyjątki).
W poprzedniej części kursu CSS został zaprezentowany przykład, w którym do określenia właściwości width
została użyta jednostka em
, jednak raczej rzadko stosuje się tę jednostkę wraz z właściwością width
, ponieważ lepszym rozwiązaniem są jednostki px
oraz %
.
Przyjrzyjmy się następującemu dokumentowi HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
width:400px;
background-color:#000;
}
p {
margin:0;
padding:5px 0;
}
#dziecko1 {
width:80%;
background-color:gold;
}
#dziecko2 {
width:60%;
background-color:lightblue;
}
#dziecko3 {
width:40%;
background-color:lightgreen;
}
</style>
</head>
<body>
<div id="rodzic">
<p id="dziecko1">pierwsze dziecko</p>
<p id="dziecko2">drugie dziecko</p>
<p id="dziecko3">trzecie dziecko</p>
</div>
</body>
</html>
Zwróć uwagę na wartości właściwości width
, która odpowiada za szerokość elementu HTML.
Po wyświetleniu danego dokumentu HTML, w oknie przeglądarki internetowej, ujrzymy następujący rezultat:
Jak możemy zauważyć, w kodzie dokumentu HTML, który został zaprezentowany nieco wyżej, wszystkie wartości właściwości width
elementów p
, które są dziećmi tego samego rodzica, czyli elementu div
, zostały zapisane za pomocą wartości wyrażonych w procentach. Natomiast wartość właściwości width
, wspomnianego elementu div
, została zapisana za pomocą wartości wyrażonej w pikselach i wynosi ona 400px
.
Przeglądarka internetowa sama dokona obliczenia poszczególnych wartości właściwości width
dla naszych przykładowych dzieci elementu div
, czyli elementów p
. Wspomniane obliczenie będzie dokonywało się na podstawie wartości właściwości width
elementu rodzica (wartość 400px
).
- właściwość
width
elementu#dziecko1
będzie równa320px
, bo 80% z 400, to 320 - właściwość
width
elementu#dziecko2
będzie równa240px
, bo 60% z 400, to 240 - właściwość
width
elementu#dziecko3
będzie równa160px
, bo 40% z 400, to 160
Gdy w odpowiedni sposób wykorzystamy wartości procentowe oraz różne inne właściwości CSS, to będziemy mogli uzyskać następujący efekt:
lewa kolumna
prawa kolumna
Zaprezentowanym układem elementów zajmiemy się dopiero w dziale czwartym, ponieważ nie znamy jeszcze wszystkich zagadnień języka CSS, które będą nam potrzebne do utworzenia tego układu elementów HTML.
W poprzedniej części kursu CSS określaliśmy wartości właściwości font-size
, między innymi za pomocą wartości wyrażonych w jednostce em
, jednak równie dobrze moglibyśmy wykorzystać do tego celu wartości wyrażone w procentach.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
body {
font-size:100%;
}
h1 {
font-size:160%;
}
p {
font-size:120%;
}
ul {
font-size:100%;
}
</style>
</head>
<body>
<div>
<h1>To Jest Przykładowy Element H1</h1>
<p>
to jest przykładowy tekst umieszczony w elemencie - p
</p>
<ul>
<li>to jest przykładowy element listy HTML</li>
<li>to jest przykładowy element listy HTML</li>
<li>to jest przykładowy element listy HTML</li>
<ul>
</div>
</body>
</html>
W efekcie uzyskamy taki sam rezultat, jak podczas gdy nasze reguły CSS były zapisane za pomocą wartości wyrażonych w jednostce em
.
To Jest Przykładowy Element H1
to jest przykładowy tekst umieszczony w elemencie - p
- to jest przykładowy element listy HTML
- to jest przykładowy element listy HTML
- to jest przykładowy element listy HTML
Warto pamiętać, że gdy dla elementu body
lub html
określimy wartość właściwości font-size
w jednostce relatywnej (np. 1em
, 100%
), to będzie ona liczona na podstawie domyślnej wartości wielkości czcionki tekstu, jaka została ustawiona w ustawieniach danej przeglądarki internetowej (użytkownik może zmienić tą wartość).
W następnej części kursu CSS poznamy różnice pomiędzy elementami wyświetlanymi w bloku, a elementami wyświetlanymi w linii.