strona tekstu - Kurs HTML i CSS
Tło CSS / Usunięcie tła {background: none, background-color: transparent}...nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej...
- Rozmiary CSS / Blok obejmujący CSS
...sposób: Jeśli przodek jest wyświetlany jako inline-block i kierunek tekstu (direction) jest określony jako ltr (od lewej do prawej) góra i lewa strona bloku obejmującego jest górną i lewą krawędzią zawartości pierwszego pudełka utworzonego przez przodka, natomiast dół i prawa krawędź jest dolną i prawą krawędzią zawartości ostatniego pudełka przodka. W przypadku kierunku tekstu rtl (od prawej do lewej) wszystko jest odwrotnie. W przeciwnym razie obejmujący blok jest tworzony przez...
HTML5 / Sekcja <section>...miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p> </section> Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety. Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt...
Menu drzewiaste / Skrypt menu drzewiastego...CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top...
- HTML5 / Okno dialogowe <dialog closedby open, button "button" command commandfor, form "dialog", button "dialog">
...strony (np. kreator krok po kroku) Przykład <dialog, button "button" commandfor command> <dialog id="dialog2"> <p>Zwróć uwagę, że cała strona pod spodem jest zablokowana.</p> <p>Aby to sprawdzić, spróbuj bez zamykania okna zaznaczyć tekst: "Właściwa treść strony...".</p> <button type="button" commandfor="dialog2" command="close">Zamknij</button> </dialog> <button type="button" commandfor="dialog2" command="show-modal">Otwórz okno modalne</button> <p>Właściwa treść strony...</p>...
- Odsyłacze HTML / Odnośniki hipertekstowe
...Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Przy czym strona taka może wchodzić w skład tego samego serwisu, ale równie dobrze może znajdować się na drugim końcu świata. Przeglądarki internetowe wyświetlają odsyłacze najczęściej w innym kolorze oraz podkreślają je (można to oczywiście zmienić) - w ten sposób są one lepiej widoczne i odróżniają się od zwykłego tekstu. Użytkownika można odsyłać...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami. W przeglądarce Opera każda strona posiada domyślnie ustalone niezerowe marginesy wewnętrzne. Jeżeli chcemy je zlikwidować, należy do selektora BODY przypisać następujący styl: body { padding: 0 } Przykład {padding-top} Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 1cm (padding-top: 1cm) Rzeczywiście w wielu przypadkach, praktycznie nie...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
...trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie. Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał...
- AutoIFRAME / Dlaczego to nie działa?
...jak w skrypcie (domyślnie "autoiframe")? A może identyfikator zawiera nieprawidłowe znaki, jak np. spacje lub polskie litery? Czy na wszystkich podstronach wczytywanych do ramki <iframe>...</iframe> zostało umieszczone w nagłówku odwołanie do pliku skryptu autoiframe.js? Czy odwołanie aby nie zostało wstawione w miejscu innym niż nagłówek dokumentu (<head>...</head>)? Czy w tym samym katalogu co podstrony znajduje się plik autoiframe.js z zawartością skryptu? Czy plik nie został nazwany...
- Czcionki CSS / Rodzaj czcionki {font-family}
...Verdana, sans-serif } Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze staraj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif). Niestety...