background - Kurs HTML i CSS
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...
- Komendy CSS 2 / Specyfikacja CSS
...wartość (zależną od typu), już bez znaków < >. Typy które przyjmują takie same wartości jak inne cechy, zostały ujęte w znaki <' oraz '> (np. <'background-color'>). Ich wartości należy szukać pod podaną nazwą. Typy ujęte w znaki < oraz >, które nie zostały wymienione powyżej (np.: <absolute-size>), stanowią specjalne wartości, określone tylko dla danej cechy. Należy ich szukać w opisie danej cechy (po kliknięciu jej nazwy). Znak "|" oddzielający dwie lub więcej wartości oznacza, że...
- 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...
- Dobre praktyki / Przykazania webmastera
...To samo dotyczy wszystkich odwołań do plików graficznych, występujących arkuszu CSS - jeśli uległy zmianie, należy podnieść im numer rewizji: background-image: url("plik.gif?2"); Gdzie to tylko możliwe, staraj się skracać zapis w regułach stylów Oszczędzisz sobie w ten sposób pisania, a także zmniejszasz rozmiar arkusza CSS, co przyspiesza ładowanie strony. Używaj atrybutów mieszanych - np. margin zamiast zestawu: margin-top, margin-right, margin-bottom, margin-left. Nie dopisuj...
- Oprawa graficzna / Zamiennik obrazkowy
...jako jeden z pierwszych wpadł na ten pomysł i stąd wzięła się nazwa metody, którą zaproponował. <div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: none; } Wyjaśnienie: Najpierw pod zewnętrzny element podstawiamy obrazek tła Musimy ustalić rozmiary bloku na identycznie jak wymiary grafiki - inaczej otrzymalibyśmy element w szerokości całej strony i wysokości zależnej od zawartego w nim tekstu Na...
Tabele HTML / Łączenie kolumn tabeli w grupy <colgroup, col>...połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup. Przykład <colgroup> Po wpisaniu: <table> <colgroup span="1" style="background-color: red"></colgroup> <tr> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> </tr> <tr> <td>komórka4</td> <td>komórka5</td> <td>komórka6</td> </tr> </table> otrzymamy: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 Kolumna <colgroup, col> Znacznik <colgroup>...</colgroup> łączy kolumny tabeli...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...flex', justifyContent: 'center', alignItems: 'center' }; var buttonStyle = { border: 0, padding: 0, lineHeight: 1, color: '#000', background: 'rgba(255, 255, 255, 0.5)', cursor: 'pointer' }; var navigationStyle = { fontSize: '50px', width: '75px', height: '75px', borderRadius: '50%', position: 'absolute', fontWeight: 'bold' }; var style = { container: { position: 'fixed', zIndex: 6000000, background: '#000' }, image: { maxWidth: '100...
- Dobre praktyki / CSS Zorientowane Obiektowo
...wykaz, ponieważ wygląd dla nich określamy wspólnie) odnośnik a W arkuszu CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i...