własności - Kurs HTML i CSS
Czcionki CSS / Wielkość czcionki {font-size}...1pc rozmiar 15px rozmiar 1em rozmiar 2ex Procent wielkości bieżącej: Przykład rozmiar 75% Czcionka bieżąca rozmiar 150% Jeśli definiowane własności mają odnosić się do całej strony (np. wielkość czcionki na całej stronie), można użyć selektora BODY albo HTML. Najlepszy sposób ustalania wielkości czcionki Jak widać, rozmiar tekstu można definiować przy pomocy wielu jednostek, jednak wcale nie jest wszystko jedno, w jaki sposób to zrobimy. Jednostka "em" Kiedyś panowała opinia, że...
- Selektory pseudoklas CSS / Łączenie selektorów
Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów...
- Tło CSS / Kolor tła {background-color}
...transparent" ustali tło przezroczyste. Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem). Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML. Przykład {background-color} Tło koloru czerwonego (red) Tło koloru żółtego (yellow) Tło koloru #D08AFF Tło koloru systemowego Menu Pytania i odpowiedzi {background-color} Która właściwość CSS umożliwia zdefiniowanie koloru tła elementu...
- Czcionki CSS / Atrybuty mieszane czcionki {font}
...linii należy postawić ukośnik. Czcionki systemowe {font: caption icon menu message-box small-caption status-bar} Jako "wartości atrybutów" własności font można podać: caption - czcionka używana do podpisanych kontrolek (np. przycisków, rozwijalnych list) icon - czcionka etykiet ikon menu - menu message-box - okna dialogowe small-caption - etykiety małych kontrolek status-bar - pasek statusu okna Przykład {font: caption icon menu small-caption status-bar} font: caption...
- Tekst CSS / Tryb pisania {writing-mode}
...th { writing-mode: vertical-rl; } otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 Przypominam, że własności writing-mode nie można przypisać do wierszy tabeli, ale można to zrobić w odniesieniu do komórek tabeli (th, td). Zwróć uwagę, że mimo pionowego ułożenia tekstu, orientacja obrazka nie zmienia się: To jest pierwsza linijka... ...a to jest kolejna linijka. Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo): To jest...
- Marginesy CSS / Model pudełkowy CSS
...opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają na pozostałe obszary modelu pudełkowego ("Box model"), które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka. Natomiast tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są...
- Tło CSS / Tło obrazkowe {background-image}
...Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem. Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do...
- Marginesy CSS / Górny margines {margin-top}
...auto ustali wartość automatyczną. Polecenie wprowadza dodatkowy odstęp między danym elementem a elementem poprzedzającym. Jeśli definiowane własności mają odnosić się do całej strony (np. marginesy strony), można użyć selektora BODY (zobacz także: Marginesy wewnętrzne). Przykład {margin-top} To jest pierwszy akapit... ...a to jest następny akapit z górnym marginesem margin-top: 2cm. Dlatego odstęp pomiędzy nimi wynosi 2cm.
- Tło CSS / Atrybuty mieszane tła {background}
...2... } Korzystając z rozszerzonej składni atrybutów mieszanych, możemy wstawić w tle elementu kilka obrazków i od razu określić dla nich dodatkowe własności, takie jak np. sposób powtarzania, zaczepienie, pozycja / rozmiary, pozycja początkowa czy przycinanie. Trzeba jednak pamiętać, że o ile w tle jednego elementu może być wstawionych kilka obrazków, to ustawienie więcej niż jednego jednolitego koloru tła nie ma sensu. Dlatego podanie jednolitego koloru tła jest dozwolone tylko jeden raz...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...[Zobacz także: Wstawianie stylów] Polecenie pozwala podać w jednej komendzie kilka atrybutów obramowania jednocześnie, które mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację...