czcionki - Kurs HTML i CSS
CSS dla zielonych / Czcionka CSS {font-size, font-family}Podobnie jak w przypadku koloru tła oraz tekstu dobrze jest również ustalić rozmiar i krój czcionki na całej stronie. body { font-size: rozmiar; font-family: rodzaj; } gdzie jako "rozmiar" należy wpisać: xx-small Czcionka najmniejsza x-small Czcionka bardzo mała small Czcionka mała medium Czcionka średnia large Czcionka duża x-large Czcionka bardzo duża xx-large Czcionka największa Natomiast zamiast rodzaj należy wpisać krój czcionki (np.: Arial, 'Courier New', 'Times New Roman...
- Dobre praktyki / Przykazania webmastera
...(i odwrotnie) Ustal w jednym miejscu globalne style formatowania tekstu Używaj właściwych jednostek do ustawiania rozmiaru tekstu Ustalaj rodzaj czcionki zawsze wspólnie z jej wielkością (i odwrotnie) Ustalanie rodzaju czcionki zawsze kończ podając nazwę rodziny ogólnej Tekst musi być czytelny Nie zmuszaj czytelników do szukania odnośników Rozważ używanie techniki "duszków" CSS (and. CSS sprites) Nie stosuj trybu Quirks na nowo tworzonych stronach Nie powtarzaj kodu (zasada DRY...
- Menu w CSS / Menu z nagłówkami
...rozwinięcie 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...
- Oprawa graficzna / "Duszki" CSS
...Tak jest w przypadku menu pionowego, opisanego wcześniej w rozdziale Menu w CSS. Tutaj wykonamy go przy wykorzystaniu "duszków". <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width...
HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>Wszystkie powyższe parametry (atrybuty i znaczniki: akapit, wielkość czcionki, kolor czcionki, 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...
Aktualizacja / System newsów...należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; }...
- Tekst CSS / Wysokość linii tekstu {line-height}
...między liniami tekstu wewnątrz danego elementu. Może być wyrażona jako wartość liczbową, jednostkę (np. piksele) lub jako współczynnik wielkości czcionki. Kontroluje ona wysokość wirtualnego prostokąta obejmującego pojedynczą linię tekstu, a nie tylko samą wysokość czcionki. Jak zmienić interlinię w CSS? Aby zmienić interlinię w CSS, użyj właściwości line-height i ustaw wartość zgodnie z potrzebami. Przykładowo: <p style="line-height: 1.5>...</p> dla odstępu 1.5 razy większego niż...
- 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 rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...imitujące tradycyjne menu aplikacji: Kurs HTML Dla zielonych Akapit Tekst pogrubiony Tekst pochylony Tekst podkreślony Wielkość czcionki Kolor czcionki Rodzaj czcionki Nagłówek i treść Tytuł strony Deklaracja strony kodowej Opis zawartości strony Wyrazy kluczowe Język strony Tekst Akapit Tytuł Blok Koniec linii Pogrubienie CSS Czcionki Tekst Tło Marginesy Obramowanie Wykazy Rozmiary new Menu('menu8', 'menu8', true, false, 0, 0, -1...
- Komendy HTML 4.01 / BASEFONT
Ustala atrybuty czcionki bazowej (zdeprecjonowane). Atrybuty: CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami COLOR="kolor" Ustala kolor tekstu (zdeprecjonowane) DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej FACE="czcionki" Lista nazw czcionek rozdzielonych przecinkami, która będzie użyta do tekstu (zdeprecjonowane) ID="nazwa" Przypisuje nazwę elementowi (identyfikator), która nie...