CSS, czyli Cascading Style Sheets, to język stylowania stron internetowych. Pozwala na zmianę wyglądu elementów HTML, takich jak kolory, czcionki, układ i marginesy.
Definicja klas
Klasy to sposób na grupowanie elementów HTML, które mają wspólne style. Aby zdefiniować klasę, należy użyć tagu `class` w elemencie HTML:
<div class=”mój-element”>
To jest mój element.
</div>
Następnie można użyć tej klasy do stylowania elementu w arkuszu stylów CSS:
.mój-element {
background-color: red;
color: white;
}
Zmiana koloru tła
Aby zmienić kolor tła elementu, należy użyć właściwości `background-color` w arkuszu stylów CSS. Wartość właściwości to kolor tła w postaci kodu szesnastkowego, na przykład `#ffffff` dla białego lub `#ff0000` dla czerwonego.
.mój-element {
background-color: #ffffff;
}
Zmiana koloru czcionki
Aby zmienić kolor czcionki elementu, należy użyć właściwości `color` w arkuszu stylów CSS. Wartość właściwości to kolor czcionki w postaci kodu szesnastkowego, na przykład `#ffffff` dla białego lub `#ff0000` dla czerwonego.
.mój-element {
color: #ffffff;
}
Spady
Spady to odstępy między elementem a jego sąsiadami. Aby zdefiniować spady dla elementu, należy użyć właściwości `padding` w arkuszu stylów CSS. Wartość właściwości to liczba określająca odstęp w pikselach lub procentach.
.mój-element {
padding: 10px;
}
Marginesy
Marginesy to odstępy między elementem a krawędzią okna przeglądarki. Aby zdefiniować marginesy dla elementu, należy użyć właściwości `margin` w arkuszu stylów CSS. Wartość właściwości to liczba określająca odstęp w pikselach lub procentach.
.mój-element {
margin: 10px;
}
Ustawienie tekstu
Aby zmienić ustawienie tekstu elementu, można użyć następujących właściwości w arkuszu stylów CSS:
- `font-family`: określa rodzinę czcionek
- `font-size`: określa rozmiar czcionki
- font-weight`: określa grubość czcionki
- `font-style`: określa styl czcionki
- `text-align`: określa wyrównanie tekstu
- `text-transform`: określa transformację tekstu, na przykład do wielkich lub małych liter
.mój-element {
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-transform: uppercase;
}
Przykład
Poniższy kod CSS zmienia kolor tła, kolor czcionki, spady, marginesy i ustawienie tekstu dla elementu z klasą `mój-element`:
.mój-element {
background-color: #ffffff;
color: #ff0000;
padding: 10px;
margin: 10px;
text-align: center;
text-transform: uppercase;
}
Po zastosowaniu tego kodu element będzie wyglądał następująco:
<div class=”mój-element”>
To jest mój element.
</div>