Przejdź do treści

CSS dla zielonych - CSS

W tym rozdziale dowiesz się...

Kurs języka CSS dla zupełnie początkujących. Zaprojektuj własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do internetu za darmo. Stworzenie strony WWW jest naprawdę proste. Zapraszam!

  • CSS
    Zaczynamy kurs CSS!

    Czy projektowanie wyglądu stron internetowych naprawdę jest tak trudne, jak mówią?

  • CSS
    Edytory CSS

    Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

  • CSS
    Wstawienie arkusza stylów

    Jak wygląda typowy sposób dołączania arkusza CSS?

  • CSS
    Arkusz stylów

    Jak wygląda typowy arkusz CSS?

  • CSS
    Kolor tła oraz tekstu

    W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

  • CSS
    Czcionka

    W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

  • CSS
    Marginesy strony

    Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

  • CSS
    Tapeta

    Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

  • CSS
    Wyrównanie tekstu

    W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

  • CSS
    Kolor odsyłaczy

    Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

  • CSS
    Klasy selektorów

    W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

  • CSS
    Ramki z tekstem

    Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

  • CSS
  • Pytania i odpowiedzi
  • Powtórka

Zaczynamy kurs CSS!

Czy projektowanie wyglądu stron internetowych naprawdę jest tak trudne, jak mówią?

Zapewne znasz już podstawy języka HTML - jeśli nie, zapraszam najpierw do lektury rozdziału: HTML dla zielonych.

Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę internetową za pomocą języka HTML, a następnie dzięki CSS można zmienić jej wygląd. Dlatego właśnie znajomość obu tych języków - HTML i CSS - jest kluczowa, aby zbudować profesjonalną stronę WWW. Jeśli jeszcze nie masz pewności, czy warto się uczyć języka CSS, zobacz rozdział: Dlaczego warto używać CSS?.

Jeśli język CSS jest dla Ciebie "czarną magią" i wydaje Ci się, że arkusz CSS (miejsce gdzie określa się wygląd strony) jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Zaprojektowanie wyglądu strony internetowej jest prostsze niż Ci się wydaje. Zatem nie trać już czasu na wymówki typu: Ja się niczego nie nauczę! i tym podobne, bo to nieprawda. Zacznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

Edytory CSS

Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

Style CSS można oczywiście pisać ręcznie, ponieważ jest to zwykły tekst - tak jak w przypadku samego HTML. Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają automatycznie zdefiniować np. wielkość i kolor czcionki, kolor odsyłaczy czy tła (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy.

Kreatory stylów (ang. wizards) są najczęściej wbudowane w edytory HTML. Zwykle wybór tego samego edytora do tworzenia dokumentów HTML i arkuszy CSS jest dobrym pomysłem. Jednak jeśli chcesz, możesz również korzystać z dedykowanego edytora do tworzenia stylów CSS - np.:

Pytania i odpowiedzi

Co to znaczy CSS?

CSS to skrót od Cascading Style Sheets - czyli Kaskadowe Arkusze Stylów. Jest to język komputerowy służący do ustalania wyglądu stron internetowych. Arkusz stylów CSS jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, układu strony i inne.

W czym pisać CSS?

Arkusz stylów CSS jest plikiem tekstowym. Można go zatem tworzyć przy użyciu dowolnego prostego edytora tekstu. Jednak dużo lepszym wyborem jest skorzystanie z pomocy specjalnie przygotowanego do tego edytora CSS. Dzięki temu praca nad arkuszem stylów będzie wygodniejsza i szybsza, a rezultaty powinny być pozbawione popularnych błędów - jak np. literówek w nazwach poleceń.

Jaki edytor do CSS?

Istnieją specjalne edytory przeznaczone tylko do języka CSS. Nie są one jednak zbyt popularne i przez to często dawno przestały być już rozwijane. Najlepszym rozwiązaniem jest użycie edytora HTML, który ma wbudowaną obsługę również języka CSS. Na przykład Brackets to jeden z lepszych edytorów HTML i CSS. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.

Wstawienie arkusza stylów

Jak wygląda typowy sposób dołączania arkusza CSS?

W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Tu wpisz opis zawartości strony">
	<title>Tu wpisz tytuł strony</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

Tu wpisuje się treść strony

</body>
</html>

Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje się w tym samym katalogu co dokument *.html. Można go oczywiście zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka).

Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego 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

Jak dodać styl CSS?

Najbardziej zalecanym sposobem wstawienia stylów CSS jest dodanie arkusza stylów do dokumentu HTML.

Jak dodać arkusz stylów do HTML?

Najczęściej spotykanym sposobem jest zapisanie arkusza stylów CSS w osobnym pliku, a następnie wstawienie odniesienia do niego w nagłówku dokumentu HTML. Na przykład jeśli plik arkusza stylów nazywa się "style.css" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, można się posłużyć następującym znacznikiem: <link rel="stylesheet" href="style.css">. Polecenie to należy wstawić w dowolnym miejscu sekcji <head>...</head> dokumentu HTML. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik nagłówka dokumentu. Zatem nie tworzymy nowego, tylko używamy już istniejącego!

Jak zrobić zewnętrzny CSS?

Zewnętrzny arkusz stylów można utworzyć przy pomocy dowolnego edytora CSS albo jeszcze lepiej przy pomocy edytora HTML z wbudowaną obsługą również języka CSS. Arkusz stylów zapisujemy na dysku w pliku z rozszerzeniem *.css, a następnie możemy go dołączyć do dokumentu HTML za pomocą odpowiedniego znacznika w sekcji nagłówkowej strony - np.: <link rel="stylesheet" href="style.css">.

Arkusz stylów

Jak wygląda typowy arkusz CSS?

Arkusz stylów jest zwykłym dokumentem tekstowym, więc do jego stworzenia możesz użyć Twojego ulubionego edytora HTML albo, jeśli wolisz, dedykowanego edytora CSS. W pliku tym wpisuje się listę tzw. reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części:

  1. Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd
  2. Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd
selektor1 {
	Tu wpisuje się deklaracje stylów
}

selektor2 {
	Tu wpisuje się deklaracje stylów
}

selektor3 {
	Tu wpisuje się deklaracje stylów
}

Oczywiście możliwe jest wstawienie więcej niż trzech reguł stylów w jednym arkuszu - każda odpowiada za zmianę wyglądu elementu na stronie opisanego selektorem. O tym jak tworzyć selektory i co można wpisać w deklaracji stylów dowiesz się już w kolejnych punktach tego rozdziału. Zapraszam do dalszej lektury.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu arkuszy stylów na stronach internetowych, zobacz rozdziały: Wewnętrzny arkusz stylów, Zewnętrzny arkusz stylów.

Pytania i odpowiedzi

Jak zrobić style w CSS?

W tym celu można się posłużyć edytorem CSS albo jeszcze lepiej edytorem HTML z wbudowaną obsługą również języka CSS. Utworzone style zapisujemy w dowolnym pliku z rozszerzeniem *.css, który stanowi tzw. arkusz stylów, a następnie dołączamy go do dokumentu HTML [zobacz: Wstawienie arkusza stylów].

Czym są i do czego służą arkusze stylów CSS?

Arkusz stylów CSS jest plikiem tekstowym służącym do ustalania wyglądu strony internetowej. Zawiera on tzw. reguły stylów. Z kolei każda z nich składa się z selektora i deklaracji stylów. Poszczególne deklaracje obejmują listę poleceń, które określają, w jaki sposób chcemy zmienić wygląd elementu na stronie wskazanego przez selektor.

Kolor tła oraz tekstu

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

Aby zmienić wygląd jakiegoś elementu na stronie, trzeba go najpierw wskazać. W języku CSS robi się to za pomocą tzw. selektora. W najprostszym przypadku jest to nazwa wybranego znacznika, który wcześniej wstawiliśmy do naszego dokumentu HTML. Wszystko co znajduje się wewnątrz tak wskazanego znacznika - czyli zarówno tekst, jak i inne znaczniki - otrzyma style podane w deklaracji. Przykładowo, aby zmienić kolor tła oraz teksu na całej stronie, możemy się posłużyć selektorem body, ponieważ właśnie wewnątrz znacznika <body>...</body> znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod:

body {
	background-color: black;
	color: white;
}

Zwróć uwagę, że deklaracja stylów, którą ujmuje się w nawiasy klamrowe, składa się tutaj z dwóch linijek. Każda z nich rozpoczyna się od podania tzw. cechy (inaczej własności), po której następuje wartość. Cecha określa, co chcemy zmienić w wyglądzie wybranego elementu, natomiast wartość - w jaki sposób ma się to zmienić. Zatem gdyby przetłumaczyć powyższą regułę stylów na bardziej zrozumiały język, brzmiałaby ona mniej więcej tak: dla całej zawartości znacznika body (selektor) zmień kolor tła (cecha background-color) na czarny (wartość black) i kolor tekstu (cecha color) na biały (wartość white).

Pamiętaj, aby po wpisaniu cechy (własności) zawsze postawić znak dwukropka, a po każdej wartości - średnik. Zwróć również uwagę, że jeśli cecha (bądź wartość) zawiera znak myślnika (np. background-color), to przed nim ani po nim nie może znajdować się spacja.

Aby ustalić inny kolor tła albo tekstu, wystarczy że w miejsce wartości wstawisz wybraną definicję koloru - zobacz: Wykaz kolorów.

Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.

Pytania i odpowiedzi

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

Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład: body { background-color: black; color: white; } ustawi czarny kolor tła i biały kolor tekstu.

Jak ustawić kolor RGB w CSS?

W języku CSS możemy stosować takie same kolory jak w HTML. Na przykład aby ustawić na całej stronie czarny kolor tła i biały kolor tekstu w notacji heksadecymalnej, wystarczy w arkuszu stylów wstawić następującą regułę stylów: body { background-color: #000000; color: #FFFFFF; }.

Czcionka

W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

Podobnie jak w przypadku koloru tła oraz tekstu dobrze jest również ustalić rozmiar i krój czcionki na całej stronie.

body {
	font-size: rozmiar;
	font-family: rodzaj;
}
gdzie jako "rozmiar" należy wpisać:
xx-small
Czcionka najmniejsza
x-small
Czcionka bardzo mała
small
Czcionka mała
medium
Czcionka średnia
large
Czcionka duża
x-large
Czcionka bardzo duża
xx-large
Czcionka największa
Natomiast zamiast rodzaj należy wpisać krój czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to trzeba ją objąć w znaki apostrofu (np.: 'Times New Roman').

Z definiowaniem kroju czcionki wiąże się pewien problem. Jeśli użytkownik oglądający Twoją stronę nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w systemie Windows najprawdopodobniej będzie to 'Times New Roman', chociaż to też nie jest pewne). Właśnie z tego powodu możliwe jest podanie po przecinku listy rodzajów czcionek, z których zostanie użyta ta, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Dodatkowo na końcu listy można podać specjalną nazwę czcionki, która istnieje w każdym systemie operacyjnym - tzw. rodzinę ogólną. Pozwala ona określić krój czcionki, który wyglądem będzie przynajmniej przypominał efekt, który chcemy uzyskać - np.: sans-serif (podobna do: Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS'), serif (podobna do: 'Times New Roman', Georgia), monospace (podobna do: 'Courier New'). Na przykład:

body {
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
}

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane były: Verdana, Tahoma, 'Trebuchet MS', Georgia - dlatego nawet dzisiaj wciąż są powszechnie dostępne. Przy definiowaniu czcionki dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu czcionek na stronach internetowych, zobacz rozdziały: Czcionki / Wielkość, Czcionki / Rodzaj.

Pytania i odpowiedzi

Jak zwiększyć rozmiar czcionki?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-size: large; } ustawi duży rozmiar tekstu na całej stronie.

Jak zmienić czcionkę w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-family: Arial, Helvetica, sans-serif; } ustawi czcionkę Arial dla tekstu na całej stronie. Stanie się to jednak tylko wtedy, gdy użytkownik odwiedzający stronę będzie miał zainstalowaną taką czcionkę w swoim systemie operacyjnym. W przeciwnym razie automatycznie zostanie użyta czcionka Helvetica, a jeśli i to nie będzie możliwe, tekst zostanie wyświetlony przy pomocy czcionki najbardziej zbliżonej wyglądem.

Marginesy strony

Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

Przeglądarki zwykle ustalają pewną szerokość marginesów strony. Nie zawsze jednak domyślne ustawienia będą dobrze współgrać np. z określonym przez nas rozmiarem czcionki. Na szczęście bardzo łatwo można to zmienić:

body {
	margin: szerokość;
}

albo jeśli chcemy ustawić marginesy niesymetryczne (z każdej strony inne):

body {
	margin-top: górny;
	margin-bottom: dolny;
	margin-left: lewy;
	margin-right: prawy;
}

Aby określić szerokość marginesu w pikselach, należy wpisać liczbę, a po niej jednostkę px. Na przykład:

body {
	margin: 20px;
}

Inaczej niż w zasadach pisowni języka polskiego, w CSS nie można rozdzielać spacją liczby od jednostki.

Pytania i odpowiedzi

Jak ustawić marginesy w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { margin: 20px; } ustawi wszystkie marginesy strony o szerokości i wysokości 20 pikseli.

Jak ustawić margines 2,5 cm?

W języku CSS oprócz pikseli możemy używać również szeregu innych jednostek długości. Na przykład: body { margin: 2.5cm; } ustawi wszystkie marginesy strony o szerokości i wysokości 2,5 centymetra. Należy jednak pamiętać, aby w razie potrzeby w wartościach liczbowych nie używać przecinka tylko kropki dziesiętnej. Ponadto przed nazwą jednostki nie może być spacji. W przeciwnym razie polecenie może nie zadziałać albo jego efekty będą inne niż oczekiwane!

Tapeta

Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

Tapety graficzne umieszczone w tle są chętnie używanym elementem w każdym systemie operacyjnym. Podobne rozwiązanie można zastosować również na stronie internetowej.

Najprostszym rodzajem tapety jest powielany wzorek w postaci kafelków. Przypomina on płytki położone na podłodze czy na ścianach w łazience - zakładając, że wzór na każdej płytce jest identyczny. Niewątpliwą zaletą tego typu tapety jest fakt, że można nią pokryć dowolnie dużą powierzchnię. Jest to o tyle ważne, że nie wiemy z góry, jak dużym ekranem będzie dysponował użytkownik oglądający naszą stronę WWW. Przy tym pojedynczy kafelek ze wzorkiem może mieć małe wymiary, dzięki czemu strona będzie się ładować szybciej.

Kiedy mamy już przygotowaną grafikę pojedynczego kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów:

body {
	background-color: kolor tła;
	background-image: url(ścieżka dostępu do obrazka);
	color: kolor tekstu;
}
W wyróżnionych miejscach należy wpisać odpowiednio:
kolor tła
Definicja koloru który wyświetli się w tle strony w następujących przypadkach:
  • w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub półprzezroczyste (format PNG)
  • przez krótki moment kiedy grafika tapety nie zdąży się jeszcze załadować, a strona będzie już widoczna w oknie przeglądarki
  • jeśli nie uda się załadować grafiki z tapetą - np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka użytkownika nie obsługuje takiego formatu graficznego albo kiedy obrazek byłby uszkodzony bądź został wcześniej usunięty
  • kiedy użytkownik zupełnie wyłączy wyświetlanie grafiki w swojej przeglądarce - ponieważ np. ma bardzo powolne lub drogie połączenie internetowe
ścieżka dostępu do obrazka
Lokalizacja gdzie znajduje się plik graficzny tapety

Inaczej niż w przypadku znacznika <img src="..."> w języku HTML, tutaj ścieżkę dostępu należy konstruować względem lokalizacji pliku z arkuszem stylów, a nie względem adresu dokumentu HTML!

kolor tekstu
Definicja koloru tekstu strony

Tło obrazkowe strony (tapeta) zawsze powinniśmy ustalać jednocześnie z kolorem tła oraz tekstu całej strony.

Ponadto należy zadbać o odpowiedni kontrast pomiędzy tłem a kolorem tekstu, ponieważ w przeciwnym razie treść strony może się stać zupełnie nieczytelna. W praktyce oznacza to, że tapeta nie powinna być zbyt pstrokata ani zbyt jaskrawa, aby nie rozpraszała czytelnika.

Warto zauważyć, że można zaprojektować wzór tapety w taki sposób, żeby granice pomiędzy sąsiednimi kafelkami nie były widoczne, tzn. płynnie przechodziły jeden w drugi na kształt fantazyjnego dywanu lub wzorzystej tkaniny. W tym celu wystarczy zapewnić, aby wszystkie krawędzie wzorku z lewej strony kafelka znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym programie graficznym z różnymi wzorkami - to może być naprawdę dobra zabawa :-)

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe.

Przykład

Poniżej znajdują się przykłady różnych grafik kafelków (aby były lepiej widoczne zostały powiększone i obramowane na czerwono) wraz z odpowiadającymi im tapetami.

Zeszyt w kratkę

Zeszyt w kratkę

To jest przykład tapety w postaci zeszytu w kratkę.

Zeszyt w linie

Zeszyt w linie

To jest przykład tapety w postaci zeszytu w linie.

Ukośna siatka

Ukośna siatka

To jest przykład tapety w postaci ukośnej siatki.

Pytania i odpowiedzi

Jak ustawić obrazek jako tło w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład jeśli plik tła nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co arkusz stylów *.css, a jego kolorystyka jest przeważająco jasna, można się posłużyć następującą regułą stylów: body { background-color: white; background-image: url(obrazek.jpg); color: black; }. Polecenie to ustawi również biały kolor tła i czarny kolor tekstu. Dzięki temu jeśli z jakiegokolwiek powodu obrazek tła by się nie wyświetlił, mamy gwarancję, że strona pozostanie nadal czytelna.

Dlaczego nie wyświetla mi się obrazek w tle?

Jeżeli plik arkusza stylów *.css znajduje się w innym katalogu niż dokument *.html, ścieżkę dostępu do obrazka tła należy konstruować zawsze względem arkusza stylów. Ponadto innymi częstymi powodami niewyświetlania się obrazka mogą być: błędy literowe w nazwie pliku, niepodanie rozszerzenia nazwy pliku (niektóre systemy operacyjne, jak np. Windows, mogą go ukrywać) czy użycie w nazwie pliku polskich znaków diakrytycznych bądź spacji. Zaleca się także nie używać wielkich liter.

Jak rozciągnąć tło obrazkowe na całą stronę CSS?

Wymaga to zastosowania bardziej zaawansowanych własności stylów [zobacz rozdziały: Zaczepienie tła obrazkowego, Pozycja tła obrazkowego, Powtarzanie tła obrazkowego, Rozmiary tła obrazkowego]. W arkuszu stylów można wstawić np. następujący kod: body { background-attachment: fixed; background-color: white; background-image: url(obrazek.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; color: black; }. Tak wstawiona tapeta pozostanie nieruchoma przy przewijaniu strony, a przy tym wypełni całą powierzchnię strony z zachowaniem oryginalnych proporcji zdjęcia. Może być jednak przycięta po bokach albo na górze i na dole, jeśli nie będzie pasować do aktualnych proporcji wymiarów okna przeglądarki.

Wyrównanie tekstu

W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

Tekst na stronie internetowej najlepiej jest wpisywać w akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów:

p {
	text-align: wyrównanie;
}

Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób:

  • left - wyrównanie tekstu do lewego marginesu (domyślnie)
  • right - wyrównanie do prawego marginesu
  • center - do środka (wyśrodkowanie)
  • justify - do obu marginesów jednocześnie (justowanie)

Pytania i odpowiedzi

Jak wyrównać tekst do lewej CSS?

W językach wywodzących się z alfabetu łacińskiego wyrównanie tekstu do lewej strony następuje domyślnie. Zwykle zatem nie ma potrzeby stosowania żadnych dodatkowych poleceń. Wyjątkiem może być sytuacja, gdy na całej stronie ustaliliśmy wcześniej inny sposób wyrównania tekstu - jak np. wyśrodkowanie - ale jednocześnie chcielibyśmy, żeby tylko treść wstawiona w akapitach była jednak ustawiona do lewej strony. W tym celu w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: left; }.

Jak wyśrodkować w CSS?

Jeśli chcemy, aby wszystkie akapity na stronie były ustawione na środku ekranu, to w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: center; }. Możliwe jest również wycentrowanie tylko jednego akapitu. W tym celu trzeba się jednak posłużyć kodem HTML, który wstawimy w kodzie źródłowym dokumentu HTML, a nie w arkuszu stylów CSS: <p style="text-align: center">...</p>.

Kolor odsyłaczy

Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

a {
	color: kolor;
}

a:hover {
	color: podświetlenie;
}
gdzie "kolor" oznacza definicję koloru, jaką mają przyjąć wszystkie odsyłacze na stronie. Natomiast "podświetlenie" określa definicję koloru, jaką przyjmie odsyłacz po wskazaniu go myszką.

Zwróć uwagę, że koloru podświetlenia nie da się podać w inny sposób, niż przy pomocy języka CSS. A jest to bardzo przydatna możliwość. W ten sposób po wskazaniu elementu myszą użytkownik od razu widzi, że jest to element interaktywny, który można kliknąć, aby przejść pod podany adres.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości nadawania wyglądu odsyłaczom na stronach internetowych, zobacz rozdziały: Odsyłacz podstawowy, Odsyłacz odwiedzony, Aktywacja, Wskazanie myszką.

Pytania i odpowiedzi

Jak zmienić kolor odnośnika w CSS?

Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie były koloru czerwonego, to w arkuszu stylów wystarczy wstawić następujący kod: a { color: red; }.

Jak działa hover CSS?

Słowo kluczowe :hover (z dwukropkiem na początku) to tzw. pseudoklasa CSS. Dzięki niej możemy określić, jak ma się zmienić wygląd elementu po wskazaniu go myszką. Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie po naprowadzeniu wskaźnika myszki zmieniały kolor na czerwony, to w arkuszu stylów wystarczy wstawić następujący kod: a:hover { color: red; }.

Klasy selektorów

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający 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 {
	background-color: gray;
	color: silver;
}

Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a nazwą klasy w selektorze nie może być żadnych białych znaków - nawet spacji. W samej nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych. Nazwa klasy nie może również zawierać spacji - zamiast niej możesz użyć np. znaku myślnika.

Co ważne, nawet jeśli ustaliliśmy kolor tła oraz tekstu na całej stronie, menu nawigacyjne nadal może mieć swoje własne kolory. Deklaracje wyglądu przypisane do klasy są ważniejsze niż te przypisane do znacznika.

Możemy nawet określić oddzielny kolor odsyłaczy, które znajdują się w menu. Robi się to poprzedzając w selektorze właściwe znaczniki nazwą klasy. W tym przypadku spacja pomiędzy nazwą klasy a nazwą znacznika odsyłacza jest konieczna.

.menu-nawigacyjne a {
	color: black;
}

.menu-nawigacyjne a:hover {
	color: white;
}

Dzięki temu prostemu wpisowi w arkuszu stylów, za każdym razem kiedy na dowolnej podstronie serwisu umieścimy następujący kod:

<div class="menu-nawigacyjne">
	<a href="...">...</a>
	<a href="...">...</a>
	<a href="...">...</a>
</div>

w przeglądarce internetowej wyświetli się bloczek, w którym każdy odsyłacz będzie miał kolor czarny (black), a po wskazaniu go myszą zmieni się na biały (white).

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości tworzenia klas CSS na stronach internetowych, zobacz rozdziały: Klasy selektorów, Selektor potomka.

Pytania i odpowiedzi

Co to jest selektor klasy?

Selektor klasy pozwala przygotować w arkuszu stylów gotowy do użycia wygląd, a następnie ustawić go wielu elementom na stronie. Jest to bardzo wygodne rozwiązanie, jeśli na stronie internetowej znajdują się stałe albo powtarzające się elementy, które mają się wyświetlać tak samo. Na przykład na każdej podstronie serwisu może się znajdować menu nawigacyjne, które wszędzie ma mieć spójny wygląd.

Co to jest div class?

Jest to fragmentu kodu HTML, który w całości mógłby wyglądać np. tak: <div class="klasa">...</div>. Przypisuje on do znacznika bloku podaną klasę CSS. Dzięki temu element ten wraz z całą jego zawartością przyjmie wygląd, który został określony w arkuszu stylów dla wskazanej klasy CSS.

Ramki z tekstem

Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów:

.nazwa-klasy {
	deklaracje stylów
}

by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie:

<div class="nazwa-klasy">dowolny tekst...</div>
Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!), podczas gdy w kodzie HTML (drugie polecenie powyżej) znak kropki koniecznie trzeba usunąć. Ponadto w nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych, a zamiast spacji można skorzystać np. ze znaku myślnika.

Wygląd ramki w którą zostanie ujęty tekst, można określić za pomocą wielu cech (własności) wchodzących w skład deklaracji stylów.

Przy tworzeniu ramki z tekstem możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własne, dopasowane do Twoich wymagań obramowanie i inne style.

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ę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 10px.

Obramowanie

.nazwa-klasy {
	border-width: grubość;
	border-style: styl;
	border-color: kolor;
}

Aby określić grubość obramowania, należy wpisać liczbę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 1px.

Zamiast "styl" należy wpisać jedną z następujących wartości określających wygląd linii obramowania:

  • solid - linia ciągła
  • dashed - linia przerywana
  • dotted - linia kropkowa

Natomiast "kolor" jest definicją koloru obramowania.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu obramowania na stronach internetowych, zobacz rozdziały: Styl obramowania, Szerokość obramowania, Kolor obramowania.

Zaokrąglone narożniki

.nazwa-klasy {
	border-radius: promień;
}
Aby określić promień zaokrąglenia, należy wpisać liczbę, a od razu po niej (koniecznie bez spacji!) jednostkę - np.: 5px.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu zaokrąglenia obramowania na stronach internetowych, zobacz rozdział: Zaokrąglenie obramowania.

Przykład

Wszystkie powyższe deklaracje można ze sobą dowolnie łączyć. Na przykład jeśli w arkuszu stylów umieścimy następującą definicję klasy:

.ramka {
	background-color: silver;
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: gray;
	border-radius: 5px;
}

a następnie w dowolnym dokumencie HTML wstawimy taki kod:

<div class="ramka">To jest przykład ramki z tekstem...</div>

to na stronie otrzymamy:

To jest przykład ramki z tekstem...

Możemy również zrezygnować z obramowania i zaokrąglonych narożników:

To jest przykład ramki z tekstem...

albo dodać tylko obramowanie z marginesami wewnątrz, ale bez tła:

To jest przykład ramki z tekstem...

Oczywiście na jednej stronie możemy używać jednocześnie kilku różnie wyglądających ramek z tekstem. W tym celu wystarczy w arkuszu stylów zdefiniować każda klasę z inną nazwą.

Pytania i odpowiedzi

Jak zrobić obramowanie tekstu w CSS?

Aby obramować tekst, musimy wykonać dwa kroki. Najpierw w arkuszu stylów CSS wstawiamy następujący kod: .obramowanie { border-style: solid; } - zwracam uwagę, że na początku tego kodu znajduje się znak kropki, a po nim nie może być spacji! Następnie w kodzie HTML wystarczy objąć znacznikiem wybrany tekst: <div class="obramowanie">...</div>. Jeśli na stronie chcemy wstawić więcej takich samych ramek, należy powielić tylko drugie polecenie.

Jak zrobić ramkę w CSS?

Aby ująć tekst w ramkę z tłem np. o czerwonym kolorze, musimy wykonać dwa kroki. Najpierw w arkuszu stylów CSS wstawiamy następujący kod: .ramka { background-color: red; } - zwracam uwagę, że na początku tego kodu znajduje się znak kropki, a po nim nie może być spacji! Następnie w kodzie HTML wystarczy objąć znacznikiem wybrany tekst: <div class="ramka">...</div>. Jeśli na stronie chcemy wstawić więcej takich samych ramek, należy powielić tylko drugie polecenie.

Podsumowanie

To by było na tyle. Poznane tu polecenia powinny pozwolić Ci nie tylko na napisanie prostej strony WWW, ale zarazem określenie jej wyglądu w profesjonalny sposób. W dalszych rozdziałach Kursu CSS poznasz m.in. bardziej zaawansowane techniki tworzenia selektorów oraz rozbudowaną listę własności, dzięki którym zyskasz jeszcze większe możliwości stylizacji elementów Twojego serwisu.
Zapraszam...

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

Co to znaczy CSS?

CSS to skrót od Cascading Style Sheets - czyli Kaskadowe Arkusze Stylów. Jest to język komputerowy służący do ustalania wyglądu stron internetowych. Arkusz stylów CSS jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, układu strony i inne.

Zobacz więcej...

W czym pisać CSS?

Arkusz stylów CSS jest plikiem tekstowym. Można go zatem tworzyć przy użyciu dowolnego prostego edytora tekstu. Jednak dużo lepszym wyborem jest skorzystanie z pomocy specjalnie przygotowanego do tego edytora CSS. Dzięki temu praca nad arkuszem stylów będzie wygodniejsza i szybsza, a rezultaty powinny być pozbawione popularnych błędów - jak np. literówek w nazwach poleceń.

Zobacz więcej...

Jaki edytor do CSS?

Istnieją specjalne edytory przeznaczone tylko do języka CSS. Nie są one jednak zbyt popularne i przez to często dawno przestały być już rozwijane. Najlepszym rozwiązaniem jest użycie edytora HTML, który ma wbudowaną obsługę również języka CSS. Na przykład Brackets to jeden z lepszych edytorów HTML i CSS. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.

Zobacz więcej...

Jak wygląda typowy sposób dołączania arkusza CSS?

Jak dodać styl CSS?

Najbardziej zalecanym sposobem wstawienia stylów CSS jest dodanie arkusza stylów do dokumentu HTML.

Zobacz więcej...

Jak dodać arkusz stylów do HTML?

Najczęściej spotykanym sposobem jest zapisanie arkusza stylów CSS w osobnym pliku, a następnie wstawienie odniesienia do niego w nagłówku dokumentu HTML. Na przykład jeśli plik arkusza stylów nazywa się "style.css" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, można się posłużyć następującym znacznikiem: <link rel="stylesheet" href="style.css">. Polecenie to należy wstawić w dowolnym miejscu sekcji <head>...</head> dokumentu HTML. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden znacznik nagłówka dokumentu. Zatem nie tworzymy nowego, tylko używamy już istniejącego!

Zobacz więcej...

Jak zrobić zewnętrzny CSS?

Zewnętrzny arkusz stylów można utworzyć przy pomocy dowolnego edytora CSS albo jeszcze lepiej przy pomocy edytora HTML z wbudowaną obsługą również języka CSS. Arkusz stylów zapisujemy na dysku w pliku z rozszerzeniem *.css, a następnie możemy go dołączyć do dokumentu HTML za pomocą odpowiedniego znacznika w sekcji nagłówkowej strony - np.: <link rel="stylesheet" href="style.css">.

Zobacz więcej...

Jak wygląda typowy arkusz CSS?

Jak zrobić style w CSS?

W tym celu można się posłużyć edytorem CSS albo jeszcze lepiej edytorem HTML z wbudowaną obsługą również języka CSS. Utworzone style zapisujemy w dowolnym pliku z rozszerzeniem *.css, który stanowi tzw. arkusz stylów, a następnie dołączamy go do dokumentu HTML [zobacz: Wstawienie arkusza stylów].

Zobacz więcej...

Czym są i do czego służą arkusze stylów CSS?

Arkusz stylów CSS jest plikiem tekstowym służącym do ustalania wyglądu strony internetowej. Zawiera on tzw. reguły stylów. Z kolei każda z nich składa się z selektora i deklaracji stylów. Poszczególne deklaracje obejmują listę poleceń, które określają, w jaki sposób chcemy zmienić wygląd elementu na stronie wskazanego przez selektor.

Zobacz więcej...

W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

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

Aby zmienić domyślny kolor tła oraz tekstu na całej stronie, najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład: body { background-color: black; color: white; } ustawi czarny kolor tła i biały kolor tekstu.

Zobacz więcej...

Jak ustawić kolor RGB w CSS?

W języku CSS możemy stosować takie same kolory jak w HTML. Na przykład aby ustawić na całej stronie czarny kolor tła i biały kolor tekstu w notacji heksadecymalnej, wystarczy w arkuszu stylów wstawić następującą regułę stylów: body { background-color: #000000; color: #FFFFFF; }.

Zobacz więcej...

W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

Jak zwiększyć rozmiar czcionki?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-size: large; } ustawi duży rozmiar tekstu na całej stronie.

Zobacz więcej...

Jak zmienić czcionkę w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-family: Arial, Helvetica, sans-serif; } ustawi czcionkę Arial dla tekstu na całej stronie. Stanie się to jednak tylko wtedy, gdy użytkownik odwiedzający stronę będzie miał zainstalowaną taką czcionkę w swoim systemie operacyjnym. W przeciwnym razie automatycznie zostanie użyta czcionka Helvetica, a jeśli i to nie będzie możliwe, tekst zostanie wyświetlony przy pomocy czcionki najbardziej zbliżonej wyglądem.

Zobacz więcej...

Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

Jak ustawić marginesy w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { margin: 20px; } ustawi wszystkie marginesy strony o szerokości i wysokości 20 pikseli.

Zobacz więcej...

Jak ustawić margines 2,5 cm?

W języku CSS oprócz pikseli możemy używać również szeregu innych jednostek długości. Na przykład: body { margin: 2.5cm; } ustawi wszystkie marginesy strony o szerokości i wysokości 2,5 centymetra. Należy jednak pamiętać, aby w razie potrzeby w wartościach liczbowych nie używać przecinka tylko kropki dziesiętnej. Ponadto przed nazwą jednostki nie może być spacji. W przeciwnym razie polecenie może nie zadziałać albo jego efekty będą inne niż oczekiwane!

Zobacz więcej...

Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

Jak ustawić obrazek jako tło w CSS?

W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład jeśli plik tła nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co arkusz stylów *.css, a jego kolorystyka jest przeważająco jasna, można się posłużyć następującą regułą stylów: body { background-color: white; background-image: url(obrazek.jpg); color: black; }. Polecenie to ustawi również biały kolor tła i czarny kolor tekstu. Dzięki temu jeśli z jakiegokolwiek powodu obrazek tła by się nie wyświetlił, mamy gwarancję, że strona pozostanie nadal czytelna.

Zobacz więcej...

Dlaczego nie wyświetla mi się obrazek w tle?

Jeżeli plik arkusza stylów *.css znajduje się w innym katalogu niż dokument *.html, ścieżkę dostępu do obrazka tła należy konstruować zawsze względem arkusza stylów. Ponadto innymi częstymi powodami niewyświetlania się obrazka mogą być: błędy literowe w nazwie pliku, niepodanie rozszerzenia nazwy pliku (niektóre systemy operacyjne, jak np. Windows, mogą go ukrywać) czy użycie w nazwie pliku polskich znaków diakrytycznych bądź spacji. Zaleca się także nie używać wielkich liter.

Zobacz więcej...

Jak rozciągnąć tło obrazkowe na całą stronę CSS?

Wymaga to zastosowania bardziej zaawansowanych własności stylów [zobacz rozdziały: Zaczepienie tła obrazkowego, Pozycja tła obrazkowego, Powtarzanie tła obrazkowego, Rozmiary tła obrazkowego]. W arkuszu stylów można wstawić np. następujący kod: body { background-attachment: fixed; background-color: white; background-image: url(obrazek.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; color: black; }. Tak wstawiona tapeta pozostanie nieruchoma przy przewijaniu strony, a przy tym wypełni całą powierzchnię strony z zachowaniem oryginalnych proporcji zdjęcia. Może być jednak przycięta po bokach albo na górze i na dole, jeśli nie będzie pasować do aktualnych proporcji wymiarów okna przeglądarki.

Zobacz więcej...

W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

Jak wyrównać tekst do lewej CSS?

W językach wywodzących się z alfabetu łacińskiego wyrównanie tekstu do lewej strony następuje domyślnie. Zwykle zatem nie ma potrzeby stosowania żadnych dodatkowych poleceń. Wyjątkiem może być sytuacja, gdy na całej stronie ustaliliśmy wcześniej inny sposób wyrównania tekstu - jak np. wyśrodkowanie - ale jednocześnie chcielibyśmy, żeby tylko treść wstawiona w akapitach była jednak ustawiona do lewej strony. W tym celu w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: left; }.

Zobacz więcej...

Jak wyśrodkować w CSS?

Jeśli chcemy, aby wszystkie akapity na stronie były ustawione na środku ekranu, to w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: center; }. Możliwe jest również wycentrowanie tylko jednego akapitu. W tym celu trzeba się jednak posłużyć kodem HTML, który wstawimy w kodzie źródłowym dokumentu HTML, a nie w arkuszu stylów CSS: <p style="text-align: center">...</p>.

Zobacz więcej...

Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

Jak zmienić kolor odnośnika w CSS?

Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie były koloru czerwonego, to w arkuszu stylów wystarczy wstawić następujący kod: a { color: red; }.

Zobacz więcej...

Jak działa hover CSS?

Słowo kluczowe :hover (z dwukropkiem na początku) to tzw. pseudoklasa CSS. Dzięki niej możemy określić, jak ma się zmienić wygląd elementu po wskazaniu go myszką. Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie po naprowadzeniu wskaźnika myszki zmieniały kolor na czerwony, to w arkuszu stylów wystarczy wstawić następujący kod: a:hover { color: red; }.

Zobacz więcej...

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

Co to jest selektor klasy?

Selektor klasy pozwala przygotować w arkuszu stylów gotowy do użycia wygląd, a następnie ustawić go wielu elementom na stronie. Jest to bardzo wygodne rozwiązanie, jeśli na stronie internetowej znajdują się stałe albo powtarzające się elementy, które mają się wyświetlać tak samo. Na przykład na każdej podstronie serwisu może się znajdować menu nawigacyjne, które wszędzie ma mieć spójny wygląd.

Zobacz więcej...

Co to jest div class?

Jest to fragmentu kodu HTML, który w całości mógłby wyglądać np. tak: <div class="klasa">...</div>. Przypisuje on do znacznika bloku podaną klasę CSS. Dzięki temu element ten wraz z całą jego zawartością przyjmie wygląd, który został określony w arkuszu stylów dla wskazanej klasy CSS.

Zobacz więcej...

Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

Jak zrobić obramowanie tekstu w CSS?

Aby obramować tekst, musimy wykonać dwa kroki. Najpierw w arkuszu stylów CSS wstawiamy następujący kod: .obramowanie { border-style: solid; } - zwracam uwagę, że na początku tego kodu znajduje się znak kropki, a po nim nie może być spacji! Następnie w kodzie HTML wystarczy objąć znacznikiem wybrany tekst: <div class="obramowanie">...</div>. Jeśli na stronie chcemy wstawić więcej takich samych ramek, należy powielić tylko drugie polecenie.

Zobacz więcej...

Jak zrobić ramkę w CSS?

Aby ująć tekst w ramkę z tłem np. o czerwonym kolorze, musimy wykonać dwa kroki. Najpierw w arkuszu stylów CSS wstawiamy następujący kod: .ramka { background-color: red; } - zwracam uwagę, że na początku tego kodu znajduje się znak kropki, a po nim nie może być spacji! Następnie w kodzie HTML wystarczy objąć znacznikiem wybrany tekst: <div class="ramka">...</div>. Jeśli na stronie chcemy wstawić więcej takich samych ramek, należy powielić tylko drugie polecenie.

Zobacz więcej...

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak wygląda typowy arkusz CSS?

selektor1 {
	Tu wpisuje się deklaracje stylów
}

selektor2 {
	Tu wpisuje się deklaracje stylów
}

selektor3 {
	Tu wpisuje się deklaracje stylów
}

Zobacz więcej...

W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

body {
	font-size: rozmiar;
	font-family: rodzaj;
}

Zobacz więcej...

Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

body {
	margin: szerokość;
}
body {
	margin-top: górny;
	margin-bottom: dolny;
	margin-left: lewy;
	margin-right: prawy;
}

Zobacz więcej...

Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

body {
	background-color: kolor tła;
	background-image: url(ścieżka dostępu do obrazka);
	color: kolor tekstu;
}

Zobacz więcej...

W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

p {
	text-align: wyrównanie;
}

Zobacz więcej...

Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

a {
	color: kolor;
}

a:hover {
	color: podświetlenie;
}

Zobacz więcej...

Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

.nazwa-klasy {
	deklaracje stylów
}
.nazwa-klasy {
	background-color: kolor tła;
}
.nazwa-klasy {
	padding: szerokość;
}
.nazwa-klasy {
	padding-top: górny;
	padding-bottom: dolny;
	padding-left: lewy;
	padding-right: prawy;
}
.nazwa-klasy {
	border-width: grubość;
	border-style: styl;
	border-color: kolor;
}
.nazwa-klasy {
	border-radius: promień;
}

Zobacz więcej...

Facebook