Jak zmienić kolor tła i tekstu w CSS? - Kurs HTML i CSS
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.
- 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...
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...
- Selektory elementów / Selektor potomka
...nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżeć bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych znacznikach, które z kolei zawierają się w rodzicu. Nie jest wtedy konieczne podawanie w deklaracji wszystkich rodziców, a jedynie przodka i...
- Tło / Atrybuty mieszane tła {background}
...Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka. Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej strony, na której występuje taki element. Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy...
- Obramowanie / Atrybuty mieszane obramowania {border}
...solid) i kolor (np. black) obramowania. Przykład: "border: 2px solid black" ustawia czarne obramowanie o grubości 2 piksele ze stylem solid. Jak zmienić kolor obramowania w CSS? Aby zmienić kolor obramowania w CSS, zmodyfikuj wartość koloru w właściwości border-color. Możesz użyć nazwy koloru (np. red), wartości heksadecymalnej (np. #00ff00) lub funkcji koloru (np. rgb(255, 0, 0)). Przykład: "border: 2px solid red" ustawia czerwone obramowanie o grubości 2 piksele ze stylem solid...
- 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...
- 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...