CSS dla zielonych - CSS
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.
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.
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.
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">.
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].
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.
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.
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; }.
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.
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.
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.
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!
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.
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.
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; }.
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>.
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; }.
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; }.
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.
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.
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.
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.