style - Kurs HTML i CSS
Pozycjonowanie CSS / Ustawienie {float, vertical-align}...ujemne) linii bazowej względem wysokości linii Przykład {vertical-align} komórka<br> 1 komórka2 komórka3 komórka<br> 4 komórka5 <td style="vertical-align: bottom"> <img style="vertical-align: text-top"> <img style="vertical-align: middle"> <img style="vertical-align: text-bottom"> <img style="vertical-align: 50%"> <img style="vertical-align: baseline"> <img style="vertical-align: -1em"> Tekstvertical-align: super Tekstvertical-align: sub <span style="vertical-align: top">...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...do bloku "pojemnika". Jeśli zarówno lewy jak i prawy margines jest ustalony jako auto, ich wartości stają się równe. Przykład <div>1</div> <div style="width: 50%; margin-left: 0">2</div> <div style="width: 50%; margin-right: auto">3</div> <div style="width: 50%; margin-left: auto">4</div> <div style="width: 50%; margin-left: auto; margin-right: auto">5</div> Pierwszy blok jest wyświetlany tak samo w trybie zgodności jak i w Quirks - szerokość przyjmuje wartość 100% a marginesy zero...
- Menu w CSS / Poziome menu
...tego, tak jak poprzednio, usuniemy zbędne domyślne formatowanie, które w tym przypadku tylko by przeszkadzało: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { display: inline; white-space: nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich. Zalety...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...które mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border} border-top: thick double green border: medium solid blue Podkreślenie tekstu...
- Dobre praktyki / Przykazania webmastera
...zakładaj, że wszyscy użytkownicy posiadają tak szybkie łącze jak Twoje Sprawdzaj poprawność składni HTML Dobre praktyki CSS Nie używaj atrybutu style="..." Unikaj stosowania deklaracji !important Nie wstawiaj wewnętrznego arkusza stylów, który powtarza się na kilku podstronach Minimalizuj liczbę osobnych plików arkuszy CSS Unikaj importowania arkuszy stylów Wersjonuj pliki *.css i pliki graficzne w nich zawarte Gdzie to tylko możliwe, staraj się skracać zapis w regułach stylów...
Menu drzewiaste / Skrypt menu drzewiastego...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; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened { background-image: url("opened.gif"); background-position...
- Pozycjonowanie CSS / Przyleganie {clear}
...może być w porządku). Aby pozbyć się tych niedogodności wystarczy dla obrazków określić dodatkowo deklarację: clear: right. Przykład {clear} <img style="float: left"> <p style="clear: left">Lewy bok tego akapitu nie przylega do obrazka</p> <img style="float: left"> <p style="clear: right">Prawy bok tego akapitu nie przylega do obrazka</p> <img style="float: left"> <p style="clear: both">Żaden bok tego akapitu nie przylega do obrazka</p> <img style="float: left"> <p style="clear...
- Czcionki CSS / Czcionki osadzone @font-face
...do wybranych elementów na stronie odbywa się już w standardowy sposób, który został opisany w rozdziale. pt. Rodzaj czcionki. <html> <head> <style> @font-face { font-family: comic; src: url(http://adres/plik.ttf); } body { font-family: comic; } </style> </head> <body> Ten tekst jest napisany czcionką osadzoną "comic". <p style="font-family: comic">Ten akapit używa czcionki osadzonej "comic".</p> </body> </html> Warto pamiętać, że jeśli chcemy przypisać tak zdefiniowaną czcionkę do...
- Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}
...od razu zerując go: ol { counter-reset: nazwa_licznika } Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym: ol li { list-style-type: none } Następnie dla kolejnych punktów i podpunktów wykazu wyświetlamy aktualną wartość licznika na początku treści, a następnie zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu: ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika } Oto efekt: Punkt pierwszy (1.)...
XHTML / Różnice między HTML 4 a XHTML 1.0...sąsiadujących białych znaków (w tym także znaki nowej linii) jest zamieniane na jeden. Skrypty osadzone i wewnętrzne arkusze stylów (element style) należy wstawiać w następujący sposób: <script type="text/javascript"> <![CDATA[ ...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)... ]]> </script> Jest to konieczne, jeśli wewnętrzny skrypt lub arkusz stylów zawiera znaki: <, >, &, ponieważ w takim przypadku procesor XML potraktuje je jako znaczniki lub początek encji...