strony - Kurs HTML i CSS
Selektory specjalne CSS / Klasy selektorów <... class>...jakiś element, o specyficznym rodzaju formatowania, wstępuje przynajmniej raz na niektórych stronach Twojego serwisu (może to być np. główny tytuł strony), jest to znak, że dobrze byłoby umieścić w zewnętrznym arkuszu stylów deklarację jego klasy. Dzięki temu, jeśli później zdecydujemy się zmienić jego formatowanie, nie będziemy musieli modyfikować każdej ze stron, a jedynie zewnętrzny arkusz. Już na początkowym etapie projektowania serwisu, dobrze jest dokładnie obmyślić, jakie klasy mogą...
- Tekst CSS / Wyrównanie tekstu {text-align}
...użyj właściwości text-align i ustaw wartość na justify, na przykład <p style="text-align: justify">...</p>. Jak ustawić tekst na środku strony? Aby ustawić tekst na środku strony, możesz zastosować stylowanie CSS do elementu zawierającego tekst, na przykład używając: <p style="text-align: center">...</p>. Jak napisać tekst po prawej stronie w HTML? Aby napisać tekst po prawej stronie w HTML, możesz umieścić tekst w odpowiednim elemencie, na przykład <p> lub <div>, a...
- Tekst CSS / Białe znaki w tekście {white-space}
...jako "sposób" należy podać: normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie) pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany) nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika <br> pre-wrap - (CSS 2.1) pozwala...
- Tło CSS / Tło obrazkowe {background-image}
...dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem. Jeśli kolor tekstu...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony (odpowiednik 90deg) to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie) to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika to left - poziomo z prawej do lewej strony (odpowiednik 270deg) to left top - ukośnie z prawego-dolnego...
- Rozmiary CSS / Przeciąganie {resize}
...zmienić rozmiaru elementu Zdarza się, że treść elementu nie mieści się w ustalonych dla niego wymiarach. Może to spowodować zaburzenie estetyki strony - np. kolumna menu może w takiej sytuacji opaść na dół (pod treść). Można się przed tym zabezpieczyć blokując przepełnienie elementu ("overflow: hidden"). Co jednak, jeśli czytelnik mimo wszystko będzie chciał zobaczyć przyciętą treść? Można mu to umożliwić, poprzez udostępnienie specjalnego uchwytu do przeciągania narożnika elementu...
- Pozycjonowanie CSS / Pozycja absolutna {position: absolute}
...przeglądarki. Polecenie pozycjonowania absolutnego (bezwzględnego) pozwala przesunąć wybrany element w dowolną stronę względem wybranych brzegów strony lub ewentualnie ramki albo "obejmującego bloku" (opis powyżej). Dzięki temu dany element będzie umieszczony tam na "sztywno", bez względu na miejsce, w którym wpisaliśmy polecenie pozycjonowania absolutnego. Jeżeli jako "wartość" wpiszemy liczbę ujemną, element znajdzie się częściowo lub całkowicie poza obrębem strony lub wyjdzie poza...
- Tryb Quirks / Tryb niecałkowitej zgodności ze standardami
Ten rozdział dotyczy starszych przeglądarek i języka HTML 4.01. Jeśli tworzysz strony w HTML 5 na współczesne przeglądarki, nie musisz się tym przejmować. Interpretacja pewnych elementów wyglądu strony w Internet Explorerze 5 w dużym stopniu różniła się od obowiązujących standardów. Inne przeglądarki często się do tego dostosowywały. W Internet Explorerze 6 ta sytuacja uległa zmianie. Jednak, aby nie powodować poważnych błędów wyświetlania na starszych stronach WWW, które poprawnie wyświetlały...
- Układ elastyczny CSS / Flexbox
...będą zawierać artykuły, opublikowane w serwisie. Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań taki sposób był zupełnie wystarczający. Niestety w pewnych szczególnych przypadkach miał podobne ograniczenia jak pozycja absolutna. Bardzo trudno było zrealizować, zdawać by się mogło, tak trywialne sposoby układania elementów, jak wyśrodkowanie w pionie czy ustawienie kilku...
- CSS dla zielonych / Zaczynamy kurs CSS!
...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...