align - Kurs HTML i CSS
Komendy HTML 4.01 / Elementy zdeprecjonowane...Wykaz elementów zdeprecjonowanych Element Zamiennik APPLET OBJECT BASEFONT CSS: color, font-family, font-size CENTER CSS: text-align DIR UL FONT CSS: color, font-family, font-size ISINDEX INPUT MENU UL S CSS: text-decoration STRIKE CSS: text-decoration U CSS: text-decoration Wykaz atrybutów zdeprecjonowanych Atrybut Zastosowanie Zamiennik align APPLET, IFRAME, IMG, INPUT, OBJECT CSS: float, vertical-align align CAPTION...
- Komendy HTML 4.01 / Wykaz atrybutów
...A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA Znak klawisza dostępu action FORM (wymagany) Obsługa formularza po stronie serwera align APPLET, IFRAME, IMG, INPUT, OBJECT Pionowe lub poziome ustawienie align CAPTION Ustawienie nagłówka tabeli align COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR Ustawienie tekstu w grupach komórek w tabeli align DIV, H1, H2, H3, H4, H5, H6, P Ustawienie (wyrównanie) tekstu align HR Ustawienie poziomej linii align...
Komendy CSS3 / Układ elastyczny CSSŹródło: CSS Flexible Box Layout Module Level 1 Spis treści align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order align-content Wyrównanie wierszy Wartość flex-start | flex-end | center | space-between | space-around | stretch Inicjalizacja stretch Zastosowanie kontener elastyczny, którego elementy zostały ułożone w wielu wierszach Dziedziczenie nie Procenty nie align-items Wspólne...
- Komendy CSS3 / Tekst CSS
Źródło: CSS Text Module Level 3 Spis treści hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-all text-align-last text-indent text-justify text-transform white-space word-break word-spacing word-wrap hanging-punctuation Zawieszenie znaków interpunkcyjnych Wartość none | [ first || [ force-end | allow-end ] || last ] Inicjalizacja none Zastosowanie tekst Dziedziczenie tak Procenty nie hyphens Dzielenie Wartość...
Aktualizacja / System newsów...poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...Quirks interpretacja będzie zupełnie inna. Dla uzyskania analogicznego efektu również w trybie Quirks należy wpisać: <div style="width: 600px; text-align: center"> <div style="text-align: left; margin-left: auto; width: 400px; margin-right: auto">...</div> </div> Sposób ten jest przydatny np. do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS. <html> <head>...</head> <body style="text-align: center"> <table style="margin-left: auto...
- Szablon strony na DIV-ach / Responsywny szablon
...TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC { width: 960px; float: left; overflow: hidden; margin-left: 0; } #STOPKA { width: 100%; } } Wyjaśnienie: Na początku powyższego arkusza stylów znajdują się...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...możliwość ustalania pozycji tekstu w pionie formatując nawet zwykły tekst w taki sposób, aby wyglądał jak indeks dolny lub górny: "vertical-align: sub" i "vertical-align: super". Jest jednak pewna wada obu tych metod. Aby indeks dolny czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to nieestetyczny efekt, kiedy sąsiednie linijki tekstu są od siebie bardziej odsunięte, ponieważ w jednej z nich pojawił się...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany uprzednio...
- Menu w CSS / Poziome menu
...none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block...