weight - Kurs HTML i CSS
Oprawa graficzna / "Duszki" CSS...dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują ujemne wartości położenia tła obrazkowego...
- Menu w CSS / Pionowe menu
...ul li { border-bottom: 1px solid #9ce; } ul a:link, ul a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } ul a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; } Usuwamy domyślne formatowanie listy. Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a krawędziami...
XHTML / Różnice między HTML 4 a XHTML 1.0...<title>Przykład wewnętrznego arkusza CSS</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> To jest tekst, który używa naszego <code>wewnętrznego arkusza stylów</code>. </p> </body> </html> Wyświetlenie dokumentu XHTML jako czystego XML wywoła tak duże błędy w prezentacji strony, że właściwie będzie ona zupełnie nieczytelna: większość elementów błędnie wystylizowanych, a cały tekst...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...3.2 Komórka 4.1 Komórka 4.2 Komórka 5.1 Komórka 5.2 Komórka 6.1 Komórka 6.2 Nieparzyste definicje listy: dl > dd:nth-of-type(odd) { font-weight: bold } Termin 1 Definicja 1 Termin 2 Definicja 2 Termin 3 Definicja 3 Termin 4 Definicja 4 Termin 5 Definicja 5 Termin 6 Definicja 6 Nieparzyste wiersze poczynając od końca: tbody > tr:nth-last-child(odd) { color: white; background-color: gray } Komórka 1.1 Komórka 1.2 Komórka 2.1 Komórka 2.2 Komórka 3.1 Komórka 3.2 Komórka...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...o identyfikatorze id="demo"? Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }. Kiedy CLASS a kiedy ID? Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.
- Selektory pseudoklas CSS / Etykieta :target
...gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez zmian. Przykład :target Po wpisaniu w arkuszu stylów: :target { font-weight: bold } a w dowolnym miejscu strony: <span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span> <p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p> po kliknięciu linku do danej...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...Firefox i Opera). Przejście na tryb zgodności pozwala tabelom dziedziczyć od dowolnego rodzica wartości własności takich jak: color, font-size, font-weight, font-style, font-variant, text-decoration, text-transform, letter-spacing i line-height. Tryb Quirks pozwala określić rozmiary elementów wyświetlanych w linii (inline). W trybie zgodności znak odwróconego ukośnika "\" pozwala usunąć z następnego znaku jego specjalne znaczenie (tzw. "escape character"). W trybie Quirks przeglądarka...
- Komendy CSS 2 / font
WARTOŚĆ [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit OPIS Atrybuty mieszane czcionki INICJALIZACJA zobacz cechy indywidualne ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE tak PROCENTY dla cechy 'font-size' i 'line-height' MEDIA visual
- Dobre praktyki / CSS Zorientowane Obiektowo
...CSS jest w obu przypadkach identyczna: .Information { background-color: white; } div.Warning { color: red; } span.Warning { font-weight: bold; }
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
...tylko elementy określonego typu. Przykład :first-of-type :last-of-type :only-of-type Po wpisaniu w arkuszu stylów: dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */ dl > dt:last-of-type { font-style: italic } /* kursywa */ dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */ a w dowolnym miejscu strony: <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> <dt>Termin 2</dt><dd>Definicja 2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin...