Jak zmienić kolor czcionki w HTML? - Kurs HTML i CSS
Jak zmienić kolor czcionki w HTML?
W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="color: black">...</span> (czarny), <span style="color: white">...</span> (biały), <span style="color: silver">...</span> (srebrny), <span style="color: gray">...</span> (szary), <span style="color: maroon">...</span> (kasztanowy), <span style="color: red">...</span> (czerwony), <span style="color: purple">...</span> (purpurowy), <span style="color: fuchsia">...</span> (fuksja), <span style="color: green">...</span> (zielony), <span style="color: lime">...</span> (limonowy), <span style="color: olive">...</span> (oliwkowy), <span style="color: yellow">...</span> (żółty), <span style="color: navy">...</span> (granatowy), <span style="color: blue">...</span> (niebieski), <span style="color: teal">...</span> (zielonomodry), <span style="color: aqua">...</span> (akwamaryna).
HTML dla zielonych / Kolor czcionki HTML <span "color">...na ekranie przeglądarki otrzymamy: Ten tekst został napisany czcionką koloru czerwonego Pytania i odpowiedzi <span "color"> Jak zmienić kolor czcionki w HTML? W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="color: black">...</span> (czarny), <span style="color: white">...</span> (biały), <span style="color: silver">...</span> (srebrny), <span style="color: gray">...</span> (szary), <span style="color...
- HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>
...i pochylenia: <b><i>...</i></b>. Trzeba przy tym pamiętać, że znaczniki zamykamy zawsze w odwrotnej kolejności, niż były otwierane! Jak zmienić rozmiar i kolor czcionki? W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiednich wartościach. Na przykład: <span style="font-size: large; color: red">...</span> ustawi bardzo dużą wielkość czcionki i czerwony kolor tekstu.
Wstawianie stylów / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym 😉). Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z...
- Menu w CSS / Pionowe menu
...a także zwiększamy szerokość lewego obramowania, uzyskując efekt wysuwania tekstu w prawo. Skoro zmianie uległa szerokość obramowania, musimy zmienić także szerokość bloku odnośnika. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { width: 190px; padding-left: 10px; background: #797 url("punkt.gif") no-repeat left top; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; }...
- Menu w CSS / Poziome menu
...menu są otoczone obramowaniem, takim samym jak dolne obramowanie całej listy, dlatego wyglądają jak zakładki. Dla stanu podświetlenia musimy tylko zmienić kolor tła oraz ustawić taki sam kolor dolnego obramowania odnośnika, dzięki czemu uzyskamy efekt wysunięcia wskazanej zakładki do przodu - przed inne. Podobny efekt z zastosowaniem drugiego sposobu: Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul...
- Dobre praktyki / Przykazania webmastera
...znacznik w celu odpowiedniego wystylizowania wyglądu, zamiast dodawać pusty element, obejmij nim ten fragment kodu źródłowego, któremu chcesz zmienić wygląd. Nie dodawaj na stronie tekstu tylko po to, żeby go ukryć bez żadnego zamiennika Takie działanie może zmylić osoby niewidome, używające syntezatorów mowy. Może również pociągać za sobą poważne negatywne konsekwencje, jeśli chodzi o pozycję strony w wyszukiwarkach sieciowych. W skrajnym przypadku strona można zostać zupełnie...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując 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...
- HTML dla zielonych / Kolor tła oraz tekstu HTML <body "background-color, color">
...za pomocą polecenia <span style="color: kolor">...</span> (zobacz: Kolor czcionki). Pytania i odpowiedzi <body "background-color, color"> Jak zmienić kolor tła i tekstu w HTML? Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej do znacznika właściwego ciała dokumentu dodać atrybut o odpowiednich wartościach. Na przykład: <body style="background-color: black; color: white">...</body> ustawi czarny kolor tła i biały kolor tekstu. Należy jednak przy tym pamiętać, że w...