Przejdź do treści

bloki - Kurs HTML i CSS

  • CSS
    Wstawianie stylów CSS / Wydzielone bloki <div style>

    ...Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki). Dodatkowo DIV domyślnie jest wyświetlany: XXXXXXXXXXXXXXXXXXXXXXXX w bloku XXXXXXXXXXXXXXXXXXXXXXXX natomiast SPAN: XXXXXXXXXXXXXXXXXXXXXXXXw liniiXXXXXXXXXXXXXXXXXXXXXXXX Generalnie element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych...

  • CSS
    Rozmiary CSS / Szerokość i marginesy automatyczne

    ...jest obliczana bez przełamywania wierszy, chyba że w kodzie znajduje się element <br>. Z powyższego równania wynika w szczególności, że dwa bloki z oblewaniem, bez ustalonej szerokości lub z ustaloną wartością width: auto, mogą się ustawić obok siebie, o ile tekst i inne elementy w nich zawarte będą na tyle krótkie, że zmieszczą się w jednej linii bez potrzeby przełamywania wierszy. Właściwość ta jest często wykorzystywana przy tworzeniu struktury strony w oparciu o CSS, np. do...

  • CSS
    Szablon strony na DIV-ach / Stały szablon

    ...tła, aby był lepiej widoczny na załączonych przykładach. Cała "magia" dzieje się dla bloku treści strony i menu nawigacyjnego. Normalnie wszystkie bloki szablonu były ułożone jeden pod drugim. Aby ułożyć wspomniane kolumny pionowo, użyliśmy własności float: left, wykorzystywanej zwykle przy oblewaniu elementów (np. ilustracji) tekstem. Kilka następujących po sobie bloków z określonym oblewaniem, ustawia się obok siebie - o ile mieszczą się w dostępnej szerokości ich rodzica [zobacz...

  • HTML
    HTML5 / Sekcja <section>

    ...w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p> </section> Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety. Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt...

  • HTML
    HTML5 / Napisy do filmów <track>

    ...tekst: WEBVTT i zostawić po nim jedną linijkę przerwy. Mówi on, że plik został utworzony zgodnie ze standardem WebVTT. Dalej dodawane są już bloki kolejnych napisów. Każdy blok zawiera przedział czasu, w którym ma się wyświetlać na ekranie oraz sam tekst napisu. Kolejne bloki napisów są od siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco: WEBVTT 00:00:01.000 -->...

  • Skrypty
    Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego

    ...identyfikator menu0 w dwóch ostatnich fragmentach kodu: musi być on w obu miejscach identyczny! Dodatkowo w jednym dokumencie nie mogą istnieć dwa bloki menu o takich samych identyfikatorach. Jeśli chcesz osadzić w jednym dokumencie kilka różnych menu tego typu, postępuj następująco: Wstaw w nagłówku pliku jeden raz kod: <script src="menu.js"></script> W wybranych miejscach strony osadź bloki menu używając znaczników listy definicyjnej <dl>...</dl>, przy czym każdemu kolejnemu menu nadaj...

  • HTML
    Tekst HTML / Blok <div>

    ...Polecenie to wydziela większy blok tekstu. W odróżnieniu od akapitu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy zastosować znacznik <p>...</p> albo <br>). Przykład <div> To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To...

  • CSS
    Szablon strony na DIV-ach / Semantyczny szablon strony

    ...strony od bloku stopki. W tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu...

  • CSS
    Szablon strony na DIV-ach / Responsywny szablon

    ...przystosowujące stronę dla najmniejszych urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej przestrzeni okna przeglądarki. Dzięki temu strona powinna być czytelna nawet na najmniejszych ekranach. Pierwszy punkt przeskoku zdefiniowaliśmy na wartości 800px. Jeśli użytkownik dysponuje...

  • HTML
    HTML5 / Zmienione elementy i atrybuty HTML5

    ...DL Lista opisowa (ang. description list). Nie nadaje się teraz do oznaczania dialogów. FIELDSET Nie musi zawierać elementu LEGEND. HR Oddziela bloki tematyczne sekcji artykułu na poziomie akapitów. I Oznacza np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu. LABEL Kliknięcie na etykietę nie musi już oznaczać automatycznego przeniesienia kursora tekstowego do skojarzonego z nią pola formularza, chyba że takie jest standardowe zachowanie systemu operacyjnego...

1 2 »

★★★★★ 5/5 (289)

Facebook