Przejdź do treści

Jak zmienić kolor tła i tekstu w HTML? - Kurs HTML i CSS

  • HTML
    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
    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.

  • HTML
    Tekst / Wykaz <ul, ol, li>

    ...się akapit. Jak widać akapit zakończył się przed wykazem, ponieważ ostatnia linijka nie została ustawiona na środku (tak jak pierwsza). Aby to zmienić, należy rozpocząć nowy akapit tuż za wykazem i określić dla niego odpowiednie atrybuty lub ewentualnie zamiast akapitu użyć bloku. Pytania i odpowiedzi <ul, ol, li> Czym się różni tag UL od OL? Element UL tworzy listę nieuporządkowaną (ang. unordered list) w postaci wypunktowania, natomiast UL - listę uporządkowaną (ang. ordered...

  • CSS
    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...

  • CSS
    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; }...

  • CSS
    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...

  • CSS
    Szablon strony na DIV-ach / Stały szablon

    ...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 samym miejscu usuwamy wszystkie marginesy strony. Analogicznie postępujemy z marginesem wewnętrznym, aby...

  • CSS
    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...

  • CSS
    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...

  • Skrypty
    Wykaz generatorów

    ...tak proste i szybkie! Generator META i BODY Bardzo obszerny kreator sekcji META i BODY do automatycznego tworzenia dokumentów HTML. Pozwala np. zmienić kolor suwaków strony. Posiada szereg unikalnych funkcji, niedostępnych nawet w programach komercyjnych! Tester pliku robots.txt Jeśli nie masz pewności co do konstrukcji pliku robots.txt, dobrze jest sprawdzić efekt jeszcze przed wprowadzeniem zmian, ponieważ błąd może skutkować niezamierzonym usunięciem z indeksu wyszukiwarek poważnej...

1 2 »

★★★★★ 5/5 (209)

Facebook