przykład - Kurs HTML i CSS
Tekst CSS / Orientacja tekstu {text-orientation}...vertical-lr; text-orientation: upright; } otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 [Porównaj przykład z rozdziału: Tryb pisania] Niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy: To jest pierwsza linijka... obszar tekstowy lista rozwijalna opcja 1 opcja 2 lista rozwijalna opcja 1 opcja 2 ...a to jest kolejna linijka. Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja...
- Tło CSS / Pozycja tła obrazkowego {background-position}
Spis treści {background-position} Pozycja tła obrazkowego {background-position} Wielokrotna pozycja Pozycja tła obrazkowego {background-position} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background-position: pozycja } Selektorem może być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów]. Natomiast jako "pozycja" należy wpisać: Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...Wstawianie stylów]. Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby...
- Tło CSS / Atrybuty mieszane tła {background}
Spis treści {background} Atrybuty mieszane tła {background} Tło graficzne obok tekstu Wielokrotne atrybuty mieszane Atrybuty mieszane tła {background} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących tła, które...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...white, black) radial-gradient(closest-corner at 25% 25%, white, black) radial-gradient(farthest-corner at 25% 25%, white, black) Inne ciekawe przykłady: radial-gradient(at 50% 110%, lightskyblue 40%, fuchsia, purple, blue, lime, yellow, orange, red, lightskyblue 60%) radial-gradient(ellipse 33% 66% at right top, white, red 75%, black) Powtarzany gradient promienisty {background: repeating-radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera) selektor...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...border-image-width / border-image-outset powtarzania Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład: div { border-image: url(punkt.gif) 10 } /* border-image-source: url(punkt.gif); border-image-slice: 10 */ div { border-image: url(punkt.gif) 10 / 10px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px */ div { border-image: url(punkt.gif) 10 / 10px / 5px } /* border-image-source...
- Wykazy CSS / Zawijanie tekstu w wykazie {list-style-position}
selektor { list-style-position: pozycja } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "pozycja" określa, jak będą zawijane wiersze wykazu, które nie zmieszczą się w jednej linii. Możliwe są tutaj dwa przypadki: outside - wyróżniki na zewnątrz wykazu (domyślnie). Przykład list-style-position: outside Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy...
- Rozmiary CSS / Szerokość {width}
...kontenera lub elementu. Jak ustawić szerokość w CSS? Aby ustawić szerokość w CSS, użyj właściwości width i przypisz jej wartość, na przykład: <div style="width: 300px">Ten DIV ma szerokość 300 pikseli.</div>. Możesz również stosować jednostki innych niż piksele, takie jak procenty lub em.
- Rozmiary CSS / Wysokość {height}
...na <html> i <body>, a także upewnić się, że żadne z tych elementów nie ma ustawionej marginesów ani paddingu, które mogą wpłynąć na wysokość. Na przykład: <html style="height: 100%"> <body style="height: 100%; margin: 0"> <div style="height: 100%">Ten DIV zajmie całą dostępną wysokość.</div> </body> </html>.
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
Spis treści {marker-offset} Odstęp wyróżnika wykazu {marker-offset} Wyróżnik obrazkowy w tle Odstęp wyróżnika wykazu {marker-offset} (nieinterpretowane) selektor { marker-offset: odstęp } Selektorem może być element z ustalonym wyświetlaniem typu marker [zobacz: Wstawianie stylów]. Natomiast "odstęp" oznacza odległość wyróżnika wykazu (markera) od tekstu, znajdującego się w poszczególny punktach. Wartość odstępu należy podać używając jednostek długości. Polecenie to pozwala nam w...