solid - Kurs HTML i CSS
Oprawa graficzna / "Duszki" CSS...list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px...
- Selektory pseudoklas CSS / Łączenie selektorów
...znajdujące się na stronie: Link1 Link2 Link3 Zmiana koloru obramowania obrazka po wskazaniu go myszką: img.przyklad_selektory3 { 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...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...bez spacji!) jednostkę - np.: 1px. Zamiast "styl" należy wpisać jedną z następujących wartości określających wygląd linii obramowania: solid - linia ciągła dashed - linia przerywana dotted - linia kropkowa Natomiast "kolor" jest definicją koloru obramowania. Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu obramowania na stronach internetowych, zobacz rozdziały: Styl obramowania, Szerokość obramowania, Kolor obramowania...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...wartości sumy pozostałych składników równania. Przykład: Po wpisaniu: <div style="width: 600px"> <div style="margin-left: auto; border-left: 5px solid red; padding-left: 10px; width: 400px; padding-right: 10px; border-right: 5px solid red; margin-right: 20px">...</div> </div> powinniśmy otrzymać na ekranie blok, którego lewy margines wynosi: 600 - 5 - 10 - 400 - 10 - 5 - 20 = 150 pikseli UWAGA! W trybie Quirks interpretacja będzie zupełnie inna. Jeżeli 'width' jest ustawione na auto...
- Selektory pseudoklas CSS / Blokada :disabled :enabled
...takie, które nie posiada atrybutu disabled (domyślnie). Przykład :disabled :enabled Po wpisaniu w arkuszu stylów: input:disabled { border: 1px solid blue } input:enabled { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Zablokowane" disabled> <input type="text" value="Odblokowane"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...wyróżnienie za pomocą CSS pól tylko do odczytu. Przykład :read-only :read-write Po wpisaniu w arkuszu stylów: input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- Obramowanie CSS / Styl obramowania {border-...-style}
...border-top-style: hidden dashed - linia kreskowa Przykład border-top-style: dashed dotted - linia kropkowa Przykład border-top-style: dotted solid - linia ciągła Przykład border-top-style: solid double - linia ciągła podwójna Przykład border-top-style: double groove - "rowek" Przykład border-top-style: groove ridge - "grzbiet" Przykład border-top-style: ridge inset - "ramka" Przykład border-top-style: inset outset - "przycisk" Przykład border-top-style: outset Przy...
- Obramowanie CSS / Atrybuty mieszane stylu obramowania {border-style}
...generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-style} border-style: dashed border-style: double solid border-style: double solid dashed border-style: groove ridge inset outset
- Obramowanie CSS / Styl obrysu {outline-style}
...outline-style: none dashed - linia kreskowa. Przykład outline-style: dashed dotted - linia kropkowa. Przykład outline-style: dotted solid - linia ciągła. Przykład outline-style: solid double - linia ciągła podwójna. Przykład outline-style: double groove - "rowek". Przykład outline-style: groove ridge - "grzbiet". Przykład outline-style: ridge inset - "ramka" Przykład outline-style: inset outset - "przycisk" Przykład outline-style: outset Obrys jest zbliżony...
- Komendy CSS3 / Dekoracja tekstu CSS
...Inicjalizacja none Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie text-decoration-style Styl dekoracji tekstu Wartość solid | double | dotted | dashed | wavy Inicjalizacja solid Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie text-emphasis Atrybuty mieszane wzmocnienia tekstu Wartość <'text-emphasis-style'> || <'text-emphasis-color'> Inicjalizacja zobacz cechy indywidualne Zastosowanie zobacz cechy indywidualne Dziedziczenie zobacz...