listy - Kurs HTML i CSS
HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>...lub HTML5. Przeglądarki często posiadają wbudowaną funkcję automatycznego uzupełniania formularzy. Najczęściej odbywa się to w formie rozwijanej listy poniżej pól tekstowych, na którą użytkownik może przejść wciskając klawisz kursora w dół i zaakceptować wybór klawiszem Enter. Na liście wyświetlają się podpowiedzi, które użytkownik wcześniej wpisywał do tego pola. Nie zawsze jednak jest to korzystne. Jeżeli użytkownik na publicznie dostępnym komputerze (np. w bibliotece) wypełni formularz...
- HTML5 / Kategorie elementów HTML5
...OBJECT, OUTPUT, SELECT, TEXTAREA elementy wysyłalne (ang. submittable elements) Oznaczają elementy, które mogą być używane do konstruowania listy pól podczas przesyłania formularza. BUTTON, INPUT, SELECT, TEXTAREA elementy resetowalne (ang. resettable elements) Oznaczają elementy, które mogą być zmienione, gdy formularz jest resetowany. INPUT, OUTPUT, SELECT, TEXTAREA elementy dziedziczące kapitalizację i autokorektę (ang. autocapitalize-and-autocorrect inheriting elements)...
Wstawianie stylów CSS / Kaskadowość stylów...HTML - np. align="...", bgcolor="...", color="...", height="...", width="..." i inne) Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane...
- Selektory pseudoklas CSS / Domyślne :default
...Firefox 3, Opera 12- i 38, Chrome 51) selektor:default { cecha: wartość } Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może...
- Czcionki CSS / Rodzaj czcionki {font-family}
...jeśli użytkownik nie będzie posiadał żadnej czcionki, której nazwę wpisaliśmy wprost. Dlatego zwykle rodzinę ogólną podaje się na samym końcu listy nazw czcionek, np.: body { font-family: Arial, Helvetica, Verdana, sans-serif } Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej...
- Tło CSS / Atrybuty mieszane tła {background}
...koloru tła nie ma sensu. Dlatego podanie jednolitego koloru tła jest dozwolone tylko jeden raz - na samym końcu, tzn. dla ostatniego elementu listy atrybutów mieszanych: div { background: url(obrazek1.jpg), url(obrazek2.jpg), url(obrazek3.jpg) red }
- Media CSS / Grupy mediów
Ponieważ zwykle cechy stosują się do kilku mediów jednocześnie, zamiast podawania listy wszystkich, można podać tylko nazwę grupy mediów (CSS 2): continuous Media "ciągłe" - nie podzielone na strony (aural, braille, handheld, screen, tty, tv) paged Podział na strony (embosssed, handheld, print, projection, tv) visual Wizualne (handheld, print, projection, screen, tty, tv) aural Słuchowe (aural, tv) - CSS 2.1 wprowadza zamiast tego grupy speech i audio tactile Dotykowe (braille, embossed)...
Rozwijane menuWykorzystując element <select>...</select> można stworzyć rozwijane menu, które działa w ten sposób, że po wyborze konkretnej opcji z listy, następuje wczytanie określonej strony (podobnie jak w przypadku odsyłaczy). Może to być przydatne np. jeżeli chcemy zaoszczędzić trochę miejsca na stronie (lista rozwijalna zajmuje tylko jedną linijkę). Ale uwaga! Jeśli przeglądarka użytkownika nie będzie obsługiwać skryptów JavaScript, strony z takiego menu będą niedostępne. Dlatego zaleca się umieścić w...
- Menu rozwijane, otwierane, wysuwane / Menu wielopoziomowe
...polega na zbudowaniu najpierw pierwszego, płaskiego poziomu, a następnie wybraniu określonego elementu <dd>...</dd> i umieszczeniu w nim podrzędnej listy <dl>...</dl>, ze swoimi nagłówkami <dt>...</dt> i elementami <dd>...</dd>. Oczywiście ilość poziomów zagnieżdżenia nie jest niczym ograniczona. W celu osadzenia wielopoziomowego menu, należy powtórzyć wszystkie przedstawione wcześniej kroki. Zmianie ulegnie tylko kod HTML tworzący sam blok menu: <dl id="menu0"> <dt>Nagłówek 1</dt> <dd>...
- Menu w CSS / Menu z nagłówkami
...Oczywiście takie menu może zawierać więcej niż jeden nagłówek. Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy: dl, dt, dd { display: block; margin: 0; padding: 0; } W efekcie uzyskamy: CSS Czcionki Tekst Tło Marginesy Obramowanie CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding...