styl tekstu - Kurs HTML i CSS
CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}...klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można...
- 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...
- 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ą...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...tekstu Lekcja 3 - Listy i tabele w HTML Lekcja 4 - Multimedia w HTML: video, audio, widżety (iframe) Lekcja 5 - Wprowadzenie do CSS: podstawowe style i struktura arkuszy Lekcja 6 - Klasy CSS, ramki, marginesy, tapety, interakcje Lekcja 7 - Publikacja strony internetowej Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla liceum i technikum z zakresu informatyki oraz materiałach ze strony Kurs HTML i CSS...
- 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...
- 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...
- 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...
- 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...
- Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej
...i rodzaju czcionki, dodanie <hr> - z omówieniem estetyki. 15 min - Uczniowie stosują zmiany do swojej strony (dodają kolory, linie, dopasowują styl). 10 min - Quiz z kursu - uczniowie pracują indywidualnie. 10 min - Omówienie wyników, prezentacja zdobytych certyfikatów dla chętnych (można wydrukować). Zadanie końcowe / projekt Bazując na zestawie ćwiczeń do samodzielnego wykonania, uczniowie tworzą stronę internetową o dowolnym temacie (np. hobby, zwierzak, gra komputerowa)...
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...