color - Kurs HTML i CSS
Selektory pseudoklas CSS / Pusty element :empty...sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: document.write(' ' + ' ' + ' '); To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację)...
- Marginesy CSS / Model pudełkowy CSS
...przy użyciu właściwości CSS, takich jak szerokość, marginesy czy obramowanie. Przykładowy kod: <div style="width: 300px; margin: 10px; background-color: blue">Treść</div>.
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto; background-color: lightgray">Treść</div> wyśrodkuje poziomo element <div> o szerokości 300 pikseli w jego rodzicu.
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład: Po wpisaniu: <p style="background-color: silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego prostokąta a tekstem...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...rogi <div> w CSS, użyj właściwości border-radius i określ wartość promienia zaokrąglenia. Na przykład: <div style="border-radius: 10px; background-color: lightgray; padding: 20px">Treść</div> zaokrągli rogi <div> o promieniu 10 pikseli. Jak zaokrąglić rogi w zdjęciu? Aby zaokrąglić rogi w zdjęciu (<img>) w CSS, użyj właściwości border-radius i określ promień zaokrąglenia. Przykład: <img src="obraz.jpg" style="border-radius: 50%" alt="Zdjęcie"> zaokrągli rogi zdjęcia na pół obrazu...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...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 wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt...
- Tryb Quirks / X-UA-Compatible
...Dodana pełna obsługa własności: border-spacing, caption-side, content, counter-increment, counter-reset, empty-cells, orphans, outline, outline-color, outline-style, outline-width, page-break-inside, quotes, widows Źródło: CSS Improvements in Internet Explorer 8 Inne przydatne artykuły: CSS Compatibility and Internet Explorer
- Kolory CSS / Sposoby definiowania kolorów CSS
...deklaracji koloru może być niemożliwe albo utrudnione. currentColor - kolor taki sam jak ma tekst aktualnego elementu (czyli wartość cechy color ustawionej bezpośrednio albo odziedziczonej). Jest to bardzo wygodny sposób na przypisanie np. identycznego koloru obramowania co znajdujący się w nim tekst. Dzięki temu przy zmianie koloru tekstu nie będziemy musieli pamiętać, aby zaktualizować również obramowanie - wtedy stanie się to automatycznie.
- Kolory CSS / Wykaz kolorów rozszerzonych
(CSS 3 - interpretuje: Firefox 2, Opera 10, Chrome 4) Definicja HEX Kolor aliceblue #F0F8FF antiquewhite #FAEBD7 antyczny biały (antyczna biel) aquamarine #7FFFD4 akwamarynowy (akwamaryna) azure #F0FFFF lazurowy (lazur) beige #F5F5DC beżowy (beż) bisque #FFE4C4 blanchedalmond #FFEBCD blanszowanego migdała (blanszowany migdał) blueviolet #8A2BE2 niebieskofioletowy (niebieski fiolet) brown #A52A2A brązowy (brąz) burlywood #DEB887 cadetblue #5F9EA0 kadeckoniebieski...