punkt - Kurs HTML i CSS
Komendy HTML 4.01 / Wykaz elementówElement Znacznik otwierający/ zamykający Wyświetlanie Opis A wymag/wymag w linii Kotwica ABBR wymag/wymag w linii Forma skrócona ACRONYM wymag/wymag w linii Akronim ADDRESS wymag/wymag w bloku Informacje o autorze APPLET wymag/wymag w linii Aplet AREA wymag/zabr Obszar w mapie odnośników klienta B wymag/wymag w linii Tekst pogrubiony BASE wymag/zabr Adres bazowy BASEFONT wymag/zabr w linii Czcionka bazowa BDO wymag/wymag...
Menu w CSS / Poziome menu...ona wartość wynikającą z rozmiaru zawartości [zobacz: Szerokość i marginesy automatyczne - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5]. Zalety: Możliwość ustalenia jednakowej szerokości pozycji Dokładne ustalenie marginesu pomiędzy pozycjami listy Wady: Trudności przy ustawieniu odnośników centralnie Konieczność przypisania własności clear następnemu elementowi na stronie Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block...
- Szablon strony na DIV-ach / Stały szablon
...ile mieszczą się w dostępnej szerokości ich rodzica [zobacz: Szerokość i marginesy automatycznie - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5]. Suma szerokość wszystkich kolumn nie może przekroczyć 780px, ponieważ jako najmniejszą dopuszczalną rozdzielczość ekranu założyliśmy 800x600 (od wartości 800 odejmujemy szerokość pionowego suwaka). Oblewane bloki kolumn posiadają również własność przepełnienia overflow: hidden. Jest to zabezpieczenie na wypadek, gdyby w ich...
- Dobre praktyki / CSS Zorientowane Obiektowo
...również na stronę, którą właśnie czytasz 🙂). Zwykle zawiera ona m.in.: nagłówek menu artykuł stopkę Każdy z tych elementów z naszego punktu widzenia jest właśnie obiektem. Obiekt CSS to wizualnie samodzielny element strony. Artykuł potrafi wyświetlić się poprawnie bez nagłówka ani stopki serwisu. Taki sposób przedstawiania elementów strony jest dla człowieka bardziej intuicyjny niż pojmowanie jej jako zbiór wielu DIV-ów, SPAN-ów i innych znaczników. Obiektowość CSS sprowadza...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...w której znajduje się odnośnik do aktualnie wczytanej strony, zostanie na starcie automatycznie rozwinięta. Dzięki temu użytkownik łatwiej odnajdzie punkt w nawigacji, w którym teraz się znajduje. Dodatkowo w takiej sytuacji elementowi <dd>...</dd>, w którym znajduje się bieżący odsyłacz, zostanie przypisana klasa CSS pod nazwą active, dzięki której można dodatkowo wyróżnić aktualną pozycję menu, dodając odpowiednie deklaracje CSS w arkuszu stylów, np.: #menu0 dd.active { font-weight: bold...
- Komendy HTML 4.01 / LI
...angielski, LANG="pl" - polski itd.) STYLE="styl" Informacje stylów (CSS) TITLE="tekst" Tekst pomocniczy VALUE="liczba" Numer aktualnego punktu (zdeprecjonowane) Zdarzenia: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Znacznik otwierający: wymagany Znacznik zamykający: opcjonalny
- Selektory pseudoklas CSS / Korzeń :root
...Co to jest "root" w CSS? W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony. Jaki znacznik jest elementem głównym "root" strony HTML? W HTML elementem głównym, który stanowi korzeń drzewa dokumentu, jest znacznik <html>. To wewnątrz tego znacznika umieszczane są wszystkie inne elementy strony.
- Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}
...content-box - pozycja tła będzie liczona względem krawędzi właściwej zawartości elementu Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła. Możliwe jest również określenie kilku wartości pozycji...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...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, powtarzanie), obrazek jest umieszczany jedynie w narożnikach, zastępując normalne obramowanie niegraficzne.
- Rozmiary CSS / Wysokość i marginesy automatyczne
...wysokości (height) oraz pionowych marginesów elementów (margin-top, margin-bottom), po przypisaniu im wartości auto. Przedstawione poniżej punkty 1-3 obejmują również elementy pozycjonowane relatywnie. 1. Elementy inline, nie-zastępowane Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Własność height nie ma zastosowania (nie można jej przypisać), ale zależy od wysokości linii (line-height). 2. Elementy...