Najczęściej używane właściwości CSS
Najczęściej używane właściwości CSS
Najczęściej używane właściwości CSS to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Wprowadzenie
Witajcie,
W tej sekcji poznamy najczęściej używane właściwości CSS.
Do tej pory zazwyczaj tworzyliśmy przykłady z prostymi właściwościami, takimi jak color czy font-size.
Szerokość i wysokość
Wysokość — szerokość
Właściwości width i height służą do ustawiania szerokości i wysokości naszych elementów.
Należy tutaj pamiętać o dwóch kwestiach.
- Nie możemy przypisywać szerokości ani wysokości elementom typu inline.
- Przypisane przez nas właściwości width i height są domyślnie niezależne od innych właściwości, takich jak margin, padding i border. Dotyczą one wyłącznie obszaru wewnątrz elementu.
Więcej informacji o powyższych wyjątkach podamy później.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Szerokość i wysokość 2
W poprzednim przykładzie przypisaliśmy szerokości i wysokości wartości stałe. Jednak wartości, które można przypisać, nie ograniczają się do stałych liczb.
Zobaczmy teraz, jak przypisać szerokość za pomocą wartości procentowej.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
content-box a border-box
Właściwość box-sizing domyślnie przyjmuje wartość content-box.
Domyślnie wartości width i height odnoszą się do treści.
Wartości obramowania i dopełnienia są dodawane do wartości width i height.
Załóżmy, że szerokość elementu wynosi 100px.
Po dodaniu do tego elementu dopełnienia o wartości 10px i obramowania o wartości 20px całkowita szerokość elementu wyniesie 100px + 10px + 20px = 130px.
Max-width
Za pomocą właściwości max-width możemy określić maksymalną szerokość elementu.
W poniższym przykładzie wartość max-width wynosi 100px. Mimo że domyślna wartość width to auto (element powinien zajmować 100% szerokości elementu nadrzędnego), element zajmuje 100px, a treść wychodzi poza obszar elementu.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Dekorowanie tekstu
Za pomocą właściwości text-decoration możemy definiować dekoracje tekstu.
Myślę, że najlepiej przeanalizować tę właściwość na przykładzie. Spójrz na wynik przykładowego kodu w podglądzie.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Możemy chcieć dodać odstęp na początku tekstu. Służy do tego właściwość text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Za pomocą właściwości text-align określamy poziome wyrównanie tekstu.
Zdefiniujmy przykładowy kod HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Za pomocą właściwości font-family określamy rodzaj czcionki używanej dla tekstu.
Warto znać tutaj kilka ważnych kwestii.
- Zdefiniowana czcionka musi być zainstalowana w systemie użytkownika. Dlatego należy użyć jednej z czcionek określanych jako czcionki bezpieczne dla sieci.
- Jeśli zamierzamy użyć niestandardowej czcionki, musimy dodać używaną czcionkę jako zależność zewnętrzną między znacznikami head. Podczas dodawania font-family powinniśmy określić preferowaną czcionkę główną i zapasową.
- Jeśli przeglądarka nie znajdzie w systemie czcionki głównej, wyświetli użytkownikowi czcionkę zapasową.
font-family 2
W poniższym przykładzie dla głównej klasy przypisano czcionkę Times New Roman.
Czcionki Times i serif przypisano odpowiednio jako drugą i trzecią opcję.
Przeglądarka najpierw próbuje użyć czcionki Times New Roman. Jeśli nie zostanie ona znaleziona w systemie, zostaną użyte pozostałe preferencje.
Jeśli przypisane przez nas czcionki nie są dostępne, przeglądarka użyje czcionki domyślnej.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Jak można wywnioskować z nazwy, właściwość ta określa styl używanej czcionki tekstu.
Przyjrzyjmy się teraz właściwości font-style na przykładzie.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Gratulacje
Gratulacje 🎉
W tej sekcji poznaliśmy najczęściej używane właściwości CSS.
W następnej sekcji poznamy marginesy CSS.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 16
- Lekcje
- 35
Często zadawane pytania
Czy lekcja „Najczęściej używane właściwości CSS” jest bezpłatna?
Tak — pełny tekst „Najczęściej używane właściwości CSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Co nauczysz się w „Najczęściej używane właściwości CSS”?
Najczęściej używane właściwości CSS Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Najczęściej używane właściwości CSS”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.