akapit - Kurs HTML i CSS
Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}...Explorer 11, Firefox 15, Opera 15, Chrome) selektor { border-image: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości obramowani obrazkowego: źródło, obcięcie, szerokość, nawis i powtarzanie. Polecenie pozwala w sposób skrócony wypełnić wszystkie atrybuty obramowania obrazkowego. Ważne jest przy tym zachowanie właściwej kolejności oraz...
- Rozmiary CSS / Szerokość {width}
...jednostek długości). Polecenie nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {width} To jest akapit o szerokości 30% (width: 30%). To jest wykaz o szerokości 5em (width: 5em): Punkt pierwszy Punkt drugi To jest tabela o szerokości 100px (width: 100px) Poniżej widać obrazek o szerokości 200px (width: 200px): Pytania i odpowiedzi {width} Co...
- Rozmiary CSS / Wysokość {height}
...(używając jednostek długości). Polecenie nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {height} To jest akapit o wysokości 5cm (height: 5cm). To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać obrazek o wysokości 40px (height: 40px): Pytania i odpowiedzi {height} Jak...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...czyli np. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny: p { break-inside: avoid-column } Przykład {break-after} To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. break-after: column; Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa...
- Dziedziczenie stylów CSS / Hierarchia elementów
...z osobna. Dziedziczenie zwiększa przejrzystość kodu CSS, ułatwia jego modyfikację oraz zapewnia spójność wizualną całej strony. Przykład To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone). A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki (biały) oraz koloru tła...
- Dziedziczenie stylów CSS / Przywrócenie wartości domyślnej {...: initial}
...stylów do dokumentu - sprawdź, czy w takim przypadku bardziej odpowiednie nie będzie użycie wartości revert. Przykład {...: initial} To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone). A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki oraz koloru tła jako...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
...że po prostu odwołuje ona wartości wcześniej przypisane do elementu bez względu na 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...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...zresetowane wartości przypisane do elementów podrzędnych. Jeśli nie były wprost odziedziczone, to trzeba je resetować osobno. Przykład {all} Ten akapit ma zresetowane wszystkie style do wartości domyślnych, ponieważ została mu przypisana deklaracja "all: initial". A to jest pogrubienie, które znajduje się wewnątrz tego akapitu. Odziedziczyło ono zresetowany rodzaj czcionki. Ale jej waga nie została zmieniona - tekst nadal jest wizualnie wytłuszczony - ponieważ zostało to oddzielne...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...dla własności wagi czcionki. Natomiast użycie w tym przypadku wartości revert przywróci wytłuszczenie tekstu. Przykład {...: revert} 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) oraz koloru tła (niebieski), ale tekst nie będzie wytłuszczony. Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu...
Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej...Pokaz struktury dokumentu HTML w edytorze na stronie. 15 min - Uczniowie przepisują gotowy kod z rozdziału Ramy dokumentu HTML i dodają własne akapity oraz pogrubienia/pochylenia tekstu. 10 min - Wspólne omówienie i poprawki kodu. 5 min - Zadanie domowe: dokończ stronę z własnym tekstem - np. Moje hobby, z użyciem przynajmniej 3 znaczników formatowania tekstu. Lekcja 2 - Wstawianie obrazków i linków Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi dodać obrazek i utworzyć...