przykład - Kurs HTML i CSS
Selektory elementów CSS / Reguły stylów...(znaczników) ma określony zespół cech CSS, które można jej przypisać, a każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć. Na przykład: cecha text-align (wyrównanie tekstu) może być przypisana tylko i wyłącznie do elementów blokowych, ponieważ podanie jej dla elementów wyświetlanych w linii nie miałoby sensu. Z drugiej strony cecha ta może przyjmować tylko wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu. W...
- Selektory pseudoelementów CSS / Przed... :before
Spis treści :before Przed... :before Obrazek przed... :before {content: url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA...
- Selektory pseudoelementów CSS / Po... :after
Spis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje...
- Selektory pseudoklas CSS / Łączenie selektorów
...{ border: 5px solid black } a:hover img.przyklad_selektory3 { border: 5px solid red } Wskaż poniższy obrazek myszką: Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości: a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz...
- Tekst CSS / Kolor tekstu {color}
...możesz użyć znacznika <span>, wewnątrz którego umieścisz tekst, a następnie wykorzystać atrybut style="..." lub CSS do ustalenia koloru tekstu. Na przykład: <span style="color: red">Kolorowy tekst</span>. Jak ustawić kolor RGB w CSS? Aby ustawić kolor w formacie RGB w CSS, możesz użyć właściwości color i podać wartość w formie rgb(R, G, B), gdzie R, G i B to liczby od 0 do 255 reprezentujące składowe czerwonej, zielonej i niebieskiej odpowiednio. Na przykład: "color: rgb(255, 0, 0)...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...pionie lub całkowite zablokowanie. W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...wygląda tak samo, jak zwykły margines (margin). Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład: Po wpisaniu: <p style="background-color: silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...określa odstęp pomiędzy zawartością elementu a jego obramowaniem. Oznacza to przestrzeń wewnątrz elementu, pomiędzy treścią a jego obramowaniem. Na przykład: "padding: 10px" dodaje 10 pikseli odstępu wewnątrz elementu, oddzielając treść od obramowania. Jaka jest różnica między "padding" a "margin"? Różnica między padding a margin polega na ich funkcji i wpływie na układ elementów. margin tworzy odstęp zewnętrzny między elementem a jego otoczeniem, oddzielając go od innych elementów. Z...
- Tabele CSS / Obramowanie tabeli {border-collapse, border}
...Jak dodać obramowanie do tabeli CSS? Aby dodać obramowanie do tabeli w CSS, użyj właściwości border na selektorze tabeli lub jej komórek. Na przykład, aby dodać obramowanie do wszystkich komórek tabeli: table { border: 1px solid black }. Możesz dostosować grubość, kolor i styl obramowania według własnych preferencji. Co robi "border-collapse"? W CSS, właściwość border-collapse jest używana do określenia, czy obramowania komórek w tabeli mają się stykać, czy zachować odstęp między...
- Tabele CSS / Rozmiary tabeli {width, height}
...{width}> Jak ustawić szerokość tabeli? Aby ustawić szerokość tabeli w CSS, można użyć właściwości width i przypisać jej odpowiednią wartość, na przykład: "width: 500px" lub "width: 50%" w zależności od preferencji. Jak dopasować tabelę do marginesów? Aby uzyskać efekt autodopasowania rozmiaru tabeli do okna, który jest znany z programu Microsoft Word, można ustawić szerokość tabeli na 100% za pomocą właściwości width, co spowoduje, że tabela zajmie całą dostępna przestrzeń w...