background color - Kurs HTML i CSS
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...
- Menu w CSS / Poziome menu
...0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...Przykład :nth-child :nth-last-child :nth-of-type :nth-last-of-type Nieparzyste i parzyste wiersze: tbody > tr:nth-child(odd) { color: white; background-color: gray } /* biały na szarym */ tbody > tr:nth-child(even) { color: gray; background-color: white } /* szary na białym */ Komórka 1.1 Komórka 1.2 Komórka 2.1 Komórka 2.2 Komórka 3.1 Komórka 3.2 Komórka 4.1 Komórka 4.2 Komórka 5.1 Komórka 5.2 Komórka 6.1 Komórka 6.2 Co trzecie wiersze: tbody > tr:nth-child(3n+1) { color...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: 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...
- Menu w CSS / Menu z nagłówkami
...Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding...
- Szablon strony na DIV-ach / Responsywny szablon
...nabytą w tym rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie. html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #TRESC { background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden...
- Tło CSS / Tło obrazkowe {background-image}
Spis treści {background-image} Tło obrazkowe {background-image} Wielokrotne tło obrazkowe Tło obrazkowe {background-image} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić...
- Oprawa graficzna / "Duszki" CSS
...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 -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują ujemne wartości położenia tła obrazkowego "background-position: -16px...
- Menu w CSS / Pionowe menu
...none; margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS: Na początku wstawiamy znaną już regułę, która usuwa domyślne...
- Kolory CSS / Wykaz kolorów systemowych
...okna AppWorkspace Background color of multiple document interface Kolor tła wielodokumentowego interfejsu (MDI) Background Desktop background Tło pulpitu ButtonFace Face color for three-dimensional display elements Powierzchnia czołowa trójwymiarowych elementów ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements Cień trójwymiarowych elementów...