stronie - Kurs HTML i CSS
Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}...wybranych wartości (zarówno w przypadku pierwszego jak i drugiego sposobu) spowoduje, że przyjmą one wartości takie jak narożnik leżący po drugiej stronie przekątnej elementu. Przy tworzeniu zaokrąglenia obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-radius} border-radius: 5px 10px 15px 20px border-radius: 10px 20px / 20px 10px Pytania i odpowiedzi {border-radius} Co to jest "border-radius...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...wykonać obramowanie obrazkowe - przygotowując tylko jedną grafikę, przedstawiającą krawędzie obramowania. Nie będzie również konieczne osadzanie na stronie dodatkowych znaczników. Uzyskamy przy tym efekt samoczynnego dopasowywania się grafiki obramowania do rozmiarów ramki oraz dużo większe możliwości kompozycyjne. Przykład {border-image-source} border-image-source: url(punkt.gif); border-width: 32px Bez określenia dodatkowych własności obramowania graficznego (obcięcie, szerokość, nawis...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza...
HTML5 / Zmienione elementy i atrybuty HTML5...application/octet-stream", "application/xml". W tak oznaczonym elemencie można zapisać surowe dane dla dynamicznych skryptów używanych na stronie. SMALL Reprezentuje przypisy (wyjaśnienia, zastrzeżenia, ograniczenia prawne, prawa autorskie). STRONG Oznacza wysoką ważność, a nie mocne wyróżnienie tekstu. TH Może zawierać również elementy blokowe z wyjątkiem: HEADER, FOOTER, sekcji (ARTICLE, ASIDE, NAV, SECTION), nagłówków (H1, H2, H3, H4, H5, H6). U Nieartykułowany tekst albo...
- HTML5 / Sekcja <section>
...sposób wewnętrznie powiązana ze sobą tematycznie. Natomiast element SECTION tworzy nową sekcję w dokumencie, czyli odrębny tematycznie rozdział na stronie. Stosuj go zawsze, kiedy chcesz przekazać dodatkowe znaczenie semantyczne do objętej nim zawartości. Jak nazwać sekcje w HTML? Aby zatytułować sekcję, należy zaraz na jej początku wstawić dowolny znacznik tytułu nagłówkowego: H1, H2, H3, H4, H5 lub H6. Czy DIV to znacznik sekcji? Nie, element DIV nie jest sekcją. W języku HTML5...
- HTML5 / Szablon strony w HTML5
...objaśnione w rozdziale: Szablon strony na DIV-ach. Tam również znajdziesz praktyczne przykłady sposobów układania poszczególnych sekcji szkieletu na stronie. Objęcie całego szkieletu elementem DIV, jest poprawne, ponieważ w tym miejscu ma on na celu przygotowanie pojemnika, koniecznego do zmiany wyglądu całej strony (przy pomocy CSS). Właśnie do tego został przeznaczony ten element. Zwykle objęcie całej zawartości ciała dokumentu znacznikiem ARTICLE, nie jest najlepszym rozwiązaniem. Został...
- HTML5 / Uwydatnienie <mark>
...być również fragment, który jest dla nas szczególnie wartościowy lub naszym zdaniem zawiera główne przesłanie całego cytatu. Uwydatniając tekst na stronie, który nie jest cytatem, możemy przekazać użytkownikowi, że taki fragment może być dla niego szczególnie przydatny, biorąc pod uwagę czynności, które właśnie podjął. Na przykład jeżeli użytkownik właśnie użył wyszukiwarki w serwisie, w wynikach wyszukiwania możemy uwydatnić słowa, których szukał. Należy wyraźnie odróżnić znaczenie...
- HTML5 / Data i czas <time>
...dzień, a na końcu rok lub na odwrót), a także separatorów poszczególnych członów daty. Aby przekazać wszelkim automatom, że wybrany tekst na stronie jest datą lub/i czasem, wystarczy oznaczyć go za pomocą znacznika TIME. Trzeba jednak pamiętać, że w przypadku prostego oznaczenia <time>...</time> zawartość znacznika musi być zapisana w standardowym formacie, bo inaczej nie będzie mogła być poprawnie zinterpretowana. Natomiast jeżeli chcemy użytkownikom prezentować datę w przyjazny dla...
- HTML5 / Pasek postępu <progress>
...od 0 (zero) do maksimum. maksimum Maksymalna wartość, po osiągnięciu której zadanie uważa się za ukończone (100%). Pozwala wstawić na stronie standardowy pasek postępu, który przedstawia stopień ukończenia jakiegoś zadania. Umożliwia również wskazanie nieokreślonego stopienia postępu - gdy bardziej czasochłonne zadanie jest w trakcie wykonywania, lecz nie wiadomo, kiedy zostanie ukończone. W takim przypadku przeglądarki mogą wyświetlić na ekranie specjalny animowany pasek...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce...