style background - Kurs HTML i CSS
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}...ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własne, dopasowane do Twoich wymagań obramowanie i inne style. ✅ Rozpocznij konfigurację obramowania Kolor tła ramki .nazwa-klasy { background-color: kolor tła; } "kolor tła" jest definicją koloru. Marginesy wewnątrz ramki .nazwa-klasy { padding: szerokość; } albo: .nazwa-klasy { padding-top: górny; padding-bottom: dolny; padding-left: lewy; padding-right: prawy; } Aby określić szerokość...
- Tło CSS / Atrybuty mieszane tła {background}
...wartość background-color (red) do zbiorczej deklaracji background: p { background: red url(tlo.gif) } Przykład {background} Po wpisaniu: <p style="color: red; background: url(obrazek.jpg) no-repeat left"> To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie. </p> otrzymamy na ekranie: To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest...
- Komendy CSS3 / Tło i obramowanie CSS
...background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top...
Galeria zdjęć HTML / Skrypt galerii zdjęć...item.getAttribute('data-href'); }; function GalleryView(items) { this.items = items || []; this._reset(); this.style = this._createStyle(); this.delay = 500; this._overflow = ''; this._timeout = null; this._listeners = []; this._protectedEvents = ['mousedown', 'contextmenu', 'selectstart', 'select', 'copy', 'dragstart', 'drag']; } GalleryView.prototype.start = function(callback) { this.items.forEach(function(item) { var src...
- Menu w CSS / Poziome menu
...tego, tak jak poprzednio, usuniemy zbędne domyślne formatowanie, które w tym przypadku tylko by przeszkadzało: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { display: inline; white-space: nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich. Zalety...
- Menu drzewiaste / Skrypt menu drzewiastego
...0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened { background-image: url("opened.gif"); background-position...
- Menu w CSS / Menu z nagłówkami
...186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; padding: 1px 2px; background-color: #9ce; border: 3px double #28e; } dt { padding: 7px 15px; font-weight: bold; font-size: larger...
- Oprawa graficzna / "Duszki" CSS
...<li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; 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...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...(to samo co: 2n+1) even elementy parzyste (to samo co: 2n) Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. W celu poprawienia czytelności danych, często spotyka się obszerne tabele, w których kolejne nieparzyste wiersze są pokolorowane w odmienny sposób niż parzyste. Taki rodzaj formatowania można oczywiście uzyskać dodając co drugiemu wierszowi odpowiednią klasę. Gdy jednak wierszy jest sporo, zaczyna...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany uprzednio identyfikator menu. Teraz w nagłówku dokumentu HTML (<head>...</head>), na którym wstawione jest menu, wystarczy wstawić odwołanie do utworzonego właśnie...