styl tekstu - Kurs HTML i CSS
Wstawianie stylów CSS / Styl lokalny <... style><element style="cecha: wartość; cecha2: wartość2...">...</element> Elementem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. To właśnie elementom znajdującym się pomiędzy tymi znacznikami, nadajemy atrybuty formatowania. Jako "cecha" czy inaczej własność bądź właściwość (ang. "property") należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (np. kolor tekstu - color). Opis wszystkich cech znajdziesz w następnych rozdziałach. Tutaj...
- 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...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby np. jeden z nich rozszerzył się dwa razy bardziej niż inne - przypisujemy mu wartość "flex-grow: 2". Istnieje również możliwość ustalenia, aby tylko jeden element wypełnił całą pozostałą wolną przestrzeń w kontenerze. Wtedy tylko jemu nadajemy styl "flex-grow: 1". Ściśnięcie elastyczne...
- 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...
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)...
- 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...
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...