strony - Kurs HTML i CSS
Wstawianie stylów CSS / Wydzielone bloki <div style>...<div> w HTML jest elementem blokowym, który pozwala tworzyć kontenerowe bloki na stronie. Dzięki niemu można grupować inne elementy, tworzyć układy strony, stosować style CSS oraz manipulować zawartością za pomocą skryptów JavaScript, co umożliwia bardziej elastyczną i kontrolowaną strukturę strony internetowej.
- Wstawianie stylów CSS / Import arkusza stylów @import
...dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony. Oprócz importu arkusza, możesz umieścić pomiędzy znacznikami <style> a </style> dodatkowo własne reguły stylów, a nawet polecenie importu drugiego arkusza (ich działania zostaną połączone, a w przypadku konfliktów pierwszeństwo będzie miała ostatnia w kolejności deklaracja importu). Import arkusza stylów działa bardzo podobnie jak...
- Selektory elementów CSS / Selektor uniwersalny
...zostaną opisane w dalszych rozdziałach [zobacz także: Wstawianie stylów]. Selektor taki pozwala ustalić określone atrybuty dla wszystkich elementów strony, a więc dla różnych selektorów typu. Możemy za pomocą tej komendy nadać to samo formatowanie dla wszystkich elementów na całej stronie, niezależnie od ich typu (p, h1, li itd.). Niestety jego działanie nie zawsze jest jednoznaczne, dlatego dużo bezpieczniej jest używać selektora typu dla elementu body, chyba że zastosujemy to polecenie w...
- Selektory pseudoklas CSS / Zaznaczenie :checked
...obsługuje tylko Firefox. Przykład :checked Po wpisaniu w arkuszu stylów: input:checked, option:checked { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji"> <input type="radio" name="pole_opcji"> </fieldset> <fieldset> <input type="checkbox" checked> <input type="checkbox"> </fieldset> <select size="3"> <option selected>Opcja 1</option> <option>Opcja 2</option> <option>Opcja 3</option>...
- Selektory pseudoklas CSS / Domyślne :default
...wrócić. Przykład :default Po wpisaniu w arkuszu stylów: input:default, option:default, button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option> <option class="przyklad_domyslne">Opcja 2</option> <option...
- Tło CSS / Kolor tła {background-color}
...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? Właściwość CSS umożliwiająca...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...do wysokości, zachowując jego proporcje, jako szerokość należy podać wartość "auto" (np. "auto 100px"). Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego...
- Marginesy CSS / Górny margines {margin-top}
...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}
...nie zasłaniał obrazka. Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej strony, na której występuje taki element. Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy stosować tradycyjny sposób (znacznik IMG). Przykład...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...można ustalić, aby nie było ono powtarzane oraz określić dokładną jego pozycję. Na koniec pozostaje tylko wykonanie wolnej przestrzeni z lewej strony punktów wykazu, tak aby zmieściły się tam obrazki markerów - tutaj właśnie można określić dowolny interesujący nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów. Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li)...