Tekst z wypełnieniem
gradientem, deseniem, teksturą, kolorami.
wzór t.1.1
wzór t.1.2
wzór t.1.3
wzór t.1.4
Tekst z efektami
z cieniem, wypukły, dłutowany, z odbiciem lustrzanym w pionie.
wzór t.2.1
wzór t.2.2
wzór t.2.3
wzór t.2.4
Tekst na krzywej
rozchylony, kolorowy z rozrzuconymi znakami, w elipsie, w kole.
TEKST rozchylony
wzór t.3.1
TEKST kolorowy z rozrzuconymi znakami
wzór t.3.2
TEKST w elipsie
wzór t.3.3
TEKST w kole
wzór t.3.4
Tekst różny
wydrążony: w fotografii, w szablonie, pionowy, pionowy odwrócony.
TEKST w fotografii
wzór t.4.1
TEKST w szablonie
wzór t.4.2
TEKST pionowy
wzór t.4.3
TEKST odwrócony
wzór t.4.4
Tekst XHTML z CSS
nagłówki, akapity, listy: definicje, numerowane, wypunktowane.
- Tytuły i śródtytuły nazywane nagłówkami w kodzie XHTML umieszczamy w znacznikach od największego; <h1> tytuł główny </h1> do najmniejszego <h6> tytuł drugorzędny </h6>
- Grupy zdań umieszczamy w akapitach; <p> tekst </p> dających regulowany odstęp między akapitami, stosując technikę CSS.
- Pojedyncze zdania lub grupy zdań z których każde powinno zaczynać się w innym wierszu piszemy zawsze w listach np. definicji o znacznikach:
< dl >
< dt > tekst A < /dt >
< dt > tekst B < /dt >
< /dl >
nie zachowujących odstępu. Odstęp uzyskujemy pustym wierszem;
< dt > < /dt > - Zdania numerowane lokujemy w listach numerowanych o znacznikach:
< ol >
< li > 1.tekst < /li >
< li > 2.tekst < /li >
< /ol > - Krótkie słowa, nazwy, tytuły stosowane w menu poziomym lub pionowym piszemy w listach wypunktowanych o znacznikach:
< ul >
< li > tekst A < /li >
< li > tekst B < /li >
< /ul > - Ostateczny styl tekstu tj. wielkość kolor i typ czcionki oraz pożądane odstępy i wcięcia jak też układ menu w poziomie lub pionie, oraz rozkład tekstu w kolumnach na stronie, uzyskujemy stosując technikę CSS.
- Przykłady najprostrzych reguł CSS dla podanych wyżej znaczników XHTML
- Reguła CSS składa się z selektora np. h1 lub p, a także z grupy selektorów p, dt, li oraz bloku deklaracji ujętych w nawiasach { }. Każda deklaracja składa się z właściwości zakończonej dwukropkiem : oraz z wartości zakończonej średnikiem ; . Komentarze umieszczmy w nawiasach /* ... */
- h1 {font-size:40px; color:blue;} /* właściwość to czcionka-rozmiar: a wartość to 40px; , kolor: niebieski; */
- p {font-size:12px; margin:20px 0 0 0;} /* czcionka 12px, margines górny 20px pozostałe marginesy tj. Prawy, Dolny i Lewy =0px */
- p, dt, li {font-size:12px;} /* czcionka 12px, brak określenia koloru oznacza kolor domyślny tj. czarny dla znaków objętych znacznikami p oraz dt i li. Podobnie brak określenia dla h1 oznacza wielkość domyślną. */
Zapraszam do współpracy i wymiany doświadczeń użytkowników PSP w zakresie tworzenia grafiki stron WWW, narazie w dziedzinie teksty. Ostatni wpis wykonano dnia 25.06.2010r.