What is HTML and what is it used for? - Kurs HTML i CSS
Układ elastyczny / WstępW zamierzchłych czasach sieci, gdy style CSS nie były jeszcze tak rozwinięte jak dzisiaj, rozplanowanie elementów na stronie realizowano się przy pomocy tabelek. Nie był to jednak najlepszy sposób, gdyż nie spełniał podstawowych zasad semantyki. Tabele zostały stworzone z myślą o prezentacji zbioru danych o powtarzającym się charakterze. Na szczęście style CSS wprowadziły nowe sposoby układania elementów na stronie, bez potrzeby używania w niewłaściwy sposób znaczników tabeli. Paradoksalnie...
- Menu w CSS / Pionowe menu
Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu HTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Zaczniemy od prostszego przykładu - ułożenia linków w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować...
- Menu w CSS / Menu z nagłówkami
...krótkiego nagłówka, zapisanego wewnątrz <dt>...</dt> - taki kod również jest poprawny semantycznie: <dl> <dt>CSS</dt> <dd><a href="czcionki.html">Czcionki</a></dd> <dd><a href="tekst.html">Tekst</a></dd> <dd><a href="tlo.html">Tło</a></dd> <dd><a href="marginesy.html">Marginesy</a></dd> <dd><a href="obramowanie.html">Obramowanie</a></dd> </dl> Efekt bez stylizacji: CSS Czcionki Tekst Tło Marginesy Obramowanie Oczywiście takie menu może zawierać więcej niż jeden...
- CSS dla zielonych / Edytory CSS
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...
- Układ elastyczny / Kolejność {order}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { order: kolejność } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Natomiast kolejność to liczba całkowita, domyślnie równa zero. Elementy z przypisaną niższą wartością, będą wyświetlane w pierwszej kolejności. Wartości ujemne pozwalają przesunąć dowolny element na miejsce przed pierwszym. Elementy z przypisaną taką samą liczbą, wyświetlą się w kolejności ich występowania w kodzie...
- CSS dla zielonych / Zaczynamy kurs CSS!
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ę...
- Reguły warunkowe / Zapytania właściwości @supports
(CSS3 - interpretuje Firefox, Opera, Chrome) Język CSS ma wbudowany prosty system obsługi starszych wersji przeglądarek, które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...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...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...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...
- CSS dla zielonych / Arkusz stylów 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: Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd Deklaracji ujętej w nawiasy klamrowe, w...