font style - Kurs HTML i CSS
Selektory pseudoklas CSS / Łączenie selektorów...i braci. Selektor pseudoelementów może się znajdować tylko za ostatnim selektorem prostym w regule stylu. Przykład a.przyklad_selektory:hover { font-weight: bold } Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką: Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy. Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle...
- Czcionki CSS / Proporcje czcionki {font-size-adjust}
(interpretuje Firefox 3, Opera 113, Chrome 127) selektor { font-size-adjust: proporcje } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "proporcje" należy wpisać konkretną wartość, określającą stosunek wysokości małej litery do wysokości całej czcionki (liczba z przedziału 0...1). Subiektywny odbiór wielkości czcionki - a przez to jej czytelność - zależy bardziej od wysokości...
- Dobre praktyki / Przykazania webmastera
...systemach operacyjnych. A jeśli użytkownik będzie chciał zaznaczyć kawałek takiego "tekstu"? Jeśli już naprawdę musisz użyć niestandardowego fontu, dla krótkich nagłówków możesz skorzystać z techniki zamiennika obrazkowego, a dla obszerniejszych akapitów - z czcionek osadzonych. Stosuj inny tytuł na każdej podstronie Znacznik title powinien najlepiej odzwierciedlać treść zawartą na danej stronie. W związku z tym w każdym dokumencie powinien być inny, chyba że w serwisie masz dwa...
HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>...pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p> otrzymamy: To jest jakiś tekst Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: <u>), a na końcu zamykamy ten znacznik, który...
- Menu w CSS / Poziome menu
...25b #25b #9ce; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 95px; text-align: center; padding: 5px 0; font-weight: bold; background-color: #27c; color: #def; border-top: 10px solid #25b; } ul a:hover { background-color: #28e; color: #fff; border-top: 20px solid #26d; } Efekt wysuwania po wskazaniu myszką został uzyskany poprzez zwiększenie wysokości górnego obramowania linków. Określenie pozycji absolutnej eliminuje przesuwanie się...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...HTML5: Wstępne ładowanie, Priorytet ładowania. Przykład <link "stylesheet"> A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Ciekawostka Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów...
Skórki...z zasadą rozdzielenie struktury i prezentacji dokumentów. To oznacza m.in., że powinno się unikać znaczników i atrybutów formatujących takich jak <font color="...">...</font>, a także stylów inline, czyli atrybutu style="...". Dobrze jest zdefiniować odpowiedni zestaw klas CSS. Trzeba sobie uzmysłowić, że wszystko co będziemy mogli zmienić w nowej skórce, ogranicza się do zewnętrznego arkusza stylów, czyli pliku style.css. Jeżeli formatowanie ważnych elementów serwisu będzie przeniesione...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...dzięki której można dodatkowo wyróżnić aktualną pozycję menu, dodając odpowiednie deklaracje CSS w arkuszu stylów, np.: #menu0 dd.active { font-weight: bold; }
- Menu drzewiaste / Skrypt menu drzewiastego
...ul.tree li.opened { background-image: url("opened.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li a { font-size: 13px; text-decoration: none; cursor: pointer; } ul.tree li a.folder { cursor: pointer; } ul.tree li a.active { font-weight: bold; } ul.tree li a:hover { text-decoration: underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...lang="pl"> <head> <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...