kolor - Kurs HTML i CSS
CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}...dopasowane do Twoich wymagań obramowanie i inne style. ✅ Rozpocznij konfigurację obramowania Kolor tła ramki .nazwa-klasy { background-color: kolor tła; } "kolor tła" jest definicją koloru. Marginesy wewnątrz ramki .nazwa-klasy { padding: szerokość; } albo: .nazwa-klasy { padding-top: górny; padding-bottom: dolny; padding-left: lewy; padding-right: prawy; } Aby określić szerokość marginesu wewnętrznego bądź oddzielnie margines górny, dolny, lewy lub prawy, należy wpisać liczbę...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
...cechy - zostaną opisane w kolejnych rozdziałach. Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny - każdy element podrzędny byłby ujęty w oddzielną ramkę. Z tego właśnie powodu obramowanie jest jedną z cech CSS niepodlegających dziedziczeniu. W rozdziałach: Komendy CSS 2 oraz...
- Komendy CSS3 / Tło i obramowanie CSS
...wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby Dziedziczenie nie Procenty nie border-color Atrybuty mieszane koloru obramowania Wartość <color>{1,4} Inicjalizacja zobacz cechy indywidualne Zastosowanie wszystkie elementy z wyjątkiem bazowych i adnotacyjnych kontenerów przypisów ruby Dziedziczenie nie Procenty nie border-image Atrybuty mieszane obramowania obrazkowego Wartość <'border-image-source'> || <'border-image-slice'>...
Aktualizacja / System newsów...obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, 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...
- Selektory pseudoklas CSS / Odsyłacz podstawowy :link
...<a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>. Jaki kolor ma link? Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli purple). Jak zmienić kolor odsyłacza HTML? Aby zmienić kolor odsyłacza w HTML, można użyć atrybutu style="..." lub zdefiniować regułę CSS. Na przykład: <a href="https://www.example.com" style="color: red">Tekst...
- Szablon strony na DIV-ach / Stały szablon
...STOPKA { clear: both; width: 100%; background-color: #888; } Wyjaśnienie: Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać, ponieważ użytkownik może zmienić domyślne kolory w swoim systemie operacyjnym, a wtedy przypadkowo możemy uzyskać dość osobliwy efekt kolorystyczny - np. czarny tekst na czarnym tle. Nigdy nie zakładaj, że domyślny kolor tekstu to czarny, a kolor tła - biały! W tym...
Kolory HTML / Sposoby definiowania kolorów HTMLDefinicje kolorów przydają się np. do ustawiania koloru tekstu lub tła elementów na stronie. W miejsce wyrazu "kolor" należy wpisać o jaką barwę nam chodzi. Można to zrobić na dwa sposoby: podać słowną nazwę jednego z szesnastu kolorów podstawowych (patrz pierwsza część tabeli) lub odpowiednik dowolnego koloru w kodzie szesnastkowym (HEX). A teraz mała powtórka z fizyki (proszę, nie uciekaj jeszcze od komputera, to będzie baaardzo krótka powtórka 🙂). Każdą barwę można utworzyć mieszając w...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class: <div class="menu-nawigacyjne">...</div> Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki: .menu-nawigacyjne...
- Media CSS / Zapytania mediów
...Cechy mediów Szerokość Wysokość Szerokość urządzenia Wysokość urządzenia Orientacja Proporcje obrazu Proporcje obrazu urządzenia Głębia koloru Paleta kolorów Urządzenia monochromatyczne Rozdzielczość Technika wyświetlania Siatka Zapytania mediów (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) W dobie rozkwitu różnorakich urządzeń mobilnych, proste przygotowanie osobnych arkuszy CSS dla każdego medium może nie wystarczyć. Malutki ekran tradycyjnego...
- HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>
Wszystkie powyższe parametry (atrybuty i znaczniki: akapit, wielkość czcionki, kolor czcionki, pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p> otrzymamy: To jest jakiś tekst Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni...