styl tekstu - Kurs HTML i CSS
Oprawa graficzna / Zamiennik obrazkowy...Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia menu nawigacyjnego z orientacji pionowej do poziomej ani przeniesienie całej kolumny nawigacyjnej z lewej na prawą...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
...to, czy podlegają dziedziczeniu. Przykład {...: unset} To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały), koloru tła (niebieski) oraz koloru obramowania (czerwony). Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu, tła oraz...
- Czcionki CSS / Wielkość czcionki {font-size}
...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 "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne wartości absolutne: xx-small - najmniejsza x-small - bardzo mała small - mała medium - średnia large - duża x-large - bardzo duża xx-large - największa Ostateczny rzeczywisty rozmiar tekstu, określony przy powmocy...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...do brakującej szerokości bloku obejmującego, wynikającej z mniejszej wartości sumy pozostałych składników równania. Przykład: Po wpisaniu: <div style="width: 600px"> <div style="margin-left: auto; border-left: 5px solid red; padding-left: 10px; width: 400px; padding-right: 10px; border-right: 5px solid red; margin-right: 20px">...</div> </div> powinniśmy otrzymać na ekranie blok, którego lewy margines wynosi: 600 - 5 - 10 - 400 - 10 - 5 - 20 = 150 pikseli UWAGA! W trybie Quirks...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas sporo pracy. Może się jednak zdarzyć, że w naszym arkuszu stylów zmienimy sposób formatowania jakiegoś elementu, ale potem...
- Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>
<head> (...) <style> selektor { cecha: wartość; cecha2: wartość2... } selektor2 { cecha: wartość; cecha2: wartość2... } (...) </style> (...) </head> gdzie w sposób wyróżniony zaznaczono elementy składowe wewnętrznego arkusza stylów. Natomiast w miejsce kropek (...) można wpisać dalsze polecenia. Selektorem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. To właśnie elementom, które znajdują się w kodzie źródłowym, pomiędzy tymi znacznikami...
Komendy HTML 4.01 / TD...colgroup - dla grupy kolumn (COLGROUP, COL) row - dla wiersza, który ją zawiera (TR) rowgroup - dla grupy wierszy (THEAD, TBODY, TFOOT) STYLE="styl" Informacje stylów (CSS) TITLE="tekst" Tekst pomocniczy VALIGN="pozycja" Pionowa pozycja danych w komórkach tabeli: baseline - pierwsza linia tekstu jest ułożona na linii bazowej, wspólnej dla wszystkich komórek w wierszu bottom - na dole komórki middle - na środkowej wysokości top - na górze WIDTH="długość" Szerokość komórki...
- Komendy HTML 4.01 / TH
...colgroup - dla grupy kolumn (COLGROUP, COL) row - dla wiersza, który ją zawiera (TR) rowgroup - dla grupy wierszy (THEAD, TBODY, TFOOT) STYLE="styl" Informacje stylów (CSS) TITLE="tekst" Tekst pomocniczy VALIGN="pozycja" Pionowa pozycja danych w komórkach tabeli: baseline - pierwsza linia tekstu jest ułożona na linii bazowej, wspólnej dla wszystkich komórek w wierszu bottom - na dole komórki middle - na środkowej wysokości top - na górze WIDTH="długość" Szerokość komórki...
- Komendy HTML 4.01 / COL
...bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.) SPAN="liczba" Określa liczbę zgrupowanych kolumn (domyślnie "1") STYLE="styl" Informacje stylów (CSS) TITLE="tekst" Tekst pomocniczy VALIGN="pozycja" Pionowa pozycja danych w komórkach tabeli: baseline - pierwsza linia tekstu jest ułożona na linii bazowej, wspólnej dla wszystkich komórek w wierszu bottom - na dole komórki middle - na środkowej wysokości top - na górze WIDTH="długość" Szerokość wszystkich...
- Komendy HTML 4.01 / COLGROUP
...bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.) SPAN="liczba" Określa liczbę zgrupowanych kolumn (domyślnie "1") STYLE="styl" Informacje stylów (CSS) TITLE="tekst" Tekst pomocniczy VALIGN="pozycja" Pionowa pozycja danych w komórkach tabeli: baseline - pierwsza linia tekstu jest ułożona na linii bazowej, wspólnej dla wszystkich komórek w wierszu bottom - na dole komórki middle - na środkowej wysokości top - na górze WIDTH="długość" Szerokość wszystkich...