background color - Kurs HTML i CSS
Aktualizacja / System newsów...ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd { background: white; /* tło */ color: black; /* kolor tekstu */ font-size: 12px; /* rozmiar czcionki */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed...
Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}...efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; } p i b { color: inherit; background-color: inherit; }
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; font-weight: normal; } p i b { color: revert; background-color: revert; font-weight: revert; }
- 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...
- Selektory elementów CSS / Reguły stylów
...Przypisanie do niej np. wartości koloru nie miałoby sensu. Przykład /* Pierwsza reguła: */ p { color: red } /* Druga reguła: */ p b { color: red; background-color: yellow } Powyżej mamy przykład dwóch reguł stylów: W pierwszej selektorem jest znacznik p, a deklaracja ma postać { color: red }. Cechą jest color, a wartością red. W drugiej selektorem jest zestawienie znaczników p b. Deklaracja zawiera dwa zespoły cecha-wartość. Pytania i odpowiedzi Co to reguła CSS? Reguła CSS to...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...HTML: <div class="ramka"> <div class="ramka_pojemnik"> <div class="ramka_zawartosc"> ... </div> </div> </div> ...oraz CSS: .ramka { background: url(obramowanie.gif) no-repeat top; padding-top: 12px; width: 200px; } .ramka_pojemnik { background: url(obramowanie2.gif) no-repeat bottom; padding-bottom: 12px; } .ramka_zawartosc { background: #92C892 url(obramowanie3.gif) repeat-y center; padding: 0 12px; color: #031; } Uzyskany efekt: To jest przykład tradycyjnie...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie nadkreślony. Miało to wpływ na następujące własności CSS: font, background, background-position, text-decoration, margin, padding, border, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, list-style-image, list-style, clip oraz behavior, text-autospace i layout-grid. W trybie zgodności dla własności font musimy obowiązkowo podać przynajmniej wielkość i rodzaj...
- Pozycjonowanie CSS / Wyświetlanie {display}
...</tr> </table> komórka1 komórka2 komórka3 komórka4 To jest zwykły tekst display: inline-block; width: 150px; height: 100px; background-color: silver To jest zwykły tekst Dla porównania zwykły blok: To jest zwykły tekst width: 150px; height: 100px; background-color: silver To jest zwykły tekst Pytania i odpowiedzi {display} Do czego służy "display" w CSS? W CSS, właściwość display kontroluje sposób, w jaki element jest renderowany w przeglądarce. Określa, czy...
- Pozycjonowanie CSS / Przezroczystość {opacity}
...górna, półprzezroczysta warstwa ("opacity: 0.5")... To jest górna, półprzezroczysta warstwa ("opacity: 0.5")... Pytania i odpowiedzi {opacity, background-color: transparent} Jak ustawić przezroczystość w CSS? Aby ustawić przezroczystość w CSS, używa się właściwości opacity. Można ustawić wartość od 0 (element całkowicie przezroczysty) do 1 (element całkowicie widoczny). Jak dodać przezroczystość? Aby dodać przezroczystość do elementu w CSS, używa się właściwości opacity. Na...
- Selektory pseudoklas CSS / Łączenie selektorów
...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; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover". A oto bardziej zaawansowany przykład: div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl)...