CSS - niektóre właściwości

Poniżej znajdziesz niektóre z często używanych właściwości CSS. Więcej informacji możesz znaleźć TUTAJ lub TUTAJ (j. angielski)

  1. Właściwości określające wygląd tekstu
    1. Właściwości określające wygląd tekstu
    2. Wyrównanie tekstu
    3. Wcięcie pierwszego wiersza
    4. Dodawanie efektu cienia do tekstu
    5. Zmiana czcionki
  2. Tło
    1. Ustawienie koloru tła
    2. Ustawienie obrazka jako tła
  3. Obrazek
    1. Ustawienie obrazka z prawej/lewej strony wśród tekstu
  4. Kontrolowanie zawartości strony
    1. Szerokość strony
    2. Wyśrodkowanie zawartości strony

Tekst

Zmiana koloru tekstu

Właściwość: color

Wartości: kolory (np. kod szesnastkowy koloru, nazwa, itp.)

Przykład:

przykład zastosowania właściwości color

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa


Wyrównanie tekstu

Właściwość: text-align

Wartości:

Przykład:

przykład zastosowania właściwości text-align

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa


Wcięcie pierwszego wiersza (tzw. akapit)

Właściwość: text-indent

Wartości: należy podać wielkość wcięcia w jednostkach odległości (np. px, cm)

Przykład:

przykład zastosowania właściwości text-indent

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa


Dodawanie efektu cienia do tekstu

Właściwość: text-shadow

Wartości: wartość podajemy według wzoru: x | y | rozmycie | kolor (w miejsce znaku | wstawiamy spację)

Przykład:

przykład zastosowania właściwości text-shadow

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa


Zmiana czcionki

Możemy ustawić osobną czcionkę dla danych elementów html (<p>, <h1> i inne), a także dla całego dokumentu (czyli <body>).

Właściwość: font-family

Wartości: podajemy rodzinę czcionek, m.in.:

Przykład:

przykład zastosowania właściwości font-family

Szybkim i wygodnym sposobem na wprowadzenie wybranych czcionek na swoją stronę jest skorzystanie z Google Fonts

TUTAJ znajdziesz listę popularnych czcionek, które bez problemu wyświetli każda przeglądarka. Jeżeli jednak zechcesz na stronie wyświetlić nietypową czcionkę, do jej wprowadzenia należy użyć stylów CSS. Poradnik, jak to uczynić, znajdziesz np. TUTAJ.

TUTAJ znajdziesz przykłady różnych nietypowych czcionek do umieszczenia na swojej stronie - WARTO SKORZYSTAĆ!

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa



Tło

Ustawienie koloru tła

Właściwość: background-color

Wartości: kolory (np. kod szesnastkowy koloru, nazwa, itp.)

Przykład:

przykład zastosowania właściwości background-color

Właściwość background-color możemy ustawić dla większości elementów html, między innymi.:

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa


Ustawienie obrazka jako tła

Właściwość: background-image

Wartości: url(”link lub ścieżka dostępu do obrazka”)

Przykład:

przykład zastosowania właściwości background-image

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa

KOLOROWY OBRAZEK



Obrazek

Ustawienie obrazka z prawej/lewej strony wśród tekstu

Wykorzystamy właściwość float. Jej zastosowanie jest znacznie szersze, lecz może być wykorzystana m.in. do kontrolowania położenia obrazków na stronie, wstawionych w środku tekstu.

Właściwość: float

Wartości:

Przykład:

przykład zastosowania właściwości float

Więcej informacji możesz znaleźć TUTAJ

Sprawdź jak to działa



Kontrolowanie zawartości strony

Szerokość strony

Strona internetowa, której zawartość rozłożona jest na całej szerokości wyświetlacza, wygląda niekorzystnie i jest niewygodna dla użytkownika. Dobrze jest zatem nakazać stronie html ograniczyć miejsce poświęcone na wyświetlanie zawartości. Ustalimy więc szerokość całego znacznika <body>:

Właściwość: width

Wartości: należy podać szerokość w jednostkach odległości (np. px, cm)

Więcej informacji możesz znaleźć TUTAJ


Wyśrodkowanie zawartości strony

Kiedy już ograniczymy szerokość naszej strony, domyślnie wyrówna się do lewej strony ekranu. Zawartość prezentować się będzie znacznie lepiej, kiedy wyśrodkujemy ją w poziomie - a więc wyświetlać się będzie na środku ekranu.

Podana poniżej metoda działa w większości przypadków. Wyśrodkowanie tego, co umieszczone jest na stronie internetowej może być skomplikowane – zależy od jej zawartości, używanej przeglądarki, i wielu innych spraw.

Właściwość: margin

Wartości: 0 auto Przy właściwości margin (czyli margines) możemy osobno określić wielkość marginesu kolejno: górnego, prawego, dolnego i lewego (zgodnie z ruchem wskazówek zegara) - np margin: 20px 40px 60px 80px. Zapis 0 auto informuje przeglądarkę, że margines górny wynosi 0px (czyli zawartość "przylepi się" do górnej krawędzi okna przeglądarki), zaś pozostałe marginesy (w tym prawy i lewy) automatycznie podzielą się wolnym miejscem. Efektem będzie jednakowa wielkość lewego i prawego marginesu - a więc zawartość naszej strony wyświetli się na środku! ☺

Przykład:

przykład ograniczenia szerokości i wyśrodkowania strony

Więcej informacji możesz znaleźć TUTAJ