kolor - Kurs HTML i CSS
Selektory specjalne CSS / Klasy selektorów <... class>...color: red } to jeśli teraz w dowolnym miejscu wpiszemy: <p class="przyklad_klasa">To jest akapit.</p> na ekranie zobaczymy tekst napisany czcionką koloru czerwonego: To jest akapit. Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony. W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się selektor uniwersalny, który pozwala przypisać...
- Selektory pseudoelementów CSS / Pierwsza litera :first-letter
...w arkuszu stylów została umieszczona następująca reguła: p:first-letter { color: red } to pierwsza litera każdego akapitu będzie mieć czerwony kolor: To jest akapit. Inny ciekawy przykład: p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left } W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się...
- Tło CSS / Atrybuty mieszane tła {background}
...należy wpisać konkretne wartości atrybutów, dotyczących tła, które będą oddzielone od siebie spacjami (przy czym można niektóre pominąć). Są to: kolor tła tło obrazkowe powtarzanie tła zaczepienie tła pozycja tła lub pozycja tła / rozmiary tła (CSS 3) pozycja początkowa tła (CSS 3) przycinanie tła (CSS 3) Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top...
- 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...
- Media CSS / Typy mediów
...jak dalekopisy, terminale lub przenośne urządzenia z ograniczonymi możliwościami wyświetlania tv Odbiorniki telewizyjne (niska rozdzielczość, kolor, ograniczone przewijanie, dostępny dźwięk)
- Komendy CSS 2 / Specyfikacja CSS
...<procent> - wartość procentowa <kąt> - kąt <czas> - czas <częstotliwość> - częstotliwość <łańcuch znakowy> - łańcuch znakowy (string) <kolor> - definicja koloru <adres> - adres (ścieżka dostępu) w postaci: url(adres) <identyfikator> - identyfikator elementu w postaci: #nazwa W deklaracji wpisujemy tylko konkretną 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'>)...
- Menu w CSS / Pionowe menu
...o sumę grubości obramowania (border) i szerokości marginesu wewnętrznego (padding) elementu, czyli: 200px - 2*2px - 2*5px = 186px Ustalamy kolor, tło, margines wewnętrzny (padding) i obramowanie odnośników, tak aby wyglądały jak przyciski. Dodatkowo usuwamy domyślne podkreślenie linków (text-decoration: none), które w tym przypadku jest niepożądane. Na koniec zmieniamy styl obramowania, które zostanie wyświetlone po wskazaniu tekstu myszką oraz tworzymy niesymetryczny margines...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...serwisu. Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony tylko po to, aby zmienić na niej np. kolor albo rozmiar tekstu 🙂 Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości wstawiania stylów CSS na stronach internetowych, zobacz rozdział: Wstawianie stylów. Pytania i odpowiedzi <link "stylesheet"> Jak dodać styl CSS? Najbardziej zalecanym sposobem wstawienia stylów CSS jest dodanie arkusza...
- Komendy CSS3 / Układ wielokolumnowy CSS
Źródło: CSS Multi-column Layout Module Level 1 Spis treści column-count column-fill column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns column-count Liczba kolumn Wartość auto | <integer [1,∞]> Inicjalizacja auto Zastosowanie elementy blokowe z wyjątkiem tabel Dziedziczenie nie Procenty nie column-fill Wypełnienie kolumn Wartość auto | balance | balance-all Inicjalizacja balance Zastosowanie kontenery układu...
- Dziedziczenie stylów CSS / Przywrócenie wartości domyślnej {...: initial}
...zostaną opisane w kolejnych rozdziałach. Dziedziczenie stylów to bardzo przydatna funkcja w języku CSS. Dzięki niej nie musimy definiować np. koloru tekstu dla każdego elementu strony osobno. Zdarzają się jednak przypadki, kiedy takie zachowanie może nie być dla nas pożądane. Na szczęście istnieje sposób na odwołanie jego efektów dla wybranych sytuacji. Każda cecha CSS ma określoną wartość domyślną, która zostanie przyjęta, jeśli nie określimy inaczej. Na przykład dla wartości koloru...