height - Kurs HTML i CSS
HTML5 / Przestarzałe elementy i atrybuty HTML5...char, charoff COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR clear BR compact DL, MENU, OL, UL frame TABLE frameborder TABLE height TD, TH hspace, vspace IMG, OBJECT marginheight, marginwidth IFRAME noshade HR nowrap TD, TH rules TABLE scrolling IFRAME size HR type LI, UL valign COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR width HR, TABLE, TD, TH, COL, COLGROUP, PRE
Selektory pseudoklas CSS / Pusty element :empty...ponieważ ich przeznaczeniem jest oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: document.write(' ' + ' ' + ' '); To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit...
- HTML5 / Responsywny obrazek <picture, source>
...na małym ekranie urządzenia mobilnego. Teoretycznie moglibyśmy sobie z tym poradzić w bardzo prosty sposób za pomocą CSS: img { max-width: 100%; height: auto; } Wstawienie takiej reguły w zewnętrznym lub wewnętrznym arkuszu stylów spowoduje, że żaden obrazek nie będzie szerszy niż dostępne miejsce na stronie. Grafiki mniejsze pozostaną bez zmian, natomiast większe będą przeskalowane w dół. Problem w tym, że nie zawsze jest to dobre rozwiązanie. Pomijając już fakt, że mimo przeskalowania...
- Wstawianie stylów CSS / Kaskadowość stylów
...Zewnętrzny arkusz stylów Import stylów do zewnętrznego arkusza (Atrybuty prezentacyjne 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...
- Media CSS / Wybór medium @media
...stylów, np.: @media print { body { font-size: 10pt } } @media screen { body { font-size: 12pt } } @media screen, print { body { line-height: 1.2 } } Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.
- Jednostki CSS / Długość
...procentowe obszaru wyświetlania. Dzięki nim, nieważne jakie będą fizyczne wymiary ekranu, ustalając wielkość tekstu jako np. "font-size: 5vh; line-height: 100%" zapewnimy, że na ekranie powinno zmieścić się dokładnie 20 linijek tekstu (bez konieczności przewijania). Jednostki bezwzględne Jednostki bezwzględne są użyteczne tylko wtedy, gdy fizyczne własności medium wyjściowego (np. monitor) są znane. Należy ich używać zawsze wtedy, gdy zależy nam, aby wybrany element zajmował zawsze taki...
- Komendy CSS3 / Czcionki CSS
...Atrybuty mieszane czcionki Wartość [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar Inicjalizacja zobacz cechy indywidualne Zastosowanie wszystkie elementy Dziedziczenie tak Procenty zobacz cechy indywidualne Media visual font-family Rodzaj czcionki Wartość [ <family-name> | <generic-family> ] Inicjalizacja zależy od...
Galeria zdjęć HTML / Klasyczna galeria zdjęć...pomniejszone fizycznie, tzn. nie mogą to być oryginalne duże obrazki ze zmniejszonymi rozmiarami wyświetlania za pomocą atrybutów width="..." oraz height="...". Tylko wstawienie naprawdę pomniejszonych obrazków uchroni od niepotrzebnego wczytywania dużych plików. Zmniejszenia wymiarów obrazka można dokonać praktycznie w każdym programie graficznym. Najczęściej ustala się takie same rozmiary dla wszystkich miniatur, ponieważ ułatwia to utrzymanie estetyki strony. Obrazki w galerii zwykle...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...font-size: 12px; border: 0; padding: 0; } #menu0 dd { background-color: #ccc; color: #000; margin: 0; padding: 0; width: 150px; height: 22px; } #menu0 dd.active { font-weight: bold; } #menu0 dt a { background: url("submenu.gif") no-repeat 140px 8px; padding-right: 20px; } #menu0 a:link, #menu0 a:visited { display: block; color: #000; text-decoration: none; padding: 4px 5px; } #menu0 a:hover { color: #fff; background-color: #008; }...